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

menu slide/Up Down working, other clean up

Browse Source
This commit is contained in:
Jason White 2015-06-05 12:57:13 -04:00
parent 5e47459962
commit b6ed151e1d
3 changed files with 41 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/main/java/org/owasp/webgoat/session/Screen.java
View File

@ -198,9 +198,9 @@ public abstract class Screen {
// hook all the links
public String getContent() {
String makeAllAjax = "<script>goat.utils.makeFormsAjax();goat.utils.ajaxifyAttackHref();</script>";
//String makeAllAjax = "<script>goat.utils.makeFormsAjax();goat.utils.ajaxifyAttackHref();</script>";
// need to do this here as some of the lessons render forms after submission of an ajax form
return (content == null) ? "" : content.toString() + makeAllAjax;
return (content == null) ? "" : content.toString();// + makeAllAjax;
}
/**

47
src/main/webapp/js/goatApp/view/MenuView.js
View File

@ -6,7 +6,7 @@ define(['jquery',
'goatApp/support/GoatUtils'],
function(
$,
_,t
_,
Backbone,
MenuCollection,
MenuItemView,
@ -17,6 +17,7 @@ define(['jquery',
initialize: function() {
this.collection = new MenuCollection();
this.listenTo(this.collection,'menuData:loaded',this.render);
this.listenTo(this,'menu:click',this.accordionMenu);
},
// rendering top level menu
render: function (model){
@ -27,25 +28,31 @@ define(['jquery',
var menuMarkup = '';
var menuUl = $('<ul>',{class:'nano-content'});
for(var i=0;i<items.length;i++) { //CATEGORY LEVEL
var category = $('<li>',{class:'sub-menu ng-scope'});
var catLink = $('<a>');
var catArrow = $('<i>',{class:'fa fa-angle-right pull-right'});
var catLinkText = $('<span>',{text:items[i].get('name')});
var catId, category, catLink, catArrow, catLinkText;
catId = GoatUtils.makeId(items[i].get('name'));
category = $('<li>',{class:'sub-menu ng-scope'});
catLink = $('<a>',{'category':catId});
catArrow = $('<i>',{class:'fa fa-angle-right pull-right'});
catLinkText = $('<span>',{text:items[i].get('name')});
catLink.append(catArrow);
catLink.append(catLinkText);
//TODO: refactor this along with sub-views/components
var self = this;
catLink.click(_.bind(this.expandCategory,this,catId));
//TODO: bind catLink to accordion and selection method
category.append(catLink);
// lesson level (first children level)
//var lessons = new MenuItemView({items:items[i].get('children')}).render();
var lessons=items[i].get('children');
if (lessons) {
var categoryLessonList = $('<ul>',{class:'slideDown lessonsAndStages'}); //keepOpen
var categoryLessonList = $('<ul>',{class:'slideDown lessonsAndStages',id:catId}); //keepOpen
for (var j=0; j < lessons.length;j++) {
var lessonItem = $('<li>');
var lessonLink = $('<a>',{href:lessons[j].link,text:lessons[j].name,id:GoatUtils.makeId(lessons[j].name)});
lessonItem.append(lessonLink);
//check for lab/stages
categoryLessonList.append(lessonLink);
categoryLessonList.append(lessonItem);
var stages = lessons[j].children;
for (k=0; k < stages.length; k++) {
var stageSpan = $('<span>');
@ -57,10 +64,34 @@ define(['jquery',
category.append(categoryLessonList);
}
menuUl.append(category);
}
this.$el.append(menuUl);
//if we need to keep a menu open
if (this.openMenu) {
this.accordionMenu(this.openMenu);
}
},
expandCategory: function (id) {
if (id) {
this.accordionMenu(id);
}
},
accordionMenu: function(id) {
if (this.openMenu !== id) {
this.$el.find('#' + id).slideDown(300);
} else { //it's open
this.$el.find('#' + id).slideUp(300).attr('isOpen', 0);
return;
}
this.openMenu = id;
this.$el.find('.lessonsAndStages').not('ul#' + id).slideUp(300);
/* //legacy angular code that may be usefl
if ($scope.expandMe) {
$('ul#' + id).slideDown(300).attr('isOpen', 1);
}
*/
}
});
});

