2017-01-31 07:50:28 +01:00
|
|
|
const Backbone = require('backbone');
|
2018-10-22 20:16:08 +02:00
|
|
|
const Keys = require('../../const/keys');
|
|
|
|
const KeyHandler = require('../../comp/key-handler');
|
2017-01-31 07:50:28 +01:00
|
|
|
const Resizable = require('../../mixins/resizable');
|
|
|
|
const MenuSectionView = require('./menu-section-view');
|
|
|
|
const DragView = require('../drag-view');
|
|
|
|
const AppSettingsModel = require('../../models/app-settings-model');
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2017-01-31 07:50:28 +01:00
|
|
|
const MenuView = Backbone.View.extend({
|
2015-12-16 22:50:45 +01:00
|
|
|
template: require('templates/menu/menu.hbs'),
|
2015-10-17 23:49:24 +02:00
|
|
|
|
|
|
|
events: {},
|
|
|
|
|
|
|
|
sectionViews: [],
|
|
|
|
|
2016-03-08 11:04:50 +01:00
|
|
|
minWidth: 130,
|
2015-10-17 23:49:24 +02:00
|
|
|
maxWidth: 300,
|
|
|
|
|
|
|
|
initialize: function () {
|
|
|
|
this.listenTo(this.model, 'change:sections', this.menuChanged);
|
2015-11-11 19:58:29 +01:00
|
|
|
this.listenTo(this, 'view-resize', this.viewResized);
|
2018-10-22 20:16:08 +02:00
|
|
|
KeyHandler.onKey(Keys.DOM_VK_UP, this.selectPreviousSection, this, KeyHandler.SHORTCUT_ACTION + KeyHandler.SHORTCUT_OPT);
|
|
|
|
KeyHandler.onKey(Keys.DOM_VK_DOWN, this.selectNextSection, this, KeyHandler.SHORTCUT_ACTION + KeyHandler.SHORTCUT_OPT);
|
2015-10-17 23:49:24 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
remove: function() {
|
2016-07-17 13:30:38 +02:00
|
|
|
this.sectionViews.forEach(sectionView => sectionView.remove());
|
2015-10-17 23:49:24 +02:00
|
|
|
this.sectionViews = [];
|
|
|
|
Backbone.View.prototype.remove.apply(this, arguments);
|
|
|
|
},
|
|
|
|
|
|
|
|
render: function () {
|
|
|
|
this.$el.html(this.template());
|
2017-01-31 07:50:28 +01:00
|
|
|
const sectionsEl = this.$el.find('.menu');
|
2015-10-17 23:49:24 +02:00
|
|
|
this.model.get('sections').forEach(function(section) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const sectionView = new MenuSectionView({ el: sectionsEl, model: section });
|
2015-10-17 23:49:24 +02:00
|
|
|
sectionView.render();
|
|
|
|
if (section.get('drag')) {
|
2017-01-31 07:50:28 +01:00
|
|
|
const dragView = new DragView('y');
|
|
|
|
const dragEl = $('<div/>').addClass('menu__drag-section').appendTo(sectionsEl);
|
2015-10-17 23:49:24 +02:00
|
|
|
sectionView.listenDrag(dragView);
|
|
|
|
dragView.setElement(dragEl).render();
|
|
|
|
this.sectionViews.push(dragView);
|
|
|
|
}
|
|
|
|
this.sectionViews.push(sectionView);
|
|
|
|
}, this);
|
2015-11-11 19:58:29 +01:00
|
|
|
if (typeof AppSettingsModel.instance.get('menuViewWidth') === 'number') {
|
|
|
|
this.$el.width(AppSettingsModel.instance.get('menuViewWidth'));
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
return this;
|
|
|
|
},
|
|
|
|
|
|
|
|
menuChanged: function() {
|
|
|
|
this.render();
|
2015-10-24 11:15:54 +02:00
|
|
|
},
|
|
|
|
|
2016-07-17 13:30:38 +02:00
|
|
|
viewResized: _.throttle(size => {
|
2015-11-11 19:58:29 +01:00
|
|
|
AppSettingsModel.instance.set('menuViewWidth', size);
|
|
|
|
}, 1000),
|
|
|
|
|
2015-10-26 22:07:19 +01:00
|
|
|
switchVisibility: function(visible) {
|
|
|
|
this.$el.toggleClass('menu-visible', visible);
|
2018-10-22 20:16:08 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
selectPreviousSection: function() {
|
|
|
|
Backbone.trigger('select-previous-menu-item');
|
|
|
|
},
|
|
|
|
|
|
|
|
selectNextSection: function() {
|
|
|
|
Backbone.trigger('select-next-menu-item');
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
_.extend(MenuView.prototype, Resizable);
|
|
|
|
|
|
|
|
module.exports = MenuView;
|