From c1b1d34e09068c659fccedcaac3179bb5eda5644 Mon Sep 17 00:00:00 2001
From: Jason White <jsnsotheracct@gmail.com>
Date: Mon, 15 Sep 2014 14:29:39 -0400
Subject: [PATCH] initial mod for menu resizing, some more
 angularization/splitting of the controllers

---
 src/main/webapp/WEB-INF/pages/main_new.jsp |  22 +--
 src/main/webapp/css/main.css               |   6 +
 src/main/webapp/js/goatControllers.js      | 202 ++++++++++++---------
 src/main/webapp/js/goatData.js             |  47 ++---
 src/main/webapp/js/goatLesson.js           |  10 +-
 5 files changed, 163 insertions(+), 124 deletions(-)
diff --git a/src/main/webapp/WEB-INF/pages/main_new.jsp b/src/main/webapp/WEB-INF/pages/main_new.jsp
index 286d2e5f9..ce8075db2 100644
--- a/src/main/webapp/WEB-INF/pages/main_new.jsp
+++ b/src/main/webapp/WEB-INF/pages/main_new.jsp
@@ -62,7 +62,7 @@
     </head>
 
     <body class="animated fadeIn" ng-app="goatApp">
-        <section id="container" ng-controller="goatLesson">
+        <section id="container">
             <header id="header">
                 <!--logo start-->
                 <div class="brand">
@@ -75,7 +75,7 @@
                     </button>
                 </div><!--toggle navigation end-->
                 <div class="lessonTitle" >
-                    <h1 id="lessonTitle">Lesson Title in here</h1>
+                    <h1 id="lessonTitle"></h1>
                 </div><!--lesson title end-->
                 <div class="user-nav pull-right" style="margin-right: 75px;">
                     <div class="dropdown" style="display:inline">
@@ -107,12 +107,12 @@
             </header>
 
             <!--sidebar left start-->
-            <aside class="sidebar">
-                <div id="leftside-navigation" class="nano">
+            <aside class="sidebar" >
+                <div id="leftside-navigation" ng-controller="goatMenu" 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">
+                            <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>
                                     <span ng-repeat="stage in lesson.children" >
@@ -122,15 +122,13 @@
                             </ul>
                         </li>
                     </ul> 
-
                 </div>
 
             </aside>
             <!--sidebar left end-->
             <!--main content start-->
             <section class="main-content-wrapper">
-
-                <section id="main-content" > <!-- ng-controller="lessonController" -->
+                <section id="main-content" ng-controller="goatLesson">
                     <div class="row">
                         <div class="col-md-8">
                             <div class="col-md-12" align="left">
