additonal help control changes
This commit is contained in:
parent
6312b1a08c
commit
7ace23ec0c
@ -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);
|
||||
}
|
||||
});
|
||||
});
|
Loading…
x
Reference in New Issue
Block a user