Refactor Style Manager Property views

index.html

@@ -1324,7 +1324,7 @@
       var model = view.model;
       let targetValue = view.getTargetValue({ignoreDefault: 1});
       let computedValue = view.getComputedValue();
-      let defaultValue = view.getDefaultValue();
+      let defaultValue = view.model.getDefaultValue();
       //console.log('Style of ', model.get('property'), 'Target: ', targetValue, 'Computed:', computedValue, 'Default:', defaultValue);
     });
 

src/style_manager/model/PropertyFactory.js

@@ -121,7 +121,7 @@ module.exports = () => ({
           obj.defaults = 1;
           break;
         case 'box-shadow-blur':
-          obj.defaults = 5;
+          obj.defaults = '5px';
           break;
         case 'min-height': case 'min-width': case 'max-height': case 'max-width':
         case 'width': case 'height':

src/style_manager/view/PropertiesView.js

@@ -39,7 +39,8 @@ module.exports = Backbone.View.extend({
         view.customValue = this.customValue;
       }
 
-      fragment.appendChild(view.render().el);
+      view.render();
+      fragment.appendChild(view.el);
     });
 
     this.$el.append(fragment);

src/style_manager/view/PropertyColorView.js

@@ -1,15 +1,17 @@
 var Backbone = require('backbone');
-var PropertyView = require('./PropertyView');
 var InputColor = require('domain_abstract/ui/InputColor');
 
-module.exports = PropertyView.extend({
+module.exports = require('./PropertyIntegerView').extend({
 
-  initialize(options) {
-    PropertyView.prototype.initialize.apply(this, arguments);
+  init() {
     this.className += ` ${this.pfx}file`;
   },
 
-  renderInput() {
+  setValue(value) {
+    this.input.setValue(value, {silent: 1});
+  },
+
+  onRender() {
     if (!this.input) {
       var inputColor = new InputColor({
         target: this.target,
@@ -21,11 +23,6 @@ module.exports = PropertyView.extend({
       this.$input = this.input.inputEl;
       this.$color = this.input.colorEl;
     }
-    this.setValue(this.componentValue);
-  },
-
-  setValue(value) {
-    this.input.setValue(value, {silent: 1});
   },
 
 });

src/style_manager/view/PropertyCompositeView.js

@@ -1,22 +1,17 @@
-var Backbone = require('backbone');
-var PropertyView = require('./PropertyView');
+const PropertyView = require('./PropertyView');
 
 module.exports = PropertyView.extend({
 
-  templateField() {
+  templateInput() {
     const pfx = this.pfx;
-    const ppfx = this.ppfx;
     return `
       <div class="${pfx}field ${pfx}composite">
         <span id="${pfx}input-holder"></span>
       </div>
-      <div style="clear:both"></div>
     `;
   },
 
-  initialize(o) {
-    PropertyView.prototype.initialize.apply(this, arguments);
-    this.config = o.config || {};
+  init() {
     this.className = this.className + ' '+ this.pfx +'composite';
   },
 
@@ -28,7 +23,7 @@ module.exports = PropertyView.extend({
   /**
    * Renders input
    * */
-  renderInput() {
+  onRender() {
     var model = this.model;
     var props = model.get('properties') || [];
     var self = this;

src/style_manager/view/PropertyFileView.js

@@ -3,7 +3,7 @@ var PropertyView = require('./PropertyView');
 
 module.exports = PropertyView.extend({
 
-  templateField() {
+  templateInput() {
     const pfx = this.pfx;
     const ppfx = this.ppfx;
     const assetsLabel = this.config.assetsLabel || 'Images';
@@ -22,12 +22,10 @@ module.exports = PropertyView.extend({
         <div id="${pfx}close">&Cross;</div>
       </div>
     </div>
-    <div style="clear:both"></div>
     `;
   },
 
-  initialize(options) {
-    PropertyView.prototype.initialize.apply(this, arguments);
+  init() {
     this.assets = this.target.get('assets');
     this.modal = this.target.get('Modal');
     this.am = this.target.get('AssetManager');
@@ -37,8 +35,7 @@ module.exports = PropertyView.extend({
     this.delegateEvents();
   },
 
-  /** @inheritdoc */
-  renderInput() {
+  onRender() {
     if (!this.$input) {
       this.$input = $('<input>', {placeholder: this.model.getDefaultValue(), type: 'text' });
     }
@@ -56,7 +53,7 @@ module.exports = PropertyView.extend({
 
   setValue(value, f) {
     PropertyView.prototype.setValue.apply(this, arguments);
-    this.setPreviewView(value && value != this.getDefaultValue());
+    this.setPreviewView(value && value != this.model.getDefaultValue());
     this.setPreview(value);
   },
 

src/style_manager/view/PropertyIntegerView.js

@@ -1,16 +1,27 @@
-var PropertyView = require('./PropertyView');
 var InputNumber = require('domain_abstract/ui/InputNumber');
 
-module.exports = PropertyView.extend({
+module.exports = require('./PropertyView').extend({
 
-  initialize(options) {
-    PropertyView.prototype.initialize.apply(this, arguments);
+  template(model) {
+    const pfx = this.pfx;
+    return `
+      <div class="${pfx}label">
+        ${this.templateLabel(model)}
+      </div>
+    `;
+  },
+
+  init() {
     const model = this.model;
     this.listenTo(model, 'change:unit', this.modelValueChanged);
     this.listenTo(model, 'el:change', this.elementUpdated);
   },
 
-  renderInput() {
+  setValue(value) {
+    this.input.setValue(value, {silent: 1});
+  },
+
+  onRender() {
     if (!this.input) {
       var inputNumber = new InputNumber({
         model: this.model,
@@ -21,11 +32,6 @@ module.exports = PropertyView.extend({
       this.$input = this.input.inputEl;
       this.$unit = this.input.unitEl;
     }
-    this.setValue(this.componentValue);
-  },
-
-  setValue(value) {
-    this.input.setValue(value, {silent: 1});
   },
 
 });

src/style_manager/view/PropertyRadioView.js

@@ -1,28 +1,22 @@
-var Backbone = require('backbone');
-var PropertyView = require('./PropertyView');
+module.exports = require('./PropertyView').extend({
 
-module.exports = PropertyView.extend({
-
-  templateField() {
+  templateInput() {
     const pfx = this.pfx;
     const ppfx = this.ppfx;
     return `
       <div class="${ppfx}field ${ppfx}field-radio">
         <span id="${pfx}input-holder"></span>
       </div>
-      <div style="clear:both"></div>
     `;
   },
 
-  initialize(options) {
-    PropertyView.prototype.initialize.apply(this, arguments);
+  init() {
     const model = this.model;
     this.list = model.get('list') || model.get('options') || [];
     this.className = this.className + ' '+ this.pfx +'list';
   },
 
-  /** @inheritdoc */
-  renderInput() {
+  onRender() {
     var pfx = this.pfx;
     var ppfx = this.ppfx;
     var itemCls = ppfx + 'radio-item-label';
@@ -60,7 +54,8 @@ module.exports = PropertyView.extend({
 
   /** @inheritdoc */
   setValue(value) {
-    var v = this.model.get('value') || this.model.getDefaultValue();
+    const model = this.model;
+    var v = model.get('value') || model.getDefaultValue();
 
     if(value)
       v  = value;
@@ -68,7 +63,7 @@ module.exports = PropertyView.extend({
     if(this.$input)
       this.$input.filter('[value="'+v+'"]').prop('checked', true);
 
-    this.model.set({value: v},{silent: true});
+    model.set({value: v}, {silent: true});
   },
 
 });

src/style_manager/view/PropertySelectView.js

@@ -1,9 +1,6 @@
-var Backbone = require('backbone');
-var PropertyView = require('./PropertyView');
+module.exports = require('./PropertyView').extend({
 
-module.exports = PropertyView.extend({
-
-  templateField() {
+  templateInput() {
     const pfx = this.pfx;
     const ppfx = this.ppfx;
     return `
@@ -13,20 +10,17 @@ module.exports = PropertyView.extend({
           <div class="${ppfx}d-s-arrow"></div>
         </div>
       </div>
-      <div style="clear:both"></div>
     `;
   },
 
-  initialize(options) {
-    PropertyView.prototype.initialize.apply(this, arguments);
+  init() {
     const model = this.model;
     this.list = model.get('list') || model.get('options') || [];
   },
 
-  /** @inheritdoc */
-  renderInput() {
+  onRender() {
     var pfx  = this.pfx;
-    if(!this.$input){
+    if (!this.$input) {
       var input = '<select>';
 
       if (this.list && this.list.length) {
@@ -43,7 +37,6 @@ module.exports = PropertyView.extend({
       this.$input = $(this.input);
       this.$el.find('#'+ pfx +'input-holder').html(this.$input);
     }
-    this.setValue(this.componentValue, 0);
   },
 
 });

src/style_manager/view/PropertyStackView.js

@@ -5,7 +5,7 @@ var LayersView = require('./LayersView');
 
 module.exports = PropertyCompositeView.extend({
 
-  templateField() {
+  templateInput() {
     const pfx = this.pfx;
     const ppfx = this.ppfx;
     return `
@@ -13,12 +13,10 @@ module.exports = PropertyCompositeView.extend({
         <button type="button" id="${pfx}add">+</button>
         <span id="${pfx}input-holder"></span>
       </div>
-      <div style="clear:both"></div>
     `;
   },
 
-  initialize(o) {
-    PropertyCompositeView.prototype.initialize.apply(this, arguments);
+  init() {
     const model = this.model;
     const pfx = this.pfx;
     model.set('stackIndex', null);
@@ -116,6 +114,7 @@ module.exports = PropertyCompositeView.extend({
   valueOnIndex(index, propView) {
     let result;
     const model = this.model;
+    const propModel = propView.model;
     const layerIndex = model.get('stackIndex');
 
     // If detached the value in this case is stacked, eg. substack-prop: 1px, 2px, 3px...
@@ -123,8 +122,8 @@ module.exports = PropertyCompositeView.extend({
       var targetValue = propView.getTargetValue({ignoreCustomValue: 1});
       var valist = (targetValue + '').split(',');
       result = valist[layerIndex];
-      result = result ? result.trim() : propView.getDefaultValue();
-      result = propView.model.parseValue(result);
+      result = result ? result.trim() : propModel.getDefaultValue();
+      result = propModel.parseValue(result);
     } else {
       var aStack = this.getStackValues();
       var strVar = aStack[layerIndex];
@@ -174,14 +173,15 @@ module.exports = PropertyCompositeView.extend({
       const layers = this.getLayers();
       const layer = layers.add({name: 'New'});
       const index = layers.indexOf(layer);
-      layer.set('value', this.model.getDefaultValue(1));
+      const model = this.model;
+      layer.set('value', model.getDefaultValue(1));
 
       // In detached mode inputValueChanged will add new 'layer value'
       // to all subprops
       this.inputValueChanged();
 
       // This will set subprops with a new default values
-      this.model.set('stackIndex', index);
+      model.set('stackIndex', index);
     }
   },
 
@@ -226,12 +226,6 @@ module.exports = PropertyCompositeView.extend({
     return this;
   },
 
-  /** @inheritdoc */
-  renderInput(...args) {
-    PropertyCompositeView.prototype.renderInput.apply(this, args);
-    this.refreshLayers();
-  },
-
   /**
    * Returns array suitale for layers from target style
    * Only for detached stacks
@@ -280,7 +274,7 @@ module.exports = PropertyCompositeView.extend({
       a = this.getLayersFromTarget();
     } else {
       var v = this.getTargetValue();
-      var vDef = this.getDefaultValue();
+      var vDef = this.model.getDefaultValue();
       v = v == vDef ? '' : v;
       if (v) {
         // Remove spaces inside functions:
@@ -314,14 +308,10 @@ module.exports = PropertyCompositeView.extend({
     this.model.set({stackIndex: null}, {silent: true});
   },
 
-  render() {
-    const el = this.el;
-    el.innerHTML = this.template(this.model);
-    this.renderInput();
+  onRender(...args) {
+    PropertyCompositeView.prototype.onRender.apply(this, args);
+    this.refreshLayers();
     this.renderLayers();
-    this.$el.attr('class', this.className);
-    this.updateStatus();
-    return this;
   },
 
 });

src/style_manager/view/PropertyView.js

@@ -4,28 +4,31 @@ module.exports = Backbone.View.extend({
 
   template(model) {
     const pfx = this.pfx;
-    const name = model.get('name');
-    const icon = model.get('icon');
-    const info = model.get('info');
     return `
       <div class="${pfx}label">
-        <span class="${pfx}icon ${icon}" title="${info}">
-          ${name}
-        </span>
-        <b class="${pfx}clear">&Cross;</b>
+        ${this.templateLabel(model)}
       </div>
-      ${this.templateField(model)}
+      ${this.templateInput(model)}
     `;
   },
 
-  templateField() {
+  templateLabel(model) {
     const pfx = this.pfx;
-    const ppfx = this.ppfx;
+    const icon = model.get('icon');
+    const info = model.get('info');
+    return `
+      <span class="${pfx}icon ${icon}" title="${info}">
+        ${model.get('name')}
+      </span>
+      <b class="${pfx}clear">&Cross;</b>
+    `;
+  },
+
+  templateInput(model) {
     return `
-      <div class="${ppfx}field">
-        <span id="${pfx}input-holder"></span>
+      <div class="${this.ppfx}field">
+        <input placeholder="${model.getDefaultValue()}"/>
       </div>
-      <div style="clear:both"></div>
     `;
   },
 
@@ -33,7 +36,7 @@ module.exports = Backbone.View.extend({
     'change': 'inputValueChanged'
   },
 
-  initialize(o) {
+  initialize(o = {}) {
     this.config = o.config || {};
     this.em = this.config.em;
     this.pfx = this.config.stylePrefix || '';
@@ -63,8 +66,16 @@ module.exports = Backbone.View.extend({
     this.listenTo(model, 'change:status', this.updateStatus);
     this.events[`click .${pfx}clear`] = 'clear';
     this.delegateEvents();
+
+    const init = this.init && this.init.bind(this);
+    init && init();
   },
 
+  /**
+   * Triggers when the status changes. The status indicates if the value of
+   * the proprerty is changed or inherited
+   * @private
+   */
   updateStatus() {
     const status = this.model.get('status');
     const pfx = this.pfx;
@@ -92,7 +103,7 @@ module.exports = Backbone.View.extend({
   },
 
   /**
-   * Clear the property
+   * Clear the property from the target
    */
   clear() {
     const target = this.getTargetModel();
@@ -157,14 +168,14 @@ module.exports = Backbone.View.extend({
       return;
     }
 
+    const config = this.config;
+    const em = config.em;
+    const model = this.model;
     let value = '';
     let status = '';
     let targetValue = this.getTargetValue({ignoreDefault: 1});
-    let defaultValue = this.getDefaultValue();
+    let defaultValue = model.getDefaultValue();
     let computedValue = this.getComputedValue();
-    const config = this.config;
-    const em = config.em;
-    const model = this.model;
 
     if (targetValue) {
       value = targetValue;
@@ -240,7 +251,7 @@ module.exports = Backbone.View.extend({
     result = model.parseValue(result);
 
     if (!result && !opts.ignoreDefault) {
-      result = this.getDefaultValue();
+      result = model.getDefaultValue();
     }
 
     if (typeof customFetchValue == 'function' && !opts.ignoreCustomValue) {
@@ -255,15 +266,6 @@ module.exports = Backbone.View.extend({
     return result;
   },
 
-  /**
-   * Returns default value
-   * @return {String}
-   * @private
-   */
-  getDefaultValue() {
-    return this.model.getDefaultValue();
-  },
-
   /**
    * Returns computed value
    * @return {String}
@@ -411,20 +413,6 @@ module.exports = Backbone.View.extend({
     this.model.set('visible', 0);
   },
 
-  /**
-   * Renders input, to override
-   * */
-  renderInput() {
-    if(!this.$input){
-      this.$input = $('<input>', {
-        placeholder: this.model.getDefaultValue(),
-        type: 'text'
-      });
-      this.$el.find(this.inputHolderId).html(this.$input);
-    }
-    this.setValue(this.componentValue, 0);
-  },
-
   /**
    * Clean input
    * */
@@ -436,9 +424,10 @@ module.exports = Backbone.View.extend({
     const el = this.el;
     el.innerHTML = this.template(this.model);
     el.className = this.className;
-    this.renderInput();
     this.updateStatus();
-    return this;
+
+    const onRender = this.onRender && this.onRender.bind(this);
+    onRender && onRender();
   },
 
 });