diff --git a/src/domain_abstract/ui/Input.js b/src/domain_abstract/ui/Input.js index d635c7aa2..4b382639d 100644 --- a/src/domain_abstract/ui/Input.js +++ b/src/domain_abstract/ui/Input.js @@ -41,14 +41,14 @@ module.exports = Backbone.View.extend({ // Generally I get silent when I need to reflect data to view without // reupdating the target if(opt.silent) { - this.handleModelChange(); + this.handleModelChange(model, value, opt); } }, /** * Updates the view when the model is changed * */ - handleModelChange() { + handleModelChange(model, value, opts) { this.getInputEl().value = this.model.get('value'); }, diff --git a/src/domain_abstract/ui/InputColor.js b/src/domain_abstract/ui/InputColor.js index ba3289584..7a4012192 100644 --- a/src/domain_abstract/ui/InputColor.js +++ b/src/domain_abstract/ui/InputColor.js @@ -15,31 +15,36 @@ module.exports = Input.extend({ initialize(opts) { Input.prototype.initialize.apply(this, arguments); var ppfx = this.ppfx; - this.colorCls = ppfx + 'field-color-picker'; - this.inputClass = ppfx + 'field ' + ppfx + 'field-color'; - this.colorHolderClass = ppfx + 'field-colorp-c'; + this.colorCls = `${ppfx}field-color-picker`; + this.inputClass = `${ppfx}field ${ppfx}field-color`; + this.colorHolderClass = `${ppfx}field-colorp-c`; + }, - this.listenTo(this.model, 'change:value', this.handleModelChange); + /** + * Set value to the model + * @param {string} val + * @param {Object} opts + */ + setValue(val, opts = {}) { + const model = this.model; + const value = val || model.get('defaults'); + const inputEl = this.getInputEl(); + const colorEl = this.getColorEl(); + const valueClr = value != 'none' ? value : ''; + inputEl.value = value; + colorEl.get(0).style.backgroundColor = valueClr; + + if (opts.targetUpdate) { + colorEl.spectrum('set', valueClr); + this.noneColor = value == 'none'; + } }, /** * Updates the view when the model is changed * */ - handleModelChange(mdl, vl, opts = {}) { - Input.prototype.handleModelChange.apply(this, arguments); - - var value = this.model.get('value'); - var colorEl = this.getColorEl(); - - // If no color selected I will set white for the picker - value = value === 'none' ? '#fff' : value; - colorEl.get(0).style.backgroundColor = value; - - // Prevent usuless palette updating - if (!opts.avoidStore) { - console.log('COlor to set', value, mdl, vl, opts); - colorEl.spectrum('set', value); - } + handleModelChange(model, value, opts) { + this.setValue(value, opts); }, /** @@ -47,7 +52,8 @@ module.exports = Input.extend({ * @return {HTMLElement} */ getColorEl() { - if(!this.colorEl) { + if (!this.colorEl) { + const self = this; var model = this.model; var colorEl = $('