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

changes for menu decoration and related code updates

Browse Source
This commit is contained in:
Jason White 2014-09-19 10:55:26 -06:00
parent c9bde0dcdd
commit d07e52d5e0
5 changed files with 146 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -113,11 +113,11 @@
<ul class="nano-content">
<li class="sub-menu" ng-repeat="item in menuTopics">
<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.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(lesson.id,stage.link)" id="{{stage.id}}" title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span>
<ul class="slideDown lessonsAndStages {{item.displayClass}}" id="{{item.id}}" isOpen=0>
<li ng-repeat="lesson in item.children" class="{{lesson.selectedClass}}">
<a ng-click="renderLesson(lesson.id,lesson.link)" id="{{lesson.id}}" class="{{lesson.selectedClass}}" 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(lesson.id,stage.link)" class="selectedClass" id="{{stage.id}}" title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span>
</span>
</li>
</ul>
@ -177,7 +177,7 @@
<h4>Cookies</h4>
<table class="cookieTable table-striped table-nonfluid" ng-repeat="cookie in cookies">
<thead>
<tr><th>Field</th><th>Value</th></tr>
<tr><th class="col-sm-1">Field</th><th class="col-sm-1">Value</th></tr>
</thead>
<tbody>
<tr ng-repeat="(key, value) in cookie">
@ -293,9 +293,7 @@
$(document).ready(function() {
//TODO merge appliction.js code into other js files
app.init();
app.init();
});
// make all forms ajax forms
var options = {
@ -353,6 +351,8 @@
// make any embedded forms ajaxy
goat.utils.showLessonCookiesAndParams();
goat.utils.makeFormsAjax();
//refresh menu
angular.element($('#leftside-navigation')).scope().renderMenu();
}
</script>

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

@ -141,99 +141,18 @@ img {
margin-top:25px;
margin-right:20px;
}
/* Sidebar */
.sidebar {
width: 240px;
/*height: 100%;*/
background: #222;
position: absolute;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 100;
}
#leftside-navigation {
overflow-y:scroll;
overflow-x:hidden;
}
#sidebar {
/*background-color:#333;*/
background-color:blue;
}
.sidebar-toggle {
margin-left: -240px;
}
#leftside-navigation ul,
#leftside-navigation ul ul {
margin: -2px 0 0;
padding: 0;
}
#leftside-navigation ul li {
list-style-type: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#leftside-navigation ul li a {
color: #aeb2b7;
text-decoration: none;
display: block;
padding: 18px 0 18px 25px;
font-size: 12px;
outline: none;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
#leftside-navigation ul li a span {
display: inline-block;
}
#leftside-navigation ul ul li {
background: #333;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
border-bottom: none;
}
#leftside-navigation ul ul li a {
font-size: 12px;
padding-top: 13px;
padding-bottom: 13px;
color: #aeb2b7;
}
#leftside-navigation ul li a i {
width: 20px;
}
#leftside-navigation ul li a i.fa-angle-right,
#leftside-navigation ul li a i.fa-angle-left {
padding-top: 3px;
}
#leftside-navigation ul ul {
display: none;
}
#leftside-navigation li.active ul {
display: block;
}
#leftside-navigation ul li a:hover,
#leftside-navigation ul li.active > a {
color: #e84c3d;
}
.btn-primary + .dropdown-menu > li > a:hover,
.btn-primary + .dropdown-menu > li > a:active {
background-color: #16a086;
}
.sidebar > div > ul > li > ul > li > span.lessonComplete {
float: right;
margin-left: 1.5em;
/*float: right;
margin-left: 1.5em;*/
margin-right: 5px;
margin-top: -25px;
margin-top: -38px; /* << don't like doing this, but otherwise it does not line up correctly */
color:#0F0
}
/* ==========================================================================
@ -797,14 +716,109 @@ fieldset[disabled] .btn-warning.active {
.table-nonfluid {
width:auto;
}
.table-nonfluid {
}
.cookieTable tr td, .paramsTable tr td {
padding: 3px;
max-width: 200px;
font-size: x-small;
word-wrap: break-word;
}
/* MENU */
/* ==========================================================================
MENU / Sidebar
========================================================================== */
/* Sidebar */
.sidebar {
width: 240px;
/*height: 100%;*/
background: #222;
position: absolute;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 100;
}
#leftside-navigation {
overflow-y:scroll;
overflow-x:hidden;
}
#sidebar {
/*background-color:#333;*/
background-color:blue;
}
.sidebar-toggle {
margin-left: -240px;
}
#leftside-navigation ul,
#leftside-navigation ul ul {
margin: -2px 0 0;
padding: 0;
}
#leftside-navigation ul li {
list-style-type: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
#leftside-navigation ul li a {
color: #aeb2b7;
text-decoration: none;
display: block;
padding: 5px 0 5px 15px;
font-size: 12px;
outline: none;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
#leftside-navigation ul li a span {
display: inline-block;
}
#leftside-navigation ul ul li {
background: #333;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
border-bottom: none;
}
#leftside-navigation ul ul li a {
font-size: 11px;
padding-top: 5px;
padding-bottom: 5px;
color: #aeb2b7;
margin-left:8px;
}
#leftside-navigation ul li a i {
width: 20px;
}
#leftside-navigation ul li a i.fa-angle-right,
#leftside-navigation ul li a i.fa-angle-left {
padding-top: 3px;
}
#leftside-navigation ul ul {
display: none;
}
#leftside-navigation li.active ul {
display: block;
}
#leftside-navigation ul li a:hover,
#leftside-navigation ul li.active > a {
color: #e84c3d;
}
.sidebar ul span.lessonComplete {
float: right;
margin-left: -5px;
@ -820,6 +834,9 @@ fieldset[disabled] .btn-warning.active {
color:white;
}
#leftside-navigation ul ul.lessonsAndStages.keepOpen {
display: block
}
/* HINTS */
#hintsViewTop{

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

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

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

