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

initial re-enabling of help buttons (source/plan/solution at least). Still need styling work etc.

Browse Source
This commit is contained in:
Jason White
2015-07-26 01:30:24 -04:00
committed by Nanne Baars
parent c31f60f5d9
commit 5590d07419
5 changed files with 81 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/main/webapp/WEB-INF/pages/main_new.jsp
View File

@ -106,10 +106,10 @@
<button type="button" id="restartLessonBtn" class="btn btn-xs" onclick="restartLesson()">Restart Lesson</button> -->
<!-- </div> -->
</div>
<div class="lessonHelp" id="lesson-hint-row">
<div class="lesson-hint" id="lesson-hint-row">
<h4>Hints</h4>
<div class="panel" >
<div class="panel-body" id="lesson_hint">
<div class="panel-body" id="lesson-hint">
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-left" id="showPrevHintBtn" onclick="viewPrevHint()"></span>
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-right" id="showNextHintBtn" onclick="viewNextHint()"></span>
<br/>
@ -159,15 +159,8 @@
</div>
</div><!--col-md-4 end-->
</div>
<div id="lessonHelpsWrapper">
<div class="row lessonHelp" id="lesson-cookies-row">
<div class="col-md-12">
<h4>Lesson Parameters and Cookies</h4>
</div>
</div>
<div class="row lessonHelp" id="lesson-plan-row">
<div id="lesson-helps-wrapper" class="panel">
<div class="row lesson-help" id="lesson-plan-row">
<div class="col-md-12">
<h4>Lesson Plan</h4>
<div class="panel" >
@ -177,21 +170,20 @@
</div>
</div>
</div>
<div class="row lessonHelp" id="lesson_solution_row">
<div class="row lesson-help" id="lesson-solution-row">
<div class="col-md-12">
<h4>Lesson Solution</h4>
<div class="panel">
<div class="panel-body" id="lesson_solution">
<div class="panel-body" id="lesson-solution">
</div>
</div>
</div>
</div>
<div class="row lessonHelp" id="lesson_source_row">
<div class="row lesson-help" id="lesson-source-row">
<div class="col-md-12">
<h4>Lesson Source Code</h4>
<div class="panel">
<div class="panel-body" id="lesson_source">
<!-- <pre>{{source}}</pre> -->
<div class="panel-body" id="lesson-source">
</div>
</div>
</div>

2
src/main/webapp/css/main.css
View File

