',{class:'panel-body', id:'lesson-page-controls'});
- pagingControlsDiv.append(prevPageButton);
- pagingControlsDiv.append(nextPageButton);
- this.$el.find('.lesson-page-controls').append(pagingControlsDiv);
- }
-
- },
-
- showPrevPageButton: function() {
- $('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-left.show-prev-page').show();
- },
-
- hidePrevPageButton: function() {
- $('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-left.show-prev-page').hide();
- },
-
- showNextPageButton: function() {
- $('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-right.show-next-page').show();
- },
-
- hideNextPageButton: function() {
- $('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-right.show-next-page').hide();
- },
-
- /* increment, decrement & display handlers */
- incrementPageView: function() {
- if (this.currentPage < this.numPages -1) {
- this.currentPage++;
- window.location.href = this.model.get('lessonUrl') + '/' + this.currentPage;
- //this.showCurContentPage(true);Con
- }
-
- if (this.currentPage > 0) {
- this.showPrevPageButton();
- }
-
- if (this.currentPage >= this.numPages -1) {
- this.hideNextPageButton();
- this.showPrevPageButton;
- }
- },
-
- decrementPageView: function() {
- if (this.currentPage > 0) {
- this.currentPage--;
- window.location.href = this.model.get('lessonUrl') + '/' + this.currentPage;
- //this.showCurContentPage(false);
- }
-
- if (this.currentPage < this.numPages -1) {
- this.showNextPageButton();
- }
-
- if (this.currentPage == 0) {
- this.hidePrevPageButton();
- this.showNextPageButton()
- }
-
- },
-
- showCurContentPage: function(isIncrement) {
+ showCurContentPage: function(pageNum) {
this.$contentPages.hide();
- this.$el.find(this.$contentPages[this.currentPage]).show();
+ this.$el.find(this.$contentPages[pageNum]).show();
},
findAssigmentEndpointOnPage: function(pageNumber) {
@@ -248,42 +163,13 @@ define(['jquery',
},
navToPage: function (pageNum) {
- this.setCurrentPage(pageNum);//provides validation
- this.showCurContentPage(this.currentPage);
- this.hideShowNavButtons();
+ this.showCurContentPage(pageNum);
+ this.paginationControlView.setCurrentPage(pageNum);//provides validation
+ this.paginationControlView.hideShowNavButtons();
var assignmentPath = this.findAssigmentEndpointOnPage(pageNum);
Backbone.trigger('navigatedToPage',{'pageNumber':pageNum, 'assignmentPath' : assignmentPath});
},
- hideShowNavButtons: function () {
- //one page only
- if (this.numPages === 1) {
- this.hidePrevPageButton();
- this.hideNextPageButton();
- }
- //first page
- if (this.currentPage === 0) {
- this.hidePrevPageButton();
- if (this.numPages > 1) {
- this.showNextPageButton();
- }
- return;
- }
- // > first page, but not last
- if (this.currentPage > 0 && this.currentPage < this.numPages -1) {
- this.showNextPageButton();
- this.showPrevPageButton();
- return;
- }
- // last page and more than one page
- if (this.currentPage === this.numPages -1 && this.numPages > 1) {
- this.hideNextPageButton();
- this.showPrevPageButton();
- return;
- }
-
- },
-
/* for testing */
showTestParam: function (param) {
this.$el.find('.lesson-content').html('test:' + param);
diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js
new file mode 100644
index 000000000..a6faddb6c
--- /dev/null
+++ b/webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js
@@ -0,0 +1,128 @@
+define(['jquery',
+ 'underscore',
+ 'backbone',
+ 'text!templates/paging_controls.html'],
+// 'css!css/paging-controls.css'],
+ function ($,
+ _,
+ Backbone,
+ PaginationTemplate) {
+ return Backbone.View.extend({
+ template: PaginationTemplate,
+ el: '#lesson-page-controls',
+
+ initialize: function ($contentPages,baseLessonUrl) {
+ this.numPages = $contentPages.length;
+ this.baseUrl = baseLessonUrl;
+ this.parseLinks($contentPages);
+ this.initPagination();
+ this.render();
+ this.bindNavButtons();
+ },
+
+ render: function () {
+ var t = _.template(this.template);
+ this.$el.html(t());
+ this.hideShowNavButtons();
+ },
+
+ bindNavButtons: function() {
+ this.$el.find('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-right.show-next-page').unbind().on('click',this.incrementPageView.bind(this));
+ this.$el.find('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-left.show-prev-page').unbind().on('click', this.decrementPageView.bind(this));
+ },
+
+ parseLinks: function($contentPages) {
+
+ },
+
+ showPrevPageButton: function() {
+ $('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-left.show-prev-page').show();
+ },
+
+ hidePrevPageButton: function() {
+ $('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-left.show-prev-page').hide();
+ },
+
+ showNextPageButton: function() {
+ $('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-right.show-next-page').show();
+ },
+
+ hideNextPageButton: function() {
+ $('span.glyphicon-class.glyphicon.glyphicon-circle-arrow-right.show-next-page').hide();
+ },
+
+ initPagination: function() {
+ //track pagination state in this view ... start at 0
+ this.currentPage = 0;
+ },
+
+ setCurrentPage: function (pageNum) {
+ this.currentPage = (_.isNumber(pageNum) && pageNum < this.numPages) ? pageNum : 0;
+ },
+
+ /* increment, decrement & display handlers */
+ incrementPageView: function() {
+ if (this.currentPage < this.numPages -1) {
+ this.currentPage++;
+ window.location.href = this.baseUrl + '/' + this.currentPage;
+ }
+
+ if (this.currentPage > 0) {
+ this.showPrevPageButton();
+ }
+
+ if (this.currentPage >= this.numPages -1) {
+ this.hideNextPageButton();
+ this.showPrevPageButton;
+ }
+ this.trigger('page:set',this,this.currentPage);
+ },
+
+ decrementPageView: function() {
+ if (this.currentPage > 0) {
+ this.currentPage--;
+ window.location.href = this.baseUrl + '/' + this.currentPage;
+ }
+
+ if (this.currentPage < this.numPages -1) {
+ this.showNextPageButton();
+ }
+
+ if (this.currentPage == 0) {
+ this.hidePrevPageButton();
+ this.showNextPageButton()
+ }
+ this.trigger('page:set',this,this.currentPage);
+
+ },
+
+ hideShowNavButtons: function () {
+ //one page only
+ if (this.numPages === 1) {
+ this.hidePrevPageButton();
+ this.hideNextPageButton();
+ }
+ //first page
+ if (this.currentPage === 0) {
+ this.hidePrevPageButton();
+ if (this.numPages > 1) {
+ this.showNextPageButton();
+ }
+ return;
+ }
+ // > first page, but not last
+ if (this.currentPage > 0 && this.currentPage < this.numPages -1) {
+ this.showNextPageButton();
+ this.showPrevPageButton();
+ return;
+ }
+ // last page and more than one page
+ if (this.currentPage === this.numPages -1 && this.numPages > 1) {
+ this.hideNextPageButton();
+ this.showPrevPageButton();
+ return;
+ }
+
+ },
+ });
+ });
\ No newline at end of file
diff --git a/webgoat-container/src/main/resources/templates/main_new.html b/webgoat-container/src/main/resources/templates/main_new.html
index 925781ffa..d45a737c1 100644
--- a/webgoat-container/src/main/resources/templates/main_new.html
+++ b/webgoat-container/src/main/resources/templates/main_new.html
@@ -2,7 +2,7 @@
-
+
@@ -172,7 +172,7 @@