diff --git a/webgoat-container/src/main/webapp/css/main.css b/webgoat-container/src/main/webapp/css/main.css index ec288d580..d12e74068 100644 --- a/webgoat-container/src/main/webapp/css/main.css +++ b/webgoat-container/src/main/webapp/css/main.css @@ -851,7 +851,7 @@ cookie-container { color: #e84c3d; } -.sidebar ul span.lesson-complete { +#menu-container ul span.lesson-complete { float: right; margin-left: -5px; /*margin-right: 5px;*/ @@ -859,11 +859,15 @@ cookie-container { display:inline-block; } -#menu-container ul li.selected { +#menu-container ul li.selected, #menu-container li a.selected { background-color: #555; } -#menu-container ul li.selected a.selected { +#menu-container ul li.stage { + padding-left:3px; +} + +#menu-container li.selected, #menu-container a.selected { color:white; } diff --git a/webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js b/webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js index 2e7ce1fa4..68f540263 100644 --- a/webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js +++ b/webgoat-container/src/main/webapp/js/goatApp/controller/LessonController.js @@ -77,20 +77,24 @@ define(['jquery', // this.cookieView = new CookieView(); // parameter model & view - //TODO: instantiate model with values at once (not sure why was not working before) + //TODO: instantiate model with values (not sure why was not working before) var paramModel = new ParamModel({ }); paramModel.set('screenParam',this.lessonContent.get('screenParam')); paramModel.set('menuParam',this.lessonContent.get('menuParam')); + paramModel.set('stageParam',this.lessonContent.get('stageParam')); this.paramView = new ParamView({model:paramModel}); + this.hideShowHelps(null); + this.trigger('menu:reload'); }; this.areHelpsReady = function (curHelp) { + //TODO: significantly refactor (remove) this once LessonInfoService can be used to support lazy loading this.addCurHelpState(curHelp); // check if all are ready if (this.helpsLoaded['hints'] && this.helpsLoaded['plan'] && this.helpsLoaded['solution'] && this.helpsLoaded['source'] && !this.helpControlsView) { - // + this.helpControlsView = new HelpControlsView({ hasPlan:(this.planView.model.get('content') !== null), hasSolution:(this.solutionView.model.get('content') !== null), @@ -98,7 +102,7 @@ define(['jquery', hasHints:(this.lessonHintView.collection.length > 0), }); this.helpControlsView.render(); - // + this.listenTo(this.helpControlsView,'plan:show',this.hideShowHelps); this.listenTo(this.helpControlsView,'solution:show',this.hideShowHelps); this.listenTo(this.helpControlsView,'hints:show',this.onShowHints) diff --git a/webgoat-container/src/main/webapp/js/goatApp/controller/MenuController.js b/webgoat-container/src/main/webapp/js/goatApp/controller/MenuController.js index a8c154b50..f6da24e3e 100644 --- a/webgoat-container/src/main/webapp/js/goatApp/controller/MenuController.js +++ b/webgoat-container/src/main/webapp/js/goatApp/controller/MenuController.js @@ -1,5 +1,12 @@ -define(['jquery','underscore','backbone','goatApp/view/MenuView'], - function($,_,Backbone,MenuView) { +define(['jquery', + 'underscore', + 'backbone', + 'goatApp/view/MenuView' + ], + function($, + _, + Backbone, + MenuView) { Controller = function(options){ _.extend(Controller.prototype,Backbone.Events); options = options || {}; @@ -10,8 +17,8 @@ define(['jquery','underscore','backbone','goatApp/view/MenuView'], this.listenTo(this.menuView,'lesson:click',this.renderTitle); } - this.updateMenu = function(curLesson) { - + this.updateMenu = function(){ + this.menuView.updateMenu(); }, //TODO: move title rendering into lessonContent/View pipeline once data can support it @@ -19,6 +26,7 @@ define(['jquery','underscore','backbone','goatApp/view/MenuView'], this.titleView.render(title); } + }; return Controller; diff --git a/webgoat-container/src/main/webapp/js/goatApp/model/MenuCollection.js b/webgoat-container/src/main/webapp/js/goatApp/model/MenuCollection.js index 6df19033f..709c557f7 100644 --- a/webgoat-container/src/main/webapp/js/goatApp/model/MenuCollection.js +++ b/webgoat-container/src/main/webapp/js/goatApp/model/MenuCollection.js @@ -9,13 +9,21 @@ define(['jquery', url:'service/lessonmenu.mvc', initialize: function () { var self = this; - this.fetch().then(function (data) { - this.models = data; - self.onDataLoaded(); - }); + this.fetch(); }, - onDataLoaded:function() { + + onDataLoaded: function() { this.trigger('menuData:loaded'); + }, + + fetch: function() { + var self=this; + Backbone.Collection.prototype.fetch.apply(this,arguments).then( + function(data) { + this.models = data; + self.onDataLoaded(); + } + ); } }); }); \ No newline at end of file diff --git a/webgoat-container/src/main/webapp/js/goatApp/model/MenuData.js b/webgoat-container/src/main/webapp/js/goatApp/model/MenuData.js index 67708c622..8b57441aa 100644 --- a/webgoat-container/src/main/webapp/js/goatApp/model/MenuData.js +++ b/webgoat-container/src/main/webapp/js/goatApp/model/MenuData.js @@ -30,28 +30,3 @@ var menuData = Backbone.Model.extend({ }); }); - -/* -var menuData = Backbone.Model.extend({ - urlRoot:'/webgoat/service/lessonmenu.mvc', - defaults: { - items:null, - selectedItem:null - }, - initialize: function () { - var self = this; - this.fetch().then(function(menuItems){ - menuItems = goatUtils.enhanceMenuData(menuItems,this.selectedItem); - self.items = menuItems; - }); - }, - - update: function() { - var self = this; - this.fetch().then(function(data) { - self.items = data; - self.render(0); - }); - } - }); -*/ \ No newline at end of file diff --git a/webgoat-container/src/main/webapp/js/goatApp/view/GoatRouter.js b/webgoat-container/src/main/webapp/js/goatApp/view/GoatRouter.js index 94a2be160..8e42fd0eb 100644 --- a/webgoat-container/src/main/webapp/js/goatApp/view/GoatRouter.js +++ b/webgoat-container/src/main/webapp/js/goatApp/view/GoatRouter.js @@ -43,11 +43,11 @@ define(['jquery', }); Backbone.history.start(); - this.listenTo(this.menuController, 'menu:reload',this.reloadMenu) + this.listenTo(this.lessonController, 'menu:reload',this.reloadMenu) }, reloadMenu: function (curLesson) { - this.menuController.updateMenu(curLesson); + this.menuController.updateMenu(); } diff --git a/webgoat-container/src/main/webapp/js/goatApp/view/MenuView.js b/webgoat-container/src/main/webapp/js/goatApp/view/MenuView.js index 4ed9340ad..ab721d98a 100644 --- a/webgoat-container/src/main/webapp/js/goatApp/view/MenuView.js +++ b/webgoat-container/src/main/webapp/js/goatApp/view/MenuView.js @@ -17,10 +17,11 @@ define(['jquery', initialize: function() { this.collection = new MenuCollection(); this.listenTo(this.collection,'menuData:loaded',this.render); - this.listenTo(this,'menu:click',this.accordionMenu); + // this.listenTo(this,'menu:click',this.accordionMenu); + this.curLessonLinkId = ''; }, // rendering top level menu - render: function (model){ + render: function (){ //for now, just brute force //TODO: refactor into sub-views/components var items, catItems, stages; @@ -47,11 +48,14 @@ define(['jquery', if (lessons) { var categoryLessonList = $('