@ -13,10 +13,17 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
//top-tier 'categories'
for (var i=0;i<menuItems.length;i++) {
menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');
menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');//TODO move the replace routine into util function
menuItems[i].displayClass= ($scope.openMenu === menuItems[i].id) ? goatConstants.keepOpenClass : '';
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,'');
//handle selected Menu state
if (menuItems[i].children[j].id === $scope.curMenuItemSelected) {
menuItems[i].children[j].selectedClass = goatConstants.selectedMenuClass;
menuItems[i].selectedClass = goatConstants.selectedMenuClass;
}
//handle complete state
if (menuItems[i].children[j].complete) {
menuItems[i].children[j].completeClass = goatConstants.lessonCompleteClass;
} else {
@ -26,6 +33,12 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
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,'');
//handle selected Menu state
if (menuItems[i].children[j].children[k].id === $scope.curMenuItemSelected) {
menuItems[i].children[j].children[k].selectedClass = goatConstants.selectedMenuClass;
menuItems[i].children[j].selectedClass = goatConstants.selectedMenuClass;
}
//handle complete state
if (menuItems[i].children[j].children[k].complete) {
menuItems[i].children[j].children[k].completeClass= goatConstants.lessonCompleteClass;
} else {
@ -37,6 +50,11 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
}
}
$scope.menuTopics = menuItems;
//
if ($scope.openMenu) {
$('ul'+$scope.openMenu).show();
}
},
function(error) {
// TODO - handle this some way other than an alert
@ -52,11 +70,8 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
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);
//
$scope.curMenuItemSelected = id;
goat.utils.highlightCurrentLessonMenu(id);
curScope.parameters = goat.utils.scrapeParams(url);
// lesson content
goat.data.loadLessonContent($http,url).then(
@ -69,10 +84,12 @@ 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)
$('#leftside-navigation').height($('#main-content').height()+15)//TODO: get ride of fixed value (15)here
$scope.$emit('lessonUpdate',{params:curScope.parameters});
}
)};
)
$scope.renderMenu();
};
$scope.accordionMenu = function(id) {
if ($('ul#'+id).attr('isOpen') == 0) {
$scope.expandMe = true;
@ -80,6 +97,7 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
$('ul#'+id).slideUp(300).attr('isOpen',0);
return;
}
$scope.openMenu = id;
$('.lessonsAndStages').not('ul#'+id).slideUp(300).attr('isOpen',0);
if ($scope.expandMe) {
$('ul#'+id).slideDown(300).attr('isOpen',1);

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

@ -80,6 +80,13 @@ goat.utils = {
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);
}
};