Refactor templating in StyleManager properties

GrapesJS · Sep 14, 2017 · f230b83 · f230b83
1 parent 5407c89
commit f230b83
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 181 deletions.
diff --git a/src/style_manager/view/PropertyColorView.js b/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`;

diff --git a/src/style_manager/view/PropertyCompositeView.js b/src/style_manager/view/PropertyCompositeView.js
@@ -3,11 +3,16 @@ var PropertyView = require('./PropertyView');
 
 module.exports = PropertyView.extend({
 
-  template: _.template(`
-  <div class="<%= pfx %>field <%= pfx %>composite">
-  	<span id='<%= pfx %>input-holder'></span>
-  </div>
-  <div style="clear:both"></div>`),
+  templateField() {
+    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);

diff --git a/src/style_manager/view/PropertyFileView.js b/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'>
-      <div class="<%= pfx %>btn-c">
-        <button class="<%= pfx %>btn" id="<%= pfx %>images" type="button"><%= assets %></button>
+
+  templateField() {
+    const pfx = this.pfx;
+    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);

diff --git a/src/style_manager/view/PropertyIntegerView.js b/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});
   },

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

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

diff --git a/src/style_manager/view/PropertyStackView.js b/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(`
-  <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>`),
+
+  templateField() {
+    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);
@@ -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();
-    this.renderField();
+    const el = this.el;
+    el.innerHTML = this.template(this.model);
+    this.renderInput();
     this.renderLayers();
     this.$el.attr('class', this.className);
     this.updateStatus();