Merge branch 'next' of https://github.com/WebGoat/WebGoat into next

Conflicts:
	src/main/webapp/WEB-INF/pages/main_new.jsp
	src/main/webapp/css/main.css
overrode the local with the remote version
This commit is contained in:
diver-sity 2014-09-05 06:03:48 +10:00
commit 6d431ca1fd
10 changed files with 644 additions and 297 deletions

View File

@ -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,

View File

@ -1,4 +1,4 @@
s<!DOCTYPE html>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
@ -53,6 +53,20 @@ s<!DOCTYPE html>
<i class="fa fa-bars"></i>
</button>
</div><!--toggle navigation end-->
<div class="lessonTitle">
<h1>Lesson Title in here</h1>
</div><!--lesson title end-->
<div class="user-nav pull-right">
<button type="button" class="btn btn-default">
<i class="fa fa-info"></i>
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-envelope"></i>
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-user"></i>
</button>
</div>
</header>
<!--sidebar left start-->
<aside class="sidebar">
@ -160,20 +174,46 @@ s<!DOCTYPE html>
<!--main content start-->
<section class="main-content-wrapper">
<section id="main-content">
<div class="row">
<div class="col-md-12">
<div class="panel">
<div class="panel-body">
<h1>About WebGoat</h1> <span style="btn">Text</span>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat feugiat nunc, non vulputate urna dictum ut. Nam consectetur porttitor diam ut ultricies. Aenean dolor dolor, congue sed ornare non, elementum in mauris. Phasellus orci sem, rhoncus eu laoreet eu, aliquam nec ante. Suspendisse sit amet justo eget eros tempor tincidunt vel quis justo. Sed pulvinar enim id neque pellentesque, eu rhoncus lorem eleifend. Morbi congue tortor sit amet pulvinar posuere.</p>
<p>Integer rhoncus gravida arcu, at bibendum magna feugiat sit amet. Vivamus id lacinia massa. Praesent eu quam ullamcorper, tempor elit nec, lobortis massa. In in eros eu augue rhoncus semper. Vestibulum ornare purus vitae bibendum vulputate. Cras eleifend commodo lectus, eget pharetra justo mollis quis. Donec tempor magna lectus, vitae suscipit turpis venenatis et. Nulla facilisi.</p>
<p>Nam placerat magna in massa euismod fringilla. Pellentesque in cursus risus, eu hendrerit ligula. Quisque ultrices eget tortor ut eleifend. Praesent auctor libero nec quam fringilla faucibus. Curabitur cursus risus eu faucibus rutrum. Morbi dapibus nulla risus, et euismod eros posuere volutpat. Quisque ut diam diam. Quisque sed enim tortor. Suspendisse commodo magna nec felis ultricies laoreet. Donec sit amet vehicula eros. Phasellus at dapibus enim. Sed massa quam, aliquet eu mattis at, porttitor a nisi.</p>
<hr />
<p>Nam placerat magna in massa euismod fringilla. Pellentesque in cursus risus, eu hendrerit ligula. Quisque ultrices eget tortor ut eleifend. Praesent auctor libero nec quam fringilla faucibus. Curabitur cursus risus eu faucibus rutrum. Morbi dapibus nulla risus, et euismod eros posuere volutpat. Quisque ut diam diam. Quisque sed enim tortor. Suspendisse commodo magna nec felis ultricies laoreet. Donec sit amet vehicula eros. Phasellus at dapibus enim. Sed massa quam, aliquet eu mattis at, porttitor a nisi.</p>
<div class="row">
<div class="col-md-8">
<div class="col-md-12" align="left">
<div class="panel">
<div class="panel-body">
<button type="button" class="btn btn-primary">Java [Source]</button>
<button type="button" class="btn btn-primary">Solution</button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="panel">
<div class="panel-body">
<h1>About WebGoat</h1>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque volutpat feugiat nunc, non vulputate urna dictum ut. Nam consectetur porttitor diam ut ultricies. Aenean dolor dolor, congue sed ornare non, elementum in mauris. Phasellus orci sem, rhoncus eu laoreet eu, aliquam nec ante. Suspendisse sit amet justo eget eros tempor tincidunt vel quis justo. Sed pulvinar enim id neque pellentesque, eu rhoncus lorem eleifend. Morbi congue tortor sit amet pulvinar posuere.</p>
<p>Integer rhoncus gravida arcu, at bibendum magna feugiat sit amet. Vivamus id lacinia massa. Praesent eu quam ullamcorper, tempor elit nec, lobortis massa. In in eros eu augue rhoncus semper. Vestibulum ornare purus vitae bibendum vulputate. Cras eleifend commodo lectus, eget pharetra justo mollis quis. Donec tempor magna lectus, vitae suscipit turpis venenatis et. Nulla facilisi.</p>
<p>Nam placerat magna in massa euismod fringilla. Pellentesque in cursus risus, eu hendrerit ligula. Quisque ultrices eget tortor ut eleifend. Praesent auctor libero nec quam fringilla faucibus. Curabitur cursus risus eu faucibus rutrum. Morbi dapibus nulla risus, et euismod eros posuere volutpat. Quisque ut diam diam. Quisque sed enim tortor. Suspendisse commodo magna nec felis ultricies laoreet. Donec sit amet vehicula eros. Phasellus at dapibus enim. Sed massa quam, aliquet eu mattis at, porttitor a nisi.</p>
<hr />
<p>Nam placerat magna in massa euismod fringilla. Pellentesque in cursus risus, eu hendrerit ligula. Quisque ultrices eget tortor ut eleifend. Praesent auctor libero nec quam fringilla faucibus. Curabitur cursus risus eu faucibus rutrum. Morbi dapibus nulla risus, et euismod eros posuere volutpat. Quisque ut diam diam. Quisque sed enim tortor. Suspendisse commodo magna nec felis ultricies laoreet. Donec sit amet vehicula eros. Phasellus at dapibus enim. Sed massa quam, aliquet eu mattis at, porttitor a nisi.</p>
</div>
</div>
</div>
</div>
</div><!--col-md-8 end-->
<div class="col-md-4">
<div class="col-md-12">
<div class="panel">
<div class="panel-body">
<div align="left">
<button type="button" class="btn btn-default">Params</button>
<button type="button" class="btn btn-default">Hints</button>
<button type="button" class="btn btn-default">Cookies</button>
</div>
<hr />
<h3>Hints</h3>
<p>Nam placerat magna in massa euismod fringilla. Pellentesque in cursus risus, eu hendrerit ligula. Quisque ultrices eget tortor ut eleifend. Praesent auctor libero nec quam fringilla faucibus. Curabitur cursus risus eu faucibus rutrum. Morbi dapibus nulla risus, et euismod eros posuere volutpat. Quisque ut diam diam. Quisque sed enim tortor. Suspendisse commodo magna nec felis ultricies laoreet. Donec sit amet vehicula eros. Phasellus at dapibus enim. Sed massa quam, aliquet eu mattis at, porttitor a nisi.</p>
</div>
</div>
</div>
</div><!--col-md-4 end-->
</div>
</section>
</section>

