2019-09-16 20:42:33 +02:00
|
|
|
import { View } from 'framework/views/view';
|
2019-09-15 14:16:32 +02:00
|
|
|
import { AppSettingsModel } from 'models/app-settings-model';
|
2019-09-16 20:42:33 +02:00
|
|
|
import { Resizable } from 'framework/views/resizable';
|
|
|
|
import { Scrollable } from 'framework/views/scrollable';
|
2019-09-15 14:16:32 +02:00
|
|
|
import { MenuItemView } from 'views/menu/menu-item-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-section.hbs';
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 17:43:57 +02:00
|
|
|
class MenuSectionView extends View {
|
|
|
|
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 20:54:14 +02:00
|
|
|
itemViews = [];
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 17:43:57 +02:00
|
|
|
minHeight = 55;
|
2019-09-22 22:30:03 +02:00
|
|
|
autoHeight = 'auto';
|
2015-10-17 23:49:24 +02:00
|
|
|
|
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-items', this.itemsChanged);
|
2015-11-14 19:18:34 +01:00
|
|
|
this.listenTo(this, 'view-resize', this.viewResized);
|
2019-09-16 17:43:57 +02:00
|
|
|
this.once('remove', () => {
|
|
|
|
if (this.scroll) {
|
|
|
|
this.scroll.dispose();
|
|
|
|
}
|
|
|
|
this.removeInnerViews();
|
|
|
|
});
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
render() {
|
2015-10-17 23:49:24 +02:00
|
|
|
if (!this.itemsEl) {
|
2019-09-18 23:37:57 +02:00
|
|
|
super.render(this.model);
|
|
|
|
this.itemsEl = this.model.scrollable ? this.$el.find('.scroller') : this.$el;
|
|
|
|
if (this.model.scrollable) {
|
2015-10-17 23:49:24 +02:00
|
|
|
this.initScroll();
|
2016-01-17 21:19:42 +01:00
|
|
|
this.createScroll({
|
2015-10-17 23:49:24 +02:00
|
|
|
root: this.$el[0],
|
|
|
|
scroller: this.$el.find('.scroller')[0],
|
2016-01-17 21:19:42 +01:00
|
|
|
bar: this.$el.find('.scroller__bar')[0]
|
2015-10-17 23:49:24 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.removeInnerViews();
|
|
|
|
}
|
2020-06-01 16:53:51 +02:00
|
|
|
this.model.items.forEach((item) => {
|
2019-09-16 17:43:57 +02:00
|
|
|
const itemView = new MenuItemView(item, { parent: this.itemsEl[0] });
|
2015-10-17 23:49:24 +02:00
|
|
|
itemView.render();
|
|
|
|
this.itemViews.push(itemView);
|
2019-09-16 17:43:57 +02:00
|
|
|
});
|
2019-09-18 23:37:57 +02:00
|
|
|
if (this.model.drag) {
|
2019-09-17 19:50:42 +02:00
|
|
|
const height = AppSettingsModel.tagsViewHeight;
|
2015-11-15 14:33:42 +01:00
|
|
|
if (typeof height === 'number') {
|
|
|
|
this.$el.height();
|
|
|
|
this.$el.css('flex', '0 0 ' + height + 'px');
|
2015-11-14 19:18:34 +01:00
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
}
|
2015-11-15 14:33:42 +01:00
|
|
|
this.pageResized();
|
2019-09-16 17:43:57 +02:00
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 17:43:57 +02:00
|
|
|
maxHeight() {
|
|
|
|
return this.$el.parent().height() - 116;
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
removeInnerViews() {
|
2020-06-01 16:53:51 +02:00
|
|
|
this.itemViews.forEach((itemView) => itemView.remove());
|
2015-10-17 23:49:24 +02:00
|
|
|
this.itemViews = [];
|
2019-09-16 17:43:57 +02:00
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
itemsChanged() {
|
2015-10-17 23:49:24 +02:00
|
|
|
this.render();
|
2019-09-16 17:43:57 +02:00
|
|
|
}
|
2015-11-14 19:18:34 +01:00
|
|
|
|
2019-08-18 10:17:09 +02:00
|
|
|
viewResized(size) {
|
2015-11-15 14:33:42 +01:00
|
|
|
this.$el.css('flex', '0 0 ' + (size ? size + 'px' : 'auto'));
|
|
|
|
this.saveViewHeight(size);
|
2019-09-16 17:43:57 +02:00
|
|
|
}
|
2015-11-15 14:33:42 +01:00
|
|
|
|
2020-06-01 16:53:51 +02:00
|
|
|
saveViewHeight = throttle((size) => {
|
2019-09-17 19:50:42 +02:00
|
|
|
AppSettingsModel.tagsViewHeight = size;
|
2019-09-16 17:43:57 +02:00
|
|
|
}, 1000);
|
|
|
|
}
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-16 17:43:57 +02:00
|
|
|
Object.assign(MenuSectionView.prototype, Resizable);
|
|
|
|
Object.assign(MenuSectionView.prototype, Scrollable);
|
2015-10-17 23:49:24 +02:00
|
|
|
|
2019-09-15 14:16:32 +02:00
|
|
|
export { MenuSectionView };
|