Refactor UI input number

src/domain_abstract/ui/Input.js

@@ -31,21 +31,10 @@ module.exports = Backbone.View.extend({
 
 
   /**
-   * Handled when the view is changed
+   * Set value to the input element
-   */
-  handleChange(e) {
-    e.stopPropagation();
-    this.model.set('value', this.getInputEl().value);
-    this.elementUpdated();
-  },
-
-
-  /**
-   * Set value to the model
    * @param {string} value
-   * @param {Object} opts
    */
-  setValue(value, opts = {}) {
+  setValue(value) {
     const model = this.model;
     let val = value || model.get('defaults');
     const input = this.getInputEl();
@@ -61,6 +50,16 @@ module.exports = Backbone.View.extend({
   },
 
 
+  /**
+   * Handled when the view is changed
+   */
+  handleChange(e) {
+    e.stopPropagation();
+    this.model.set('value', this.getInputEl().value);
+    this.elementUpdated();
+  },
+
+
   /**
    * Get the input element
    * @return {HTMLElement}

src/domain_abstract/ui/InputColor.js

@@ -1,6 +1,5 @@
-const Input = require('./Input');
-//require('spectrum-colorpicker');
 require('utils/ColorPicker');
+const Input = require('./Input');
 const $ = Backbone.$;
 
 module.exports = Input.extend({
@@ -17,7 +16,7 @@ module.exports = Input.extend({
     `;
   },
 
-  initialize(opts) {
+  initialize() {
     Input.prototype.initialize.apply(this, arguments);
     const ppfx = this.ppfx;
     this.colorCls = `${ppfx}field-color-picker`;
@@ -45,13 +44,6 @@ module.exports = Input.extend({
     }
   },
 
-  /**
-   * Updates the view when the model is changed
-   * */
-  handleModelChange(model, value, opts) {
-    this.setValue(value, opts);
-  },
-
   /**
    * Get the color input element
    * @return {HTMLElement}

src/domain_abstract/ui/InputNumber.js

@@ -1,38 +1,45 @@
-import {on, off} from 'utils/mixins'
+import { bindAll } from 'underscore';
-
+import {on, off} from 'utils/mixins';
+const Input = require('./Input');
 const Backbone = require('backbone');
 const $ = Backbone.$;
 
-module.exports = Backbone.View.extend({
+module.exports = Input.extend({
 
-  template: _.template(`
+  events: {
-  <span class='<%= ppfx %>input-holder'></span>
+    'change input': 'handleChange',
-  <span class='<%= ppfx %>field-units'></span>
+    'change select': 'handleUnitChange',
-  <div class="<%= ppfx %>field-arrows">
+    'click [data-arrow-up]': 'upArrowClick',
-    <div class="<%= ppfx %>field-arrow-u"></div>
+    'click [data-arrow-down]': 'downArrowClick',
-    <div class="<%= ppfx %>field-arrow-d"></div>
+    'mousedown [data-arrows]': 'downIncrement',
-  </div>`),
+  },
 
-  initialize(opts) {
+
-    _.bindAll(this, 'moveIncrement', 'upIncrement');
+  template() {
-    var opt = opts || {};
+    const ppfx = this.ppfx;
-    var ppfx = opt.ppfx || '';
+    return `
-    var contClass = opt.contClass || (`${ppfx}field ${ppfx}field-integer`);
+      <span class="${ppfx}input-holder"></span>
-    this.ppfx = ppfx;
+      <span class="${ppfx}field-units"></span>
+      <div class="${ppfx}field-arrows" data-arrows>
+        <div class="${ppfx}field-arrow-u" data-arrow-up></div>
+        <div class="${ppfx}field-arrow-d" data-arrow-down></div>
+      </div>
+    `;
+  },
+
+
+  initialize(opts = {}) {
+    Input.prototype.initialize.apply(this, arguments);
+    bindAll(this, 'moveIncrement', 'upIncrement');
+    const ppfx = this.ppfx;
     this.doc = document;
-    this.inputCls = ppfx + 'field-number';
+    this.inputCls = `${ppfx}field-number`;
-    this.unitCls = ppfx + 'input-unit';
+    this.unitCls = `${ppfx}input-unit`;
-    this.contClass = contClass;
+    this.inputClass = opts.contClass || `${ppfx}field ${ppfx}field-integer`;;
-    this.events = {};
+    this.listenTo(this.model, 'change:unit', this.handleModelChange);
-    this.events[`click .${ppfx}field-arrow-u`] = 'upArrowClick';
-    this.events[`click .${ppfx}field-arrow-d`] = 'downArrowClick';
-    this.events[`mousedown .${ppfx}field-arrows`] = 'downIncrement';
-    this.events[`change .${this.inputCls}`] = 'handleChange';
-    this.events[`change .${this.unitCls}`] = 'handleUnitChange';
-    this.listenTo(this.model, 'change:unit change:value', this.handleModelChange);
-    this.delegateEvents();
   },
 
+
   /**
    * Set value to the model
    * @param {string} value
@@ -57,6 +64,7 @@ module.exports = Backbone.View.extend({
     }
   },
 
+
   /**
    * Handled when the view is changed
    */
@@ -66,6 +74,7 @@ module.exports = Backbone.View.extend({
     this.elementUpdated();
   },
 
+
   /**
    * Handled when the view is changed
    */
@@ -76,6 +85,7 @@ module.exports = Backbone.View.extend({
     this.elementUpdated();
   },
 
+
   /**
    * Fired when the element of the property is updated
    */
@@ -83,55 +93,45 @@ module.exports = Backbone.View.extend({
     this.model.trigger('el:change');
   },
 
+
   /**
    * Updates the view when the model is changed
    * */
   handleModelChange() {
-    var m = this.model;
+    const model = this.model;
-    this.getInputEl().value = m.get('value');
+    this.getInputEl().value = model.get('value');
-    var unit = this.getUnitEl();
+    const unitEl = this.getUnitEl();
-
+    unitEl && (unitEl.value = model.get('unit'));
-    if (unit) {
-      unit.value = m.get('unit');
-    }
   },
 
-  /**
-   * Get the input element
-   * @return {HTMLElement}
-   */
-  getInputEl() {
-    if (!this.inputEl) {
-      const cls = this.inputCls;
-      const plh = this.model.get('defaults');
-      this.inputEl = $(`<input type="text" class="${cls}" placeholder="${plh}">`);
-    }
-    return this.inputEl.get(0);
-  },
 
   /**
    * Get the unit element
    * @return {HTMLElement}
    */
   getUnitEl() {
-    if(!this.unitEl) {
+    if (!this.unitEl) {
-      var model = this.model;
+      const model = this.model;
-      var units = model.get('units') || [];
+      const units = model.get('units') || [];
-      if(units.length){
+
-        var unitStr = '<select class="' + this.unitCls + '">';
+      if (units.length) {
-        _.each(units, unit => {
+        const options = [];
-          var selected = unit == model.get('unit') ? 'selected': '';
+
-          unitStr += '<option ' + selected + ' >' + unit + '</option>';
+        units.forEach(unit => {
+          const selected = unit == model.get('unit') ? 'selected' : '';
+          options.push(`<option ${selected}>${unit}</option>`);
         });
-        unitStr += '</select>';
+
         const temp = document.createElement('div');
-        temp.innerHTML = unitStr;
+        temp.innerHTML = `<select class="${this.unitCls}">${options.join('')}</select>`;
         this.unitEl = temp.firstChild;
       }
     }
+
     return this.unitEl;
   },
 
+
   /**
    * Invoked when the up arrow is clicked
    * */
@@ -145,6 +145,7 @@ module.exports = Backbone.View.extend({
     this.elementUpdated();
   },
 
+
   /**
    * Invoked when the down arrow is clicked
    * */
@@ -158,6 +159,7 @@ module.exports = Backbone.View.extend({
     this.elementUpdated();
   },
 
+
   /**
    * Change easily integer input value with click&drag method
    * @param Event
@@ -174,6 +176,7 @@ module.exports = Backbone.View.extend({
     on(this.doc, 'mouseup', this.upIncrement);
   },
 
+
   /** While the increment is clicked, moving the mouse will update input value
    * @param Object
    *
@@ -190,6 +193,7 @@ module.exports = Backbone.View.extend({
     return false;
   },
 
+
   /**
    * Stop moveIncrement method
    * */
@@ -207,6 +211,7 @@ module.exports = Backbone.View.extend({
     }
   },
 
+
   normalizeValue(value, defValue = 0) {
     const model = this.model;
     const step = model.get('step');
@@ -225,6 +230,7 @@ module.exports = Backbone.View.extend({
     return stepDecimals ? parseFloat(value.toFixed(stepDecimals)) : value;
   },
 
+
   /**
    * Validate input value
    * @param {String} value Raw value
@@ -277,14 +283,11 @@ module.exports = Backbone.View.extend({
     };
   },
 
+
   render() {
-    const ppfx = this.ppfx;
+    Input.prototype.render.call(this);
-    const el = this.$el;
-    el.html(this.template({ppfx}));
-    el.find(`.${ppfx}input-holder`).append(this.getInputEl());
     const unit = this.getUnitEl();
-    unit && el.find(`.${ppfx}field-units`).get(0).appendChild(unit);
+    unit && this.$el.find(`.${this.ppfx}field-units`).get(0).appendChild(unit);
-    el.addClass(this.contClass);
     return this;
   }