Update sector views

src/domain_abstract/ui/InputNumber.js

@@ -125,10 +125,12 @@ module.exports = Backbone.View.extend({
           unitStr += '<option ' + selected + ' >' + unit + '</option>';
         });
         unitStr += '</select>';
-        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;
   }

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);
       }
     }
   },

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 += `<option value="${value}" ${styleAttr}>${name}</option>`;
       });
 
-      this.$input = $(`<select>${optionsStr}</select>`);
-      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 = `<select>${optionsStr}</select>`;
+      this.input = inputH.firstChild;
     }
   },
 

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;

src/style_manager/view/SectorView.js

@@ -4,25 +4,25 @@ var PropertiesView = require('./PropertiesView');
 module.exports = Backbone.View.extend({
 
   template: _.template(`
-  <div class="<%= pfx %>title">
+  <div class="<%= pfx %>title" data-sector-title>
     <i id="<%= pfx %>caret" class="fa"></i>
     <%= label %>
   </div>`),
 
-  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);
   },

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(),

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);
           }
         });
       }