additonal help control changes

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

@@ -34,7 +34,7 @@
 
             </div><!--toggle navigation end-->
             <div class="lessonTitle" >
-                <h1 id="lessonTitle">Please login</h1>
+                
             </div><!--lesson title end-->
 
         </header>

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

@@ -54,8 +54,8 @@
                         <i class="fa fa-bars"></i>
                     </button>
                 </div><!--toggle navigation end-->
-                <div id="lessonTitleWrapper" >
+                <div id="lesson-title-wrapper" >
-                    <h1 class="lessonTitle"></h1>
+                    
                 </div><!--lesson title end-->
                 <div class="user-nav pull-right" style="margin-right: 75px;">
                     <div class="dropdown" style="display:inline">
@@ -98,13 +98,13 @@
                         <div class="col-md-8">
                             <div class="col-md-12" align="left">
                                 <div class="panel" id="help-controls">
-                                    <div id="help-buttons" class="panel-body">
+                                    <!-- <div id="help-buttons" class="panel-body"> -->
                                         <!-- <button type="button" id="showSourceBtn" ng-show="showSource" class="btn btn-primary btn-xs" onclick="showLessonSource()">Java [Source]</button>
                                         <button type="button" id="showSolutionBtn" class="btn btn-primary btn-xs" onclick="showLessonSolution()">Solution</button>
                                         <button type="button" id="showPlanBtn" class="btn btn-primary btn-xs" onclick="showLessonPlan()">Lesson Plan</button>
                                         <button type="button" id="showHintsBtn" ng-show="showHints" class="btn btn-primary btn-xs"  onclick="viewHints()">Hints</button>
                                         <button type="button" id="restartLessonBtn"  class="btn btn-xs"  onclick="restartLesson()">Restart Lesson</button> -->
-                                    </div>
+                                    <!-- </div> -->
                                 </div>
                                 <div class="lessonHelp" id="lesson-hint-row">
                                     <h4>Hints</h4>

src/main/webapp/css/layers.css

@@ -1,2 +1,2 @@
-#lessonTitle {position:absolute;left:94px;top:75px;width:690px;height:22px;z-index:1;float: right;font-size: 20px;color: #FFFFFF;}
+#lesson-title {position:absolute;left:94px;top:75px;width:690px;height:22px;z-index:1;float: right;font-size: 20px;color: #FFFFFF;}
 #hMenuBar {position:absolute;left:245px;top:108px;width:538px;height:22px;z-index:2;}

src/main/webapp/css/main.css

@@ -132,7 +132,7 @@ img {
 #header .user-nav button:hover i {
   color: #F6F6F6;
 }
-#header .lessonTitle {
+#header #lesson-title-wrapper {
 	display: inline-block;
 	margin:0 0 0 20px;	
 }
@@ -849,8 +849,16 @@ cookieContainer {
   cursor: pointer;
 }
 
-
 .info {
 	color:#e84c3d;
 	font-weight: bold; 
+}
+
+#help-controls {
+  padding-left: 4px;
+  padding-top: 4px
+}
+
+.help-button {
+  margin-right:4px;
 }

src/main/webapp/js/goatApp/controller/LessonController.js

