From 1f598dc0fef2580b7c64f04b74cae364cbd74c03 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 7 Jan 2022 16:18:45 +0100 Subject: [PATCH] Clean SectorView --- src/style_manager/model/Sector.js | 3 +- src/style_manager/view/SectorView.js | 90 +++++++++------------------ src/style_manager/view/SectorsView.js | 3 +- 3 files changed, 34 insertions(+), 62 deletions(-) diff --git a/src/style_manager/model/Sector.js b/src/style_manager/model/Sector.js index 565609ec9..e1c71b5d2 100644 --- a/src/style_manager/model/Sector.js +++ b/src/style_manager/model/Sector.js @@ -62,7 +62,8 @@ export default class Sector extends Model { * @returns {String} */ getName() { - return this.get('name'); + const id = this.getId(); + return this.em?.t(`styleManager.sectors.${id}`) || this.get('name'); } /** diff --git a/src/style_manager/view/SectorView.js b/src/style_manager/view/SectorView.js index 45ee10215..f98da412c 100644 --- a/src/style_manager/view/SectorView.js +++ b/src/style_manager/view/SectorView.js @@ -1,4 +1,4 @@ -import { View } from 'backbone'; +import { View } from 'common'; import html from 'utils/html'; import PropertiesView from './PropertiesView'; @@ -23,84 +23,56 @@ export default class SectorView extends View { } initialize(o) { - this.config = o.config || {}; - this.em = this.config.em; - this.pfx = this.config.stylePrefix || ''; - this.target = o.target || {}; - this.propTarget = o.propTarget || {}; - const model = this.model; + const config = o.config || {}; + const { model } = this; + const { em } = config; + this.config = config; + this.em = em; + this.pfx = config.stylePrefix || ''; + this.listenTo(model, 'destroy remove', this.remove); this.listenTo(model, 'change:open', this.updateOpen); this.listenTo(model, 'change:visible', this.updateVisibility); - this.listenTo(model, 'destroy remove', this.remove); - } - - /** - * If all properties are hidden this will hide the sector - */ - updateVisibility() { - this.el.style.display = this.model.isVisible() ? '' : 'none'; } - /** - * Update visibility - */ updateOpen() { - if (this.model.get('open')) this.show(); - else this.hide(); + const { $el, model, pfx } = this; + const isOpen = model.isOpen(); + $el[isOpen ? 'addClass' : 'removeClass'](`${pfx}open`); + this.getPropertiesEl().style.display = isOpen ? '' : 'none'; } - /** - * Show the content of the sector - * */ - show() { - this.$el.addClass(this.pfx + 'open'); - this.getPropertiesEl().style.display = ''; - } - - /** - * Hide the content of the sector - * */ - hide() { - this.$el.removeClass(this.pfx + 'open'); - this.getPropertiesEl().style.display = 'none'; + updateVisibility() { + this.el.style.display = this.model.isVisible() ? '' : 'none'; } getPropertiesEl() { - return this.$el.find(`.${this.pfx}properties`).get(0); + const { $el, pfx } = this; + return $el.find(`.${pfx}properties`).get(0); } - /** - * Toggle visibility - * */ - toggle(e) { + toggle() { const { model } = this; - const v = model.get('open') ? 0 : 1; - model.set('open', v); - } - - render() { - const { pfx, model, em, $el } = this; - const { id, name } = model.attributes; - const label = (em && em.t(`styleManager.sectors.${id}`)) || name; - $el.html(this.template({ pfx, label })); - this.renderProperties(); - $el.attr('class', `${pfx}sector ${pfx}sector__${id} no-select`); - this.updateOpen(); - return this; + model.setOpen(!model.get('open')); } renderProperties() { - const { model, target, propTarget, config } = this; + const { model, config } = this; const objs = model.get('properties'); if (objs) { - const view = new PropertiesView({ - collection: objs, - target, - propTarget, - config, - }); + const view = new PropertiesView({ collection: objs, config }); this.$el.append(view.render().el); } } + + render() { + const { pfx, model, $el } = this; + const id = model.getId(); + const label = model.getName(); + $el.html(this.template({ pfx, label })); + this.renderProperties(); + $el.attr('class', `${pfx}sector ${pfx}sector__${id} no-select`); + this.updateOpen(); + return this; + } } diff --git a/src/style_manager/view/SectorsView.js b/src/style_manager/view/SectorsView.js index 621291a65..64ceb3448 100644 --- a/src/style_manager/view/SectorsView.js +++ b/src/style_manager/view/SectorsView.js @@ -4,13 +4,12 @@ import SectorView from './SectorView'; export default class SectorsView extends View { initialize(o = {}) { - const { module, em, config } = o; + const { module, config } = o; const coll = this.collection; this.pfx = config.stylePrefix || ''; this.ppfx = config.pStylePrefix || ''; this.config = config; this.module = module; - this.em = em; this.listenTo(coll, 'add', this.addTo); this.listenTo(coll, 'reset', this.render); }