189
src/main/webapp/js/goatUtil.js
View File

@ -1,189 +0,0 @@
goat.utils = {
//TODO add recursion to handle arr[i].children objects
// ... in case lower-level's need classes as well ... don't right now
addMenuClasses: function(arr) {
for (var i = 0; i < arr.length; i++) {
var menuItem = arr[i];
//console.log(menuItem);
if (menuItem.type && menuItem.type === 'CATEGORY') {
menuItem.class = 'fa-angle-right pull-right';
}
}
return arr;
},
debugFormSubmission: false,
// pre-submit callback
showRequest: function(formData, jqForm, options) {
if (goat.utils.debugFormSubmission) {
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
}
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
},
// post-submit callback
showResponse: function(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
if (goat.utils.debugFormSubmission) {
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
// update lesson cookies and params
// make any embedded forms ajaxy
goat.utils.showLessonCookiesAndParams();
// forms and links are now hooked with each standard lesson render (see Java class Screen.getContent())
// but these are safe to call twice
goat.utils.makeFormsAjax();
goat.utils.ajaxifyAttackHref(); //TODO find some way to hook scope for current menu. Likely needs larger refactor which is already started/stashed
//refresh menu
angular.element($('#leftside-navigation')).scope().renderMenu();
},
makeFormsAjax: function() {
// make all forms ajax forms
var options = {
target: '#lesson_content', // target element(s) to be updated with server response
beforeSubmit: goat.utils.showRequest, // pre-submit callback, comment out after debugging
success: goat.utils.showResponse // post-submit callback, comment out after debugging
// other available options:
//url: url // override for form's 'action' attribute
//type: type // 'get' or 'post', override for form's 'method' attribute
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
//console.log("Hooking any lesson forms to make them ajax");
$("form").ajaxForm(options);
},
displayButton: function(id, show) {
if ($('#' + id)) {
if (show) {
$('#' + id).show();
} else {
$('#' + id).hide();
}
}
},
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();
goat.utils.scrollToHelp();
},
showLessonSolution: function() {
$('.lessonHelp').hide();
$('#lesson_solution').html(goat.lesson.lessonInfo.solution);
$('#lesson_solution_row').show();
goat.utils.scrollToHelp();
},
showLessonPlan: function(plan) {
$('.lessonHelp').hide();
$("#lesson_plan").html(goat.lesson.lessonInfo.plan);
$('#lesson_plan_row').show();
goat.utils.scrollToHelp();
},
scrollToHelp: function() {
$('#leftside-navigation').height($('#main-content').height() + 15)
var target = $('#lessonHelpsWrapper');
goat.utils.scrollEasy(target);
},
scrollToTop: function() {
$('.lessonHelp').hide();
var target = $('#container');
goat.utils.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)
$('ul li.selected a.selected').removeClass(goatConstants.selectedMenuClass)
$('#' + id).addClass(goatConstants.selectedMenuClass);
$('#' + id).parent().addClass(goatConstants.selectedMenuClass);
},
makeId: function(lessonName) {
return lessonName.replace(/\s|\(|\)|\!|\:|\;|\@|\#|\$|\%|\^|\&|\*/g, '');//TODO move the replace routine into util function
},
ajaxifyAttackHref: function() {
/* Jason I commented this implementation out
* I think we should show the attack link on the lessons that need it by modifying the lesson
* itself or we could add a new button up top for "show lesson link"
$.each($('a[href^="attack?"]'),
function(i,el) {
var url = $(el).attr('href');
$(el).attr('href','#');
$(el).attr('link',url);
//TODO pull currentMenuId
$(el).click(
function() {
var _url = $(el).attr('link');
$.get(_url, {success:showResponse});
}
)
}
);
*/
// alternate implementation
// unbind any bound events so we are safe to be called twice
$('#lesson_content a').unbind('click');
$('#lesson_content a').bind('click', function(event) {
event.preventDefault();
$.get(this.href, {}, function(response) {
$('#lesson_content').html(response);
});
});
}
};
$(window).resize(function() {
//$('#leftside-navigation').css('height',$('div.panel-body').height());
console.log($(window).height());
});