View File

@ -8,168 +8,226 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<!-- CSS -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css">
<!-- Fonts from Font Awsome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- CSS Animate -->
<link rel="stylesheet" href="css/animate.css">
<!-- Custom styles for this theme -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<!-- CSS -->
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css"/>
<!-- Fonts from Font Awsome -->
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<!-- CSS Animate -->
<link rel="stylesheet" href="css/animate.css"/>
<!-- Custom styles for this theme -->
<link rel="stylesheet" href="css/main.css"/>
<!-- end of CSS -->
<!-- JS -->
<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>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<!--Global JS-->
<script src="js/jquery/jquery-1.10.2.min.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/goatControllers.js"></script>
<script type="text/javascript" src="js/jquery/jquery-ui-1.10.4.custom.min.js"></script>
<!-- end of JS -->
<!-- JS -->
<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>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<!--Global JS-->
<script src="js/jquery/jquery-1.10.2.min.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" />
<title>WebGoat V6.0 fsdafasd</title>
<title>WebGoat V6.0</title>
</head>
<body class="animated fadeIn" ng-app="goatApp" ng-controller="goatLesson">
<section id="container">
<header id="header">
<!--logo start-->
<div class="brand">
<a href="/webgoat/start.mvc" class="logo"><span>Web</span>Goat</a>
</div>
<!--logo end-->
<div class="toggle-navigation toggle-left">
<button type="button" class="btn btn-default" id="toggle-left" data-toggle="tooltip" data-placement="right" title="Toggle Navigation">
<i class="fa fa-bars"></i>
</button>
<span id="lessonTitle">Welcome To WebGoat</span>
<body class="animated fadeIn" ng-app="goatApp">
<section id="container">
<header id="header">
<!--logo start-->
<div class="brand">
<a href="${pageContext.request.contextPath}/start.mvc" class="logo"><span>Web</span>Goat</a>
</div>
<!--logo end-->
<div class="toggle-navigation toggle-left">
<button type="button" class="btn btn-default" id="toggle-left" data-toggle="tooltip" data-placement="right" title="Toggle Navigation">
<i class="fa fa-bars"></i>
</button>
</div><!--toggle navigation end-->
<div class="lessonTitle">
<h1>Lesson Title in here</h1>
</div><!--lesson title end-->
<div class="user-nav pull-right">
<button type="button" class="btn btn-default">
<i class="fa fa-info"></i>
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-envelope"></i>
</button>
<button type="button" class="btn btn-default">
<i class="fa fa-user"></i>
</button>
</div>
</header>
</div><!--toggle navigation end-->
</header>
<!--sidebar left start-->
<aside class="sidebar">
<div id="leftside-navigation" class="nano" >
<ul id="accordion" class="nano-content">
<li class="sub-menu" ng-repeat="item in menuTopics">
<h6>
<!--sidebar left start-->
<aside class="sidebar">
<div id="leftside-navigation" class="nano" ng-controller="goatLessonMenu">
<ul class="nano-content">
<li class="sub-menu" ng-repeat="item in menuTopics">
<a ng-click="expanded = !expanded" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a>
</h6>
<div>
<ul class="slideDown" ng-show="expanded">
<li ng-repeat="lesson in item.children">
<a ng-click="renderLesson(lesson.link)" title="link to {{lesson.name}}"
href="">{{lesson.name}}</a>
<span ng-repeat="stage in lesson.children" >
<a ng-click="renderLesson(stage.link)" title="link to {{stage.name}}"
href="">{{stage.name}}</a>
</span>
</li>
</ul>
<ul class="slideDown" ng-show="expanded">
<li ng-repeat="lesson in item.children">
<a ng-click="renderLesson(lesson.link)" title="link to {{lesson.name}}" href="">{{lesson.name}}</a>
<span ng-repeat="stage in lesson.children" >
<a ng-click="renderLesson(stage.link)" title="link to {{stage.name}}" href="">{{stage.name}}</a>
</span>
</li>
</ul>
</li>
</ul>
</div>
</aside>
<!--sidebar left end-->
<!--main content start-->
<section class="main-content-wrapper">
<section id="main-content" ng-controller="lessonHelpController">
<div class="row">
<div class="col-md-8">
<div class="col-md-12" align="left">
<div class="panel">
<div class="panel-body">
<button type="button" id="showSourceBtn" class="btn btn-primary">Java [Source]</button>
<button type="button" id="showSolutionBtn" class="btn btn-primary">Solution</button>
</div>
</div>
</div>
<div class="col-md-12">
<div class="panel" id="buttonPanel">
<button type="button" id="showParamsCookiesBtn" class="btn btn-primary btn-xs" ng-click="viewCookiesAndParams()">Params/Cookies</button>
<button type="button" id="showHintsBtn" class="btn btn-primary btn-xs lessonHelpBtn">Hints</button>
<button type="button" id="showPlanBtn" class="btn btn-primary btn-xs lessonHelpBtn">Lesson Plan</button>
<button type="button" id="showSourceBtn" class="btn btn-primary btn-xs lessonHelpBtn">Java [Source]</button> <!-- ng-click="showSource('lg') -->
<button type="button" id="showSolutionBtn" class="btn btn-primary btn-xs lessonHelpBtn">Solution</button> <!-- ng-click="showSolution('lg') -->
</div>
<div class="panel" id="cookiesAndParams">
<div class="cookiesView">
cookies:
<ul ng-repeat="cookie in cookies">
<li ng-repeat="(key, value) in cookie">{{key}} :: {{ value}} </td>
</ul>
</div>
<div> <!--class="paramsView"-->
params:<br/>
<ul>
<li ng-repeat="param in params">
{{param.name}} = {{param.value}}
</li>
</ul>
</div>
</div>
<div class="panel" >
<div class="panel-body" id="lesson_content">
<b>This should default to the "How to Work with Webgoat" lesson</b>
</div>
</div>
</div>
</div><!--col-md-8 end-->
<div class="col-md-4">
<div class="col-md-12">
<div class="panel">
<div class="panel-body">
<div align="left">
<button id="showParamsCookiesBtn" type="button" class="btn btn-default">Params / Cookies</button>
<button id="showHintsBtn" type="button" class="btn btn-default">Hints</button>
<button id="showPlanBtn" type="button" class="btn btn-default">Lesson Plan</button>
</div>
<hr />
<h3>Hints</h3>
<p>Nam placerat magna in massa euismod fringilla. Pellentesque in cursus risus, eu hendrerit ligula. Quisque ultrices eget tortor ut eleifend. Praesent auctor libero nec quam fringilla faucibus. Curabitur cursus risus eu faucibus rutrum. Morbi dapibus nulla risus, et euismod eros posuere volutpat. Quisque ut diam diam. Quisque sed enim tortor. Suspendisse commodo magna nec felis ultricies laoreet. Donec sit amet vehicula eros. Phasellus at dapibus enim. Sed massa quam, aliquet eu mattis at, porttitor a nisi.</p>
</div>
</div>
</div>
</div><!--col-md-4 end-->
</div>
<div id="lessonHelpsWrapper">
<div class="row lessonHelp" id="lesson_cookies_row">
<div class="col-md-12">
<h4>Lesson Parameters and Cookies</h4>
<div class="panel" >
<div class="panel-body" id="lesson_cookies">
</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>
</div>
</div>
<div class="row lessonHelp" id="lesson_plan_row">
<div class="col-md-12">
<h4>Lesson Plan</h4>
<div class="panel" >
<div class="panel-body" id="lesson_plan">
</div>
</div>
</div>
</div>
<div class="row lessonHelp" id="lesson_solution_row">
<div class="col-md-12">
<h4>Lesson Solution</h4>
<div class="panel" >
<div class="panel-body" id="lesson_solution">
</div>
</div>
</div>
</div>
<div class="row lessonHelp" id="lesson_source_row">
<div class="col-md-12">
<h4>Lesson Source Code</h4>
<div class="panel" >
<div class="panel-body" id="lesson_source">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</aside>
<!--sidebar left end-->
<!--main content start-->
<section class="main-content-wrapper">
<section id="main-content">
<div class="row">
<div class="col-md-12">
<div class="panel" id="buttonPanel">
<button type="button" class="btn btn-primary btn-xs">Params/Cookies</button>
<button type="button" class="btn btn-primary btn-xs">Hints</button>
<button type="button" class="btn btn-primary btn-xs">Lesson Plan</button>
<button type="button" class="btn btn-primary btn-xs" ng-click="showSource('lg')">Java [Source]</button>
<button type="button" class="btn btn-primary btn-xs" ng-click="showSolution('lg')">Solution</button>
</div>
<div class="panel" >
<div class="panel-body" id="lesson_content">
<b>This should default to the "How to Work with Webgoat" lesson</b>
</div>
</div>
</div>
</div>
<div class="row" id="lesson_cookies_row">
<div class="col-md-12">
<h4>Lesson Parameters and Cookies</h4>
<div class="panel" >
<div class="panel-body" id="lesson_cookies">
1
</div>
</div>
</div>
</div>
<div class="row" 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>
</div>
</div>
<div class="row" id="lesson_plan_row">
<div class="col-md-12">
<h4>Lesson Plan</h4>
<div class="panel" >
<div class="panel-body" id="lesson_plan">
</div>
</div>
</div>
</div>
<div class="row" id="lesson_solution_row">
<div class="col-md-12">
<h4>Lesson Solution</h4>
<div class="panel" >
<div class="panel-body" id="lesson_solution">
</div>
</div>
</div>
</div>
<div class="row" id="lesson_source_row">
<div class="col-md-12">
<h4>Lesson Source Code</h4>
<div class="panel" >
<div class="panel-body" id="lesson_source">
</div>
</div>
</div>
</div>
</div>
</section>
</section>
<!--main content end-->
</section>
<!--main content end-->
@ -179,81 +237,82 @@
<!-- TODO pull source into project instead of loading from external -->
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
//Load global functions
// set this to true if you want to see form submissions
// set to false once we get all the kinks worked out
var DEBUG_FORM_SUBMISSION = false;
//Load global functions
$(document).ready(function() {
// bind to click events on menu links
$('.menu-link').bind('click', function(event) {
event.preventDefault();
$.get(this.href, {}, function(reply) {
$("#lesson_content").html(reply);
goat.utils.showLessonSource();
}, "html");
});
app.init();
});
// make all forms ajax forms
var options = {
target: '#lesson_content', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback, comment out after debugging
success: showResponse // post-submit callback, comment out after debugging
// set this to true if you want to see form submissions
// set to false once we get all the kinks worked out
var DEBUG_FORM_SUBMISSION = false;
// 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
$(document).ready(function() {
// bind to click events on menu links
/*$('.menu-link').bind('click', function(event) {
event.preventDefault();
$.get(this.href, {}, function(reply) {
$("#lesson_content").html(reply);
goat.utils.showLessonSource();
}, "html");
});*/
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// pre-submit callback
function showRequest(formData, jqForm, options) {
if (DEBUG_FORM_SUBMISSION) {
// 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);
app.init();
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
});
// make all forms ajax forms
var options = {
target: '#lesson_content', // target element(s) to be updated with server response
beforeSubmit: showRequest, // pre-submit callback, comment out after debugging
success: showResponse // post-submit callback, comment out after debugging
alert('About to submit: \n\n' + queryString);
}
// 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
// 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;
}
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// pre-submit callback
function showRequest(formData, jqForm, options) {
if (DEBUG_FORM_SUBMISSION) {
// 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);
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
// 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
alert('About to submit: \n\n' + queryString);
}
// 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 (DEBUG_FORM_SUBMISSION) {
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
// JASON - SEE THIS HOOK
// update lesson cookies and params
// make any embedded forms ajaxy
goat.utils.showLessonCookiesAndParams();
goat.utils.makeFormsAjax();
}
// 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
function showResponse(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 (DEBUG_FORM_SUBMISSION) {
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
// JASON - SEE THIS HOOK
// update lesson cookies and params
// make any embedded forms ajaxy
goat.utils.showLessonCookiesAndParams();
goat.utils.makeFormsAjax();
}
</script>
</body>

View File

@ -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;
}
*/

View File

@ -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'
};

View File

@ -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');
};
};
*/

View File

@ -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});
}
};

View File

@ -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)
}
}
}
};

View File

@ -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("<pre>"+reply+"</pre>");
}, "html");
showLessonSource: function(source) {
$('.lessonHelp').hide();
$('#lesson_source').html("<pre>"+goat.lesson.lessonInfo.source+"</pre>");
$('#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());

View File

@ -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{