menu decoration updates

Author: Jason White

src/main/webapp/WEB-INF/pages/main_new.jsp

@@ -27,6 +27,7 @@
         <!--  end of CSS -->
 
         <!-- 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>
@@ -40,7 +41,7 @@
         <![endif]-->
 
         <!--Global JS-->
-        <script src="js/jquery/jquery-1.10.2.min.js"></script>
+        
         <script src="js/jquery_form/jquery.form.js"></script>  
         <script src="plugins/bootstrap/js/bootstrap.min.js"></script>
 
@@ -114,9 +115,9 @@
                             <a ng-click="accordionMenu(item.id)" href=""><i class="fa {{item.class}}"></i><span>{{item.name}}</span></a><!-- expanded = !expanded-->
                             <ul class="slideDown lessonsAndStages" id="{{item.id}}" isOpen=0>
                                 <li ng-repeat="lesson in item.children">
-                                    <a ng-click="renderLesson(lesson.link)" title="link to {{lesson.name}}" href="">{{lesson.name}}</a>
+                                    <a ng-click="renderLesson(lesson.id,lesson.link)" id="{{lesson.id}}" 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.link)" title="link to {{stage.name}}" href="">{{stage.name}}</a>
+                                        <a ng-click="renderLesson(lesson.id,stage.link)" id="{{stage.id}}"  title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span>
                                     </span>
                                 </li>
                             </ul>

src/main/webapp/css/main.css

@@ -801,6 +801,22 @@ fieldset[disabled] .btn-warning.active {
   max-width: 200px;
   font-size: x-small;
 }
+/* MENU */
+.sidebar ul span.lessonComplete {
+    float: right;
+    margin-left: -5px;
+    /*margin-right: 5px;*/
+    padding-top: 15px;
+}
+
+#leftside-navigation ul li.selected {
+    background-color: #555;
+}
+
+#leftside-navigation ul li.selected a.selected {
+  color:white;
+}
+
 
 /* HINTS */
 #hintsViewTop{

src/main/webapp/js/goatConstants.js

@@ -2,6 +2,8 @@
 
 var goatConstants = {
 	CATEGORYCLASS:'fa-angle-right pull-right',
+	lessonCompleteClass:'glyphicon glyphicon-check lessonComplete',
+	selectedMenuClass:'selected',
 	menuPrefix : [
 		{
 		name:'LESSONS',

src/main/webapp/js/goatControllers.js

@@ -11,12 +11,31 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
 	goat.data.loadMenu($http).then( //$http({method: 'GET', url: goatConstants.lessonService})
 	    function(menuData) {
 		var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
+		//top-tier 'categories'
 		for (var i=0;i<menuItems.length;i++) {
-		    if (menuItems[i].name) {
-			menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');
+		    menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');
+		    if (menuItems[i].children) {
+			for (var j=0;j<menuItems[i].children.length;j++){
+			    menuItems[i].children[j].id = menuItems[i].children[j].name.replace(/\s|\(|\)/g,'');
+			    if (menuItems[i].children[j].complete) {
+				menuItems[i].children[j].completeClass = goatConstants.lessonCompleteClass;
+			    } else {
+				menuItems[i].children[j].completeClass ='';
+			    }
+			    if (menuItems[i].children[j].children) {
+				for (var k=0;k < menuItems[i].children[j].children.length;k++) {
+				    //TODO make utility function for name >> id
+				    menuItems[i].children[j].children[k].id = menuItems[i].children[j].children[k].name.replace(/\s|\(|\)/g,'');
+				    if (menuItems[i].children[j].children[k].complete) {
+					menuItems[i].children[j].children[k].completeClass= goatConstants.lessonCompleteClass;
+				    } else {
+					menuItems[i].children[j].children[k].completeClass= ''
+				    }
+				}
+			    }
+			}		    
 		    }
 		}
-
 		$scope.menuTopics = menuItems;
 	    },
 	    function(error) {
@@ -26,13 +45,20 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
 	);
     };
 
-    $scope.renderLesson = function(url) {
+    $scope.renderLesson = function(id,url) {
         //console.log(url + ' was passed in');
         // use jquery to render lesson content to div
         $scope.hintIndex = 0;
         var curScope = $scope;
 	$('.lessonHelp').hide();
+	// clean up menus, mark selected
+	$('ul li.selected').removeClass(goatConstants.selectedMenuClass)
+	$('ul li.selected a.selected').removeClass(goatConstants.selectedMenuClass)
+	$('#'+id).addClass(goatConstants.selectedMenuClass);
+	$('#'+id).parent().addClass(goatConstants.selectedMenuClass);
+	//
         curScope.parameters = goat.utils.scrapeParams(url);
+	// lesson content
         goat.data.loadLessonContent($http,url).then(
 	    function(reply) {
 		goat.data.loadLessonTitle($http).then(
@@ -41,6 +67,8 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
 		    }
 		);
 		$("#lesson_content").html(reply.data);
+		//hook forms
+		goat.utils.makeFormsAjax();
 		$('#leftside-navigation').height($('#main-content').height()+15)
 		$scope.$emit('lessonUpdate',{params:curScope.parameters});
 	    }
@@ -56,35 +84,16 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
 	if ($scope.expandMe) {
 	    $('ul#'+id).slideDown(300).attr('isOpen',1);
 	}
-	console.log('accordion for ' + id);
     }
     $scope.renderMenu();
-    //can be augmented later to 'resume' for a given user ... currently kluged to start at fixed lesson
+    // runs on first loadcan be augmented later to '
+    // resume' for a given user ... currently kluged to start at fixed lesson
     var url = 'attack?Screen=32&menu=5';
-    angular.element($('#leftside-navigation')).scope().renderLesson(url);
+    angular.element($('#leftside-navigation')).scope().renderLesson(null,url);
 }
 
-/*goatMenu.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);
-            }
-        }
-    };
-
-
-});*/
-
 /* lesson controller */
 var goatLesson = function($scope,$http,$log) {
-    //hook forms
 
     $('#hintsView').hide();
 	// adjust menu to lessonContent size if necssary