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

initial mod for menu resizing, some more angularization/splitting of the controllers

Browse Source
This commit is contained in:
Jason White 2014-09-15 14:29:39 -04:00
parent b375cc091f
commit c1b1d34e09
5 changed files with 163 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,7 +62,7 @@
</head> </head>
<body class="animated fadeIn" ng-app="goatApp"> <body class="animated fadeIn" ng-app="goatApp">
<section id="container" ng-controller="goatLesson"> <section id="container">
<header id="header"> <header id="header">
<!--logo start--> <!--logo start-->
<div class="brand"> <div class="brand">
@ -75,7 +75,7 @@
</button> </button>
</div><!--toggle navigation end--> </div><!--toggle navigation end-->
<div class="lessonTitle" > <div class="lessonTitle" >
<h1 id="lessonTitle">Lesson Title in here</h1> <h1 id="lessonTitle"></h1>
</div><!--lesson title end--> </div><!--lesson title end-->
<div class="user-nav pull-right" style="margin-right: 75px;"> <div class="user-nav pull-right" style="margin-right: 75px;">
<div class="dropdown" style="display:inline"> <div class="dropdown" style="display:inline">
@ -108,11 +108,11 @@
<!--sidebar left start--> <!--sidebar left start-->
<aside class="sidebar" > <aside class="sidebar" >
<div id="leftside-navigation" class="nano"> <div id="leftside-navigation" ng-controller="goatMenu" class="nano">
<ul class="nano-content"> <ul class="nano-content">
<li class="sub-menu" ng-repeat="item in menuTopics"> <li class="sub-menu" ng-repeat="item in menuTopics">
<a ng-click="expanded = !expanded" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a> <a ng-click="accordionMenu(item.id)" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a><!-- expanded = !expanded-->
<ul class="slideDown" ng-show="expanded"> <ul class="slideDown lessonsAndStages" id="{{item.id}}" isOpen=0>
<li ng-repeat="lesson in item.children"> <li ng-repeat="lesson in item.children">
<a ng-click="renderLesson(lesson.link)" title="link to {{lesson.name}}" href="">{{lesson.name}}</a> <a ng-click="renderLesson(lesson.link)" title="link to {{lesson.name}}" href="">{{lesson.name}}</a>
<span ng-repeat="stage in lesson.children" > <span ng-repeat="stage in lesson.children" >
@ -122,15 +122,13 @@
</ul> </ul>
</li> </li>
</ul> </ul>
</div> </div>
</aside> </aside>
<!--sidebar left end--> <!--sidebar left end-->
<!--main content start--> <!--main content start-->
<section class="main-content-wrapper"> <section class="main-content-wrapper">
<section id="main-content" ng-controller="goatLesson">
<section id="main-content" > <!-- ng-controller="lessonController" -->
<div class="row"> <div class="row">
<div class="col-md-8"> <div class="col-md-8">
<div class="col-md-12" align="left"> <div class="col-md-12" align="left">
@ -293,10 +291,10 @@
var DEBUG_FORM_SUBMISSION = false; var DEBUG_FORM_SUBMISSION = false;
$(document).ready(function() { $(document).ready(function() {
//TODO merge appliction.js code into other js files
app.init(); app.init();
//can be augmented later to 'resume' for a given user ... currently kluged to start at fixed lesson
var url = 'attack?Screen=32&menu=5';
angular.element($('#leftside-navigation')).scope().renderLesson(url);
}); });
// make all forms ajax forms // make all forms ajax forms
var options = { var options = {

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

@ -807,6 +807,12 @@ fieldset[disabled] .btn-warning.active {
display: none; display: none;
background-color: #eee; background-color: #eee;
} }
#showPrevHintBtn, #showNextHintBtn {
cursor: pointer;
}
.info { .info {
color:#e84c3d; color:#e84c3d;
font-weight: bold; font-weight: bold;

108
src/main/webapp/js/goatControllers.js
View File

@ -6,13 +6,22 @@
/** Lesson Controller (includes menu stuff) /** Lesson Controller (includes menu stuff)
* prepares and updates menu topic items for the view * prepares and updates menu topic items for the view
*/ */
goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$templateCache //<<<<<<< Updated upstream
//goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$templateCache
//=======
var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
$scope.cookies = []; $scope.cookies = [];
$scope.params = []; $scope.params = [];
//TODO: implement via separate promise and use config for menu (goat.data.loadMenuData()) $scope.renderMenu = function() {
$http({method: 'GET', url: goatConstants.lessonService}).then( goat.data.loadMenu($http).then( //$http({method: 'GET', url: goatConstants.lessonService})
function(menuData) { function(menuData) {
var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data)); var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
for (var i=0;i<menuItems.length;i++) {
if (menuItems[i].name) {
menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');
}
}
$scope.menuTopics = menuItems; $scope.menuTopics = menuItems;
}, },
function(error) { function(error) {
@ -20,26 +29,66 @@ goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$t
console.error("Error rendering menu: " + error); console.error("Error rendering menu: " + error);
} }
); );
};
$scope.renderLesson = function(url) { $scope.renderLesson = function(url) {
//console.log(url + ' was passed in'); //console.log(url + ' was passed in');
// use jquery to render lesson content to div // use jquery to render lesson content to div
$scope.hintIndex = 0; $scope.hintIndex = 0;
var curScope = $scope; var curScope = $scope;
curScope.parameters = goat.utils.scrapeParams(url); curScope.parameters = goat.utils.scrapeParams(url);
goat.data.loadLessonContent(url).then( goat.data.loadLessonContent($http,url).then(
function(reply) { function(reply) {
$("#lesson_content").html(reply); goat.data.loadLessonTitle($http).then(
goat.data.loadLessonTitle().then(
function(reply) { function(reply) {
$("#lessonTitle").text(reply); $("#lessonTitle").text(reply.data);
} }
); );
$("#lesson_content").html(reply.data);
$('#leftside-navigation').height($('#main-content').height()+15)
}
)};
$scope.accordionMenu = function(id) {
if ($('ul#'+id).attr('isOpen') == 0) {
$scope.expandMe = true;
} else {
$('ul#'+id).slideUp(300).attr('isOpen',0);
return;
}
$('.lessonsAndStages').not('ul#'+id).slideUp(300).attr('isOpen',0);
if ($scope.expandMe) {
$('ul#'+id).slideDown(300).attr('isOpen',1);
}
console.log('accordion for ' + id);
}
$scope.renderMenu();
//can be augmented later to 'resume' for a given user ... currently kluged to start at fixed lesson
var url = 'attack?Screen=32&menu=5';
angular.element($('#leftside-navigation')).scope().renderLesson(url);
}
/*goatMenu.animation('.slideDown', function() {
var NgHideClassName = 'ng-hide';
return {
beforeAddClass: function(element, className, done) {
if (className === NgHideClassName) {
$(element).slideUp(done);
}
},
removeClass: function(element, className, done) {
if (className === NgHideClassName) {
$(element).hide().slideDown(done);
}
}
};
});*/
var goatLesson = function($scope,$http,$log) {
//hook forms //hook forms
goat.utils.makeFormsAjax();
$('#hintsView').hide(); $('#hintsView').hide();
// adjust menu to lessonContent size if necssary // adjust menu to lessonContent size if necssary
//@TODO: this is still clunky ... needs some TLC //@TODO: this is still clunky ... needs some TLC
@ -47,16 +96,17 @@ goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$t
$('#leftside-navigation').height($(window).height()); $('#leftside-navigation').height($(window).height());
} }
//cookies //cookies
goat.data.loadCookies().then( goat.data.loadCookies($http).then(
function(resp) { function(resp) {
curScope.cookies = resp; curScope.cookies = resp.data;
} }
); );
//hints //hints
curScope = $scope; //TODO .. update below, this curScope is probably not needed
curScope.hintIndex = 0; curScope.hintIndex = 0;
goat.data.loadHints().then( goat.data.loadHints($http).then(
function(resp) { function(resp) {
curScope.hints = resp; curScope.hints = resp.data;
if (curScope.hints.length > 0 && curScope.hints[0].hint.indexOf(goatConstants.noHints) === -1) { if (curScope.hints.length > 0 && curScope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
goat.utils.displayButton('showHintsBtn', true); goat.utils.displayButton('showHintsBtn', true);
} else { } else {
@ -65,27 +115,25 @@ goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$t
} }
); );
//source //source
goat.data.loadSource().then( goat.data.loadSource($http).then(
function(resp) { function(resp) {
curScope.source = resp; curScope.source = resp.data;
} }
); );
//plan //plan
goat.data.loadPlan().then( goat.data.loadPlan($http).then(
function(resp) { function(resp) {
curScope.plan = resp; curScope.plan = resp.data;
} }
); );
//solution //solution
goat.data.loadSolution().then( goat.data.loadSolution($http).then(
function(resp) { function(resp) {
curScope.solution = resp; curScope.solution = resp.data;
} }
); );
goat.utils.scrollToTop(); goat.utils.scrollToTop();
}
);
};
$scope.showLessonSource = function() { $scope.showLessonSource = function() {
$('.lessonHelp').hide(); $('.lessonHelp').hide();
@ -164,22 +212,6 @@ goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$t
//remote: 'about.mvc' //remote: 'about.mvc'
}); });
}; };
}).animation('.slideDown', function() {
var NgHideClassName = 'ng-hide';
return {
beforeAddClass: function(element, className, done) {
if (className === NgHideClassName) {
$(element).slideUp(done);
} }
},
removeClass: function(element, className, done) {
if (className === NgHideClassName) {
$(element).hide().slideDown(done);
}
}
};
});

