Refactor abstract ui input

GrapesJS · Oct 25, 2017 · 6e48ca0 · 6e48ca0
1 parent fc0409a
commit 6e48ca0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/src/domain_abstract/ui/Input.js b/src/domain_abstract/ui/Input.js
@@ -6,28 +6,30 @@ module.exports = Backbone.View.extend({
     'change': 'handleChange',
   },
 
+
   template() {
-    const holderClass = this.holderClass;
-    return `<span class="${holderClass}"></span>`;
+    return `<span class="${this.holderClass}"></span>`;
   },
 
+
   initialize(opts = {}) {
     const ppfx = opts.ppfx || '';
+    this.ppfx = ppfx;
     this.target = opts.target || {};
-    this.inputClass = ppfx + 'field';
-    this.inputHolderClass = ppfx + 'input-holder';
+    this.inputClass = `${ppfx}field`;
     this.holderClass = `${ppfx}input-holder`;
-    this.ppfx = ppfx;
     this.listenTo(this.model, 'change:value', this.handleModelChange);
   },
 
+
   /**
    * Fired when the element of the property is updated
    */
   elementUpdated() {
     this.model.trigger('el:change');
   },
 
+
   /**
    * Handled when the view is changed
    */
@@ -37,6 +39,7 @@ module.exports = Backbone.View.extend({
     this.elementUpdated();
   },
 
+
   /**
    * Set value to the model
    * @param {string} value
@@ -49,33 +52,35 @@ module.exports = Backbone.View.extend({
     input && (input.value = val);
   },
 
+
   /**
    * Updates the view when the model is changed
    * */
   handleModelChange(model, value, opts) {
     this.setValue(value, opts);
   },
 
+
   /**
    * Get the input element
    * @return {HTMLElement}
    */
   getInputEl() {
-    if(!this.inputEl) {
+    if (!this.inputEl) {
       const plh = this.model.get('defaults');
       const cls = this.inputCls;
       this.inputEl = $(`<input type="text" class="${cls}" placeholder="${plh}">`);
     }
+
     return this.inputEl.get(0);
   },
 
+
   render() {
     const el = this.$el;
-    const ppfx = this.ppfx;
-    const holderClass = this.holderClass;
     el.addClass(this.inputClass);
     el.html(this.template());
-    el.find(`.${holderClass}`).append(this.getInputEl());
+    el.find(`.${this.holderClass}`).append(this.getInputEl());
     return this;
   }
 

diff --git a/src/style_manager/model/PropertySlider.js b/src/style_manager/model/PropertySlider.js
@@ -2,8 +2,8 @@ const Property = require('./PropertyInteger');
 
 module.exports = Property.extend({
 
-  defaults: Object.assign({}, Property.prototype.defaults, {
-    showInput: 1,
-  }),
+  defaults: { ...Property.prototype.defaults,
+      showInput: 1,
+  },
 
 });
diff --git a/src/style_manager/view/PropertySliderView.js b/src/style_manager/view/PropertySliderView.js
@@ -1,4 +1,3 @@
-const InputNumber = require('domain_abstract/ui/InputNumber');
 const Property = require('./PropertyIntegerView');
 
 module.exports = Property.extend({
@@ -31,6 +30,7 @@ module.exports = Property.extend({
   inputValueChanged() {
     const model = this.model;
     const step = model.get('step');
+    console.log('slider ', this.getSliderEl().value, ' input', this.getInputEl().value);
     this.getInputEl().value = this.getSliderEl().value;
     const value = this.getInputValue() - step;
     model.set('value', value, {avoidStore: 1}).set('value', value + step);