intial layin of lesson menu
This commit is contained in:
Jason White
parent
1c444ccdea
commit
c0aeaa25dc
@ -2,10 +2,10 @@ define(['jquery',
|
|||||||
'underscore',
|
'underscore',
|
||||||
'backbone',
|
'backbone',
|
||||||
'goatApp/model/MenuItemModel'],
|
'goatApp/model/MenuItemModel'],
|
||||||
function($,_,Backbone,MenuItemModel) {
|
function($,_,Backbone,MenuModel) {
|
||||||
|
|
||||||
return Backbone.Collection.extend({
|
return Backbone.Collection.extend({
|
||||||
model: MenuItemModel,
|
model: MenuModel,
|
||||||
url:'service/lessonmenu.mvc',
|
url:'service/lessonmenu.mvc',
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var self = this;
|
var self = this;
|
||||||
175
src/main/webapp/js/goatApp/support/GoatUtils.js
Normal file
175
src/main/webapp/js/goatApp/support/GoatUtils.js
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
define(['jquery',
|
||||||
|
'underscore',
|
||||||
|
'backbone'],
|
||||||
|
function($,
|
||||||
|
_,
|
||||||
|
Backbone) {
|
||||||
|
var goatUtils = {
|
||||||
|
makeId: function(lessonName) {
|
||||||
|
//var id =
|
||||||
|
return lessonName.replace(/\s|\(|\)|\!|\:|\;|\@|\#|\$|\%|\^|\&|\*/g, '');
|
||||||
|
},
|
||||||
|
addMenuClasses: function(arr) {
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
var menuItem = arr[i];
|
||||||
|
//console.log(menuItem);
|
||||||
|
if (menuItem.type && menuItem.type === 'CATEGORY') {
|
||||||
|
menuItem.class = 'fa-angle-right pull-right';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
},
|
||||||
|
// debugFormSubmission: false,
|
||||||
|
// pre-submit callback
|
||||||
|
showRequest: function(formData, jqForm, options) {
|
||||||
|
if (goat.utils.debugFormSubmission) {
|
||||||
|
// formData is an array; here we use $.param to convert it to a string to display it
|
||||||
|
// but the form plugin does this for you automatically when it submits the data
|
||||||
|
var queryString = $.param(formData);
|
||||||
|
|
||||||
|
// jqForm is a jQuery object encapsulating the form element. To access the
|
||||||
|
// DOM element for the form do this:
|
||||||
|
// var formElement = jqForm[0];
|
||||||
|
|
||||||
|
alert('About to submit: \n\n' + queryString);
|
||||||
|
}
|
||||||
|
// here we could return false to prevent the form from being submitted;
|
||||||
|
// returning anything other than false will allow the form submit to continue
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
// post-submit callback
|
||||||
|
showResponse: function(responseText, statusText, xhr, $form) {
|
||||||
|
// for normal html responses, the first argument to the success callback
|
||||||
|
// is the XMLHttpRequest object's responseText property
|
||||||
|
|
||||||
|
// if the ajaxForm method was passed an Options Object with the dataType
|
||||||
|
// property set to 'xml' then the first argument to the success callback
|
||||||
|
// is the XMLHttpRequest object's responseXML property
|
||||||
|
|
||||||
|
// if the ajaxForm method was passed an Options Object with the dataType
|
||||||
|
// property set to 'json' then the first argument to the success callback
|
||||||
|
// is the json data object returned by the server
|
||||||
|
if (goat.utils.debugFormSubmission) {
|
||||||
|
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
|
||||||
|
'\n\nThe output div should have already been updated with the responseText.');
|
||||||
|
}
|
||||||
|
// update lesson cookies and params
|
||||||
|
// make any embedded forms ajaxy
|
||||||
|
goat.utils.showLessonCookiesAndParams();
|
||||||
|
// forms and links are now hooked with each standard lesson render (see Java class Screen.getContent())
|
||||||
|
// but these are safe to call twice
|
||||||
|
goat.utils.makeFormsAjax();
|
||||||
|
goat.utils.ajaxifyAttackHref(); //TODO find some way to hook scope for current menu. Likely needs larger refactor which is already started/stashed
|
||||||
|
//refresh menu
|
||||||
|
angular.element($('#leftside-navigation')).scope().renderMenu();
|
||||||
|
},
|
||||||
|
makeFormsAjax: function() {
|
||||||
|
// make all forms ajax forms
|
||||||
|
var options = {
|
||||||
|
target: '#lesson_content', // target element(s) to be updated with server response
|
||||||
|
beforeSubmit: goat.utils.showRequest, // pre-submit callback, comment out after debugging
|
||||||
|
success: goat.utils.showResponse // post-submit callback, comment out after debugging
|
||||||
|
|
||||||
|
// other available options:
|
||||||
|
//url: url // override for form's 'action' attribute
|
||||||
|
//type: type // 'get' or 'post', override for form's 'method' attribute
|
||||||
|
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
|
||||||
|
//clearForm: true // clear all form fields after successful submit
|
||||||
|
//resetForm: true // reset the form after successful submit
|
||||||
|
|
||||||
|
// $.ajax options can be used here too, for example:
|
||||||
|
//timeout: 3000
|
||||||
|
};
|
||||||
|
//console.log("Hooking any lesson forms to make them ajax");
|
||||||
|
$("form").ajaxForm(options);
|
||||||
|
},
|
||||||
|
displayButton: function(id, show) {
|
||||||
|
if ($('#' + id)) {
|
||||||
|
if (show) {
|
||||||
|
$('#' + id).show();
|
||||||
|
} else {
|
||||||
|
$('#' + id).hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
showLessonCookiesAndParams: function() {
|
||||||
|
$.get(goatConstants.cookieService, {}, function(reply) {
|
||||||
|
$("#lesson_cookies").html(reply);
|
||||||
|
}, "html");
|
||||||
|
},
|
||||||
|
showLessonHints: function() {
|
||||||
|
$('.lessonHelp').hide();
|
||||||
|
$('#lesson_hint').html();
|
||||||
|
$('#lesson_hint_row').show();
|
||||||
|
},
|
||||||
|
showLessonSource: function(source) {
|
||||||
|
$('.lessonHelp').hide();
|
||||||
|
//$('#lesson_source').html("<pre>"+goat.lesson.lessonInfo.source+"</pre>");
|
||||||
|
$('#lesson_source_row').show();
|
||||||
|
goat.utils.scrollToHelp();
|
||||||
|
},
|
||||||
|
showLessonSolution: function() {
|
||||||
|
$('.lessonHelp').hide();
|
||||||
|
$('#lesson_solution').html(goat.lesson.lessonInfo.solution);
|
||||||
|
$('#lesson_solution_row').show();
|
||||||
|
goat.utils.scrollToHelp();
|
||||||
|
},
|
||||||
|
showLessonPlan: function(plan) {
|
||||||
|
$('.lessonHelp').hide();
|
||||||
|
$("#lesson_plan").html(goat.lesson.lessonInfo.plan);
|
||||||
|
$('#lesson_plan_row').show();
|
||||||
|
goat.utils.scrollToHelp();
|
||||||
|
},
|
||||||
|
scrollToHelp: function() {
|
||||||
|
$('#leftside-navigation').height($('#main-content').height() + 15)
|
||||||
|
var target = $('#lessonHelpsWrapper');
|
||||||
|
goat.utils.scrollEasy(target);
|
||||||
|
},
|
||||||
|
scrollToTop: function() {
|
||||||
|
$('.lessonHelp').hide();
|
||||||
|
var target = $('#container');
|
||||||
|
goat.utils.scrollEasy(target);
|
||||||
|
},
|
||||||
|
scrollEasy: function(target) {
|
||||||
|
$('html,body').animate({
|
||||||
|
scrollTop: target.offset().top
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
scrapeParams: function(url) {
|
||||||
|
if (!url) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var params = url.split('?')[1].split('&');
|
||||||
|
var paramsArr = [];
|
||||||
|
for (var i = 0; i < params.length; i++) {
|
||||||
|
var paramObj = {};
|
||||||
|
paramObj.name = params[i].split('=')[0];
|
||||||
|
paramObj.value = params[i].split('=')[1];
|
||||||
|
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);
|
||||||
|
},
|
||||||
|
ajaxifyAttackHref: function() { // rewrite any links with hrefs point to relative attack URLs
|
||||||
|
$.each($('a[href^="attack?"]'),
|
||||||
|
function(i,el) {
|
||||||
|
var url = $(el).attr('href');
|
||||||
|
$(el).unbind('click').attr('href','#').attr('link',url);
|
||||||
|
//TODO pull currentMenuId
|
||||||
|
$(el).click(function() {
|
||||||
|
event.preventDefault();
|
||||||
|
var _url = $(el).attr('link');
|
||||||
|
$.get(_url, {success:showResponse});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return goatUtils;
|
||||||
|
});
|
||||||
@ -1,220 +0,0 @@
|
|||||||
goatUtils = {
|
|
||||||
//TODO add recursion to handle arr[i].children objects
|
|
||||||
// ... in case lower-level's need classes as well ... don't right now
|
|
||||||
addMenuClasses: function(arr) {
|
|
||||||
for (var i = 0; i < arr.length; i++) {
|
|
||||||
var menuItem = arr[i];
|
|
||||||
//console.log(menuItem);
|
|
||||||
if (menuItem.type && menuItem.type === 'CATEGORY') {
|
|
||||||
menuItem.class = 'fa-angle-right pull-right';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return arr;
|
|
||||||
},
|
|
||||||
debugFormSubmission: false,
|
|
||||||
// pre-submit callback
|
|
||||||
showRequest: function(formData, jqForm, options) {
|
|
||||||
if (goat.utils.debugFormSubmission) {
|
|
||||||
// formData is an array; here we use $.param to convert it to a string to display it
|
|
||||||
// but the form plugin does this for you automatically when it submits the data
|
|
||||||
var queryString = $.param(formData);
|
|
||||||
|
|
||||||
// jqForm is a jQuery object encapsulating the form element. To access the
|
|
||||||
// DOM element for the form do this:
|
|
||||||
// var formElement = jqForm[0];
|
|
||||||
|
|
||||||
alert('About to submit: \n\n' + queryString);
|
|
||||||
}
|
|
||||||
// here we could return false to prevent the form from being submitted;
|
|
||||||
// returning anything other than false will allow the form submit to continue
|
|
||||||
return true;
|
|
||||||
},
|
|
||||||
// post-submit callback
|
|
||||||
showResponse: function(responseText, statusText, xhr, $form) {
|
|
||||||
// for normal html responses, the first argument to the success callback
|
|
||||||
// is the XMLHttpRequest object's responseText property
|
|
||||||
|
|
||||||
// if the ajaxForm method was passed an Options Object with the dataType
|
|
||||||
// property set to 'xml' then the first argument to the success callback
|
|
||||||
// is the XMLHttpRequest object's responseXML property
|
|
||||||
|
|
||||||
// if the ajaxForm method was passed an Options Object with the dataType
|
|
||||||
// property set to 'json' then the first argument to the success callback
|
|
||||||
// is the json data object returned by the server
|
|
||||||
if (goat.utils.debugFormSubmission) {
|
|
||||||
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
|
|
||||||
'\n\nThe output div should have already been updated with the responseText.');
|
|
||||||
}
|
|
||||||
// update lesson cookies and params
|
|
||||||
// make any embedded forms ajaxy
|
|
||||||
goat.utils.showLessonCookiesAndParams();
|
|
||||||
// forms and links are now hooked with each standard lesson render (see Java class Screen.getContent())
|
|
||||||
// but these are safe to call twice
|
|
||||||
goat.utils.makeFormsAjax();
|
|
||||||
goat.utils.ajaxifyAttackHref(); //TODO find some way to hook scope for current menu. Likely needs larger refactor which is already started/stashed
|
|
||||||
//refresh menu
|
|
||||||
angular.element($('#leftside-navigation')).scope().renderMenu();
|
|
||||||
},
|
|
||||||
makeFormsAjax: function() {
|
|
||||||
// make all forms ajax forms
|
|
||||||
var options = {
|
|
||||||
target: '#lesson_content', // target element(s) to be updated with server response
|
|
||||||
beforeSubmit: goat.utils.showRequest, // pre-submit callback, comment out after debugging
|
|
||||||
success: goat.utils.showResponse // post-submit callback, comment out after debugging
|
|
||||||
|
|
||||||
// other available options:
|
|
||||||
//url: url // override for form's 'action' attribute
|
|
||||||
//type: type // 'get' or 'post', override for form's 'method' attribute
|
|
||||||
//dataType: null // 'xml', 'script', or 'json' (expected server response type)
|
|
||||||
//clearForm: true // clear all form fields after successful submit
|
|
||||||
//resetForm: true // reset the form after successful submit
|
|
||||||
|
|
||||||
// $.ajax options can be used here too, for example:
|
|
||||||
//timeout: 3000
|
|
||||||
};
|
|
||||||
//console.log("Hooking any lesson forms to make them ajax");
|
|
||||||
$("form").ajaxForm(options);
|
|
||||||
},
|
|
||||||
enhanceMenuData: function (menuItems,selectedItem) {
|
|
||||||
for (var i = 0; i < menuItems.length; i++) {
|
|
||||||
menuItems[i].id = goatUtils.makeId(menuItems[i].name);//TODO move the replace routine into util function
|
|
||||||
if (selectedItem) {
|
|
||||||
}
|
|
||||||
//TODO: maintain state marker on refresh
|
|
||||||
//menuItems[i].displayClass = ($scope.openMenu === menuItems[i].id) ? goatConstants.getClasses().keepOpenClass : '';
|
|
||||||
//TODO: move to utility method
|
|
||||||
if (menuItems[i].children) {
|
|
||||||
for (var j = 0; j < menuItems[i].children.length; j++) {
|
|
||||||
menuItems[i].children[j].id = goatUtils.makeId(menuItems[i].children[j].name);
|
|
||||||
//handle selected Menu state
|
|
||||||
if (menuItems[i].children[j].id === selectedItem) {
|
|
||||||
menuItems[i].children[j].selectedClass = goatConstants.getClasses().selectedMenuClass;
|
|
||||||
menuItems[i].selectedClass = goatConstants.getClasses().selectedMenuClass;
|
|
||||||
}
|
|
||||||
//handle complete state
|
|
||||||
if (menuItems[i].children[j].complete) {
|
|
||||||
menuItems[i].children[j].completeClass = goatConstants.getClasses().lessonCompleteClass;
|
|
||||||
} else {
|
|
||||||
menuItems[i].children[j].completeClass = '';
|
|
||||||
}
|
|
||||||
if (menuItems[i].children[j].children) {
|
|
||||||
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 = goatUtils.makeId(menuItems[i].children[j].children[k].name);
|
|
||||||
//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 === selectedItem) {
|
|
||||||
menuItems[i].children[j].children[k].selectedClass = goatConstants.getClasses().selectedMenuClass;
|
|
||||||
menuItems[i].children[j].selectedClass = goatConstants.getClasses().selectedMenuClass;
|
|
||||||
}
|
|
||||||
//handle complete state
|
|
||||||
if (menuItems[i].children[j].children[k].complete) {
|
|
||||||
menuItems[i].children[j].children[k].completeClass = goatConstants.lessonCompleteClass;
|
|
||||||
} else {
|
|
||||||
menuItems[i].children[j].children[k].completeClass = ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} // done parsing menuItems
|
|
||||||
},
|
|
||||||
//
|
|
||||||
displayButton: function(id, show) {
|
|
||||||
if ($('#' + id)) {
|
|
||||||
if (show) {
|
|
||||||
$('#' + id).show();
|
|
||||||
} else {
|
|
||||||
$('#' + id).hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
showLessonCookiesAndParams: function() {
|
|
||||||
$.get(goatConstants.cookieService, {}, function(reply) {
|
|
||||||
$("#lesson_cookies").html(reply);
|
|
||||||
}, "html");
|
|
||||||
},
|
|
||||||
showLessonHints: function() {
|
|
||||||
$('.lessonHelp').hide();
|
|
||||||
$('#lesson_hint').html();
|
|
||||||
$('#lesson_hint_row').show();
|
|
||||||
},
|
|
||||||
showLessonSource: function(source) {
|
|
||||||
$('.lessonHelp').hide();
|
|
||||||
//$('#lesson_source').html("<pre>"+goat.lesson.lessonInfo.source+"</pre>");
|
|
||||||
$('#lesson_source_row').show();
|
|
||||||
goat.utils.scrollToHelp();
|
|
||||||
},
|
|
||||||
showLessonSolution: function() {
|
|
||||||
$('.lessonHelp').hide();
|
|
||||||
$('#lesson_solution').html(goat.lesson.lessonInfo.solution);
|
|
||||||
$('#lesson_solution_row').show();
|
|
||||||
goat.utils.scrollToHelp();
|
|
||||||
},
|
|
||||||
showLessonPlan: function(plan) {
|
|
||||||
$('.lessonHelp').hide();
|
|
||||||
$("#lesson_plan").html(goat.lesson.lessonInfo.plan);
|
|
||||||
$('#lesson_plan_row').show();
|
|
||||||
goat.utils.scrollToHelp();
|
|
||||||
},
|
|
||||||
scrollToHelp: function() {
|
|
||||||
$('#leftside-navigation').height($('#main-content').height() + 15)
|
|
||||||
var target = $('#lessonHelpsWrapper');
|
|
||||||
goat.utils.scrollEasy(target);
|
|
||||||
},
|
|
||||||
scrollToTop: function() {
|
|
||||||
$('.lessonHelp').hide();
|
|
||||||
var target = $('#container');
|
|
||||||
goat.utils.scrollEasy(target);
|
|
||||||
},
|
|
||||||
scrollEasy: function(target) {
|
|
||||||
$('html,body').animate({
|
|
||||||
scrollTop: target.offset().top
|
|
||||||
}, 1000);
|
|
||||||
},
|
|
||||||
scrapeParams: function(url) {
|
|
||||||
if (!url) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var params = url.split('?')[1].split('&');
|
|
||||||
var paramsArr = [];
|
|
||||||
for (var i = 0; i < params.length; i++) {
|
|
||||||
var paramObj = {};
|
|
||||||
paramObj.name = params[i].split('=')[0];
|
|
||||||
paramObj.value = params[i].split('=')[1];
|
|
||||||
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);
|
|
||||||
},
|
|
||||||
makeId: function(lessonName) {
|
|
||||||
return lessonName.replace(/\s|\(|\)|\!|\:|\;|\@|\#|\$|\%|\^|\&|\*/g, '');//TODO move the replace routine into util function
|
|
||||||
},
|
|
||||||
ajaxifyAttackHref: function() {
|
|
||||||
// rewrite any links with hrefs point to relative attack URLs
|
|
||||||
$.each($('a[href^="attack?"]'),
|
|
||||||
function(i,el) {
|
|
||||||
var url = $(el).attr('href');
|
|
||||||
$(el).unbind('click').attr('href','#').attr('link',url);
|
|
||||||
//TODO pull currentMenuId
|
|
||||||
$(el).click(function() {
|
|
||||||
event.preventDefault();
|
|
||||||
var _url = $(el).attr('link');
|
|
||||||
$.get(_url, {success:showResponse});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
$(window).resize(function() {
|
|
||||||
//$('#leftside-navigation').css('height',$('div.panel-body').height());
|
|
||||||
console.log($(window).height());
|
|
||||||
});
|
|
||||||
@ -1,14 +1,30 @@
|
|||||||
define(['jquery',
|
define(['jquery',
|
||||||
'underscore',
|
'underscore',
|
||||||
'backbone'], function($,_,Backbone) {
|
'backbone',
|
||||||
|
'goatApp/support/GoatUtils',
|
||||||
|
'goatApp/view/MenuItemView'],
|
||||||
|
function(
|
||||||
|
$,
|
||||||
|
_,
|
||||||
|
Backbone,
|
||||||
|
GoatUtils,
|
||||||
|
MenuItemView) {
|
||||||
|
|
||||||
return Backbone.View.extend({
|
return Backbone.View.extend({
|
||||||
initialize: function(options) {
|
initialize: function(options) {
|
||||||
options = options || {};
|
options = options || {};
|
||||||
|
this.items = options.items;
|
||||||
|
},
|
||||||
|
render: function() {
|
||||||
|
var viewItems = [];
|
||||||
|
for (var i=0;i<this.items.length;i++) {
|
||||||
|
var listItem = $('<li>',{text:this.items[i].name});
|
||||||
|
//viewItems
|
||||||
|
viewItems.push(listItem);
|
||||||
|
}
|
||||||
|
return viewItems;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
37
src/main/webapp/js/goatApp/view/MenuModel.js
Normal file
37
src/main/webapp/js/goatApp/view/MenuModel.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
// define(['jquery',
|
||||||
|
// 'underscore',
|
||||||
|
// 'backbone',
|
||||||
|
// 'goatApp/model/MenuItemModel',
|
||||||
|
// 'goatApp/model/MenuItemCollection'],
|
||||||
|
// function($,_,Backbone,MenuItemModel,MenuItemCollection) {
|
||||||
|
|
||||||
|
// return Backbone.View.extend({
|
||||||
|
// initialize: function(options) {
|
||||||
|
// options = options || {};
|
||||||
|
// //if children, generate Stage views
|
||||||
|
// this.collection = new MenuItemCollection();
|
||||||
|
// this.collection.set(options.collection);
|
||||||
|
// },
|
||||||
|
// render: function() {
|
||||||
|
// //example
|
||||||
|
// /*
|
||||||
|
// "name": "Using an Access Control Matrix",
|
||||||
|
// "type": "LESSON",
|
||||||
|
// "children": [ ],
|
||||||
|
// "complete": false,
|
||||||
|
// "link": "#attack/18/200",
|
||||||
|
// "showSource": true,
|
||||||
|
// "showHints": true
|
||||||
|
// */
|
||||||
|
// var link = $('<a>',{});
|
||||||
|
// var listItem = $('<li>',{class:'sub-menu',text:this.model.get('name')});
|
||||||
|
|
||||||
|
// listItem.append(link);
|
||||||
|
// //this.model.get('name') + this.model.get('children').length + '</li>';
|
||||||
|
// return listItem;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
// });
|
||||||
|
|
||||||
|
// });
|
||||||
14
src/main/webapp/js/goatApp/view/MenuStageView.js
Normal file
14
src/main/webapp/js/goatApp/view/MenuStageView.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
define(['jquery',
|
||||||
|
'underscore',
|
||||||
|
'backbone'], function($,_,Backbone) {
|
||||||
|
|
||||||
|
return Backbone.View.extend({
|
||||||
|
initialize: function(options) {
|
||||||
|
options = options || {};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
@ -1,57 +1,37 @@
|
|||||||
define(['jquery',
|
define(['jquery',
|
||||||
'underscore',
|
'underscore',
|
||||||
'backbone',
|
'backbone',
|
||||||
'goatApp/model/MenuItemCollection'],
|
'goatApp/model/MenuCollection',
|
||||||
function($,_,Backbone,MenuItemCollection) {
|
'goatApp/view/MenuItemView'],
|
||||||
|
function($,_,Backbone,MenuCollection,MenuItemView) {
|
||||||
|
|
||||||
return Backbone.View.extend({
|
return Backbone.View.extend({
|
||||||
el:'#menuContainer',
|
el:'#menuContainer',
|
||||||
//TODO: set template
|
//TODO: set template
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this.collection = new MenuItemCollection();
|
this.collection = new MenuCollection();
|
||||||
this.listenTo(this.collection,'menuData:loaded',this.render);
|
this.listenTo(this.collection,'menuData:loaded',this.render);
|
||||||
},
|
},
|
||||||
|
// rendering top level menu
|
||||||
render: function (model){
|
render: function (model){
|
||||||
//TODO: implement own HTML Encoder
|
var items = this.collection.models; // top level items
|
||||||
this.$el.html('render ' + this.collection.length + ' items');//buildMenu(items)
|
var menuMarkup = '';
|
||||||
},
|
var menuUl = $('<ul>',{class:'nano-content'});
|
||||||
buildMenu: function(items) {
|
for(var i=0;i<items.length;i++) {
|
||||||
|
var category = $('<li>',{class:'sub-menu'});
|
||||||
var menuData = new MenuData();
|
var catLink = $('<a>',{text:items[i].get('name')});
|
||||||
|
category.append(catLink);
|
||||||
var i, j, k, $wholeMenu, $menuCat, itemClass, $lessonItem, lessons, stages, $stageItem;
|
// lesson level (first children level)
|
||||||
var _renderMenu = function (items) {
|
var categoryLessonList = $('<ul>',{class:'slideDown lessonsAndStages'});
|
||||||
$wholeMenu = $('<ul>');
|
var catItems = new MenuItemView({items:items[i].get('children')}).render();
|
||||||
for (var i=0;i<items.length;i++){
|
for (var j=0;j< catItems.length;j++) {
|
||||||
// should be at category level ...
|
categoryLessonList.append(catItems[j]);
|
||||||
itemClass = (items[i].class || '');
|
|
||||||
if (items[i].type && items.type === 'CATEGORY') {
|
|
||||||
itemClass += 'fa-angle-right pull-right';
|
|
||||||
}
|
|
||||||
var $menuCat = $('<li>',{text:items[i].name,class:itemClass});
|
|
||||||
$wholeMenu.append($menuCat);
|
|
||||||
var lessonList = $('<ul>',{class:'slideDown lessonsAndStages' + items[0].displayClass,id:items[0].id}) //
|
|
||||||
// first tier lessons
|
|
||||||
var lessons = items[i].children;
|
|
||||||
for (j=0;j<lessons.length;j++) {
|
|
||||||
itemClass = (lessons[j].class || '');
|
|
||||||
$lessonItem = $('<li>',{text:lessons[j].name,id:lessons[j].id});//add click
|
|
||||||
lessonList.append($lessonItem);
|
|
||||||
//stages (children of lesson)
|
|
||||||
stages = lessons[j].children;
|
|
||||||
for (k=0;k<stages.length;k++) {
|
|
||||||
$stageItem = $('<li>',{text:stages[k].name,id:stages[k].id});
|
|
||||||
lessonList.append($stageItem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
$menuCat.append(lessonList);
|
|
||||||
}
|
}
|
||||||
return $wholeMenu;
|
category.append(categoryLessonList);
|
||||||
//$wholeMenu.append($menuCat);
|
menuUl.append(category);
|
||||||
$(goatConstants.getDOMContainers().lessonMenu).html('').append($wholeMenu);
|
}
|
||||||
};
|
this.$el.append(menuUl);
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user