47
src/main/webapp/js/goatData.js
View File

@ -2,36 +2,39 @@
goat.data = { goat.data = {
/**** jQuery loads ... ****/ /**** jQuery loads ... ****/
loadLessonContent: function (_url) { loadLessonContent: function ($http,_url) {
//TODO: switch to $http (angular) later //TODO: switch to $http (angular) later
//return $http({method:'GET', url: _url}); return $http({method:'GET', url: _url});
//return $.get(_url, {}, null, "html");
return $.get(_url, {}, null, "html");
}, },
loadCookies: function() { loadCookies: function($http) {
return $.get(goatConstants.cookieService, {}); return $http({method: 'GET', url: goatConstants.cookieService});
//return $.get(goatConstants.cookieService, {});
}, },
loadHints: function () { loadHints: function ($http) {
return $.get(goatConstants.hintService, {}); return $http({method: 'GET', url: goatConstants.hintService});
//return $.get(goatConstants.hintService, {});
}, },
loadSource: function() { loadSource: function($http) {
return $.get(goatConstants.sourceService, {}); return $http({method: 'GET', url: goatConstants.sourceService});
//return $.get(goatConstants.sourceService, {});
}, },
loadSolution: function () { loadSolution: function ($http) {
return $.get(goatConstants.solutionService, {}); return $http({method: 'GET', url: goatConstants.solutionService});
//return $.get(goatConstants.solutionService, {});
}, },
loadPlan: function () { loadPlan: function ($http) {
return $.get(goatConstants.lessonPlanService, {}); return $http({method: 'GET', url: goatConstants.lessonPlanService});
//return $.get(goatConstants.lessonPlanService, {});
}, },
loadParams: function() { loadParams: function($http) {
return $.get(goatConstants.paramsService,{}); return $http({method: 'GET', url: goatConstants.paramsService});
//return $.get(goatConstants.paramsService,{});
}, },
/*** angular data grabs ***/ loadMenu: function($http) {
loadMenuData: function() { return $http({method: 'GET', url: goatConstants.lessonService});
//TODO use goatConstants var for url
return $http({method: 'GET', url: goatConstants.menuService});
}, },
loadLessonTitle: function () { loadLessonTitle: function ($http) {
return $.get(goatConstants.lessonTitleService, {}); return $http({method: 'GET', url: goatConstants.lessonTitleService});
} }
}; };

