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

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

@ -62,7 +62,7 @@
</head>
<body class="animated fadeIn" ng-app="goatApp">
<section id="container" ng-controller="goatLesson">
<section id="container">
<header id="header">
<!--logo start-->
<div class="brand">
@ -75,7 +75,7 @@
</button>
</div><!--toggle navigation end-->
<div class="lessonTitle" >
<h1 id="lessonTitle">Lesson Title in here</h1>
<h1 id="lessonTitle"></h1>
</div><!--lesson title end-->
<div class="user-nav pull-right" style="margin-right: 75px;">
<div class="dropdown" style="display:inline">
@ -107,12 +107,12 @@
</header>
<!--sidebar left start-->
<aside class="sidebar">
<div id="leftside-navigation" class="nano">
<aside class="sidebar" >
<div id="leftside-navigation" ng-controller="goatMenu" class="nano">
<ul class="nano-content">
<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>
<ul class="slideDown" ng-show="expanded">
<a ng-click="accordionMenu(item.id)" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a><!-- expanded = !expanded-->
<ul class="slideDown lessonsAndStages" id="{{item.id}}" isOpen=0>
<li ng-repeat="lesson in item.children">
<a ng-click="renderLesson(lesson.link)" title="link to {{lesson.name}}" href="">{{lesson.name}}</a>
<span ng-repeat="stage in lesson.children" >
@ -122,15 +122,13 @@
</ul>
</li>
</ul>
</div>
</aside>
<!--sidebar left end-->
<!--main content start-->
<section class="main-content-wrapper">
<section id="main-content" > <!-- ng-controller="lessonController" -->
<section id="main-content" ng-controller="goatLesson">
<div class="row">
<div class="col-md-8">
<div class="col-md-12" align="left">
@ -293,10 +291,10 @@
var DEBUG_FORM_SUBMISSION = false;
$(document).ready(function() {
//TODO merge appliction.js code into other js files
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
var options = {

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

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

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

@ -6,87 +6,135 @@
/** Lesson Controller (includes menu stuff)
* 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.params = [];
//TODO: implement via separate promise and use config for menu (goat.data.loadMenuData())
$http({method: 'GET', url: goatConstants.lessonService}).then(
function(menuData) {
var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
$scope.menuTopics = menuItems;
},
function(error) {
// TODO - handle this some way other than an alert
console.error("Error rendering menu: " + error);
}
);
$scope.renderMenu = function() {
goat.data.loadMenu($http).then( //$http({method: 'GET', url: goatConstants.lessonService})
function(menuData) {
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;
},
function(error) {
// TODO - handle this some way other than an alert
console.error("Error rendering menu: " + error);
}
);
};
$scope.renderLesson = function(url) {
//console.log(url + ' was passed in');
// use jquery to render lesson content to div
$scope.hintIndex = 0;
var curScope = $scope;
curScope.parameters = goat.utils.scrapeParams(url);
goat.data.loadLessonContent(url).then(
function(reply) {
$("#lesson_content").html(reply);
goat.data.loadLessonTitle().then(
function(reply) {
$("#lessonTitle").text(reply);
}
);
goat.data.loadLessonContent($http,url).then(
function(reply) {
goat.data.loadLessonTitle($http).then(
function(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);
}
//hook forms
goat.utils.makeFormsAjax();
$('#hintsView').hide();
// adjust menu to lessonContent size if necssary
//@TODO: this is still clunky ... needs some TLC
if ($('div.panel-body').height() > 400) {
$('#leftside-navigation').height($(window).height());
}
//cookies
goat.data.loadCookies().then(
function(resp) {
curScope.cookies = resp;
}
);
//hints
curScope.hintIndex = 0;
goat.data.loadHints().then(
function(resp) {
curScope.hints = resp;
if (curScope.hints.length > 0 && curScope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
goat.utils.displayButton('showHintsBtn', true);
} else {
goat.utils.displayButton('showHintsBtn', false);
}
}
);
//source
goat.data.loadSource().then(
function(resp) {
curScope.source = resp;
}
);
//plan
goat.data.loadPlan().then(
function(resp) {
curScope.plan = resp;
}
);
//solution
goat.data.loadSolution().then(
function(resp) {
curScope.solution = resp;
}
);
goat.utils.scrollToTop();
}
);
/*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
$('#hintsView').hide();
// adjust menu to lessonContent size if necssary
//@TODO: this is still clunky ... needs some TLC
if ($('div.panel-body').height() > 400) {
$('#leftside-navigation').height($(window).height());
}
//cookies
goat.data.loadCookies($http).then(
function(resp) {
curScope.cookies = resp.data;
}
);
//hints
curScope = $scope; //TODO .. update below, this curScope is probably not needed
curScope.hintIndex = 0;
goat.data.loadHints($http).then(
function(resp) {
curScope.hints = resp.data;
if (curScope.hints.length > 0 && curScope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
goat.utils.displayButton('showHintsBtn', true);
} else {
goat.utils.displayButton('showHintsBtn', false);
}
}
);
//source
goat.data.loadSource($http).then(
function(resp) {
curScope.source = resp.data;
}
);
//plan
goat.data.loadPlan($http).then(
function(resp) {
curScope.plan = resp.data;
}
);
//solution
goat.data.loadSolution($http).then(
function(resp) {
curScope.solution = resp.data;
}
);
goat.utils.scrollToTop();
$scope.showLessonSource = function() {
$('.lessonHelp').hide();
$('#lesson_source_row').show();
@ -164,22 +212,6 @@ goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$t
//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 = {
/**** jQuery loads ... ****/
loadLessonContent: function (_url) {
loadLessonContent: function ($http,_url) {
//TODO: switch to $http (angular) later
//return $http({method:'GET', url: _url});
return $.get(_url, {}, null, "html");
return $http({method:'GET', url: _url});
//return $.get(_url, {}, null, "html");
},
loadCookies: function() {
return $.get(goatConstants.cookieService, {});
loadCookies: function($http) {
return $http({method: 'GET', url: goatConstants.cookieService});
//return $.get(goatConstants.cookieService, {});
},
loadHints: function () {
return $.get(goatConstants.hintService, {});
loadHints: function ($http) {
return $http({method: 'GET', url: goatConstants.hintService});
//return $.get(goatConstants.hintService, {});
},
loadSource: function() {
return $.get(goatConstants.sourceService, {});
loadSource: function($http) {
return $http({method: 'GET', url: goatConstants.sourceService});
//return $.get(goatConstants.sourceService, {});
},
loadSolution: function () {
return $.get(goatConstants.solutionService, {});
loadSolution: function ($http) {
return $http({method: 'GET', url: goatConstants.solutionService});
//return $.get(goatConstants.solutionService, {});
},
loadPlan: function () {
return $.get(goatConstants.lessonPlanService, {});
loadPlan: function ($http) {
return $http({method: 'GET', url: goatConstants.lessonPlanService});
//return $.get(goatConstants.lessonPlanService, {});
},
loadParams: function() {
return $.get(goatConstants.paramsService,{});
loadParams: function($http) {
return $http({method: 'GET', url: goatConstants.paramsService});
//return $.get(goatConstants.paramsService,{});
},
/*** angular data grabs ***/
loadMenuData: function() {
//TODO use goatConstants var for url
return $http({method: 'GET', url: goatConstants.menuService});
loadMenu: function($http) {
return $http({method: 'GET', url: goatConstants.lessonService});
},
loadLessonTitle: function () {
return $.get(goatConstants.lessonTitleService, {});
loadLessonTitle: function ($http) {
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;
goat.data.loadHints().then(
function(resp) {
scope.hints = resp;
scope.hints = resp.data;
if (scope.hints.length > 0 && scope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
goat.utils.displayButton('showHintsBtn',true);
} else {
@ -48,7 +48,7 @@ goat.lesson = {
var scope = this;
goat.data.loadSolution().then(
function(resp) {
scope.solution = resp;
scope.solution = resp.data;
goat.utils.displayButton('showSolutionBtn',true);
$('#showSolutionBtn').unbind().click(goat.utils.showLessonSolution);
return scope;
@ -64,7 +64,7 @@ goat.lesson = {
var scope = this;
goat.data.loadPlan().then(
function(resp) {
scope.plan = resp;
scope.plan = resp.data;
goat.utils.displayButton('showPlanBtn',true);
$('#showPlanBtn').unbind().click(goat.utils.showLessonPlan);
return scope;
@ -79,7 +79,7 @@ goat.lesson = {
var scope = this;
goat.data.loadSource().then(
function(resp) {
scope.source = resp;
scope.source = resp.data;
goat.utils.displayButton('showSourceBtn',true);
$('#showSourceBtn').unbind().click(goat.utils.showLessonSource);
return scope;
@ -94,7 +94,7 @@ goat.lesson = {
var scope = this;
goat.data.loadCookies().then(
function(resp) {
scope.cookies = resp;
scope.cookies = resp.data;
return scope;
},
function(err){