Refactor UI input number

8 years ago · 17f850a7e3
3 changed files with 79 additions and 85 deletions
--- a/src/domain_abstract/ui/Input.js
+++ b/src/domain_abstract/ui/Input.js
@ -31,21 +31,10 @@ module.exports = Backbone.View.extend({


  /**
-   * Handled when the view is changed
-   */
-  handleChange(e) {
-    e.stopPropagation();
-    this.model.set('value', this.getInputEl().value);
-    this.elementUpdated();
-  },
-
-
-  /**
-   * Set value to the model
+   * Set value to the input element
   * @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}
--- a/src/domain_abstract/ui/InputColor.js
+++ b/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}
--- a/src/domain_abstract/ui/InputNumber.js
+++ b/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(`
-  <span class='<%= ppfx %>input-holder'></span>
-  <span class='<%= ppfx %>field-units'></span>
-  <div class="<%= ppfx %>field-arrows">
-    <div class="<%= ppfx %>field-arrow-u"></div>
-    <div class="<%= ppfx %>field-arrow-d"></div>
-  </div>`),
+  events: {
+    'change input': 'handleChange',
+    'change select': 'handleUnitChange',
+    'click [data-arrow-up]': 'upArrowClick',
+    'click [data-arrow-down]': 'downArrowClick',
+    'mousedown [data-arrows]': 'downIncrement',
+  },

-  initialize(opts) {
-    _.bindAll(this, 'moveIncrement', 'upIncrement');
-    var opt = opts || {};
-    var ppfx = opt.ppfx || '';
-    var contClass = opt.contClass || (`${ppfx}field ${ppfx}field-integer`);
-    this.ppfx = ppfx;
+
+  template() {
+    const ppfx = this.ppfx;
+    return `
+      <span class="${ppfx}input-holder"></span>
+      <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.unitCls = ppfx + 'input-unit';
-    this.contClass = contClass;
-    this.events = {};
-    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();
+    this.inputCls = `${ppfx}field-number`;
+    this.unitCls = `${ppfx}input-unit`;
+    this.inputClass = opts.contClass || `${ppfx}field ${ppfx}field-integer`;;
+    this.listenTo(this.model, 'change:unit', this.handleModelChange);
  },

+
  /**
   * 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;
-    this.getInputEl().value = m.get('value');
-    var unit = this.getUnitEl();
-
-    if (unit) {
-      unit.value = m.get('unit');
-    }
+    const model = this.model;
+    this.getInputEl().value = model.get('value');
+    const unitEl = this.getUnitEl();
+    unitEl && (unitEl.value = model.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) {
-      var model = this.model;
-      var units = model.get('units') || [];
-      if(units.length){
-        var unitStr = '<select class="' + this.unitCls + '">';
-        _.each(units, unit => {
-          var selected = unit == model.get('unit') ? 'selected': '';
-          unitStr += '<option ' + selected + ' >' + unit + '</option>';
+    if (!this.unitEl) {
+      const model = this.model;
+      const units = model.get('units') || [];
+
+      if (units.length) {
+        const options = [];
+
+        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;
-    const el = this.$el;
-    el.html(this.template({ppfx}));
-    el.find(`.${ppfx}input-holder`).append(this.getInputEl());
+    Input.prototype.render.call(this);
    const unit = this.getUnitEl();
-    unit && el.find(`.${ppfx}field-units`).get(0).appendChild(unit);
-    el.addClass(this.contClass);
+    unit && this.$el.find(`.${this.ppfx}field-units`).get(0).appendChild(unit);
    return this;
  }