Refactor Style Manager Property views

index.html

@@ -1324,7 +1324,7 @@ <h1 class="heading">Insert title here</h1>
       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,15 +54,16 @@ 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;
 
     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,20 +5,18 @@ var LayersView = require('./LayersView');
 
 module.exports = PropertyCompositeView.extend({
 
-  templateField() {
+  templateInput() {
     const pfx = this.pfx;
     const ppfx = this.ppfx;
     return `
       <div class="${pfx}field ${pfx}stack">
         <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,15 +114,16 @@ 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...
     if (model.get('detached')) {
       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;
   },
 
 });