additonal help control changes
This commit is contained in:
		| @ -34,7 +34,7 @@ | ||||
|  | ||||
|             </div><!--toggle navigation end--> | ||||
|             <div class="lessonTitle" > | ||||
|                 <h1 id="lessonTitle">Please login</h1> | ||||
|                  | ||||
|             </div><!--lesson title end--> | ||||
|  | ||||
|         </header> | ||||
|  | ||||
| @ -54,8 +54,8 @@ | ||||
|                         <i class="fa fa-bars"></i> | ||||
|                     </button> | ||||
|                 </div><!--toggle navigation end--> | ||||
|                 <div id="lessonTitleWrapper" > | ||||
|                     <h1 class="lessonTitle"></h1> | ||||
|                 <div id="lesson-title-wrapper" > | ||||
|                      | ||||
|                 </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> | ||||
|  | ||||
| @ -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;} | ||||
|  | ||||
| @ -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; | ||||
| } | ||||
| @ -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; | ||||
| 				// check if all are ready | ||||
| 			} | ||||
| 				 | ||||
| 			}; | ||||
|  | ||||
| 			this.areHelpsReady = function (curHelp) { | ||||
| 				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; | ||||
| }); | ||||
| @ -18,4 +18,4 @@ define(['jquery', | ||||
| 			this.trigger('menuData:loaded'); | ||||
| 		} | ||||
| 	}); | ||||
| }) | ||||
| }); | ||||
| @ -8,18 +8,3 @@ 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); | ||||
|  //        } | ||||
|  //    } | ||||
|  | ||||
|  | ||||
| @ -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); | ||||
| 		} | ||||
| 	}); | ||||
| }); | ||||
							
								
								
									
										23
									
								
								src/main/webapp/js/goatApp/view/HelpView.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										23
									
								
								src/main/webapp/js/goatApp/view/HelpView.js
									
									
									
									
									
										Normal file
									
								
							| @ -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); | ||||
| 		} | ||||
| 	}); | ||||
| }); | ||||
| @ -17,7 +17,7 @@ function($, | ||||
| 			 | ||||
| 		}, | ||||
| 		onModelLoaded: function() { | ||||
| 			// ??? | ||||
| 			this.trigger('plan:loaded',{'helpElement':'plan','value':true}); | ||||
| 		} | ||||
| 	}); | ||||
| }); | ||||
| @ -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}); | ||||
| 		} | ||||
| 	}); | ||||
| }); | ||||
| @ -1,23 +1,21 @@ | ||||
| define(['jquery', | ||||
| 	'underscore', | ||||
| 	'backbone', | ||||
| 	'goatApp/model/LessonSourceModel'], | ||||
| 	'goatApp/model/LessonSourceModel', | ||||
| 	'goatApp/view/HelpView'], | ||||
| function($, | ||||
| 	_, | ||||
| 	Backbone, | ||||
| 	LessonSourceModel) { | ||||
| 	return Backbone.View.extend({ | ||||
| 	LessonSourceModel, | ||||
| 	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() { | ||||
| 			// ??? | ||||
| 		} | ||||
| 	}); | ||||
| }); | ||||
| @ -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); | ||||
| 		} | ||||
| 	}); | ||||
| }); | ||||
		Reference in New Issue
	
	Block a user