Refactor templating in StyleManager properties

src/style_manager/view/PropertyColorView.js

@@ -4,8 +4,6 @@ var InputColor = require('domain_abstract/ui/InputColor');
 
 module.exports = PropertyView.extend({
 
-  renderTemplate() {},
-
   initialize(options) {
     PropertyView.prototype.initialize.apply(this, arguments);
     this.className += ` ${this.pfx}file`;

src/style_manager/view/PropertyCompositeView.js

@@ -3,11 +3,16 @@ var PropertyView = require('./PropertyView');
 
 module.exports = PropertyView.extend({
 
-  template: _.template(`
+  templateField() {
-  <div class="<%= pfx %>field <%= pfx %>composite">
+    const pfx = this.pfx;
-  	<span id='<%= pfx %>input-holder'></span>
+    const ppfx = this.ppfx;
-  </div>
+    return `
-  <div style="clear:both"></div>`),
+      <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);

src/style_manager/view/PropertyFileView.js

@@ -2,19 +2,28 @@ var Backbone = require('backbone');
 var PropertyView = require('./PropertyView');
 
 module.exports = PropertyView.extend({
-  template: _.template(`<div class="<%= pfx %>field <%= pfx %>file">
+
-    <div id='<%= pfx %>input-holder'>
+  templateField() {
-      <div class="<%= pfx %>btn-c">
+    const pfx = this.pfx;
-        <button class="<%= pfx %>btn" id="<%= pfx %>images" type="button"><%= assets %></button>
+    const ppfx = this.ppfx;
+    return `
+    <div class="${pfx}field ${pfx}file">
+      <div id='${pfx}input-holder'>
+        <div class="${pfx}btn-c">
+          <button class="${pfx}btn" id="${pfx}images" type="button">
+            ${this.assets}
+          </button>
+        </div>
+        <div style="clear:both;"></div>
+      </div>
+      <div id="${pfx}preview-box">
+        <div id="${pfx}preview-file"></div>
+        <div id="${pfx}close">&Cross;</div>
       </div>
-      <div style="clear:both;"></div>
-    </div>
-    <div id="<%= pfx %>preview-box">
-      <div id="<%= pfx %>preview-file"></div>
-      <div id="<%= pfx %>close">&Cross;</div>
     </div>
-  </div>
+    <div style="clear:both"></div>
-  <div style="clear:both"></div>`),
+    `;
+  },
 
   initialize(options) {
     PropertyView.prototype.initialize.apply(this, arguments);
@@ -85,16 +94,6 @@ module.exports = PropertyView.extend({
       this.$preview.css('background-image', "url(" + url + ")");
   },
 
-
-  /** @inheritdoc */
-  renderTemplate() {
-    this.$el.append( this.template({
-      upload  : 'Upload',
-      assets  : 'Images',
-      pfx    : this.pfx
-    }));
-  },
-
   /** @inheritdoc */
   cleanValue() {
     this.setPreviewView(0);

src/style_manager/view/PropertyIntegerView.js

@@ -1,4 +1,3 @@
-var Backbone = require('backbone');
 var PropertyView = require('./PropertyView');
 var InputNumber = require('domain_abstract/ui/InputNumber');
 
@@ -10,15 +9,6 @@ module.exports = PropertyView.extend({
     this.listenTo(this.model, 'el:change', this.elementUpdated);
   },
 
-  /**
-   * Returns value from inputs
-   * @return {string}
-   */
-  getValueForTarget() {
-    var model = this.model;
-    return model.get('value') + model.get('unit');
-  },
-
   renderInput() {
     if (!this.input) {
       var inputNumber = new InputNumber({
@@ -33,8 +23,6 @@ module.exports = PropertyView.extend({
     this.setValue(this.componentValue);
   },
 
-  renderTemplate() {},
-
   setValue(value) {
     this.input.setValue(value, {silent: 1});
   },

src/style_manager/view/PropertyRadioView.js

@@ -3,11 +3,16 @@ var PropertyView = require('./PropertyView');
 
 module.exports = PropertyView.extend({
 
-  template: _.template(`
+  templateField() {
-  <div class="<%= ppfx %>field <%= ppfx %>field-radio">
+    const pfx = this.pfx;
-    <span id='<%= pfx %>input-holder'></span>
+    const ppfx = this.ppfx;
-  </div>
+    return `
-  <div style="clear:both"></div>`),
+      <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);

src/style_manager/view/PropertySelectView.js

@@ -3,14 +3,19 @@ var PropertyView = require('./PropertyView');
 
 module.exports = PropertyView.extend({
 
-  template: _.template(`
+  templateField() {
-  <div class="<%= ppfx %>field <%= ppfx %>select">
+    const pfx = this.pfx;
-    <span id='<%= pfx %>input-holder'></span>
+    const ppfx = this.ppfx;
-    <div class="<%= ppfx %>sel-arrow">
+    return `
-      <div class="<%= ppfx %>d-s-arrow"></div>
+      <div class="${ppfx}field ${ppfx}select">
-    </div>
+        <span id="${pfx}input-holder"></span>
-  </div>
+        <div class="${ppfx}sel-arrow">
-  <div style="clear:both"></div>`),
+          <div class="${ppfx}d-s-arrow"></div>
+        </div>
+      </div>
+      <div style="clear:both"></div>
+    `;
+  },
 
   initialize(options) {
     PropertyView.prototype.initialize.apply(this, arguments);

src/style_manager/view/PropertyStackView.js

@@ -4,13 +4,18 @@ var Layers = require('./../model/Layers');
 var LayersView = require('./LayersView');
 
 module.exports = PropertyCompositeView.extend({
-
+  
-  template: _.template(`
+  templateField() {
-  <div class="<%= pfx %>field <%= pfx %>stack">
+    const pfx = this.pfx;
-    <button type="button" id='<%= pfx %>add'>+</button>
+    const ppfx = this.ppfx;
-    <span id='<%= pfx %>input-holder'></span>
+    return `
-  </div>
+      <div class="${pfx}field ${pfx}stack">
-  <div style="clear:both"></div>`),
+        <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);
@@ -115,7 +120,7 @@ module.exports = PropertyCompositeView.extend({
       var valist = (targetValue + '').split(',');
       result = valist[layerIndex];
       result = result ? result.trim() : propView.getDefaultValue();
-      result = propView.tryFetchFromFunction(result);
+      result = propView.model.parseValue(result);
     } else {
       var aStack = this.getStackValues();
       var strVar = aStack[layerIndex];
@@ -312,8 +317,9 @@ module.exports = PropertyCompositeView.extend({
   },
 
   render() {
-    this.renderLabel();
+    const el = this.el;
-    this.renderField();
+    el.innerHTML = this.template(this.model);
+    this.renderInput();
     this.renderLayers();
     this.$el.attr('class', this.className);
     this.updateStatus();

src/style_manager/view/PropertyView.js

@@ -1,19 +1,33 @@
 var Backbone = require('backbone');
 
 module.exports = Backbone.View.extend({
-  template: _.template(`
+
-  <div class="<%= ppfx %>field">
+  template(model) {
-    <span id='<%= pfx %>input-holder'></span>
+    const pfx = this.pfx;
-  </div>
+    const name = model.get('name');
-  <div style="clear:both"></div>`),
+    const icon = model.get('icon');
-
+    const info = model.get('info');
-  templateLabel: _.template(`
+    return `
-  <div class="<%= pfx %>label">
+      <div class="${pfx}label">
-    <span class="<%= pfx %>icon <%= icon %>" title="<%= info %>">
+        <span class="${pfx}icon ${icon}" title="${info}">
-      <%= label %>
+          ${name}
-    </span>
+        </span>
-    <b class="<%= pfx %>clear">&Cross;</b>
+        <b class="${pfx}clear">&Cross;</b>
-  </div>`),
+      </div>
+      ${this.templateField()}
+    `;
+  },
+
+  templateField() {
+    const pfx = this.pfx;
+    const ppfx = this.ppfx;
+    return `
+      <div class="${ppfx}field">
+        <span id="${pfx}input-holder"></span>
+      </div>
+      <div style="clear:both"></div>
+    `;
+  },
 
   events: {
     'change': 'valueUpdated'
@@ -169,7 +183,6 @@ module.exports = Backbone.View.extend({
       status = '';
     }
 
-    //value = this.tryFetchFromFunction(value);
     this.setValue(value, 1);
     this.model.set('status', status);
 
@@ -177,14 +190,6 @@ module.exports = Backbone.View.extend({
       em.trigger('styleManager:change', this);
       em.trigger(`styleManager:change:${model.get('property')}`, this);
     }
-
-    /*
-    if(this.getTarget()) {
-      if(!this.sameValue()){
-        this.renderInputRequest();
-      }
-    }*/
-
   },
 
   checkVisibility() {
@@ -207,16 +212,6 @@ module.exports = Backbone.View.extend({
     return result;
   },
 
-  /**
-   * Checks if the value from selected component is the
-   * same of the value of the model
-   *
-   * @return {Boolean}
-   * */
-  sameValue() {
-    return this.getTargetValue() == this.getValueForTarget();
-  },
-
   /**
    * Get the value of this property from the target (eg, Component, CSSRule)
    * @param {Object} [opts] Options
@@ -275,36 +270,6 @@ module.exports = Backbone.View.extend({
     return computed && valid.indexOf(property) >= 0 && computed[property];
   },
 
-  /**
-   * Fetch the string from function type value
-   * @param {String} v Function type value
-   *
-   * @return {String}
-   * */
-  fetchFromFunction(v) {
-    return v.substring(v.indexOf("(") + 1, v.lastIndexOf(")"));
-  },
-
-  tryFetchFromFunction(value) {
-    if (!this.model.get('functionName')) {
-      return value;
-    }
-
-    var valueStr = value + '';
-    var start = valueStr.indexOf("(") + 1;
-    var end = valueStr.lastIndexOf(")");
-    return valueStr.substring(start, end);
-  },
-
-  /**
-   * Returns the value composed for the target
-   * TODO put here the check for functionName
-   * @return {string}
-   */
-  getValueForTarget() {
-    return this.model.get('value');
-  },
-
   /**
    * Returns value from input
    * @return {string}
@@ -321,31 +286,32 @@ module.exports = Backbone.View.extend({
    * @param    {Object}  opt  Options
    * */
   valueChanged(e, val, opt) {
-    var mVal = this.getValueForTarget();
+    const em = this.config.em;
-    var em = this.config.em;
+    const model = this.model;
-    var model = this.model;
+    const value = model.getFullValue();
+    const target = this.getTarget();
+    const onChange = this.onChange;
 
-    if(this.$input)
+    if (this.$input) {
-      this.setValue(mVal);
+      this.setValue(value);
+    }
 
-    if(!this.getTarget())
+    if (!target) {
       return;
+    }
 
     // Check if component is allowed to be styled
     if (!this.isTargetStylable() || !this.isComponentStylable()) {
       return;
     }
 
-    const value = this.model.getFullValue();
+    if (onChange && typeof onChange === "function") {
-    var target = this.getTarget();
-    var onChange = this.onChange;
-
-    if(onChange && typeof onChange === "function"){
       onChange(target, this, opt);
-    }else
+    } else {
       this.updateTargetStyle(value, null, opt);
+    }
 
-    if(em){
+    if (em) {
       em.trigger('component:update', model);
       em.trigger('component:styleUpdate', model);
       em.trigger('component:styleUpdate:' + model.get('property'), model);
@@ -370,6 +336,7 @@ module.exports = Backbone.View.extend({
     }
 
     target.setStyle(style, opts);
+
     // Helper is used by `states` like ':hover' to show its preview
     const helper = this.getHelperModel();
     helper && helper.setStyle(style, opts);
@@ -442,39 +409,6 @@ module.exports = Backbone.View.extend({
     this.model.set('visible', 0);
   },
 
-  renderLabel() {
-    let model = this.model;
-    this.$el.html(this.templateLabel({
-      pfx: this.pfx,
-      ppfx: this.ppfx,
-      icon: model.get('icon'),
-      info: model.get('info'),
-      label: model.get('name'),
-    }));
-  },
-
-  /**
-   * Render field property
-   * */
-  renderField() {
-    this.renderTemplate();
-    this.renderInput();
-    delete this.componentValue;
-  },
-
-  /**
-   * Render loaded template
-   * */
-  renderTemplate() {
-    this.$el.append( this.template({
-      pfx    : this.pfx,
-      ppfx  : this.ppfx,
-      icon  : this.model.get('icon'),
-      info  : this.model.get('info'),
-      label  : this.model.get('name'),
-    }));
-  },
-
   /**
    * Renders input, to override
    * */
@@ -489,13 +423,6 @@ module.exports = Backbone.View.extend({
     this.setValue(this.componentValue, 0);
   },
 
-  /**
-   * Request to render input of the property
-   * */
-  renderInputRequest() {
-    this.renderInput();
-  },
-
   /**
    * Clean input
    * */
@@ -504,9 +431,10 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
-    this.renderLabel();
+    const el = this.el;
-    this.renderField();
+    el.innerHTML = this.template(this.model);
-    this.$el.attr('class', this.className);
+    this.renderInput();
+    el.className = this.className;
     this.updateStatus();
     return this;
   },