refactor of pagination controls

webgoat-container/src/main/resources/static/css/main.css

@@ -958,6 +958,11 @@ cookie-container {
     cursor:pointer;
 }
 
+.page-nav-wrapper {
+    display:inline-block;
+    width: 30px;
+}
+
 span.show-next-page, span.show-prev-page {
 font-size: 1.3em;
 }

webgoat-container/src/main/resources/static/js/goatApp/model/LessonContentModel.js

@@ -20,7 +20,6 @@ define(['jquery',
 
         loadData: function(options) {
             this.urlRoot = _.escape(encodeURIComponent(options.name)) + '.lesson'
-
             var self = this;
             this.fetch().done(function(data) {
                 self.setContent(data);
@@ -32,7 +31,7 @@ define(['jquery',
                 loadHelps = true;
             }
             this.set('content',content);
-            this.set('lessonUrl',document.URL);
+            this.set('lessonUrl',document.URL.replace(/\.lesson.*/,'.lesson'));
             this.trigger('content:loaded',this,loadHelps);
         },
 

webgoat-container/src/main/resources/static/js/goatApp/model/LessonOverviewModel.js

@@ -3,7 +3,7 @@ define([
 	function(
 		Backbone) {
 	return Backbone.Collection.extend({
-	    tagName: 'ul',
+	    //tagName: 'ul',
 		url: 'service/lessonoverview.mvc'
 	});
 });

webgoat-container/src/main/resources/static/js/goatApp/templates/paging_controls.html

@@ -0,0 +1,5 @@
+<div>
+    <div class="page-nav-wrapper"><span class="glyphicon-class glyphicon glyphicon-circle-arrow-left show-prev-page"></span></div>
+    <!-- place page numbers with links to pages here ? -->
+    <div class="page-nav-wrapper"><span class="glyphicon-class glyphicon glyphicon-circle-arrow-right show-next-page"></span></div>
+</div>

webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js

@@ -3,13 +3,15 @@ define(['jquery',
     'underscore',
     'backbone',
     'libs/jquery.form',
-    'goatApp/view/ErrorNotificationView'],
+    'goatApp/view/ErrorNotificationView',
+    'goatApp/view/PaginationControlView'],
     function(
         $,
         _,
         Backbone,
         JQueryForm,
-        ErrorNotificationView) {
+        ErrorNotificationView,
+        PaginationControlView) {
     return Backbone.View.extend({
         el:'#lesson-content-wrapper', //TODO << get this fixed up in DOM
 
@@ -37,7 +39,7 @@ define(['jquery',
           return -1;
         },
 
-        /* initial renering */
+        /* initial rendering */
         render: function() {
             this.$el.find('.lesson-content').html(this.model.get('content'));
             this.$el.find('.attack-feedback').hide();
@@ -53,23 +55,9 @@ define(['jquery',
             this.currentPage = 0;
             this.$contentPages = this.$el.find('.lesson-page-wrapper');
             this.numPages = this.$contentPages.length;
-
             //
-            this.addPaginationControls();
+            this.paginationControlView = new PaginationControlView(this.$contentPages,this.model.get('lessonUrl'));
-            if (this.numPages > 1) {
+            //this.listenTo(this.paginationControlView,'page:set',this.navToPage);
-                //no animation on init
-                this.$contentPages.hide();
-                this.$el.find(this.$contentPages[this.currentPage]).show();
-                this.showNextPageButton();
-                this.hidePrevPageButton();
-            } else if (this.numPages === 1) {
-                this.hideNextPageButton();
-                this.hidePrevPageButton();
-            }
-         },
-
-         setCurrentPage: function (pageNum) {
-            this.currentPage = (_.isNumber(pageNum) && pageNum < this.numPages) ? pageNum : 0;
          },
 
          getCurrentPage: function () {
@@ -160,82 +148,9 @@ define(['jquery',
             this.$curOutput.show(400)
         },
 
-        /* create, show & hide pagination controls */
+        showCurContentPage: function(pageNum) {
-
-        addPaginationControls: function() {
-            var pagingControlsDiv;
-            //this.$el.html();
-            //prev
-            var prevPageButton = $('<span>',{class:'glyphicon-class glyphicon glyphicon-circle-arrow-left show-prev-page'});
-            prevPageButton.unbind().on('click',this.decrementPageView.bind(this));
-            //next
-            var nextPageButton = $('<span>',{class:'glyphicon-class glyphicon glyphicon-circle-arrow-right show-next-page'});
-            nextPageButton.unbind().on('click',this.incrementPageView.bind(this));
-            //add to DOM
-            if (this.$el.find('#lesson-page-controls').length < 1) {
-                pagingControlsDiv = $('<div>',{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) {
             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(pageNum);
-            this.showCurContentPage(this.currentPage);
+            this.paginationControlView.setCurrentPage(pageNum);//provides validation
-            this.hideShowNavButtons();
+            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);

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;
+                }
+
+            },
+        });
+    });

webgoat-container/src/main/resources/templates/main_new.html

@@ -2,7 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
       xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
 <head>
-    <meta http-equiv="Expires" CONTENT="0"/>
+    <meta http-equiv="Expires" CONTENT="-1"/>
     <meta http-equiv="Pragma" CONTENT="no-cache"/>
     <meta http-equiv="Cache-Control" CONTENT="no-cache"/>
     <meta http-equiv="Cache-Control" CONTENT="no-store"/>
@@ -172,7 +172,7 @@
                                         <div class="panel-body" id="lesson-overview"></div>
                                     </div>
                                 </div>
-                                <div class="lesson-page-controls">
+                                <div id="lesson-page-controls">
 
                                 </div>