recent changes, commit prior to merge
This commit is contained in:
Jason White
@ -27,12 +27,7 @@
|
|||||||
<!-- end of CSS -->
|
<!-- end of CSS -->
|
||||||
|
|
||||||
<!-- JS -->
|
<!-- 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>
|
|
||||||
<script src="js/angular/ui-bootstrap-tpls-0.11.0.min.js"></script>
|
|
||||||
<!-- Feature detection -->
|
|
||||||
<script src="js/modernizr-2.6.2.min.js"></script>
|
<script src="js/modernizr-2.6.2.min.js"></script>
|
||||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||||
<!--[if lt IE 9]>
|
<!--[if lt IE 9]>
|
||||||
@ -40,30 +35,14 @@
|
|||||||
<script src="js/respond.min.js"></script>
|
<script src="js/respond.min.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
|
|
||||||
<!--Global JS-->
|
<!-- Require.js used to load js asynchronously -->
|
||||||
|
<script src="js/libs/require.min.js" data-main="js/main.js"></script>
|
||||||
<script src="js/jquery_form/jquery.form.js"></script>
|
|
||||||
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
|
|
||||||
|
|
||||||
<script src="js/application.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
var goat = angular.module("goatApp", ['ngAnimate', 'ui.bootstrap']);
|
|
||||||
</script>
|
|
||||||
<script type="text/javascript" src="js/goatConstants.js"></script>
|
|
||||||
<script type="text/javascript" src="js/goatUtil.js"></script>
|
|
||||||
<script type="text/javascript" src="js/goatData.js"></script>
|
|
||||||
<script type="text/javascript" src="js/goatLesson.js"></script>
|
|
||||||
<script type="text/javascript" src="js/goatControllers.js"></script>
|
|
||||||
<!-- end of JS -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
|
||||||
<title>WebGoat</title>
|
<title>WebGoat</title>
|
||||||
</head>
|
</head>
|
||||||
|
<body>
|
||||||
<body class="animated fadeIn" ng-app="goatApp">
|
<section id="container">
|
||||||
<section id="container" ng-controller="goatLesson">
|
|
||||||
<header id="header">
|
<header id="header">
|
||||||
<!--logo start-->
|
<!--logo start-->
|
||||||
<div class="brand">
|
<div class="brand">
|
||||||
@ -80,7 +59,7 @@
|
|||||||
</div><!--lesson title end-->
|
</div><!--lesson title end-->
|
||||||
<div class="user-nav pull-right" style="margin-right: 75px;">
|
<div class="user-nav pull-right" style="margin-right: 75px;">
|
||||||
<div class="dropdown" style="display:inline">
|
<div class="dropdown" style="display:inline">
|
||||||
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu1" ng-disabled="disabled">
|
<button type="button" class="btn btn-default dropdown-toggle" id="dropdownMenu1" >
|
||||||
<i class="fa fa-user"></i> <span class="caret"></span>
|
<i class="fa fa-user"></i> <span class="caret"></span>
|
||||||
</button>
|
</button>
|
||||||
<ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1">
|
<ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="dropdownMenu1">
|
||||||
@ -94,7 +73,7 @@
|
|||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-default right_nav_button" ng-click="showAbout()" data-toggle="tooltip" title="About WebGoat">
|
<button type="button" class="btn btn-default right_nav_button" data-toggle="tooltip" title="About WebGoat">
|
||||||
<i class="fa fa-info"></i>
|
<i class="fa fa-info"></i>
|
||||||
</button>
|
</button>
|
||||||
<a href="mailto:${contactEmail}?Subject=Webgoat%20feedback" target="_top">
|
<a href="mailto:${contactEmail}?Subject=Webgoat%20feedback" target="_top">
|
||||||
@ -107,26 +86,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!--sidebar left start-->
|
|
||||||
<aside class="sidebar" >
|
<aside class="sidebar" >
|
||||||
<div id="leftside-navigation" ng-controller="goatMenu" class="nano">
|
<div id="menuContainer"></div>
|
||||||
<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 {{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, {showSource: lesson.showSource, showHints: lesson.showHints})" 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(stage.id, stage.link, {showSource: stage.showSource, showHints: stage.showHints})" class="selectedClass" id="{{stage.id}}" title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</aside>
|
</aside>
|
||||||
<!--sidebar left end-->
|
<!--sidebar left end-->
|
||||||
|
|
||||||
<!--main content start-->
|
<!--main content start-->
|
||||||
<section class="main-content-wrapper">
|
<section class="main-content-wrapper">
|
||||||
<section id="main-content" > <!--ng-controller="goatLesson"-->
|
<section id="main-content" > <!--ng-controller="goatLesson"-->
|
||||||
@ -134,30 +98,25 @@
|
|||||||
<div class="col-md-8">
|
<div class="col-md-8">
|
||||||
<div class="col-md-12" align="left">
|
<div class="col-md-12" align="left">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel-body">
|
<div id="help-buttons" class="panel-body">
|
||||||
<button type="button" id="showSourceBtn" ng-show="showSource" class="btn btn-primary btn-xs" ng-click="showLessonSource()">Java [Source]</button>
|
<!-- <button type="button" id="showSourceBtn" ng-show="showSource" class="btn btn-primary btn-xs" onclick="showLessonSource()">Java [Source]</button>
|
||||||
<button type="button" id="showSolutionBtn" class="btn btn-primary btn-xs" ng-click="showLessonSolution()">Solution</button>
|
<button type="button" id="showSolutionBtn" class="btn btn-primary btn-xs" onclick="showLessonSolution()">Solution</button>
|
||||||
<button type="button" id="showPlanBtn" class="btn btn-primary btn-xs" ng-click="showLessonPlan()">Lesson Plan</button>
|
<button type="button" id="showPlanBtn" class="btn btn-primary btn-xs" onclick="showLessonPlan()">Lesson Plan</button>
|
||||||
<button type="button" id="showHintsBtn" ng-show="showHints" class="btn btn-primary btn-xs" ng-click="viewHints()">Hints</button>
|
<button type="button" id="showHintsBtn" ng-show="showHints" class="btn btn-primary btn-xs" onclick="viewHints()">Hints</button>
|
||||||
<button type="button" id="restartLessonBtn" class="btn btn-xs" ng-click="restartLesson()">Restart Lesson</button>
|
<button type="button" id="restartLessonBtn" class="btn btn-xs" onclick="restartLesson()">Restart Lesson</button> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="lessonHelp" id="lesson_hint_row">
|
<div class="lessonHelp" id="lesson-hint-row">
|
||||||
<h4>Hints</h4>
|
<h4>Hints</h4>
|
||||||
<div class="panel" >
|
<div class="panel" >
|
||||||
<div class="panel-body" id="lesson_hint">
|
<div class="panel-body" id="lesson_hint">
|
||||||
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-left" id="showPrevHintBtn" ng-click="viewPrevHint()"></span>
|
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-left" id="showPrevHintBtn" onclick="viewPrevHint()"></span>
|
||||||
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-right" id="showNextHintBtn" ng-click="viewNextHint()"></span>
|
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-right" id="showNextHintBtn" onclick="viewNextHint()"></span>
|
||||||
<br/>
|
<br/>
|
||||||
<span ng-show="showHints" bind-html-unsafe="curHint"></span>
|
<span ng-show="showHints" bind-html-unsafe="curHint"></span>
|
||||||
<!--<span id="curHintContainer"></span>-->
|
<!--<span id="curHintContainer"></span>-->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-12">
|
|
||||||
<div class="panel" >
|
|
||||||
<div class="panel-body" id="lesson_content">
|
<div class="panel-body" id="lesson_content">
|
||||||
<b>This should default to the "How to Work with Webgoat" lesson</b>
|
<b>This should default to the "How to Work with Webgoat" lesson</b>
|
||||||
</div>
|
</div>
|
||||||
@ -176,10 +135,10 @@
|
|||||||
<div id="cookiesAndParamsView">
|
<div id="cookiesAndParamsView">
|
||||||
<div class="cookiesView">
|
<div class="cookiesView">
|
||||||
<h4>Cookies</h4>
|
<h4>Cookies</h4>
|
||||||
<div class="cookieContainer" ng-repeat="cookie in cookies">
|
<!-- <div class="cookieContainer" ng-repeat="cookie in cookies">
|
||||||
<table class="cookieTable table-striped table-nonfluid" >
|
<table class="cookieTable table-striped table-nonfluid" >
|
||||||
<thead>
|
<thead>
|
||||||
<tr><th class="col-sm-1"></th><th class="col-sm-1"></th></tr> <!-- Field / Value -->
|
<tr><th class="col-sm-1"></th><th class="col-sm-1"></th></tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr ng-repeat="(key, value) in cookie">
|
<tr ng-repeat="(key, value) in cookie">
|
||||||
@ -187,25 +146,11 @@
|
|||||||
<td>{{value}}</td>
|
<td>{{value}}</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<!--<li ng-repeat="(key, value) in cookie">{{key}} :: {{ value}} </td>-->
|
|
||||||
<!--</ul>-->
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
<div id="paramsView"> <!--class="paramsView"-->
|
<div id="paramsView"> <!--class="paramsView"-->
|
||||||
<h4>Params</h4>
|
<h4>Params</h4>
|
||||||
<table class="paramsTable table-striped table-nonfluid" id="paramsTable">
|
|
||||||
<thead>
|
|
||||||
<tr><th>Param</th><th>Value</th></tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr ng-repeat="param in parameters">
|
|
||||||
<td>{{param.name}}</td>
|
|
||||||
<td>{{param.value}}</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -214,44 +159,18 @@
|
|||||||
</div><!--col-md-4 end-->
|
</div><!--col-md-4 end-->
|
||||||
</div>
|
</div>
|
||||||
<div id="lessonHelpsWrapper">
|
<div id="lessonHelpsWrapper">
|
||||||
<!--div class="row lessonHelp" id="lesson_hint_row">
|
<div class="row lessonHelp" id="lesson-cookies-row">
|
||||||
<div class="col-md-12">
|
|
||||||
<h4>Hints</h4>
|
|
||||||
<div class="panel" >
|
|
||||||
<div class="panel-body" id="lesson_hint">
|
|
||||||
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-left" id="showPrevHintBtn" ng-click="viewPrevHint()"></span>
|
|
||||||
<span class="glyphicon-class glyphicon glyphicon-circle-arrow-right" id="showNextHintBtn" ng-click="viewNextHint()"></span>
|
|
||||||
<br/>
|
|
||||||
{{curHint}}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div-->
|
|
||||||
<div class="row lessonHelp" id="lesson_cookies_row">
|
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<h4>Lesson Parameters and Cookies</h4>
|
<h4>Lesson Parameters and Cookies</h4>
|
||||||
<div class="panel" >
|
|
||||||
<div class="panel-body" id="lesson_cookies">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row lessonHelp" id="lesson_hint_row">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<h4>Lesson Hints</h4>
|
|
||||||
<div class="panel" >
|
|
||||||
<div class="panel-body" id="lesson_hint">
|
|
||||||
|
|
||||||
</div>
|
<div class="row lessonHelp" id="lesson-plan-row">
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row lessonHelp" id="lesson_plan_row">
|
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<h4>Lesson Plan</h4>
|
<h4>Lesson Plan</h4>
|
||||||
<div class="panel" >
|
<div class="panel" >
|
||||||
<div class="panel-body" id="lesson_plan">
|
<div class="panel-body" id="lesson-plan">
|
||||||
<!-- allowing jQuery to handle this one -->
|
<!-- allowing jQuery to handle this one -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -271,7 +190,7 @@
|
|||||||
<h4>Lesson Source Code</h4>
|
<h4>Lesson Source Code</h4>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel-body" id="lesson_source">
|
<div class="panel-body" id="lesson_source">
|
||||||
<pre>{{source}}</pre>
|
<!-- <pre>{{source}}</pre> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -280,20 +199,8 @@
|
|||||||
</section>
|
</section>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!--main content end-->
|
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!--main content end-->
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
$(document).ready(function() {
|
|
||||||
//TODO merge appliction.js code into other js files
|
|
||||||
app.init();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- About WebGoat Modal -->
|
<!-- About WebGoat Modal -->
|
||||||
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
<div class="modal fade" id="aboutModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||||
@ -304,4 +211,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,40 +1,38 @@
|
|||||||
define(['jquery',
|
define(['jquery',
|
||||||
'underscore',
|
'underscore',
|
||||||
'libs/backbone',
|
'libs/backbone',
|
||||||
'goatApp/model/LessonData'
|
'goatApp/model/LessonContentData',
|
||||||
|
'goatApp/view/LessonContentView'
|
||||||
],
|
],
|
||||||
function($,_,Backbone,LessonData) {
|
function($,_,Backbone,LessonContent) {
|
||||||
'use strict'
|
'use strict'
|
||||||
//private vars
|
|
||||||
|
|
||||||
|
var Controller = function(options) {
|
||||||
|
this.lessonView = options.lessonView;
|
||||||
|
this.lessonContent = new LessonContentData();
|
||||||
|
|
||||||
var controller = function() {
|
_.extend(this,Backbone.Events);
|
||||||
|
this.start = function() {
|
||||||
|
this.listenTo(this.lessonContent,'contentLoaded',this.onContentLoaded);
|
||||||
|
}
|
||||||
|
|
||||||
|
//load View, which can pull data
|
||||||
this.loadLesson = function(scr,menu) {
|
this.loadLesson = function(scr,menu) {
|
||||||
var curLessonData = new LessonData({
|
this.lessonContent.loadContent({
|
||||||
'screen': encodeURIComponent(scr),
|
'screen': encodeURIComponent(scr),
|
||||||
'menu': encodeURIComponent(menu),
|
'menu': encodeURIComponent(menu),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//this.registerListeners();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.onContentLoaded = function() {
|
||||||
|
//this.lessonView = new LessonContentView({content:LessonContent.content});
|
||||||
|
//this.lessonView.render();
|
||||||
|
console.debug('loading other stuff');
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
return Controller;
|
||||||
return controller;
|
|
||||||
|
|
||||||
//var curScreen,curMenu;
|
|
||||||
|
|
||||||
//return {
|
|
||||||
// 'screen':curScreen
|
|
||||||
// loadLesson called from the router to load the given lesson
|
|
||||||
/*loadLesson: function (src,curMenu) {
|
|
||||||
var curLesson = new LessonData({
|
|
||||||
'screen': encodeURIComponent(scr),
|
|
||||||
'menu': encodeURIComponent(curMenu),
|
|
||||||
});
|
|
||||||
|
|
||||||
//set listeners
|
|
||||||
|
|
||||||
},
|
|
||||||
restartLesson: function () {
|
|
||||||
|
|
||||||
}
|
|
||||||
//getters & setters*/
|
|
||||||
//};
|
|
||||||
});
|
});
|
||||||
@ -1,3 +1,4 @@
|
|||||||
define(['jquery','underscore','backbone','goatApp/model/goatMenu','goatApp/view/MenuView'], function($,_,Backbone,MenuData,MenuView) {
|
define(['jquery','underscore','backbone','goatApp/model/MenuData','goatApp/view/MenuView'],
|
||||||
|
function($,_,Backbone,MenuData,MenuView) {
|
||||||
|
|
||||||
});
|
});
|
||||||
22
src/main/webapp/js/goatApp/model/LessonContentData.js
Normal file
22
src/main/webapp/js/goatApp/model/LessonContentData.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
define(['jquery', 'underscore','backbone'], function($,_,Backbone){
|
||||||
|
|
||||||
|
return Backbone.Model.extend({
|
||||||
|
urlRoot:null,
|
||||||
|
defaults: {
|
||||||
|
items:null,
|
||||||
|
selectedItem:null
|
||||||
|
},
|
||||||
|
initialize: function (options) {
|
||||||
|
this.baseUrlRoot = 'attack?Screen=';//
|
||||||
|
},
|
||||||
|
loadData: function(options) {
|
||||||
|
this.urlRoot = this.baseUrlRoot + +options.screen + '&menu=' + options.menu;
|
||||||
|
var self = this;
|
||||||
|
this.fetch().then(function(content){
|
||||||
|
alert('content loaded');
|
||||||
|
self.content = content;
|
||||||
|
self.trigger('contentLoaded');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
57
src/main/webapp/js/goatApp/model/MenuData.js
Normal file
57
src/main/webapp/js/goatApp/model/MenuData.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
//var goatApp = goatApp || {};
|
||||||
|
|
||||||
|
define(['jquery','underscore','backbone'], function($,_,Backbone) {
|
||||||
|
|
||||||
|
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);
|
||||||
|
this.setDataItems(menuItems);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
update: function() {
|
||||||
|
var self = this;
|
||||||
|
this.fetch().then(function(menuItems) {
|
||||||
|
menuItems = goatUtils.enhanceMenuData(menuItems,this.selectedItem);
|
||||||
|
self.setDataItems(menuItems);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
setDataItems: function (data) {
|
||||||
|
this.items = data;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
*/
|
||||||
189
src/main/webapp/js/goatApp/support/goatUtil.js
Normal file
189
src/main/webapp/js/goatApp/support/goatUtil.js
Normal file
@ -0,0 +1,189 @@
|
|||||||
|
goat.utils = {
|
||||||
|
//TODO add recursion to handle arr[i].children objects
|
||||||
|
// ... in case lower-level's need classes as well ... don't right now
|
||||||
|
addMenuClasses: function(arr) {
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
var menuItem = arr[i];
|
||||||
|
//console.log(menuItem);
|
||||||
|
if (menuItem.type && menuItem.type === 'CATEGORY') {
|
||||||
|
menuItem.class = 'fa-angle-right pull-right';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
},
|
||||||
|
debugFormSubmission: false,
|
||||||
|
// pre-submit callback
|
||||||
|
showRequest: function(formData, jqForm, options) {
|
||||||
|
if (goat.utils.debugFormSubmission) {
|
||||||
|
// formData is an array; here we use $.param to convert it to a string to display it
|
||||||
|
// but the form plugin does this for you automatically when it submits the data
|
||||||
|
var queryString = $.param(formData);
|
||||||
|
|
||||||
|
// jqForm is a jQuery object encapsulating the form element. To access the
|
||||||
|
// DOM element for the form do this:
|
||||||
|
// var formElement = jqForm[0];
|
||||||
|
|
||||||
|
alert('About to submit: \n\n' + queryString);
|
||||||
|
}
|
||||||
|
// here we could return false to prevent the form from being submitted;
|
||||||
|
// returning anything other than false will allow the form submit to continue
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
// post-submit callback
|
||||||
|
showResponse: function(responseText, statusText, xhr, $form) {
|
||||||
|
// for normal html responses, the first argument to the success callback
|
||||||
|
// is the XMLHttpRequest object's responseText property
|
||||||
|
|
||||||
|
// if the ajaxForm method was passed an Options Object with the dataType
|
||||||
|
// property set to 'xml' then the first argument to the success callback
|
||||||
|
// is the XMLHttpRequest object's responseXML property
|
||||||
|
|
||||||
|
// if the ajaxForm method was passed an Options Object with the dataType
|
||||||
|
// property set to 'json' then the first argument to the success callback
|
||||||
|
// is the json data object returned by the server
|
||||||
|
if (goat.utils.debugFormSubmission) {
|
||||||
|
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
|
||||||
|
'\n\nThe output div should have already been updated with the responseText.');
|
||||||
|
}
|
||||||
|
// update lesson cookies and params
|
||||||
|
// make any embedded forms ajaxy
|
||||||
|
goat.utils.showLessonCookiesAndParams();
|
||||||
|
// forms and links are now hooked with each standard lesson render (see Java class Screen.getContent())
|
||||||
|
// but these are safe to call twice
|
||||||
|
goat.utils.makeFormsAjax();
|
||||||
|
goat.utils.ajaxifyAttackHref(); //TODO find some way to hook scope for current menu. Likely needs larger refactor which is already started/stashed
|
||||||
|
//refresh menu
|
||||||
|
angular.element($('#leftside-navigation')).scope().renderMenu();
|
||||||
|
},
|
||||||
|
makeFormsAjax: function() {
|
||||||
|
// make all forms ajax forms
|
||||||
|
var options = {
|
||||||
|
target: '#lesson_content', // target element(s) to be updated with server response
|
||||||
|
beforeSubmit: goat.utils.showRequest, // pre-submit callback, comment out after debugging
|
||||||
|
success: goat.utils.showResponse // post-submit callback, comment out after debugging
|
||||||
|
|
||||||
|
// other available options:
|
||||||
|
//url: url // override for form's 'action' attribute
|
||||||
|
//type: type // 'get' or 'post', override for form's 'method' attribute
|
||||||
|
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
|
||||||
|
//clearForm: true // clear all form fields after successful submit
|
||||||
|
//resetForm: true // reset the form after successful submit
|
||||||
|
|
||||||
|
// $.ajax options can be used here too, for example:
|
||||||
|
//timeout: 3000
|
||||||
|
};
|
||||||
|
//console.log("Hooking any lesson forms to make them ajax");
|
||||||
|
$("form").ajaxForm(options);
|
||||||
|
},
|
||||||
|
displayButton: function(id, show) {
|
||||||
|
if ($('#' + id)) {
|
||||||
|
if (show) {
|
||||||
|
$('#' + id).show();
|
||||||
|
} else {
|
||||||
|
$('#' + id).hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showLessonCookiesAndParams: function() {
|
||||||
|
$.get(goatConstants.cookieService, {}, function(reply) {
|
||||||
|
$("#lesson_cookies").html(reply);
|
||||||
|
}, "html");
|
||||||
|
},
|
||||||
|
showLessonHints: function() {
|
||||||
|
$('.lessonHelp').hide();
|
||||||
|
$('#lesson_hint').html();
|
||||||
|
$('#lesson_hint_row').show();
|
||||||
|
},
|
||||||
|
showLessonSource: function(source) {
|
||||||
|
$('.lessonHelp').hide();
|
||||||
|
//$('#lesson_source').html("<pre>"+goat.lesson.lessonInfo.source+"</pre>");
|
||||||
|
$('#lesson_source_row').show();
|
||||||
|
goat.utils.scrollToHelp();
|
||||||
|
},
|
||||||
|
showLessonSolution: function() {
|
||||||
|
$('.lessonHelp').hide();
|
||||||
|
$('#lesson_solution').html(goat.lesson.lessonInfo.solution);
|
||||||
|
$('#lesson_solution_row').show();
|
||||||
|
goat.utils.scrollToHelp();
|
||||||
|
},
|
||||||
|
showLessonPlan: function(plan) {
|
||||||
|
$('.lessonHelp').hide();
|
||||||
|
$("#lesson_plan").html(goat.lesson.lessonInfo.plan);
|
||||||
|
$('#lesson_plan_row').show();
|
||||||
|
goat.utils.scrollToHelp();
|
||||||
|
},
|
||||||
|
scrollToHelp: function() {
|
||||||
|
$('#leftside-navigation').height($('#main-content').height() + 15)
|
||||||
|
var target = $('#lessonHelpsWrapper');
|
||||||
|
goat.utils.scrollEasy(target);
|
||||||
|
},
|
||||||
|
scrollToTop: function() {
|
||||||
|
$('.lessonHelp').hide();
|
||||||
|
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;
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
makeId: function(lessonName) {
|
||||||
|
return lessonName.replace(/\s|\(|\)|\!|\:|\;|\@|\#|\$|\%|\^|\&|\*/g, '');//TODO move the replace routine into util function
|
||||||
|
},
|
||||||
|
ajaxifyAttackHref: function() {
|
||||||
|
/* Jason I commented this implementation out
|
||||||
|
* I think we should show the attack link on the lessons that need it by modifying the lesson
|
||||||
|
* itself or we could add a new button up top for "show lesson link"
|
||||||
|
$.each($('a[href^="attack?"]'),
|
||||||
|
function(i,el) {
|
||||||
|
var url = $(el).attr('href');
|
||||||
|
$(el).attr('href','#');
|
||||||
|
$(el).attr('link',url);
|
||||||
|
//TODO pull currentMenuId
|
||||||
|
$(el).click(
|
||||||
|
function() {
|
||||||
|
var _url = $(el).attr('link');
|
||||||
|
$.get(_url, {success:showResponse});
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
);
|
||||||
|
*/
|
||||||
|
// alternate implementation
|
||||||
|
// unbind any bound events so we are safe to be called twice
|
||||||
|
$('#lesson_content a').unbind('click');
|
||||||
|
$('#lesson_content a').bind('click', function(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
$.get(this.href, {}, function(response) {
|
||||||
|
$('#lesson_content').html(response);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
$(window).resize(function() {
|
||||||
|
//$('#leftside-navigation').css('height',$('div.panel-body').height());
|
||||||
|
console.log($(window).height());
|
||||||
|
});
|
||||||
23
src/main/webapp/js/goatApp/view/LessonContentView.js
Normal file
23
src/main/webapp/js/goatApp/view/LessonContentView.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
//LessonContentView
|
||||||
|
define(['jquery',
|
||||||
|
'underscore',
|
||||||
|
'backbone',
|
||||||
|
'goatApp/model/LessonContentData'],
|
||||||
|
function($,_,Backbone,LessonData) {
|
||||||
|
var contentView = Backbone.View.extend({
|
||||||
|
el:'#lessonContent',
|
||||||
|
initialize: function(options) {
|
||||||
|
//this.content = options.content;
|
||||||
|
this.lessonData = {};
|
||||||
|
this.listenTo(this.lessonData,'sync',this.render);
|
||||||
|
},
|
||||||
|
loadLesson: function(options) {
|
||||||
|
this.lessonData = new LessonData(options.screen,options.menu);
|
||||||
|
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
alert('render');
|
||||||
|
this.$el.html(this.content);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
@ -1,4 +1,4 @@
|
|||||||
define(['jquery','underscore','backbone','goatApp/model/goatMenu'], function($,_,Backbone,MenuData) {
|
define(['jquery','underscore','backbone','goatApp/model/MenuData'], function($,_,Backbone,MenuData) {
|
||||||
|
|
||||||
return Backbone.View.extend({
|
return Backbone.View.extend({
|
||||||
el:'#menuContainer',
|
el:'#menuContainer',
|
||||||
|
|||||||
@ -1,34 +1,44 @@
|
|||||||
define(['jquery',
|
define(['jquery',
|
||||||
'underscore',
|
'underscore',
|
||||||
'backbone',
|
'backbone',
|
||||||
'goatApp/controller/LessonController'
|
'goatApp/controller/LessonController',
|
||||||
], function ($,_,Backbone,LessonController) {
|
'goatApp/controller/MenuController',
|
||||||
var GoatAppRouter = Backbone.Router.extend({
|
'goatApp/view/LessonContentView',
|
||||||
routes: {
|
'goatApp/view/MenuView'
|
||||||
//#....
|
], function ($,_,Backbone,LessonController,MenuController,LessonView,MenuView) {
|
||||||
'welcome':'welcomeRoute',
|
|
||||||
'attack/:scr/:menu':'attackRoute' //
|
|
||||||
},
|
|
||||||
lessonController: new LessonController()
|
|
||||||
});
|
|
||||||
|
|
||||||
|
var lessonView = new LessonContentView();
|
||||||
|
var menuView = new MenuView();
|
||||||
var init = function() {
|
var GoatAppRouter = Backbone.Router.extend({
|
||||||
goatRouter = new GoatAppRouter();
|
routes: {
|
||||||
|
//#....
|
||||||
goatRouter.on('route:attackRoute', function(scr,menu) {
|
'welcome':'welcomeRoute',
|
||||||
this.lessonController.loadLesson(scr,menu);
|
'attack/:scr/:menu':'attackRoute' //
|
||||||
|
},
|
||||||
|
lessoonController: lessoonController({
|
||||||
|
lessonView:lessonView
|
||||||
|
}),
|
||||||
|
menuView: new MenuController({
|
||||||
|
menuView:menuView
|
||||||
|
});
|
||||||
});
|
});
|
||||||
goatRouter.on('route:welcomeRoute', function() {
|
|
||||||
alert('welcome route');
|
|
||||||
});
|
|
||||||
// init the history/router
|
|
||||||
Backbone.history.start();
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
var init = function() {
|
||||||
init:init
|
goatRouter = new GoatAppRouter();
|
||||||
};
|
|
||||||
|
goatRouter.on('route:attackRoute', function(scr,menu) {
|
||||||
|
this.lessonController.loadLesson(scr,menu);
|
||||||
|
//update menu
|
||||||
|
});
|
||||||
|
goatRouter.on('route:welcomeRoute', function() {
|
||||||
|
alert('welcome route');
|
||||||
|
});
|
||||||
|
// init the history/router
|
||||||
|
Backbone.history.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
init:init
|
||||||
|
};
|
||||||
|
|
||||||
});
|
});
|
||||||
Reference in New Issue
Block a user