More updates on Style Properties refactoring

index.html

@@ -1320,7 +1320,7 @@
       console.log('STORE ', e);
     })
 
-    editor.on('styleManager:change:text-shadow', function(view) {
+    editor.on('styleManager:change:border-width', function(view) {
       var model = view.model;
       let targetValue = view.getTargetValue({ignoreDefault: 1});
       let computedValue = view.getComputedValue();

src/style_manager/view/PropertyCompositeView.js

@@ -29,8 +29,10 @@ module.exports = PropertyView.extend({
     var self = this;
 
     if (props.length) {
-      if(!this.$input)
+      if (!this.$input) {
         this.$input = $('<input>', {value: 0, type: 'hidden' });
+        this.input = this.$input.get(0);
+      }
 
       if (!this.props) {
         this.props = model.get('properties');
@@ -102,9 +104,13 @@ module.exports = PropertyView.extend({
     // to get the value of the sub-property
     if (targetValue) {
       const values = targetValue.split(' ');
-      value = view ? view.model.parseValue(values[index]) : values[index];
+      value = values[index];
     } else {
-      value = view.getTargetValue({ignoreCustomValue: 1});
+      value = view && view.getTargetValue({ignoreCustomValue: 1, ignoreDefault: 1});
+    }
+
+    if (view) {
+      value = view.model.parseValue(value);
     }
 
     return value;

src/style_manager/view/PropertyRadioView.js

@@ -24,46 +24,38 @@ module.exports = require('./PropertyView').extend({
 
     if(!this.$input) {
       if(this.list && this.list.length) {
-        var input = '';
+        let inputStr = '';
         _.each(this.list, el => {
           var cl = el.className ? el.className + ' ' + pfx + 'icon ' + itemCls : '',
           id = prop + '-' + el.value,
           labelTxt = el.name ? el.name : el.value;
           var titleAttr = el.title ? 'title="' + el.title + '"': '';
-          input += '<div class="' + ppfx + 'radio-item">'+
+          inputStr += '<div class="' + ppfx + 'radio-item">'+
             '<input class="'+pfx+'radio" type="radio" id="'+ id +'" name="'+prop+'" value="'+el.value+'" />'+
             '<label class="'+(cl ? cl : itemCls)+'" ' + titleAttr + ' for="'+ id +'">' + (cl ? '' : labelTxt) + '</label></div>';
         });
-        this.input = input;
-        this.$inputEl = $(this.input);
+        this.$inputEl = $(inputStr);
+        this.input = this.$inputEl.get(0);
         this.$el.find('#'+ pfx +'input-holder').html(this.$inputEl);
         this.$input = this.$inputEl.find('input[name="'+this.property+'"]');
       }
     }
-
-    this.setValue(this.componentValue);
   },
 
-  /**
-   * Returns value from input
-   * @return {string}
-   */
   getInputValue() {
     return this.$input ? this.$el.find('input:checked').val() : '';
   },
 
-  /** @inheritdoc */
   setValue(value) {
     const model = this.model;
     var v = model.get('value') || model.getDefaultValue();
 
-    if(value)
+    if (value) {
       v  = value;
+    }
 
     if(this.$input)
-      this.$input.filter('[value="'+v+'"]').prop('checked', true);
-
-    model.set({value: v}, {silent: true});
+      this.$input.filter(`[value="${v}"]`).prop('checked', true);
   },
 
 });

src/style_manager/view/PropertySelectView.js

@@ -20,22 +20,22 @@ module.exports = require('./PropertyView').extend({
 
   onRender() {
     var pfx  = this.pfx;
+    const options = this.list;
+
     if (!this.$input) {
-      var input = '<select>';
+      let optionsStr = '';
 
-      if (this.list && this.list.length) {
-        _.each(this.list, el => {
-          var name = el.name ? el.name : el.value;
-          var style = el.style ? el.style.replace(/"/g,'&quot;') : '';
-          var styleAttr = style ? 'style="' + style + '"' : '';
-          input += '<option value="'+el.value.replace(/"/g,'&quot;')+'" ' + styleAttr + '>'+name+'</option>';
-        });
-      }
+      options.forEach(option => {
+        let name = option.name || option.value;
+        let style = option.style ? option.style.replace(/"/g,'&quot;') : '';
+        let styleAttr = style ? `style="${style}"` : '';
+        let value = option.value.replace(/"/g,'&quot;');
+        optionsStr += `<option value="${value}" ${styleAttr}>${name}</option>`;
+      });
 
-      input += '</select>';
-      this.input = input;
-      this.$input = $(this.input);
-      this.$el.find('#'+ pfx +'input-holder').html(this.$input);
+      this.$input = $(`<select>${optionsStr}</select>`);
+      this.input = this.$input.get(0);
+      this.$el.find(`#${pfx}input-holder`).html(this.$input);
     }
   },
 

src/style_manager/view/PropertyView.js

@@ -121,11 +121,10 @@ module.exports = Backbone.View.extend({
 
   /**
    * Returns selected target which should have 'style' property
-   * @deprecated
    * @return {Model|null}
    */
   getTarget() {
-    return this.propTarget && this.propTarget.model;
+    return this.getTargetModel();
   },
 
   /**
@@ -283,7 +282,8 @@ module.exports = Backbone.View.extend({
    * @return {string}
    */
   getInputValue() {
-    return this.$input ? this.$input.val() : '';
+    const input = this.getInputEl();
+    return input ? input.value : '';
   },
 
   /**
@@ -299,7 +299,7 @@ module.exports = Backbone.View.extend({
     const value = model.getFullValue();
     const target = this.getTarget();
     const onChange = this.onChange;
-    this.setValue(value);
+    this.setRawValue(value);
 
     // Check if component is allowed to be styled
     if (!target || !this.isTargetStylable() || !this.isComponentStylable()) {
@@ -380,6 +380,18 @@ module.exports = Backbone.View.extend({
     return stylable;
   },
 
+  /**
+   * Passed a raw value you have to update the input element, generally
+   * is the value fetched from targets, so you can receive values with
+   * functions, units, etc. (eg. `rotateY(45deg)`)
+   * get also
+   * @param {string} value
+   * @private
+   */
+  setRawValue(value) {
+    this.setValue(this.model.parseValue(value));
+  },
+
   /**
    * Set the value to property input
    * @param {String} value
@@ -396,8 +408,16 @@ module.exports = Backbone.View.extend({
       v = value;
     }
 
-    const input = this.$input;
-    input && input.val(v);
+    const input = this.getInputEl();
+    input && (input.value = v);
+  },
+
+  getInputEl() {
+    if (!this.input) {
+      this.input = this.el.querySelector('input');
+    }
+
+    return this.input;
   },
 
   updateVisibility() {