@@ -6,7 +6,8 @@ define(['jquery',
 	'goatApp/view/PlanView',
 	'goatApp/view/SourceView',
 	'goatApp/view/SolutionView',
-	'goatApp/view/LessonHintView'
+	'goatApp/view/LessonHintView',
+	'goatApp/view/HelpControlsView'
 	], 
 	function($,
 		_,
@@ -16,7 +17,8 @@ define(['jquery',
 		PlanView,
 		SourceView,
 		SolutionView,
-		LessonHintView
+		LessonHintView,
+		HelpControlsView
 	) {
 		'use strict'
 		
@@ -33,7 +35,7 @@ define(['jquery',
 			_.extend(Controller.prototype,Backbone.Events);
 			this.start = function() {
 				this.listenTo(this.lessonContent,'contentLoaded',this.onContentLoaded);
-			}
+			};
 
 			//load View, which can pull data
 			this.loadLesson = function(scr,menu) {
@@ -60,19 +62,37 @@ define(['jquery',
 				//load title view (initially hidden) << currently handled via menu click but need to be able to handle via routed request
 				//plan view (initially hidden)
 				this.planView = new PlanView();
+				this.listenTo(this.planView,'plan:loaded',this.areHelpsReady);
 				//solution view (initially hidden)
 				this.solutionView = new SolutionView();
+				this.listenTo(this.solutionView,'solution:loaded',this.areHelpsReady);
 				//source (initially hidden)
 				this.sourceView = new SourceView();
+				this.listenTo(this.sourceView,'source:loaded',this.areHelpsReady);
 				//load help controls view (contextul to what helps are available)
 				this.lessonHintView = new LessonHintView();
 				this.listenTo(this.lessonHintView,'hints:loaded',this.areHelpsReady);
-			},
+				
+			};
+
 			this.areHelpsReady = function (curHelp) {
-				this.helpsLoaded[curHelp.helpElement] = curHelp.value;
+				this.addCurHelpState(curHelp);
 				// check if all are ready
-			}
+				if (this.helpsLoaded['hints'] && this.helpsLoaded['plan'] && this.helpsLoaded['solution'] && this.helpsLoaded['source']) {
-			
+					//
+					this.helpControlsView = new HelpControlsView({
+						hasPlan:(this.planView.model.get('content') !== null),
+						hasSolution:(this.solutionView.model.get('content') !== null),
+						hasSource:(this.sourceView.model.get('content') !== null),
+						hasHints:(this.lessonHintView.collection.length > 0),
+					});
+					this.helpControlsView.render();
+				}
+			};
+
+			this.addCurHelpState = function (curHelp) {
+				this.helpsLoaded[curHelp.helpElement] = curHelp.value;
+			};			
 		};
 		return Controller;
 });

src/main/webapp/js/goatApp/model/MenuCollection.js

@@ -18,4 +18,4 @@ define(['jquery',
 			this.trigger('menuData:loaded');
 		}
 	});
-})
+});

src/main/webapp/js/goatApp/model/MenuModel.js

@@ -7,19 +7,4 @@ define(['jquery',
 
 	});
 
-});
+});
-
-	// accordionMenu = function(id) {
- //        if ($('ul#' + id).attr('isOpen') == 0) {
- //            $scope.expandMe = true;
- //        } else {
- //            $('ul#' + id).slideUp(300).attr('isOpen', 0);u
- //            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/goatApp/view/HelpControlsView.js

