From 9d8fbe28e372876c92c77c066d9b930e3d23b05b Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Wed, 20 Sep 2017 22:05:15 +0200
Subject: [PATCH] Improve Color Input

---
 src/domain_abstract/ui/Input.js             |  4 +-
 src/domain_abstract/ui/InputColor.js        | 53 ++++++++++++---------
 src/style_manager/view/PropertyColorView.js |  5 +-
 src/style_manager/view/PropertyView.js      | 15 ++----
 4 files changed, 39 insertions(+), 38 deletions(-)

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 = $('<div>', {class: this.colorCls});
       var cpStyle = colorEl.get(0).style;
@@ -65,7 +71,6 @@ module.exports = Input.extend({
       let changed = 0;
       let previousСolor;
       colorEl.spectrum({
-        //color: "#f00"
         appendTo: elToAppend || 'body',
         maxSelectionSize: 8,
         showPalette: true,
@@ -84,15 +89,17 @@ module.exports = Input.extend({
           cpStyle.backgroundColor = cl;
           model.set('value', '', {avoidStore: 1});
           model.set('value', cl);
-          colorEl.spectrum('set', cl);
+          self.noneColor = 0;
         },
         show(color) {
           changed = 0;
-          console.log('Show color', color, getColor(color));
           previousСolor = getColor(color);
         },
         hide(color) {
            if (!changed && previousСolor) {
+             if (self.noneColor) {
+               previousСolor = '';
+             }
              cpStyle.backgroundColor = previousСolor;
              colorEl.spectrum('set', previousСolor);
              model.set('value', previousСolor, {avoidStore: 1});
diff --git a/src/style_manager/view/PropertyColorView.js b/src/style_manager/view/PropertyColorView.js
index 7fef6004b..cd249be19 100644
--- a/src/style_manager/view/PropertyColorView.js
+++ b/src/style_manager/view/PropertyColorView.js
@@ -7,8 +7,9 @@ module.exports = require('./PropertyIntegerView').extend({
     this.className += ` ${this.pfx}file`;
   },
 
-  setValue(value) {
-    this.inputInst.setValue(value, {silent: 1});
+  setValue(value, opts = {}) {
+    opts = Object.assign({}, opts, {silent: 1});
+    this.inputInst.setValue(value, opts);
   },
 
   onRender() {
diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js
index fcdc030f4..4bf352b02 100644
--- a/src/style_manager/view/PropertyView.js
+++ b/src/style_manager/view/PropertyView.js
@@ -195,7 +195,7 @@ module.exports = Backbone.View.extend({
     }
 
     model.set('value', value, {silent: 1});
-    this.setValue(value, 1);
+    this.setValue(value, {targetUpdate: 1});
     model.set('status', status);
 
     if (em) {
@@ -398,18 +398,11 @@ module.exports = Backbone.View.extend({
    * @param {Boolean} force
    * @private
    * */
-  setValue(value, force) {
+  setValue(value, opts = {}) {
     const model = this.model;
-    const f = force === 0 ? 0 : 1;
-    const def = model.getDefaultValue();
-    let v = model.get('value') || def;
-
-    if (value || f) {
-      v = value;
-    }
-
+    let val = value || model.get('value') || model.getDefaultValue();
     const input = this.getInputEl();
-    input && (input.value = v);
+    input && (input.value = val);
   },
 
   getInputEl() {