changes for menu decoration and related code updates

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

@@ -113,11 +113,11 @@
                     <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" id="{{item.id}}" isOpen=0>
+                            <ul class="slideDown lessonsAndStages {{item.displayClass}}" id="{{item.id}}" isOpen=0>
-                                <li ng-repeat="lesson in item.children">
+                                <li ng-repeat="lesson in item.children" class="{{lesson.selectedClass}}">
-                                    <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>
+                                    <a ng-click="renderLesson(lesson.id,lesson.link)" 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" >
+                                    <span ng-repeat="stage in lesson.children">
-                                        <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>
+                                        <a ng-click="renderLesson(lesson.id,stage.link)" class="selectedClass" id="{{stage.id}}"  title="link to {{stage.name}}" href="">{{stage.name}}</a><span class="{{stage.completeClass}}"></span>
                                     </span>
                                 </li>
                             </ul>
@@ -177,7 +177,7 @@
                                                 <h4>Cookies</h4>
                                                 <table class="cookieTable table-striped table-nonfluid" ng-repeat="cookie in cookies">
                                                     <thead>
-                                                        <tr><th>Field</th><th>Value</th></tr>
+                                                        <tr><th class="col-sm-1">Field</th><th class="col-sm-1">Value</th></tr>
                                                     </thead>
                                                     <tbody>
                                                         <tr ng-repeat="(key, value) in cookie">
@@ -293,9 +293,7 @@
 
             $(document).ready(function() {
                 //TODO merge appliction.js code into other js files
-                app.init();
+                app.init();               
-                
-                
             });
             // make all forms ajax forms
             var options = {
@@ -353,6 +351,8 @@
                 // make any embedded forms ajaxy
                 goat.utils.showLessonCookiesAndParams();
                 goat.utils.makeFormsAjax();
+                //refresh menu
+                angular.element($('#leftside-navigation')).scope().renderMenu();
             }
 
         </script>

src/main/webapp/css/main.css

@@ -141,99 +141,18 @@ img {
   margin-top:25px;
   margin-right:20px;
 }
-/* Sidebar */
-.sidebar {
-  width: 240px;
-  /*height: 100%;*/
-  background: #222;
-  position: absolute;
-  -webkit-transition: all 0.3s ease-in-out;
-  -moz-transition: all 0.3s ease-in-out;
-  -o-transition: all 0.3s ease-in-out;
-  -ms-transition: all 0.3s ease-in-out;
-  transition: all 0.3s ease-in-out;
-  z-index: 100;
-}
 
-#leftside-navigation {
-  overflow-y:scroll;
-  overflow-x:hidden;
-}
-
-#sidebar {
-  /*background-color:#333;*/
-  background-color:blue;
-}
-
-  
-.sidebar-toggle {
-  margin-left: -240px;
-}
-#leftside-navigation ul,
-#leftside-navigation ul ul {
-  margin: -2px 0 0;
-  padding: 0;
-}
-#leftside-navigation ul li {
-  list-style-type: none;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-#leftside-navigation ul li a {
-  color: #aeb2b7;
-  text-decoration: none;
-  display: block;
-  padding: 18px 0 18px 25px;
-  font-size: 12px;
-  outline: none;
-  -webkit-transition: all 200ms ease-in;
-  -moz-transition: all 200ms ease-in;
-  -o-transition: all 200ms ease-in;
-  -ms-transition: all 200ms ease-in;
-  transition: all 200ms ease-in;
-}
-#leftside-navigation ul li a span {
-  display: inline-block;
-}
-#leftside-navigation ul ul li {
-  background: #333;
-  margin-bottom: 0;
-  margin-left: 0;
-  margin-right: 0;
-  border-bottom: none;
-}
-#leftside-navigation ul ul li a {
-  font-size: 12px;
-  padding-top: 13px;
-  padding-bottom: 13px;
-  color: #aeb2b7;
-}
-#leftside-navigation ul li a i {
-  width: 20px;
-}
-#leftside-navigation ul li a i.fa-angle-right,
-#leftside-navigation ul li a i.fa-angle-left {
-  padding-top: 3px;
-}
-#leftside-navigation ul ul {
-  display: none;
-}
-#leftside-navigation li.active ul {
-  display: block;
-}
-#leftside-navigation ul li a:hover,
-#leftside-navigation ul li.active > a {
-  color: #e84c3d;
-}
 .btn-primary + .dropdown-menu > li > a:hover,
 .btn-primary + .dropdown-menu > li > a:active {
   background-color: #16a086;
 }
 
 .sidebar > div > ul > li > ul > li > span.lessonComplete {
-    float: right;
+    /*float: right;
-    margin-left: 1.5em;
+    margin-left: 1.5em;*/
     margin-right: 5px;
-    margin-top: -25px;
+    margin-top: -38px; /* << don't like doing this, but otherwise it does not line up correctly */
+    color:#0F0
 }
 
 /* ==========================================================================
@@ -797,14 +716,109 @@ fieldset[disabled] .btn-warning.active {
 
 .table-nonfluid {
   width:auto;
+  
+}
+.table-nonfluid {
+ 
 }
 
 .cookieTable tr td, .paramsTable tr td {
   padding: 3px;
   max-width: 200px;
   font-size: x-small;
+  word-wrap: break-word;
 }
-/* MENU */
+
+/* ==========================================================================
+   MENU / Sidebar
+   ========================================================================== */
+/* Sidebar */
+.sidebar {
+  width: 240px;
+  /*height: 100%;*/
+  background: #222;
+  position: absolute;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  z-index: 100;
+}
+
+#leftside-navigation {
+  overflow-y:scroll;
+  overflow-x:hidden;
+}
+
+#sidebar {
+  /*background-color:#333;*/
+  background-color:blue;
+}
+
+  
+.sidebar-toggle {
+  margin-left: -240px;
+}
+#leftside-navigation ul,
+#leftside-navigation ul ul {
+  margin: -2px 0 0;
+  padding: 0;
+}
+#leftside-navigation ul li {
+  list-style-type: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+
+#leftside-navigation ul li a {
+  color: #aeb2b7;
+  text-decoration: none;
+  display: block;
+  padding: 5px 0 5px 15px;
+  font-size: 12px;
+  outline: none;
+  -webkit-transition: all 200ms ease-in;
+  -moz-transition: all 200ms ease-in;
+  -o-transition: all 200ms ease-in;
+  -ms-transition: all 200ms ease-in;
+  transition: all 200ms ease-in;
+}
+#leftside-navigation ul li a span {
+  display: inline-block;
+}
+#leftside-navigation ul ul li {
+  background: #333;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  border-bottom: none;
+}
+#leftside-navigation ul ul li a {
+  font-size: 11px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  color: #aeb2b7;
+  margin-left:8px;
+}
+#leftside-navigation ul li a i {
+  width: 20px;
+}
+#leftside-navigation ul li a i.fa-angle-right,
+#leftside-navigation ul li a i.fa-angle-left {
+  padding-top: 3px;
+}
+#leftside-navigation ul ul {
+  display: none;
+}
+#leftside-navigation li.active ul {
+  display: block;
+}
+#leftside-navigation ul li a:hover,
+#leftside-navigation ul li.active > a {
+  color: #e84c3d;
+}
+
 .sidebar ul span.lessonComplete {
     float: right;
     margin-left: -5px;
@@ -820,6 +834,9 @@ fieldset[disabled] .btn-warning.active {
   color:white;
 }
 
+#leftside-navigation ul ul.lessonsAndStages.keepOpen {
+  display: block
+}
 
 /* HINTS */
 #hintsViewTop{