@ -710,7 +710,7 @@ fieldset[disabled] .btn-warning.active {
margin-top:3px;
}
.lessonHelp, .lessonHelpBtn {
.lesson-help, .lesson-help-button {
display: none;
}

43
src/main/webapp/js/goatApp/controller/LessonController.js
View File

@ -7,7 +7,8 @@ define(['jquery',
'goatApp/view/SourceView',
'goatApp/view/SolutionView',
'goatApp/view/LessonHintView',
'goatApp/view/HelpControlsView'
'goatApp/view/HelpControlsView',
'goatApp/support/GoatUtils'
],
function($,
_,
@ -18,7 +19,8 @@ define(['jquery',
SourceView,
SolutionView,
LessonHintView,
HelpControlsView
HelpControlsView,
GoatUtils
) {
'use strict'
@ -59,7 +61,7 @@ define(['jquery',
//load cookies/parameters view
//load title view (initially hidden) << currently handled via menu click but need to be able to handle via routed request
//load title view (initially hidden) << //TODO: currently handled via menu click but need to be able to handle via routed request
//plan view (initially hidden)
this.planView = new PlanView();
this.listenTo(this.planView,'plan:loaded',this.areHelpsReady);
@ -72,7 +74,6 @@ define(['jquery',
//load help controls view (contextul to what helps are available)
this.lessonHintView = new LessonHintView();
this.listenTo(this.lessonHintView,'hints:loaded',this.areHelpsReady);
};
this.areHelpsReady = function (curHelp) {
@ -87,12 +88,44 @@ define(['jquery',
hasHints:(this.lessonHintView.collection.length > 0),
});
this.helpControlsView.render();
//
this.listenTo(this.helpControlsView,'plan:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'hints:show',this.showHints)
this.listenTo(this.helpControlsView,'source:show',this.hideShowHelps);
this.listenTo(this.helpControlsView,'lesson:restart',this.restartLesson);
}
};
this.addCurHelpState = function (curHelp) {
this.helpsLoaded[curHelp.helpElement] = curHelp.value;
};
};
this.hideShowHelps = function(showHelp) {
var showId = '#lesson-' + showHelp + '-row';
$('.lesson-help').not(showId).hide();
switch(showHelp) {
case 'plan':
$(showId).html(this.planView.model.get('content')).show();
break;
case 'solution':
$(showId).html(this.solutionView.model.get('content')).show();
break;
case 'source':
$(showId).html(this.sourceView.model.get('content')).show();
break;
}
GoatUtils.scrollToHelp()
};;
this.showHints = function() {
console.log('show Hints');
};
this.restartLesson = function() {
console.log('restart lesson');
};
};
return Controller;
});

49
src/main/webapp/js/goatApp/support/GoatUtils.js
View File

@ -95,63 +95,31 @@ define(['jquery',
}
}
},
showLessonCookiesAndParams: function() {
$.get(goatConstants.cookieService, {}, function(reply) {
$("#lesson_cookies").html(reply);
}, "html");
},
showLessonHints: function() {
$('.lessonHelp').hide();
$('#lesson_hint').html();
$('#lesson_hint_row').show();
},
showLessonSource: function(source) {
$('.lessonHelp').hide();
//$('#lesson_source').html("<pre>"+goat.lesson.lessonInfo.source+"</pre>");
$('#lesson_source_row').show();
GoatUtils.scrollToHelp();
},
showLessonSolution: function() {
$('.lessonHelp').hide();
$('#lesson_solution').html(goat.lesson.lessonInfo.solution);
$('#lesson_solution_row').show();
GoatUtils.scrollToHelp();
},
showLessonPlan: function(plan) {
$('.lessonHelp').hide();
$("#lesson_plan").html(goat.lesson.lessonInfo.plan);
$('#lesson_plan_row').show();
GoatUtils.scrollToHelp();
},
scrollToHelp: function() {
$('#leftside-navigation').height($('#main-content').height() + 15)
var target = $('#lessonHelpsWrapper');
GoatUtils.scrollEasy(target);
var target = $('#lesson-helps-wrapper');
this.scrollEasy(target);
},
scrollToTop: function() {
$('.lessonHelp').hide();
var target = $('#container');
GoatUtils.scrollEasy(target);
this.scrollEasy(target);
},
scrollEasy: function(target) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
},
scrapeParams: function(url) {
if (!url) {
return;
}
var params = url.split('?')[1].split('&');
var paramsArr = [];
for (var i = 0; i < params.length; i++) {
var paramObj = {};
paramObj.name = params[i].split('=')[0];
paramObj.value = params[i].split('=')[1];
paramsArr.push(paramObj);
}
return paramsArr;
},
highlightCurrentLessonMenu: function(id) {
//TODO: move selectors in first two lines into goatConstants
$('ul li.selected').removeClass(goatConstants.selectedMenuClass)
@ -159,6 +127,7 @@ define(['jquery',
$('#' + id).addClass(goatConstants.selectedMenuClass);
$('#' + id).parent().addClass(goatConstants.selectedMenuClass);
},
ajaxifyAttackHref: function() { // rewrite any links with hrefs point to relative attack URLs
$.each($('a[href^="attack?"]'),
function(i,el) {

30
src/main/webapp/js/goatApp/view/HelpControlsView.js
View File

@ -6,11 +6,11 @@ function($,_,Backbone) {
el:'#help-controls', //Check this
helpButtons: {
//TODO: move this into a template
showSource:$('<button>',{id:'showSourceBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Java [Source]'}),
showSolution:$('<button>',{id:'showSolutionBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Solution'}),
showPlan:$('<button>',{id:'showPlanBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Lesson Plan]'}),
showHints:$('<button>',{id:'showHintsBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Hints'}),
restartLesson:$('<button>',{id:'restartLessonBtn','class':'btn btn-xs help-button',type:'button',text:'Restart Lesson'})
showSource:$('<button>',{id:'show-source-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Java [Source]'}),
showSolution:$('<button>',{id:'show-solution-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Solution'}),
showPlan:$('<button>',{id:'show-plan-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Lesson Plan]'}),
showHints:$('<button>',{id:'show-hints-button','class':'btn btn-primary btn-xs help-button',type:'button',text:'Hints'}),
restartLesson:$('<button>',{id:'restart-lesson-button','class':'btn btn-xs help-button',type:'button',text:'Restart Lesson'})
},
initialize: function (options) {
if (!options) {
@ -23,19 +23,39 @@ function($,_,Backbone) {
},
render:function(title) {
if (this.hasSource) {
this.helpButtons.showSource.unbind().on('click',_.bind(this.showSource,this));
this.$el.append(this.helpButtons.showSource);
}
if (this.hasSolution) {
this.helpButtons.showSolution.unbind().on('click',_.bind(this.showSolution,this));
this.$el.append(this.helpButtons.showSolution);
}
if (this.hasPlan) {
this.helpButtons.showPlan.unbind().on('click',_.bind(this.showPlan,this));
this.$el.append(this.helpButtons.showPlan);
}
if (this.hasHints) {
this.helpButtons.showHints.unbind().on('click',_.bind(this.showHints,this));
this.$el.append(this.helpButtons.showHints);
}
//
this.$el.append(this.helpButtons.restartLesson);
},
showSource: function() {
this.trigger('source:show','source');
},
showSolution: function() {
this.trigger('solution:show','solution');
},
showPlan: function() {
this.trigger('plan:show','plan');
},
showHints: function() {
this.trigger('hints:show','hints');
}
});
});