From 1fff86fa2da446ffb26fd56fd4722b17e1654b91 Mon Sep 17 00:00:00 2001
From: Jason White <jason.white@owasp.org>
Date: Tue, 30 Aug 2016 12:14:46 -0400
Subject: [PATCH] additional paging work

---
 .../src/main/resources/static/css/main.css    |  4 +++
 .../js/goatApp/view/LessonContentView.js      | 27 +++++++++++++------
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/webgoat-container/src/main/resources/static/css/main.css b/webgoat-container/src/main/resources/static/css/main.css
index 152a00e32..48d3a455a 100644
--- a/webgoat-container/src/main/resources/static/css/main.css
+++ b/webgoat-container/src/main/resources/static/css/main.css
@@ -910,6 +910,10 @@ cookie-container {
     cursor:pointer;
 }
 
+.show-prev-page:hover {
+    cursor:pointer;
+}
+
 /* HINTS */
 #lesson-hint-container {
   display: none;
diff --git a/webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js b/webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js
index 0799a4957..fe3d1b76e 100644
--- a/webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js
+++ b/webgoat-container/src/main/resources/static/js/goatApp/view/LessonContentView.js
@@ -43,7 +43,9 @@ define(['jquery',
             this.numPages = this.$contentPages.length;
             //
             if (this.numPages > 1) {
-                this.showCurContentPage();
+                //no animation on init
+                this.$contentPages.hide();
+                this.$el.find(this.$contentPages[this.currentPage]).show();
                 this.addPaginationControls();
             }
         },
@@ -70,7 +72,7 @@ define(['jquery',
 
         addPaginationControls: function() {
             this.$prevPageButton = $('<span>',{class:'glyphicon-class glyphicon glyphicon-circle-arrow-left show-prev-page'});
-            this.$prevPageButton.unbind().on('click',this.decrementPageView);
+            this.$prevPageButton.unbind().on('click',this.decrementPageView.bind(this));
 
             this.$nextPageButton = $('<span>',{class:'glyphicon-class glyphicon glyphicon-circle-arrow-right show-next-page'});
             this.$nextPageButton.unbind().on('click',this.incrementPageView.bind(this));
@@ -85,26 +87,35 @@ define(['jquery',
         incrementPageView: function() {
             if (this.currentPage < this.numPages -1) {
                this.currentPage++;
-               this.showCurContentPage();
+               this.showCurContentPage(true);
             }
+
             if (this.currentPage >= this.numPages -1) {
-                //this.hideNextPageButton();
+                this.$nextPageButton.hide();
+                this.$prevPageButton.show()
             }
         },
 
         decrementPageView: function() {
             if (this.currentPage > 0) {
                 this.currentPage--;
-                this.showCurContentPage();
+                this.showCurContentPage(false);
             }
+
             if (this.currentPage == 0) {
-                //this.hidePrevPageButton();
+                this.$prevPageButton.hide();
+                this.$nextPageButton.show();
             }
+
         },
 
-        showCurContentPage: function() {
+        showCurContentPage: function(isIncrement) {
             this.$contentPages.hide();
-            this.$el.find(this.$contentPages[this.currentPage]).show();
+            if (isIncrement) {
+                this.$el.find(this.$contentPages[this.currentPage]).slideDown(300);
+            } else {
+                this.$el.find(this.$contentPages[this.currentPage]).slideUp(300);
+            }
         },
 
         hideNextPageButton: function() {