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

menu decoration updates

Browse Source
This commit is contained in:
Jason White 2014-09-16 22:07:56 -06:00
parent 1a1a8bf6ee
commit 5372d79ec8
4 changed files with 57 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,6 +27,7 @@
<!-- end of CSS -->
<!-- JS -->
<script src="js/jquery/jquery-1.10.2.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<!-- angular modules -->
<script src="js/angular/angular-animate.min.js"></script>
@ -40,7 +41,7 @@
<![endif]-->
<!--Global JS-->
<script src="js/jquery/jquery-1.10.2.min.js"></script>
<script src="js/jquery_form/jquery.form.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
@ -114,9 +115,9 @@
<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>
<a ng-click="renderLesson(lesson.id,lesson.link)" id="{{lesson.id}}" title="link to {{lesson.name}}" href="">{{lesson.name}}</a><span class="{{lesson.completeClass}}"></span>
<span ng-repeat="stage in lesson.children" >
<a ng-click="renderLesson(stage.link)" title="link to {{stage.name}}" href="">{{stage.name}}</a>
<a ng-click="renderLesson(lesson.id,stage.link)" id="{{stage.id}}" title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span>
</span>
</li>
</ul>

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

@ -801,6 +801,22 @@ fieldset[disabled] .btn-warning.active {
max-width: 200px;
font-size: x-small;
}
/* MENU */
.sidebar ul span.lessonComplete {
float: right;
margin-left: -5px;
/*margin-right: 5px;*/
padding-top: 15px;
}
#leftside-navigation ul li.selected {
background-color: #555;
}
#leftside-navigation ul li.selected a.selected {
color:white;
}
/* HINTS */
#hintsViewTop{

2
src/main/webapp/js/goatConstants.js
View File

@ -2,6 +2,8 @@
var goatConstants = {
CATEGORYCLASS:'fa-angle-right pull-right',
lessonCompleteClass:'glyphicon glyphicon-check lessonComplete',
selectedMenuClass:'selected',
menuPrefix : [
{
name:'LESSONS',

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

@ -11,12 +11,31 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
goat.data.loadMenu($http).then( //$http({method: 'GET', url: goatConstants.lessonService})
function(menuData) {
var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
//top-tier 'categories'
for (var i=0;i<menuItems.length;i++) {
if (menuItems[i].name) {
menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');
menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');
if (menuItems[i].children) {
for (var j=0;j<menuItems[i].children.length;j++){
menuItems[i].children[j].id = menuItems[i].children[j].name.replace(/\s|\(|\)/g,'');
if (menuItems[i].children[j].complete) {
menuItems[i].children[j].completeClass = goatConstants.lessonCompleteClass;
} else {
menuItems[i].children[j].completeClass ='';
}
if (menuItems[i].children[j].children) {
for (var k=0;k < menuItems[i].children[j].children.length;k++) {
//TODO make utility function for name >> id
menuItems[i].children[j].children[k].id = menuItems[i].children[j].children[k].name.replace(/\s|\(|\)/g,'');
if (menuItems[i].children[j].children[k].complete) {
menuItems[i].children[j].children[k].completeClass= goatConstants.lessonCompleteClass;
} else {
menuItems[i].children[j].children[k].completeClass= ''
}
}
}
}
}
}
$scope.menuTopics = menuItems;
},
function(error) {
@ -26,13 +45,20 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
);
};
$scope.renderLesson = function(url) {
$scope.renderLesson = function(id,url) {
//console.log(url + ' was passed in');
// use jquery to render lesson content to div
$scope.hintIndex = 0;
var curScope = $scope;
$('.lessonHelp').hide();
// clean up menus, mark selected
$('ul li.selected').removeClass(goatConstants.selectedMenuClass)
$('ul li.selected a.selected').removeClass(goatConstants.selectedMenuClass)
$('#'+id).addClass(goatConstants.selectedMenuClass);
$('#'+id).parent().addClass(goatConstants.selectedMenuClass);
//
curScope.parameters = goat.utils.scrapeParams(url);
// lesson content
goat.data.loadLessonContent($http,url).then(
function(reply) {
goat.data.loadLessonTitle($http).then(
@ -41,6 +67,8 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
}
);
$("#lesson_content").html(reply.data);
//hook forms
goat.utils.makeFormsAjax();
$('#leftside-navigation').height($('#main-content').height()+15)
$scope.$emit('lessonUpdate',{params:curScope.parameters});
}
@ -56,35 +84,16 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
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
// runs on first loadcan 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);
angular.element($('#leftside-navigation')).scope().renderLesson(null,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);
}
}
};
});*/
/* lesson controller */
var goatLesson = function($scope,$http,$log) {
//hook forms
$('#hintsView').hide();
// adjust menu to lessonContent size if necssary