src/main/webapp/js/goatConstants.js

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

src/main/webapp/js/goatControllers.js

@@ -13,10 +13,17 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
 		var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
 		//top-tier 'categories'
 		for (var i=0;i<menuItems.length;i++) {
-		    menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');
+		    menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');//TODO move the replace routine into util function
+		    menuItems[i].displayClass= ($scope.openMenu === menuItems[i].id) ? goatConstants.keepOpenClass : '';
 		    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,'');
+			    //handle selected Menu state
+			    if (menuItems[i].children[j].id === $scope.curMenuItemSelected) {
+				menuItems[i].children[j].selectedClass = goatConstants.selectedMenuClass;
+				menuItems[i].selectedClass = goatConstants.selectedMenuClass;
+			    }
+			    //handle complete state
 			    if (menuItems[i].children[j].complete) {
 				menuItems[i].children[j].completeClass = goatConstants.lessonCompleteClass;
 			    } else {
@@ -26,6 +33,12 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
 				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,'');
+				    //handle selected Menu state
+				    if (menuItems[i].children[j].children[k].id === $scope.curMenuItemSelected) {
+					menuItems[i].children[j].children[k].selectedClass = goatConstants.selectedMenuClass;
+					menuItems[i].children[j].selectedClass = goatConstants.selectedMenuClass;
+				    }
+				    //handle complete state
 				    if (menuItems[i].children[j].children[k].complete) {
 					menuItems[i].children[j].children[k].completeClass= goatConstants.lessonCompleteClass;
 				    } else {
@@ -37,6 +50,11 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
 		    }
 		}
 		$scope.menuTopics = menuItems;
+		//
+		if ($scope.openMenu) {
+		    $('ul'+$scope.openMenu).show();
+		}
+		
 	    },
 	    function(error) {
 		// TODO - handle this some way other than an alert
@@ -52,11 +70,8 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
         var curScope = $scope;
 	$('.lessonHelp').hide();
 	// clean up menus, mark selected
-	$('ul li.selected').removeClass(goatConstants.selectedMenuClass)
+	$scope.curMenuItemSelected = id;
-	$('ul li.selected a.selected').removeClass(goatConstants.selectedMenuClass)
+	goat.utils.highlightCurrentLessonMenu(id);
-	$('#'+id).addClass(goatConstants.selectedMenuClass);
-	$('#'+id).parent().addClass(goatConstants.selectedMenuClass);
-	//
         curScope.parameters = goat.utils.scrapeParams(url);
 	// lesson content
         goat.data.loadLessonContent($http,url).then(
@@ -69,10 +84,12 @@ 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)
+		$('#leftside-navigation').height($('#main-content').height()+15)//TODO: get ride of fixed value (15)here
 		$scope.$emit('lessonUpdate',{params:curScope.parameters});
 	    }
-    )};
+	)
+	$scope.renderMenu();	
+    };
     $scope.accordionMenu = function(id) {
 	if ($('ul#'+id).attr('isOpen') == 0) {
 	    $scope.expandMe = true;    
@@ -80,6 +97,7 @@ var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
 	    $('ul#'+id).slideUp(300).attr('isOpen',0);
 	    return;
 	}
+	$scope.openMenu = id;
 	$('.lessonsAndStages').not('ul#'+id).slideUp(300).attr('isOpen',0);
 	if ($scope.expandMe) {
 	    $('ul#'+id).slideDown(300).attr('isOpen',1);

src/main/webapp/js/goatUtil.js

@@ -80,6 +80,13 @@ goat.utils = {
             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);
     }
 };