From e6ad1aa1dbf0117af6296a1eefff1bcc23ccecba Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 27 Sep 2017 20:26:16 +0200 Subject: [PATCH] Update sector views --- src/domain_abstract/ui/InputNumber.js | 9 ++++--- .../view/PropertyCompositeView.js | 2 +- src/style_manager/view/PropertySelectView.js | 8 +++---- src/style_manager/view/PropertyView.js | 2 +- src/style_manager/view/SectorView.js | 24 +++++++++++-------- src/style_manager/view/SectorsView.js | 4 +--- src/utils/extender.js | 5 ++-- 7 files changed, 30 insertions(+), 24 deletions(-) diff --git a/src/domain_abstract/ui/InputNumber.js b/src/domain_abstract/ui/InputNumber.js index 80ebd3523..5abaff8f6 100644 --- a/src/domain_abstract/ui/InputNumber.js +++ b/src/domain_abstract/ui/InputNumber.js @@ -125,10 +125,12 @@ module.exports = Backbone.View.extend({ unitStr += ''; }); unitStr += ''; - this.unitEl = $(unitStr); + const temp = document.createElement('div'); + temp.innerHTML = unitStr; + this.unitEl = temp.firstChild; } } - return this.unitEl && this.unitEl.get(0); + return this.unitEl; }, /** @@ -281,7 +283,8 @@ module.exports = Backbone.View.extend({ const el = this.$el; el.html(this.template({ppfx})); el.find(`.${ppfx}input-holder`).append(this.getInputEl()); - el.find(`.${ppfx}field-units`).html(this.getUnitEl()); + const unit = this.getUnitEl(); + unit && el.find(`.${ppfx}field-units`).get(0).appendChild(unit); el.addClass(this.contClass); return this; } diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js index e0a39e839..49214e399 100644 --- a/src/style_manager/view/PropertyCompositeView.js +++ b/src/style_manager/view/PropertyCompositeView.js @@ -48,7 +48,7 @@ module.exports = PropertyView.extend({ var PropertiesView = require('./PropertiesView'); var propsView = new PropertiesView(this.getPropsConfig()); this.$props = propsView.render().$el; - this.$el.find('#'+ this.pfx +'input-holder').html(this.$props); + this.$el.find(`#${this.pfx}input-holder`).append(this.$props); } } }, diff --git a/src/style_manager/view/PropertySelectView.js b/src/style_manager/view/PropertySelectView.js index 3bd049a8e..61ff92d96 100644 --- a/src/style_manager/view/PropertySelectView.js +++ b/src/style_manager/view/PropertySelectView.js @@ -20,7 +20,7 @@ module.exports = require('./PropertyView').extend({ const model = this.model; const options = model.get('list') || model.get('options') || []; - if (!this.$input) { + if (!this.input) { let optionsStr = ''; options.forEach(option => { @@ -31,9 +31,9 @@ module.exports = require('./PropertyView').extend({ optionsStr += ``; }); - this.$input = $(``); - this.input = this.$input.get(0); - this.$el.find(`#${pfx}input-holder`).html(this.$input); + const inputH = this.el.querySelector(`#${pfx}input-holder`); + inputH.innerHTML = ``; + this.input = inputH.firstChild; } }, diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index fcd074f5b..af13d49df 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -50,7 +50,7 @@ module.exports = Backbone.View.extend({ this.customValue = o.customValue || {}; const model = this.model; this.property = model.get('property'); - this.input = this.$input = null; + this.input = null; const pfx = this.pfx; this.inputHolderId = '#' + pfx + 'input-holder'; this.sector = model.collection && model.collection.sector; diff --git a/src/style_manager/view/SectorView.js b/src/style_manager/view/SectorView.js index 7c87b8fcb..f80da44e3 100644 --- a/src/style_manager/view/SectorView.js +++ b/src/style_manager/view/SectorView.js @@ -4,25 +4,25 @@ var PropertiesView = require('./PropertiesView'); module.exports = Backbone.View.extend({ template: _.template(` -
+
<%= label %>
`), - events:{}, + events:{ + 'click [data-sector-title]': 'toggle' + }, initialize(o) { this.config = o.config || {}; this.pfx = this.config.stylePrefix || ''; this.target = o.target || {}; this.propTarget = o.propTarget || {}; - this.open = this.model.get('open'); this.caretR = 'fa-caret-right'; this.caretD = 'fa-caret-down'; - this.listenTo(this.model, 'change:open', this.updateOpen); - this.listenTo(this.model, 'updateVisibility', this.updateVisibility); - this.events['click .' + this.pfx + 'title'] = 'toggle'; - this.delegateEvents(); + const model = this.model; + this.listenTo(model, 'change:open', this.updateOpen); + this.listenTo(model, 'updateVisibility', this.updateVisibility); }, /** @@ -53,7 +53,7 @@ module.exports = Backbone.View.extend({ * */ show() { this.$el.addClass(this.pfx + "open"); - this.$el.find('.' + this.pfx + 'properties').show(); + this.getPropertiesEl().style.display = ''; this.$caret.removeClass(this.caretR).addClass(this.caretD); }, @@ -62,14 +62,18 @@ module.exports = Backbone.View.extend({ * */ hide() { this.$el.removeClass(this.pfx + "open"); - this.$el.find('.' + this.pfx + 'properties').hide(); + this.getPropertiesEl().style.display = 'none'; this.$caret.removeClass(this.caretD).addClass(this.caretR); }, + getPropertiesEl() { + return this.$el.find(`.${this.pfx}properties`).get(0); + }, + /** * Toggle visibility * */ - toggle() { + toggle(e) { var v = this.model.get('open') ? 0 : 1; this.model.set('open', v); }, diff --git a/src/style_manager/view/SectorsView.js b/src/style_manager/view/SectorsView.js index fc2a2446e..3e3153343 100644 --- a/src/style_manager/view/SectorsView.js +++ b/src/style_manager/view/SectorsView.js @@ -1,5 +1,4 @@ -var Backbone = require('backbone'); -var SectorView = require('./SectorView'); +const SectorView = require('./SectorView'); module.exports = Backbone.View.extend({ @@ -117,7 +116,6 @@ module.exports = Backbone.View.extend({ * */ addToCollection(model, fragmentEl) { var fragment = fragmentEl || null; - var view = new SectorView({ model, id: this.pfx + model.get('name').replace(' ','_').toLowerCase(), diff --git a/src/utils/extender.js b/src/utils/extender.js index 6ec527e7b..9785da172 100644 --- a/src/utils/extender.js +++ b/src/utils/extender.js @@ -2,6 +2,7 @@ module.exports = ({$, Backbone}) => { if (Backbone) { const ViewProt = Backbone.View.prototype; const eventNsMap = {}; + ViewProt.eventNsMap = eventNsMap; ViewProt.delegate = function(eventName, selector, listener) { const vid = '.delegateEvents' + this.cid; @@ -26,7 +27,7 @@ module.exports = ({$, Backbone}) => { if (eventMap) { eventMap.forEach(({eventName, selector, listener}) => { - this.$el.off(eventName, selector, listener); + this.$el.off(eventName); }); } } @@ -41,7 +42,7 @@ module.exports = ({$, Backbone}) => { if (eventMap) { eventMap.forEach(({eventName, selector, listener}) => { if (eventName == ev && selector == sel) { - this.$el.off(eventName, selector, listener); + this.$el.off(eventName); } }); }