Refactor Stack layers rendering

src/style_manager/view/PropertyColorView.js

@@ -3,10 +3,6 @@ var InputColor = require('domain_abstract/ui/InputColor');
 
 module.exports = require('./PropertyIntegerView').extend({
 
-  init() {
-    this.className += ` ${this.pfx}file`;
-  },
-
   setValue(value, opts = {}) {
     opts = Object.assign({}, opts, {silent: 1});
     this.inputInst.setValue(value, opts);

src/style_manager/view/PropertyCompositeView.js

@@ -11,10 +11,6 @@ module.exports = PropertyView.extend({
     `;
   },
 
-  init() {
-    this.className = this.className + ' '+ this.pfx +'composite';
-  },
-
   inputValueChanged(...args) {
     if(!this.model.get('detached'))
       PropertyView.prototype.inputValueChanged.apply(this, args);

src/style_manager/view/PropertyFileView.js

@@ -29,7 +29,6 @@ module.exports = PropertyView.extend({
     this.assets = this.target.get('assets');
     this.modal = this.target.get('Modal');
     this.am = this.target.get('AssetManager');
-    this.className = this.className + ' '+ this.pfx +'file';
     this.events['click #'+this.pfx+'close']    = 'removeFile';
     this.events['click #'+this.pfx+'images']  = 'openAssetManager';
     this.delegateEvents();

src/style_manager/view/PropertyRadioView.js

@@ -10,34 +10,34 @@ module.exports = require('./PropertyView').extend({
     `;
   },
 
-  init() {
-    const model = this.model;
-    this.list = model.get('list') || model.get('options') || [];
-    this.className = this.className + ' '+ this.pfx +'list';
-  },
-
   onRender() {
-    var pfx = this.pfx;
-    var ppfx = this.ppfx;
-    var itemCls = ppfx + 'radio-item-label';
-    var prop = this.property;
+    const pfx = this.pfx;
+    const ppfx = this.ppfx;
+    const itemCls = `${ppfx}radio-item-label`;
+    const model = this.model;
+    const prop = model.get('property');
+    const options = model.get('list') || model.get('options') || [];
 
-    if(!this.$input) {
-      if(this.list && this.list.length) {
+    if (!this.$input) {
+      if(options && options.length) {
         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 + '"': '';
-          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>';
+
+        options.forEach(el => {
+          let cl = el.className ?  `${el.className} ${pfx}icon ${itemCls}` : '';
+          let id = `${prop}-${el.value}`;
+          let labelTxt = el.name || el.value;
+          let titleAttr = el.title ? `title="${el.title}"` : '';
+          inputStr += `
+            <div class="${ppfx}radio-item">
+              <input type="radio" class="${pfx}radio" id="${id}" name="${prop}" value="${el.value}"/>
+              <label class="${cl || itemCls}" ${titleAttr} for="${id}">${cl ? '' : labelTxt}</label>
+            </div>`;
         });
+
         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.$el.find(`#${pfx}input-holder`).html(this.$inputEl);
+        this.$input = this.$inputEl.find(`input[name="${prop}"]`);
       }
     }
   },

src/style_manager/view/PropertySelectView.js

@@ -13,14 +13,10 @@ module.exports = require('./PropertyView').extend({
     `;
   },
 
-  init() {
-    const model = this.model;
-    this.list = model.get('list') || model.get('options') || [];
-  },
-
   onRender() {
     var pfx  = this.pfx;
-    const options = this.list;
+    const model = this.model;
+    const options = model.get('list') || model.get('options') || [];
 
     if (!this.$input) {
       let optionsStr = '';

src/style_manager/view/PropertyStackView.js

@@ -20,7 +20,6 @@ module.exports = PropertyCompositeView.extend({
     const model = this.model;
     const pfx = this.pfx;
     model.set('stackIndex', null);
-    this.className = `${pfx}property ${pfx}stack`;
     this.events[`click #${pfx}add`] = 'addLayer';
     this.listenTo(model, 'change:stackIndex', this.indexChanged);
     this.listenTo(model, 'updateValue', this.inputValueChanged);
@@ -210,8 +209,9 @@ module.exports = PropertyCompositeView.extend({
    * @return self
    * */
   renderLayers() {
-    if(!this.$field)
-      this.$field = this.$el.find('> .' + this.pfx + 'field');
+    if (!this.fieldEl) {
+      this.fieldEl = this.el.querySelector(`.${this.pfx}field`);
+    }
 
     if(!this.$layers)
       this.$layers = new LayersView({
@@ -221,9 +221,8 @@ module.exports = PropertyCompositeView.extend({
         config: this.config
       });
 
-    this.$field.append(this.$layers.render().el);
+    this.fieldEl.appendChild(this.$layers.render().el);
     this.$props.hide();
-    return this;
   },
 
   /**

src/style_manager/view/PropertyView.js

@@ -52,7 +52,6 @@ module.exports = Backbone.View.extend({
     this.property = model.get('property');
     this.input = this.$input = null;
     const pfx = this.pfx;
-    this.className = pfx + 'property';
     this.inputHolderId = '#' + pfx + 'input-holder';
     this.sector = model.collection && model.collection.sector;
 
@@ -436,9 +435,11 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
+    const pfx = this.pfx;
+    const model = this.model;
     const el = this.el;
-    el.innerHTML = this.template(this.model);
-    el.className = this.className;
+    el.innerHTML = this.template(model);
+    el.className = `${pfx}property ${pfx}${model.get('type')}`;
     this.updateStatus();
 
     const onRender = this.onRender && this.onRender.bind(this);

src/styles/scss/_gjs_style_manager.scss

@@ -246,7 +246,9 @@
     &.#{$sm-prefix}composite,
     &.#{$sm-prefix}file,
     &.#{$sm-prefix}list,
+    &.#{$sm-prefix}radio,
     &.#{$sm-prefix}stack,
+    &.#{$sm-prefix}slider,
     &.#{$sm-prefix}color {
       width: 100%;
     }