Skip to content

Commit

Permalink
WEB-43 Implement Accordion on Menu
Browse files Browse the repository at this point in the history 
tried to implement jQuery UI Accordion; issues raised in the ticket
  • Loading branch information
@act-ive
act-ive committed Sep 4, 2014
1 parent d6e68e4 commit 8b2eeb1
Show file tree
Hide file tree
Showing 2 changed files with 111 additions and 101 deletions.
205 changes: 104 additions & 101 deletions src/main/webapp/WEB-INF/pages/main_new.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,55 +8,54 @@
<!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">
<!--[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"/>
<!-- 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>
<!-- 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>
<!-- end of JS -->
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 -->



<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>WebGoat V6.0</title>
<title>WebGoat V6.0 fsdafasd</title>
</head>

<body class="animated fadeIn" ng-app="goatApp" ng-controller="goatLesson">
Expand All @@ -71,100 +70,104 @@
<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>
<span id="lessonTitle">Welcome To WebGoat</span>

</div><!--toggle navigation end-->
</header>
<!--sidebar left start-->
<!--sidebar left start-->
<aside class="sidebar">
<div id="leftside-navigation" class="nano" >
<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>
<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>

<ul id="accordion" class="nano-content">
<li class="sub-menu" ng-repeat="item in menuTopics">
<h6>
<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>
</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 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">
<div class="col-md-12">
<h4>Lesson Parameters and Cookies</h4>
<div class="panel" >
<div class="panel-body" id="lesson_cookies">
<div class="panel" >
<div class="panel-body" id="lesson_cookies">
1
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="lesson_hint_row">
<div class="col-md-12">
<div class="col-md-12">
<h4>Lesson Hints</h4>
<div class="panel" >
<div class="panel-body" id="lesson_hint">
<div class="panel" >
<div class="panel-body" id="lesson_hint">

</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="lesson_plan_row">
<div class="col-md-12">
<div class="col-md-12">
<h4>Lesson Plan</h4>
<div class="panel" >
<div class="panel-body" id="lesson_plan">
<div class="panel" >
<div class="panel-body" id="lesson_plan">

</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="lesson_solution_row">
<div class="col-md-12">
<div class="col-md-12">
<h4>Lesson Solution</h4>
<div class="panel" >
<div class="panel-body" id="lesson_solution">
<div class="panel" >
<div class="panel-body" id="lesson_solution">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="lesson_source_row">
<div class="col-md-12">
<div class="col-md-12">
<h4>Lesson Source Code</h4>
<div class="panel" >
<div class="panel-body" id="lesson_source">
<div class="panel" >
<div class="panel-body" id="lesson_source">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
Expand All @@ -177,7 +180,7 @@
<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;
Expand Down
7 changes: 7 additions & 0 deletions src/main/webapp/js/jquery/jquery-ui-1.10.4.custom.min.js
View file

Large diffs are not rendered by default.

0 comments on commit 8b2eeb1

Please sign in to comment.