105 lines
3.3 KiB
JavaScript
105 lines
3.3 KiB
JavaScript
define(['jquery',
|
|
'underscore',
|
|
'backbone',
|
|
'goatApp/model/MenuCollection',
|
|
'goatApp/view/MenuItemView',
|
|
'goatApp/support/GoatUtils'],
|
|
function(
|
|
$,
|
|
_,
|
|
Backbone,
|
|
MenuCollection,
|
|
MenuItemView,
|
|
GoatUtils) {
|
|
return Backbone.View.extend({
|
|
el:'#menu-container',
|
|
//TODO: set template
|
|
initialize: function() {
|
|
this.collection = new MenuCollection();
|
|
this.listenTo(this.collection,'menuData:loaded',this.render);
|
|
this.listenTo(this,'menu:click',this.accordionMenu);
|
|
},
|
|
// rendering top level menu
|
|
render: function (model){
|
|
//for now, just brute force
|
|
//TODO: refactor into sub-views/components
|
|
var items, catItems, stages;
|
|
items = this.collection.models; // top level items
|
|
var menuMarkup = '';
|
|
var menuUl = $('<ul>',{class:'nano-content'});
|
|
for(var i=0;i<items.length;i++) { //CATEGORY LEVEL
|
|
var catId, category, catLink, catArrow, catLinkText, lessonName, stageName;
|
|
catId = GoatUtils.makeId(items[i].get('name'));
|
|
category = $('<li>',{class:'sub-menu ng-scope'});
|
|
catLink = $('<a>',{'category':catId});
|
|
catArrow = $('<i>',{class:'fa fa-angle-right pull-right'});
|
|
catLinkText = $('<span>',{text:items[i].get('name')});
|
|
|
|
catLink.append(catArrow);
|
|
catLink.append(catLinkText);
|
|
//TODO: refactor this along with sub-views/components
|
|
var self = this;
|
|
catLink.click(_.bind(this.expandCategory,this,catId));
|
|
category.append(catLink);
|
|
// lesson level (first children level)
|
|
//var lessons = new MenuItemView({items:items[i].get('children')}).render();
|
|
var lessons=items[i].get('children');
|
|
if (lessons) {
|
|
var categoryLessonList = $('<ul>',{class:'slideDown lessonsAndStages',id:catId}); //keepOpen
|
|
for (var j=0; j < lessons.length;j++) {
|
|
var lessonItem = $('<li>');
|
|
lessonName = lessons[j].name;
|
|
|
|
var lessonLink = $('<a>',{href:lessons[j].link,text:lessonName,id:lessonName});
|
|
lessonLink.click(_.bind(this.titleRender,this,lessonName));
|
|
lessonItem.append(lessonLink);
|
|
//check for lab/stages
|
|
categoryLessonList.append(lessonItem);
|
|
if (lessons[j].complete) {
|
|
lessonItem.append($('<span>',{class:'glyphicon glyphicon-check lesson-complete'}));
|
|
}
|
|
var stages = lessons[j].children;
|
|
for (k=0; k < stages.length; k++) {
|
|
var stageName = stages[k].name;
|
|
var stageLink = $('<a>',{href:stages[k].link,text:stageName,id:GoatUtils.makeId(stageName)});
|
|
stageSpan.append(stageLink);
|
|
categoryLessonList.append(stageSpan);
|
|
if (stages[j].complete) {
|
|
stageSpan.append($('<span>',{class:'glyphicon glyphicon-check lesson-complete'}));
|
|
}
|
|
}
|
|
}
|
|
category.append(categoryLessonList);
|
|
}
|
|
|
|
menuUl.append(category);
|
|
}
|
|
this.$el.append(menuUl);
|
|
//if we need to keep a menu open
|
|
if (this.openMenu) {
|
|
this.accordionMenu(this.openMenu);
|
|
}
|
|
},
|
|
|
|
titleRender: function (title) {
|
|
this.trigger('lesson:click',title);
|
|
},
|
|
|
|
expandCategory: function (id) {
|
|
if (id) {
|
|
this.accordionMenu(id);
|
|
}
|
|
},
|
|
|
|
accordionMenu: function(id) {
|
|
if (this.openMenu !== id) {
|
|
this.$el.find('#' + id).slideDown(300);
|
|
this.openMenu = id;
|
|
} else { //it's open
|
|
this.$el.find('#' + id).slideUp(300).attr('isOpen', 0);
|
|
this.openMenu = null;
|
|
return;
|
|
}
|
|
}
|
|
});
|
|
}); |