@@ -293,10 +291,10 @@
             var DEBUG_FORM_SUBMISSION = false;
 
             $(document).ready(function() {
+                //TODO merge appliction.js code into other js files
                 app.init();
-                //can 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);
+                
+                
             });
             // make all forms ajax forms
             var options = {
diff --git a/src/main/webapp/css/main.css b/src/main/webapp/css/main.css
index 2dbefaa10..bcdd383f2 100644
--- a/src/main/webapp/css/main.css
+++ b/src/main/webapp/css/main.css
@@ -807,6 +807,12 @@ fieldset[disabled] .btn-warning.active {
   display: none;
   background-color: #eee;
 }
+
+#showPrevHintBtn, #showNextHintBtn {
+  cursor: pointer;
+}
+
+
 .info {
 	color:#e84c3d;
 	font-weight: bold; 
diff --git a/src/main/webapp/js/goatControllers.js b/src/main/webapp/js/goatControllers.js
index e472509f5..97b9d2d38 100644
--- a/src/main/webapp/js/goatControllers.js
+++ b/src/main/webapp/js/goatControllers.js
@@ -6,87 +6,135 @@
 /** Lesson Controller (includes menu stuff)
  *  prepares and updates menu topic items for the view
  */
-goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$templateCache
+//<<<<<<< Updated upstream
+//goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$templateCache
+//=======
+var goatMenu = function($scope, $http, $modal, $log, $templateCache) {
     $scope.cookies = [];
     $scope.params = [];
-    //TODO: implement via separate promise and use config for menu (goat.data.loadMenuData())
-    $http({method: 'GET', url: goatConstants.lessonService}).then(
-            function(menuData) {
-                var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
-                $scope.menuTopics = menuItems;
-            },
-            function(error) {
-                // TODO - handle this some way other than an alert
-                console.error("Error rendering menu: " + error);
-            }
-    );
+    $scope.renderMenu = function() {
+	goat.data.loadMenu($http).then( //$http({method: 'GET', url: goatConstants.lessonService})
+	    function(menuData) {
+		var menuItems = goat.utils.addMenuClasses(goatConstants.menuPrefix.concat(menuData.data));
+		for (var i=0;i<menuItems.length;i++) {
+		    if (menuItems[i].name) {
+			menuItems[i].id = menuItems[i].name.replace(/\s|\(|\)/g,'');
+		    }
+		}
+
+		$scope.menuTopics = menuItems;
+	    },
+	    function(error) {
+		// TODO - handle this some way other than an alert
+		console.error("Error rendering menu: " + error);
+	    }	
+	);
+    };
 
     $scope.renderLesson = function(url) {
         //console.log(url + ' was passed in');
         // use jquery to render lesson content to div
         $scope.hintIndex = 0;
-
         var curScope = $scope;
       
         curScope.parameters = goat.utils.scrapeParams(url);
-        goat.data.loadLessonContent(url).then(
-                function(reply) {
-                    $("#lesson_content").html(reply);
-                    goat.data.loadLessonTitle().then(
-                    		function(reply) {
-                    			$("#lessonTitle").text(reply);
-                    		}
-                    );
+        goat.data.loadLessonContent($http,url).then(
+	    function(reply) {
+		goat.data.loadLessonTitle($http).then(
+		    function(reply) {
+			    $("#lessonTitle").text(reply.data);
+		    }
+		);
+		$("#lesson_content").html(reply.data);
+		$('#leftside-navigation').height($('#main-content').height()+15)
+	    }
+    )};
+    $scope.accordionMenu = function(id) {
+	if ($('ul#'+id).attr('isOpen') == 0) {
+	    $scope.expandMe = true;    
+	} else {
+	    $('ul#'+id).slideUp(300).attr('isOpen',0);
+	    return;
+	}
+	$('.lessonsAndStages').not('ul#'+id).slideUp(300).attr('isOpen',0);
+	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
+    var url = 'attack?Screen=32&menu=5';
+    angular.element($('#leftside-navigation')).scope().renderLesson(url);
+}
 
-                    //hook forms
-                    goat.utils.makeFormsAjax();
-                    $('#hintsView').hide();
-                    // 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());
-                    }
-                    //cookies
-                    goat.data.loadCookies().then(
-                            function(resp) {
-                                curScope.cookies = resp;
-                            }
-                    );
-                    //hints
-                    curScope.hintIndex = 0;
-                    goat.data.loadHints().then(
-                            function(resp) {
-                                curScope.hints = resp;
-                                if (curScope.hints.length > 0 && curScope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
-                                    goat.utils.displayButton('showHintsBtn', true);
-                                } else {
-                                    goat.utils.displayButton('showHintsBtn', false);
-                                }
-                            }
-                    );
-                    //source
-                    goat.data.loadSource().then(
-                            function(resp) {
-                                curScope.source = resp;
-                            }
-                    );
-                    //plan
-                    goat.data.loadPlan().then(
-                            function(resp) {
-                                curScope.plan = resp;
-                            }
-                    );
-                    //solution
-                    goat.data.loadSolution().then(
-                            function(resp) {
-                                curScope.solution = resp;
-                            }
-                    );
-                    goat.utils.scrollToTop();
-                }
-        );
+/*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);
+            }
+        }
     };
 
+
+});*/
+
+var goatLesson = function($scope,$http,$log) {
+    //hook forms
+
+    $('#hintsView').hide();
+	// 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());
+		}
+		//cookies
+		goat.data.loadCookies($http).then(
+			function(resp) {
+			    curScope.cookies = resp.data;
+			}
+		);
+		//hints
+		curScope = $scope; //TODO .. update below, this curScope is probably not needed
+		curScope.hintIndex = 0;
+		goat.data.loadHints($http).then(
+			function(resp) {
+			    curScope.hints = resp.data;
+			    if (curScope.hints.length > 0 && curScope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
+				goat.utils.displayButton('showHintsBtn', true);
+			    } else {
+				goat.utils.displayButton('showHintsBtn', false);
+			    }
+			}
+		);
+		//source
+		goat.data.loadSource($http).then(
+			function(resp) {
+			    curScope.source = resp.data;
+			}
+		);
+		//plan
+		goat.data.loadPlan($http).then(
+			function(resp) {
+			    curScope.plan = resp.data;
+			}
+		);
+		//solution
+		goat.data.loadSolution($http).then(
+			function(resp) {
+			    curScope.solution = resp.data;
+			}
+		);
+		goat.utils.scrollToTop();
+
+
     $scope.showLessonSource = function() {
         $('.lessonHelp').hide();
         $('#lesson_source_row').show();
@@ -164,22 +212,6 @@ goat.controller('goatLesson', function($scope, $http, $modal, $log, $sce) { //$t
             //remote: 'about.mvc'
         });
     };
+}
 
 
-}).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);
-            }
-        }
-    };
-
-
-});
diff --git a/src/main/webapp/js/goatData.js b/src/main/webapp/js/goatData.js
index e94ee1eee..a1d113a38 100644
--- a/src/main/webapp/js/goatData.js
+++ b/src/main/webapp/js/goatData.js
@@ -2,36 +2,39 @@
 
 goat.data = {
     /**** jQuery loads ... ****/
-    loadLessonContent: function (_url) {
+    loadLessonContent: function ($http,_url) {
     //TODO: switch to $http (angular) later
-    //return $http({method:'GET', url: _url});
-    
-    return $.get(_url, {}, null, "html");
+        return $http({method:'GET', url: _url});
+    //return $.get(_url, {}, null, "html");
     },
-    loadCookies: function() {
-        return $.get(goatConstants.cookieService, {});
+    loadCookies: function($http) {
+        return $http({method: 'GET', url: goatConstants.cookieService});
+        //return $.get(goatConstants.cookieService, {});
     },
-    loadHints: function () {
-        return $.get(goatConstants.hintService, {});
+    loadHints: function ($http) {
+        return $http({method: 'GET', url: goatConstants.hintService});
+        //return $.get(goatConstants.hintService, {});
     },
-    loadSource: function() {
-        return $.get(goatConstants.sourceService, {});
+    loadSource: function($http) {
+        return $http({method: 'GET', url: goatConstants.sourceService});
+        //return $.get(goatConstants.sourceService, {});
     },
-    loadSolution: function () {
-        return $.get(goatConstants.solutionService, {});
+    loadSolution: function ($http) {
+        return $http({method: 'GET', url: goatConstants.solutionService});
+        //return $.get(goatConstants.solutionService, {});
     },
-    loadPlan: function () {
-        return $.get(goatConstants.lessonPlanService, {});
+    loadPlan: function ($http) {
+        return $http({method: 'GET', url: goatConstants.lessonPlanService});
+        //return $.get(goatConstants.lessonPlanService, {});
     },
-    loadParams: function() {
-        return $.get(goatConstants.paramsService,{});
+    loadParams: function($http) {
+        return $http({method: 'GET', url: goatConstants.paramsService});
+        //return $.get(goatConstants.paramsService,{});
     },
-    /*** angular data grabs ***/
-    loadMenuData: function() {
-        //TODO use goatConstants var for url
-        return $http({method: 'GET', url: goatConstants.menuService});
+    loadMenu: function($http) {
+        return $http({method: 'GET', url: goatConstants.lessonService});
     },
-    loadLessonTitle: function () {
-        return $.get(goatConstants.lessonTitleService, {});
+    loadLessonTitle: function ($http) {
+        return $http({method: 'GET', url: goatConstants.lessonTitleService});
     }
 };
diff --git a/src/main/webapp/js/goatLesson.js b/src/main/webapp/js/goatLesson.js
index 904712b6a..ad6939c4c 100644
--- a/src/main/webapp/js/goatLesson.js
+++ b/src/main/webapp/js/goatLesson.js
@@ -30,7 +30,7 @@ goat.lesson = {
                 var scope = this;
                 goat.data.loadHints().then(
                     function(resp) {
-                        scope.hints = resp;
+                        scope.hints = resp.data;
                         if (scope.hints.length > 0 && scope.hints[0].hint.indexOf(goatConstants.noHints) === -1) {
                             goat.utils.displayButton('showHintsBtn',true);
                         } else {
@@ -48,7 +48,7 @@ goat.lesson = {
                 var scope = this;
                 goat.data.loadSolution().then(
                     function(resp) {
-                        scope.solution = resp;
+                        scope.solution = resp.data;
                         goat.utils.displayButton('showSolutionBtn',true);
                         $('#showSolutionBtn').unbind().click(goat.utils.showLessonSolution);
                         return scope;
@@ -64,7 +64,7 @@ goat.lesson = {
                 var scope = this;
                 goat.data.loadPlan().then(
                     function(resp) {
-                        scope.plan = resp;
+                        scope.plan = resp.data;
                         goat.utils.displayButton('showPlanBtn',true);
                         $('#showPlanBtn').unbind().click(goat.utils.showLessonPlan);
                         return scope;
@@ -79,7 +79,7 @@ goat.lesson = {
                 var scope = this;
                 goat.data.loadSource().then(
                     function(resp) {
-                        scope.source = resp;
+                        scope.source = resp.data;
                         goat.utils.displayButton('showSourceBtn',true);
                         $('#showSourceBtn').unbind().click(goat.utils.showLessonSource);
                         return scope;
@@ -94,7 +94,7 @@ goat.lesson = {
                 var scope = this;
                 goat.data.loadCookies().then(
                     function(resp) {
-                        scope.cookies = resp;
+                        scope.cookies = resp.data;
                         return scope;
                     },
                     function(err){
