From 17f850a7e3ce22f79c40e86dfa557328fd1632ee Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 26 Oct 2017 03:06:19 +0200 Subject: [PATCH] Refactor UI input number --- src/domain_abstract/ui/Input.js | 25 +++-- src/domain_abstract/ui/InputColor.js | 12 +-- src/domain_abstract/ui/InputNumber.js | 127 +++++++++++++------------- 3 files changed, 79 insertions(+), 85 deletions(-) diff --git a/src/domain_abstract/ui/Input.js b/src/domain_abstract/ui/Input.js index 09c9f416f..67b8364c1 100644 --- 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} diff --git a/src/domain_abstract/ui/InputColor.js b/src/domain_abstract/ui/InputColor.js index 76f324364..fb50057f4 100644 --- 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} diff --git a/src/domain_abstract/ui/InputNumber.js b/src/domain_abstract/ui/InputNumber.js index bd44480ec..94005c71e 100644 --- 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(` - - -
-
-
-
`), + 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 ` + + +
+
+
+
+ `; + }, + + + 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 = $(``); - } - 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 = ''; + const temp = document.createElement('div'); - temp.innerHTML = unitStr; + temp.innerHTML = ``; 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; }