dubey/WebGoat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor of pagination controls

Browse Source
This commit is contained in:
Jason White 2017-04-06 09:52:31 -04:00 committed by Nanne Baars
parent 6a9f7e0b0f
commit e3d281a5f6
7 changed files with 154 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
webgoat-container/src/main/resources/static/css/main.css
View File

@ -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;
}

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

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

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

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

5
webgoat-container/src/main/resources/static/js/goatApp/templates/paging_controls.html Normal file
View File

@ -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>

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

@ -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();
if (this.numPages > 1) {
//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;
this.paginationControlView = new PaginationControlView(this.$contentPages,this.model.get('lessonUrl'));
//this.listenTo(this.paginationControlView,'page:set',this.navToPage);
},
getCurrentPage: function () {
@ -160,82 +148,9 @@ define(['jquery',
this.$curOutput.show(400)
},
/* create, show & hide pagination controls */
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) {
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);

128
webgoat-container/src/main/resources/static/js/goatApp/view/PaginationControlView.js Normal file
View File

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

4
webgoat-container/src/main/resources/templates/main_new.html
View File

@ -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>