Initial client side pagination

This commit is contained in:
Jason White 2016-08-29 16:13:19 -04:00
parent ac433305a9
commit 9f10fd7c57
2 changed files with 53 additions and 12 deletions

View File

@ -905,6 +905,11 @@ cookie-container {
display: block display: block
} }
/* General View Controls */
.show-next-page:hover {
cursor:pointer;
}
/* HINTS */ /* HINTS */
#lesson-hint-container { #lesson-hint-container {
display: none; display: none;
@ -943,5 +948,5 @@ cookie-container {
/* ATTACK DISPLAY */ /* ATTACK DISPLAY */
#attack-container { #attack-container {
display:none; border:1px solid red;
} }

View File

@ -18,9 +18,9 @@ define(['jquery',
render: function() { render: function() {
this.$el.html(this.model.get('content')); this.$el.html(this.model.get('content'));
this.makeFormsAjax(); this.makeFormsAjax();
this.initPagination();
this.ajaxifyAttackHref(); this.ajaxifyAttackHref();
$(window).scrollTop(0); //work-around til we get the scroll down sorted out $(window).scrollTop(0); //work-around til we get the scroll down sorted out
this.initPagination();
}, },
//TODO: reimplement this in custom fashion maybe? //TODO: reimplement this in custom fashion maybe?
@ -37,12 +37,14 @@ define(['jquery',
}, },
initPagination: function() { initPagination: function() {
//console.log(this.$el.find('.lesson-page-wrapper').length + ' pages of content'); //get basic pagination info
this.currentPage = 0; this.currentPage = 0;
this.$contentPages = this.$el.find('.lesson-page-wrapper'); this.$contentPages = this.$el.find('.lesson-page-wrapper');
if (this.$contentPages.length > 1) { this.numPages = this.$contentPages.length;
this.$contentPages.hide(); //
this.$el.find(this.$contentPages[0]).show(); if (this.numPages > 1) {
this.showCurContentPage();
this.addPaginationControls();
} }
}, },
@ -67,15 +69,49 @@ define(['jquery',
}, },
addPaginationControls: function() { addPaginationControls: function() {
// <div class="panel-body" id="lesson-page-controls"> this.$prevPageButton = $('<span>',{class:'glyphicon-class glyphicon glyphicon-circle-arrow-left show-prev-page'});
// <span class="glyphicon-class glyphicon glyphicon-circle-arrow-left" id="show-prev-hint"></span> this.$prevPageButton.unbind().on('click',this.decrementPageView);
// <span class="glyphicon-class glyphicon glyphicon-circle-arrow-right" id="show-next-hint"></span>
// <br/> this.$nextPageButton = $('<span>',{class:'glyphicon-class glyphicon glyphicon-circle-arrow-right show-next-page'});
// this.$nextPageButton.unbind().on('click',this.incrementPageView.bind(this));
// </div>
var pagingControlsDiv = $('<div>',{class:'panel-body', id:'lessong-page-controls'});
pagingControlsDiv.append(this.$prevPageButton);
pagingControlsDiv.append(this.$nextPageButton);
this.$el.append(pagingControlsDiv);
this.$prevPageButton.hide()
},
incrementPageView: function() {
if (this.currentPage < this.numPages -1) {
this.currentPage++;
this.showCurContentPage();
}
if (this.currentPage >= this.numPages -1) {
//this.hideNextPageButton();
}
},
decrementPageView: function() {
if (this.currentPage > 0) {
this.currentPage--;
this.showCurContentPage();
}
if (this.currentPage == 0) {
//this.hidePrevPageButton();
}
},
showCurContentPage: function() {
this.$contentPages.hide();
this.$el.find(this.$contentPages[this.currentPage]).show();
},
hideNextPageButton: function() {
} }
}); });