|
/*global gmm */ |
|
if (!this.gmm || typeof this.gmm !== 'object') { |
|
this.gmm = {}; |
|
} |
|
(function () { |
|
'use strict'; |
|
gmm.Viewer.module('NavbarModule', function (Mod, Viewer, Backbone, Marionette, $, _) { |
|
|
|
//================================== |
|
//initializer called on Viewer.start(options) |
|
//================================== |
|
Mod.addInitializer(function (options) { |
|
Mod.controller = new Controller({ |
|
toolItems: options.toolItems, |
|
//we pass in the region from the app because it will be |
|
//converted into a Marionette.Region for us |
|
region: Viewer.toolsRegion |
|
}); |
|
}); |
|
|
|
|
|
//================================== |
|
//Controller for the NavbarModule |
|
//================================== |
|
var Controller = Backbone.Marionette.Controller.extend({ |
|
initialize: function (options) { |
|
_.bindAll(); |
|
this.region = options.region; |
|
console.log('NavbarModule:Controller:initialize'); |
|
//convert tools array to a collection |
|
this.collection = new ToolItemCollection(options.toolItems); |
|
//create the list view and pass in the collection |
|
this.view = new ToolListView({ collection: this.collection }); |
|
//render it all once, now. Since the items don't change |
|
//while the app is running, we never need to re-render |
|
this.region.show(this.view); |
|
|
|
$('#current-item').on('click', function () { |
|
Viewer.vent.trigger('Navbar:ToggleMenu'); |
|
$('#menu-widget').toggleClass('rotated'); |
|
}); |
|
|
|
//hook up App events |
|
Viewer.vent.on('Navbar:ChangeItemName', function (name) { |
|
console.log('NavbarController caught Navbar:ChangeItemName'); |
|
//change the displayed value in the ui |
|
$('#current-item-name').text(name); |
|
}); |
|
|
|
Viewer.vent.on('Navbar:ShowMenu', function (name) { |
|
console.log('NavbarController caught Navbar:ShowMenu'); |
|
//change the displayed value in the ui |
|
$('#current-item-name').text(name); |
|
}); |
|
Viewer.vent.on('Navbar:HideMenu', function (name) { |
|
console.log('NavbarController caught Navbar:HideMenu'); |
|
//change the displayed value in the ui |
|
$('#current-item-name').text(name); |
|
}); |
|
} |
|
}); |
|
|
|
|
|
//Model |
|
var ToolItemModel = Backbone.Model.extend({}); |
|
//Collection |
|
var ToolItemCollection = Backbone.Collection.extend({ |
|
model: ToolItemModel |
|
}); |
|
|
|
var ToolItemView = Backbone.Marionette.ItemView.extend({ |
|
model: ToolItemModel, |
|
template: '#tool-template', |
|
tagName: 'li', |
|
events: {'click': 'itemClicked'}, |
|
itemClicked: function(){ |
|
console.log('ToolItemClicked: '+ this.model.get('name')); |
|
Viewer.vent.trigger(this.model.get('eventToRaise'), this); |
|
|
|
} |
|
}); |
|
|
|
var ToolListView = Backbone.Marionette.CollectionView.extend({ |
|
itemView: ToolItemView, |
|
tagName: 'ul' |
|
}); |
|
|
|
}); |
|
})(); |