@@ -4,6 +4,14 @@ define(['jquery',
 function($,_,Backbone) {
 	return Backbone.View.extend({
 		el:'#help-controls', //Check this
+		helpButtons: {
+			//TODO: move this into a template
+			showSource:$('<button>',{id:'showSourceBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Java [Source]'}),
+			showSolution:$('<button>',{id:'showSolutionBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Solution'}),
+			showPlan:$('<button>',{id:'showPlanBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Lesson Plan]'}),
+			showHints:$('<button>',{id:'showHintsBtn','class':'btn btn-primary btn-xs help-button',type:'button',text:'Hints'}),
+			restartLesson:$('<button>',{id:'restartLessonBtn','class':'btn btn-xs help-button',type:'button',text:'Restart Lesson'})
+		},
 		initialize: function (options) {
 			if (!options) {
 				return;
@@ -14,7 +22,20 @@ function($,_,Backbone) {
 			this.hasHints = options.hasHints;
 		},
 		render:function(title) {
-			
+			if (this.hasSource) {
+				this.$el.append(this.helpButtons.showSource);
+			}
+			if (this.hasSolution) {
+				this.$el.append(this.helpButtons.showSolution);
+			}
+			if (this.hasPlan) {
+				this.$el.append(this.helpButtons.showPlan);
+			}
+			if (this.hasHints) {
+				this.$el.append(this.helpButtons.showHints);
+			}
+			//
+			this.$el.append(this.helpButtons.restartLesson);
 		}
 	});
 });

src/main/webapp/js/goatApp/view/HelpView.js

@@ -0,0 +1,23 @@
+define(['jquery',
+	'underscore',
+	'backbone',
+	'goatApp/model/LessonSourceModel'],
+function($,
+	_,
+	Backbone,
+	LessonSourceModel) {
+	return Backbone.View.extend({
+		el:'#lessonHelpWrapper .lessonHelp.lessonPlan', //Check this
+		initialize: function() {
+			this.model = new LessonSourceModel();
+			this.listenTo(this.model,'loaded',this.onModelLoaded);
+			this.model.loadData();
+		},
+		render:function(title) {
+			
+		},
+		onModelLoaded: function() {
+			this.trigger(this.loadedMessage,this.helpElement);
+		}
+	});
+});

src/main/webapp/js/goatApp/view/PlanView.js

@@ -17,7 +17,7 @@ function($,
 			
 		},
 		onModelLoaded: function() {
-			// ???
+			this.trigger('plan:loaded',{'helpElement':'plan','value':true});
 		}
 	});
 });

src/main/webapp/js/goatApp/view/SolutionView.js

@@ -2,6 +2,7 @@ define(['jquery',
 	'underscore',
 	'backbone',
 	'goatApp/model/LessonSolutionModel'],
+	//TODO: create a base 'HelpView class'
 function($,_,Backbone,LessonSolutionModel) {
 	return Backbone.View.extend({
 		el:'#lessonHelpWrapper .lessonHelp.lessonSolution', //Check this
@@ -9,12 +10,13 @@ function($,_,Backbone,LessonSolutionModel) {
 			this.model = new LessonSolutionModel();
 			this.listenTo(this.model,'loaded',this.onModelLoaded);
 			this.model.loadData();
+			//TODO: handle error cases
 		},
 		render:function(title) {
 			
 		},
 		onModelLoaded: function() {
-			// ???
+			this.trigger('solution:loaded',{'helpElement':'solution','value':true});
 		}
 	});
 });

src/main/webapp/js/goatApp/view/SourceView.js

@@ -1,23 +1,21 @@
 define(['jquery',
 	'underscore',
 	'backbone',
-	'goatApp/model/LessonSourceModel'],
+	'goatApp/model/LessonSourceModel',
+	'goatApp/view/HelpView'],
 function($,
 	_,
 	Backbone,
-	LessonSourceModel) {
+	LessonSourceModel,
-	return Backbone.View.extend({
+	HelpView) {
+	return HelpView.extend({
+		helpElement:{'helpElement':'source','value':true},
+		loadedMessage:'source:loaded',
 		el:'#lessonHelpWrapper .lessonHelp.lessonPlan', //Check this
 		initialize: function() {
 			this.model = new LessonSourceModel();
 			this.listenTo(this.model,'loaded',this.onModelLoaded);
 			this.model.loadData();
-		},
-		render:function(title) {
-			
-		},
-		onModelLoaded: function() {
-			// ???
 		}
 	});
 });

src/main/webapp/js/goatApp/view/TitleView.js

@@ -3,9 +3,11 @@ define(['jquery',
 	'backbone'],
 function($,_,Backbone) {
 	return Backbone.View.extend({
-		el:'#lessonTitleWrapper',
+		el:'#header #lesson-title-wrapper',
 		render:function(title) {
-			this.$el.find('.lessonTitle').html(title);
+			var lessonTitleEl = $('<h1>',{id:'lesson-title',text:title});
+			this.$el.html(lessonTitleEl);
+			//this.$el.append(lessonTitleEl);
 		}
 	});
 });