2019-09-16 22:57:56 +02:00
|
|
|
import { Events } from 'framework/events';
|
2019-09-16 20:42:33 +02:00
|
|
|
import { View } from 'framework/views/view';
|
2019-09-15 14:16:32 +02:00
|
|
|
import { KeyHandler } from 'comp/browser/key-handler';
|
|
|
|
import { Keys } from 'const/keys';
|
|
|
|
import { AppSettingsModel } from 'models/app-settings-model';
|
2019-09-16 20:42:33 +02:00
|
|
|
import { Resizable } from 'framework/views/resizable';
|
2019-09-15 14:16:32 +02:00
|
|
|
import { DragView } from 'views/drag-view';
|
|
|
|
import { MenuSectionView } from 'views/menu/menu-section-view';
|
2019-09-18 20:42:17 +02:00
|
|
|
import throttle from 'lodash/throttle';
|
2019-09-16 17:43:57 +02:00
|
|
|
import template from 'templates/menu/menu.hbs';
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 17:43:57 +02:00
|
|
|
class MenuView extends View {
|
|
|
|
parent = '.app__menu';
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 17:43:57 +02:00
|
|
|
template = template;
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 17:43:57 +02:00
|
|
|
events = {};
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 17:43:57 +02:00
|
|
|
sectionViews = [];
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 17:43:57 +02:00
|
|
|
minWidth = 130;
|
|
|
|
maxWidth = 300;
|
2019-09-21 07:41:33 +02:00
|
|
|
autoWidth = 150;
|
2019-09-16 17:43:57 +02:00
|
|
|
|
|
|
|
constructor(model, options) {
|
|
|
|
super(model, options);
|
2015-10-17 23:49:24 +02:00
|
|
|
this.listenTo(this.model, 'change:sections', this.menuChanged);
|
2015-11-11 19:58:29 +01:00
|
|
|
this.listenTo(this, 'view-resize', this.viewResized);
|
2019-09-16 17:43:57 +02:00
|
|
|
this.onKey(
|
2019-08-16 23:05:39 +02:00
|
|
|
Keys.DOM_VK_UP,
|
|
|
|
this.selectPreviousSection,
|
|
|
|
KeyHandler.SHORTCUT_ACTION + KeyHandler.SHORTCUT_OPT
|
|
|
|
);
|
2019-09-16 17:43:57 +02:00
|
|
|
this.onKey(
|
2019-08-16 23:05:39 +02:00
|
|
|
Keys.DOM_VK_DOWN,
|
|
|
|
this.selectNextSection,
|
|
|
|
KeyHandler.SHORTCUT_ACTION + KeyHandler.SHORTCUT_OPT
|
|
|
|
);
|
2019-09-16 17:43:57 +02:00
|
|
|
this.once('remove', () => {
|
2020-06-01 16:53:51 +02:00
|
|
|
this.sectionViews.forEach((sectionView) => sectionView.remove());
|
2019-09-16 17:43:57 +02:00
|
|
|
this.sectionViews = [];
|
|
|
|
});
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
render() {
|
2019-09-16 17:43:57 +02:00
|
|
|
super.render();
|
2017-01-31 07:50:28 +01:00
|
|
|
const sectionsEl = this.$el.find('.menu');
|
2020-06-01 16:53:51 +02:00
|
|
|
this.model.sections.forEach(function (section) {
|
2019-09-16 17:43:57 +02:00
|
|
|
const sectionView = new MenuSectionView(section, { parent: sectionsEl[0] });
|
2015-10-17 23:49:24 +02:00
|
|
|
sectionView.render();
|
2019-09-18 23:37:57 +02:00
|
|
|
if (section.drag) {
|
2020-06-01 16:53:51 +02:00
|
|
|
const dragEl = $('<div/>').addClass('menu__drag-section').appendTo(sectionsEl);
|
2019-09-15 21:22:23 +02:00
|
|
|
const dragView = new DragView('y', { parent: dragEl[0] });
|
2015-10-17 23:49:24 +02:00
|
|
|
sectionView.listenDrag(dragView);
|
2019-09-15 21:22:23 +02:00
|
|
|
dragView.render();
|
2015-10-17 23:49:24 +02:00
|
|
|
this.sectionViews.push(dragView);
|
|
|
|
}
|
|
|
|
this.sectionViews.push(sectionView);
|
|
|
|
}, this);
|
2019-09-17 19:50:42 +02:00
|
|
|
if (typeof AppSettingsModel.menuViewWidth === 'number') {
|
|
|
|
this.$el.width(AppSettingsModel.menuViewWidth);
|
2015-11-11 19:58:29 +01:00
|
|
|
}
|
2019-09-16 17:43:57 +02:00
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
menuChanged() {
|
2015-10-17 23:49:24 +02:00
|
|
|
this.render();
|
2019-09-16 17:43:57 +02:00
|
|
|
}
|
2015-10-24 11:15:54 +02:00
|
|
|
|
2020-06-01 16:53:51 +02:00
|
|
|
viewResized = throttle((size) => {
|
2019-09-17 19:50:42 +02:00
|
|
|
AppSettingsModel.menuViewWidth = size;
|
2019-09-16 17:43:57 +02:00
|
|
|
}, 1000);
|
2015-11-11 19:58:29 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
switchVisibility(visible) {
|
2015-10-26 22:07:19 +01:00
|
|
|
this.$el.toggleClass('menu-visible', visible);
|
2019-09-16 17:43:57 +02:00
|
|
|
}
|
2018-10-22 20:16:08 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
selectPreviousSection() {
|
2019-09-16 22:57:56 +02:00
|
|
|
Events.emit('select-previous-menu-item');
|
2019-09-16 17:43:57 +02:00
|
|
|
}
|
2018-10-22 20:16:08 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
selectNextSection() {
|
2019-09-16 22:57:56 +02:00
|
|
|
Events.emit('select-next-menu-item');
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
2019-09-16 17:43:57 +02:00
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 17:43:57 +02:00
|
|
|
Object.assign(MenuView.prototype, Resizable);
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-15 14:16:32 +02:00
|
|
|
export { MenuView };
|