diff --git a/newDesign/assets/css/main.css b/newDesign/assets/css/main.css index 0f30cb9fd..4df7127d6 100644 --- a/newDesign/assets/css/main.css +++ b/newDesign/assets/css/main.css @@ -100,7 +100,8 @@ img { color: #F6F6F6; } #header .toggle-navigation.toggle-left { - margin: 23px 0 0 20px; + margin-top: 5px; + margin-left: 20px; display: inline-block; } #header .btn-default { @@ -119,10 +120,31 @@ img { cursor: pointer; color: #797979; } +#header .btn-default .fa-info, +#header .btn-default .fa-envelope, +#header .btn-default .fa-user { + color: #797979; +} +#header .user-nav button:hover, +#header .user-nav button:active { + background: #e84c3d; +} +#header .user-nav button:hover i { + color: #F6F6F6; +} +#header .lessonTitle { + display: inline-block; + margin:0 0 0 20px; +} +#header .pull-right { + float: right !important; + margin-top:25px; + margin-right:20px; +} /* Sidebar */ .sidebar { width: 240px; - height: auto; + height: 100%; background: #222; position: absolute; -webkit-transition: all 0.3s ease-in-out; @@ -324,8 +346,8 @@ a.btn-primary:visited { a.btn-primary:hover, a.btn-primary:active { color: #ffffff; - background-color: #1dd2af; - border-color: #1dd2af; + background-color: #C62F28; + border-color: #C62F28; } .btn-primary:hover, .btn-primary:focus, @@ -333,8 +355,8 @@ a.btn-primary:active { .btn-primary.active, .open .dropdown-toggle.btn-primary { color: #ffffff; - background-color: #1dd2af; - border-color: #1dd2af; + background-color: #C62F28; + border-color: #C62F28; } .btn-primary:active, .btn-primary.active, diff --git a/newDesign/index.html b/newDesign/index.html index 98dea8fa6..1db9c762d 100644 --- a/newDesign/index.html +++ b/newDesign/index.html @@ -1,4 +1,4 @@ -s + @@ -53,6 +53,20 @@ s +
+

Lesson Title in here

+
+
+ + + +
- - -
- -
-
-
-
- - - - - -
-
-
- This should default to the "How to Work with Webgoat" lesson -
- -
-
-
-
-
-

Lesson Parameters and Cookies

-
-
-1 -
-
-
-
-
-
-

Lesson Hints

-
-
- -
-
-
-
-
-
-

Lesson Plan

-
-
- -
-
-
-
-
-
-

Lesson Solution

-
-
-
-
-
-
-
-
-

Lesson Source Code

-
-
-
-
-
-
+ +
+ + + @@ -179,81 +237,82 @@ diff --git a/src/main/webapp/css/main.css b/src/main/webapp/css/main.css index 96acebdc2..8f92c46c6 100644 --- a/src/main/webapp/css/main.css +++ b/src/main/webapp/css/main.css @@ -100,7 +100,8 @@ img { color: #F6F6F6; } #header .toggle-navigation.toggle-left { - margin: 23px 0 0 20px; + margin-top: 5px; + margin-left: 20px; display: inline-block; } #header .btn-default { @@ -119,9 +120,31 @@ img { cursor: pointer; color: #797979; } +#header .btn-default .fa-info, +#header .btn-default .fa-envelope, +#header .btn-default .fa-user { + color: #797979; +} +#header .user-nav button:hover, +#header .user-nav button:active { + background: #e84c3d; +} +#header .user-nav button:hover i { + color: #F6F6F6; +} +#header .lessonTitle { + display: inline-block; + margin:0 0 0 20px; +} +#header .pull-right { + float: right !important; + margin-top:25px; + margin-right:20px; +} /* Sidebar */ .sidebar { width: 240px; + /*height: 100%;*/ background: #222; position: absolute; -webkit-transition: all 0.3s ease-in-out; @@ -341,8 +364,8 @@ a.btn-primary:visited { a.btn-primary:hover, a.btn-primary:active { color: #ffffff; - background-color: #1dd2af; - border-color: #1dd2af; + background-color: #C62F28; + border-color: #C62F28; } .btn-primary:hover, .btn-primary:focus, @@ -350,8 +373,8 @@ a.btn-primary:active { .btn-primary.active, .open .dropdown-toggle.btn-primary { color: #ffffff; - background-color: #1dd2af; - border-color: #1dd2af; + background-color: #C62F28; + border-color: #C62F28; } .btn-primary:active, .btn-primary.active, @@ -748,3 +771,21 @@ fieldset[disabled] .btn-warning.active { padding:3px; width:auto; } + +#topLinks { + float:right; + margin-right:5px;s + margin-top:3px; +} + +.lessonHelp, .lessonHelpBtn { + display: none; +} +/* +.paramsView { + float:right; + width 50%; + margin-right:10px; + border-left:2px solid #333; +} +*/ \ No newline at end of file diff --git a/src/main/webapp/js/goatConstants.js b/src/main/webapp/js/goatConstants.js index 6880e5fc8..03f2e78b9 100644 --- a/src/main/webapp/js/goatConstants.js +++ b/src/main/webapp/js/goatConstants.js @@ -11,6 +11,16 @@ var goatConstants = { children:null, class:'fa-bars static' }], - lessonService: 'service/lessonmenu.mvc' + //services + lessonService: 'service/lessonmenu.mvc', + cookieService: 'service/cookie.mvc', //cookies_widget.mvc + hintService:'service/hint.mvc', + sourceService:'service/source.mvc', + solutionService:'service/solution.mvc', + lessonPlanService:'service/lessonplan.mvc', + menuService: 'service/lessonmenu.mvc', + // literals + notFound: 'Could not find' }; + diff --git a/src/main/webapp/js/goatControllers.js b/src/main/webapp/js/goatControllers.js index 1df4719c5..ab84128ee 100644 --- a/src/main/webapp/js/goatControllers.js +++ b/src/main/webapp/js/goatControllers.js @@ -6,7 +6,7 @@ /** Menu Controller * prepares and updates menu topic items for the view */ -goat.controller('goatLesson', function($scope, $http, $modal, $log, $templateCache) { +goat.controller('goatLessonMenu', function($scope, $http, $modal, $log, $templateCache) { //TODO: implement via separate promise and use config for menu (goat.data.loadMenuData()) $http({method: 'GET', url: goatConstants.lessonService}).then( function(menuData) { @@ -19,51 +19,58 @@ goat.controller('goatLesson', function($scope, $http, $modal, $log, $templateCac } ); $scope.renderLesson = function(url) { - console.log(url + ' was passed in'); + //console.log(url + ' was passed in'); // use jquery to render lesson content to div goat.data.loadLessonContent(url).then( function(reply) { $("#lesson_content").html(reply); // hook forms goat.utils.makeFormsAjax(); + //render lesson title $('#lessonTitle').text(goat.utils.extractLessonTitle($(reply))); // 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()); } - // hook into our pseudo service calls - // @TODO make these real services during phase 2 - // show cookies and params - goat.utils.showLessonCookiesAndParams(); - // show hints - goat.utils.showLessonHint(); - // show plan - goat.utils.showLessonPlan(); - // show solution - goat.utils.showLessonSolution(); - // show source - goat.utils.showLessonSource(); + goat.lesson.lessonInfo = new goat.lesson.CurLesson(url); + goat.lesson.lessonInfo.loadInfo(); //uses pseudo and actual service calls + // @TODO: convert to real services (and more angularjs, likely ... in phase 2) } - ); - }; -}).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); - } - } + ); + }; + }).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); + } + } + }; + }); + +goat.controller('lessonHelpController', function($scope) { + $scope.cookies=[]; + $scope.params=[]; + $scope.viewCookiesAndParams = function() { + $scope.cookies=goat.lesson.lessonInfo.cookies; + console.log($scope.cookies); + $scope.params=goat.lesson.lessonInfo.params; + + //@TODO: issue callback to track view }; + //$scope.watch() }); - -/* Controllers for modal instances */ +/* + *DEPRECATED +//Controllers for modal instances var showSourceController = function($scope, $modalInstance, lessonSource) { $scope.lessonSource = lessonSource; @@ -89,7 +96,7 @@ var showSolutionController = function($scope, $modalInstance, lessonSolutionUrl) $modalInstance.dismiss('cancel'); }; }; - +*/ diff --git a/src/main/webapp/js/goatData.js b/src/main/webapp/js/goatData.js index 8c7f86881..a2e99c6d8 100644 --- a/src/main/webapp/js/goatData.js +++ b/src/main/webapp/js/goatData.js @@ -1,13 +1,34 @@ /* ### GOAT DATA/PROMISES ### */ goat.data = { + /**** jQuery loads ... ****/ loadLessonContent: function (_url) { //TODO: switch to $http (angular) later //return $http({method:'GET', url: _url}); + return $.get(_url, {}, null, "html"); }, + loadCookies: function() { + return $.get(goatConstants.cookieService, {}); + }, + loadHints: function () { + return $.get(goatConstants.hintService, {}); + }, + loadSource: function() { + return $.get(goatConstants.sourceService, {}); + }, + loadSolution: function () { + return $.get(goatConstants.solutionService, {}) + }, + loadPlan: function () { + return $.get(goatConstants.lessonPlanService, {}); + }, + loadParams: function() { + return $.get(goatConstants.paramsService,{}); + }, + /*** angular data grabs ***/ loadMenuData: function() { //TODO use goatConstants var for url - return $http({method: 'GET', url: 'service/lessonmenu.mvc'}); + return $http({method: 'GET', url: goatConstants.menuService}); } }; diff --git a/src/main/webapp/js/goatLesson.js b/src/main/webapp/js/goatLesson.js new file mode 100644 index 000000000..e84a0b2f5 --- /dev/null +++ b/src/main/webapp/js/goatLesson.js @@ -0,0 +1,110 @@ +// goat.lesson name space +goat.lesson = { + CurLesson: function(_lessonUrl) { + return { + hints:[], + hintIndex:0, + solution:null, + plan:null, + cookiesAndParams:[], + params:[], + source:null, + lessonUrl:(_lessonUrl || null), + clearInfo: function() { + this.hints = null; + this.solution = null; + this.plan = null; + this.cookies = null; + this.source = null; + this.params = null; + }, + loadInfo: function() { + this.getHints(); + this.getPlan(); + this.getSolution(); + this.getCookies(); + this.getSource(); + this.getParams(); + }, + getHints:function() { + var scope = this; + goat.data.loadHints().then( + function(resp) { + scope.hints = resp; + if (scope.hints.length > 0) { + goat.utils.displayButton('showHintsBtn',true); + } else { + goat.utils.displayButton('showHintsBtn',false); + } + return scope; + }, + function(err){ + goat.utils.displayButton('showHintsBtn',false); + //TODO handle errors + } + ); + }, + getSolution:function() { + var scope = this; + goat.data.loadSolution().then( + function(resp) { + scope.solution = resp; + goat.utils.displayButton('showSolutionBtn',true); + $('#showSolutionBtn').unbind().click(goat.utils.showLessonSolution); + return scope; + }, + function(err){ + scope.solution = null; + goat.utils.displayButton('showSolutionBtn',false); + //TODO handle errors + } + ); + }, + getPlan: function() { + var scope = this; + goat.data.loadPlan().then( + function(resp) { + scope.plan = resp; + goat.utils.displayButton('showPlanBtn',true); + $('#showPlanBtn').unbind().click(goat.utils.showLessonPlan); + return scope; + }, + function(err){ + goat.utils.displayButton('showPlanBtn',false); + //TODO handle errors + } + ); + }, + getSource: function() { + var scope = this; + goat.data.loadSource().then( + function(resp) { + scope.source = resp; + goat.utils.displayButton('showSourceBtn',true); + $('#showSourceBtn').unbind().click(goat.utils.showLessonSource); + return scope; + }, + function(err){ + goat.utils.displayButton('showSourceBtn',false); + //TODO handle errors + } + ); + }, + getCookies: function() { + var scope = this; + goat.data.loadCookies().then( + function(resp) { + scope.cookies = resp; + return scope; + }, + function(err){ + //TODO handle errors + } + ); + }, + getParams: function() { + this.params = goat.utils.scrapeParams(this.lessonUrl) + } + } + } +}; \ No newline at end of file diff --git a/src/main/webapp/js/goatUtil.js b/src/main/webapp/js/goatUtil.js index fcf6443f7..c078a5e9a 100644 --- a/src/main/webapp/js/goatUtil.js +++ b/src/main/webapp/js/goatUtil.js @@ -23,35 +23,72 @@ goat.utils = { var title = $('h1', el).text(); return title; }, + displayButton: function(id,show) { + if ($('#'+id)) { + if (show) { + $('#'+id).show(); + } else { + $('#'+id).hide(); + } + } + }, showLessonCookiesAndParams: function() { - $.get("service/cookies_widget.mvc", {}, function(reply) { + $.get(goatConstants.cookieService, {}, function(reply) { $("#lesson_cookies").html(reply); }, "html"); }, - showLessonHint: function() { - $.get("service/hint_widget.mvc", {}, function(reply) { - $("#lesson_hint").html(reply); - }, "html"); + showLessonHints: function() { + $('.lessonHelp').hide(); + $('#lesson_hint').html(); + $('#lesson_hint_row').show(); }, - showLessonSource: function() { - $.get("service/source.mvc", {}, function(reply) { - $("#lesson_source").html("
"+reply+"
"); - }, "html"); + showLessonSource: function(source) { + $('.lessonHelp').hide(); + $('#lesson_source').html("
"+goat.lesson.lessonInfo.source+"
"); + $('#lesson_source_row').show(); + goat.utils.scrollToHelp(); }, showLessonSolution: function() { - $.get("service/solution.mvc", {}, function(reply) { - $("#lesson_solution").html(reply); - }, "html"); + $('.lessonHelp').hide(); + $('#lesson_solution').html(goat.lesson.lessonInfo.solution); + $('#lesson_solution_row').show(); + goat.utils.scrollToHelp(); }, - showLessonPlan: function() { - $.get("service/lessonplan.mvc", {}, function(reply) { - $("#lesson_plan").html(reply); - }, "html"); + showLessonPlan: function(plan) { + $('.lessonHelp').hide(); + $("#lesson_plan").html(goat.lesson.lessonInfo.plan); + $('#lesson_plan_row').show(); + goat.utils.scrollToHelp(); + }, + scrollToHelp:function() { + var target = $('#lessonHelpsWrapper'); + goat.utils.scrollEasy(target); + }, + scrollToTop: function() { + var target= $('#container'); + goat.utils.scrollEasy(target); + }, + scrollEasy:function(target) { + $('html,body').animate({ + scrollTop: target.offset().top + }, 1000); + }, + scrapeParams: function(url) { + if (!url) { + return; + } + var params = url.split('?')[1].split('&'); + var paramsArr = []; + for (var i=0;i< params.length;i++) { + var paramObj = {}; + paramObj.name = params[i].split('=')[0]; + paramObj.value = params[i].split('=')[1]; + paramsArr.push(paramObj); + } + return paramsArr; } }; -// ### GLOBAL FUNCTIONS ## // - $(window).resize(function() { //$('#leftside-navigation').css('height',$('div.panel-body').height()); diff --git a/src/main/webapp/lessonJS/sameOrigin.js b/src/main/webapp/lessonJS/sameOrigin.js index 811f95b03..2acca8d2a 100644 --- a/src/main/webapp/lessonJS/sameOrigin.js +++ b/src/main/webapp/lessonJS/sameOrigin.js @@ -7,8 +7,8 @@ function submitXHR(){ document.getElementById("responseArea").innerHTML=""; - alert("creating XHR request for: " + document.getElementById("requestedURL").value); - + //alert("creating XHR request for: " + document.getElementById("requestedURL").value); + console.log("creating XHR request for: " + document.getElementById("requestedURL").value); try{