10
src/main/webapp/js/goatLesson.js
View File

@ -30,7 +30,7 @@ goat.lesson = {
var scope = this; var scope = this;
goat.data.loadHints().then( goat.data.loadHints().then(
function(resp) { function(resp) {
scope.hints = resp; scope.hints = resp.data;
if (scope.hints.length > 0 && scope.hints[0].hint.indexOf(goatConstants.noHints) === -1) { if (scope.hints.length > 0 && scope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
goat.utils.displayButton('showHintsBtn',true); goat.utils.displayButton('showHintsBtn',true);
} else { } else {
@ -48,7 +48,7 @@ goat.lesson = {
var scope = this; var scope = this;
goat.data.loadSolution().then( goat.data.loadSolution().then(
function(resp) { function(resp) {
scope.solution = resp; scope.solution = resp.data;
goat.utils.displayButton('showSolutionBtn',true); goat.utils.displayButton('showSolutionBtn',true);
$('#showSolutionBtn').unbind().click(goat.utils.showLessonSolution); $('#showSolutionBtn').unbind().click(goat.utils.showLessonSolution);
return scope; return scope;
@ -64,7 +64,7 @@ goat.lesson = {
var scope = this; var scope = this;
goat.data.loadPlan().then( goat.data.loadPlan().then(
function(resp) { function(resp) {
scope.plan = resp; scope.plan = resp.data;
goat.utils.displayButton('showPlanBtn',true); goat.utils.displayButton('showPlanBtn',true);
$('#showPlanBtn').unbind().click(goat.utils.showLessonPlan); $('#showPlanBtn').unbind().click(goat.utils.showLessonPlan);
return scope; return scope;
@ -79,7 +79,7 @@ goat.lesson = {
var scope = this; var scope = this;
goat.data.loadSource().then( goat.data.loadSource().then(
function(resp) { function(resp) {
scope.source = resp; scope.source = resp.data;
goat.utils.displayButton('showSourceBtn',true); goat.utils.displayButton('showSourceBtn',true);
$('#showSourceBtn').unbind().click(goat.utils.showLessonSource); $('#showSourceBtn').unbind().click(goat.utils.showLessonSource);
return scope; return scope;
@ -94,7 +94,7 @@ goat.lesson = {
var scope = this; var scope = this;
goat.data.loadCookies().then( goat.data.loadCookies().then(
function(resp) { function(resp) {
scope.cookies = resp; scope.cookies = resp.data;
return scope; return scope;
}, },
function(err){ function(err){