Start traits refactoring

src/styles/scss/_gjs_traits.scss

@@ -6,6 +6,20 @@
     padding: 10px;
     text-align: left;
   }
+
+  &label {
+
+    &-wrp {
+      width: 30%;
+    }
+  }
+
+  &field {
+
+    &-wrp {
+      flex-grow: 1;
+    }
+  }
 }
 
 .#{$trt-prefix}header {
@@ -24,13 +38,8 @@
   }
 
   .#{$app-prefix}label {
-    width: 30%;
     text-align: left;
     text-overflow: ellipsis;
     overflow: hidden;
   }
-
-  .#{$app-prefix}field {
-    width: 70%;
-  }
 }

src/trait_manager/view/TraitButtonView.js

@@ -6,6 +6,8 @@ export default TraitView.extend({
     'click button': 'handleClick'
   },
 
+  templateInput: '',
+
   handleClick() {
     const { model, em } = this;
     const command = model.get('command');
@@ -28,23 +30,15 @@ export default TraitView.extend({
   getInputEl() {
     if (!this.input) {
       const { model, ppfx } = this;
-      const value = this.getModelValue();
       const label = model.get('labelButton') || '';
       const full = model.get('full');
       const className = `${ppfx}btn`;
       const input = `<button type="button" class="${className}-prim${
         full ? ` ${className}--full` : ''
-      }">
-        ${label}</button>`;
+      }">${label}</button>`;
       this.input = input;
     }
 
     return this.input;
-  },
-
-  renderField() {
-    if (!this.$input) {
-      this.$el.append(this.getInputEl());
-    }
   }
 });

src/trait_manager/view/TraitCheckboxView.js

@@ -2,14 +2,13 @@ import { isUndefined } from 'underscore';
 import TraitView from './TraitView';
 
 export default TraitView.extend({
-  initialize(o) {
-    TraitView.prototype.initialize.apply(this, arguments);
-    const { ppfx, fieldClass, inputhClass } = this;
-    this.tmpl = `<div class="${fieldClass}">
-        <label class="${inputhClass}">
-          <i class="${ppfx}chk-icon"></i>
-        </label>
-      </div>`;
+  appendInput: 0,
+
+  templateInput() {
+    const { ppfx } = this;
+    return `<label data-input>
+    <i class="${ppfx}chk-icon"></i>
+  </label>`;
   },
 
   /**

src/trait_manager/view/TraitNumberView.js

@@ -29,17 +29,17 @@ export default TraitView.extend({
       this.$input.val(value);
     }
     return this.$input.get(0);
-  },
+  }
 
   /**
    * Renders input
    * @private
    * */
-  renderField() {
-    if (!this.$input) {
-      this.$el.append(this.tmpl);
-      this.getInputEl();
-      this.$el.find('.' + this.inputhClass).prepend(this.input.el);
-    }
-  }
+  // renderField() {
+  //   if (!this.$input) {
+  //     this.$el.append(this.tmpl);
+  //     this.getInputEl();
+  //     this.$el.find('.' + this.inputhClass).prepend(this.input.el);
+  //   }
+  // }
 });

src/trait_manager/view/TraitSelectView.js

@@ -5,12 +5,14 @@ import TraitView from './TraitView';
 const $ = Backbone.$;
 
 export default TraitView.extend({
-  initialize(o) {
-    TraitView.prototype.initialize.apply(this, arguments);
-    const { ppfx, inputhClass, fieldClass, model } = this;
-    this.listenTo(model, 'change:options', this.render);
-    this.tmpl = `<div class="${fieldClass}">
-      <div class="${inputhClass}"></div>
+  init() {
+    this.listenTo(this.model, 'change:options', this.render);
+  },
+
+  templateInput() {
+    const { ppfx, clsField } = this;
+    return `<div class="${clsField}">
+      <div data-input></div>
       <div class="${ppfx}sel-arrow">
         <div class="${ppfx}d-s-arrow"></div>
       </div>
@@ -36,7 +38,7 @@ export default TraitView.extend({
           name = el;
           value = el;
         } else {
-          name = el.name ? el.name : el.value;
+          name = el.name || el.label || el.value;
           value = `${isUndefined(el.value) ? el.id : el.value}`.replace(
             /"/g,
             '&quot;'

src/trait_manager/view/TraitView.js

@@ -1,5 +1,5 @@
 import Backbone from 'backbone';
-import { isUndefined } from 'underscore';
+import { isUndefined, isString } from 'underscore';
 
 const $ = Backbone.$;
 
@@ -8,30 +8,43 @@ export default Backbone.View.extend({
     change: 'onChange'
   },
 
+  appendInput: 1,
+
   attributes() {
     return this.model.get('attributes');
   },
 
-  initialize(o) {
-    this.config = o.config || {};
-    this.em = this.config.em;
-    this.pfx = this.config.stylePrefix || '';
-    this.ppfx = this.config.pStylePrefix || '';
-    const { model, pfx, ppfx } = this;
+  templateLabel() {
+    const { ppfx } = this;
+    const label = this.getLabel();
+    return `<div class="${ppfx}label" title="${label}">${label}</div>`;
+  },
+
+  templateInput() {
+    const { clsField } = this;
+    return `<div class="${clsField}" data-input></div>`;
+  },
+
+  initialize(o = {}) {
+    const { config = {} } = o;
+    const { model } = this;
     const { target } = model;
+    const { type } = model.attributes;
+    this.config = config;
+    this.em = config.em;
+    this.pfx = config.stylePrefix || '';
+    this.ppfx = config.pStylePrefix || '';
     this.target = target;
-    this.className = `${pfx}trait`;
-    this.labelClass = `${ppfx}label`;
-    this.fieldClass = `${ppfx}field ${ppfx}field-${model.get('type')}`;
-    this.inputhClass = `${ppfx}input-holder`;
+    const { ppfx } = this;
+    this.clsField = `${ppfx}field ${ppfx}field-${type}`;
     model.off('change:value', this.onValueChange);
     this.listenTo(model, 'change:value', this.onValueChange);
     model.view = this;
-    this.tmpl = `<div class="${this.fieldClass}">
-      <div class="${this.inputhClass}"></div>
-    </div>`;
+    this.init();
   },
 
+  init() {},
+
   /**
    * Fires when the input is changed
    * @private
@@ -70,10 +83,19 @@ export default Backbone.View.extend({
    * @private
    */
   renderLabel() {
+    const { $el, target } = this;
     const label = this.getLabel();
-    this.$el.html(
-      `<div class="${this.labelClass}" title="${label}">${label}</div>`
-    );
+    let tpl = this.templateLabel(target);
+
+    if (this.createLabel) {
+      tpl =
+        this.createLabel({
+          label,
+          component: target
+        }) || '';
+    }
+
+    $el.find('[data-label]').append(tpl);
   },
 
   /**
@@ -94,22 +116,12 @@ export default Backbone.View.extend({
     return this.target;
   },
 
-  getEl() {
-    return this.getInputEl();
-  },
-
   /**
    * Returns input element
    * @return {HTMLElement}
    * @private
    */
   getInputEl() {
-    if (this.createEl) {
-      if (!this.inputEl) {
-        this.inputEl = this.createEl();
-      }
-      return this.inputEl;
-    }
     if (!this.$input) {
       const md = this.model;
       const plh = md.get('placeholder') || md.get('default') || '';
@@ -158,20 +170,40 @@ export default Backbone.View.extend({
    * @private
    * */
   renderField() {
-    if (!this.$input) {
-      this.$el.append(this.tmpl);
-      const el = this.getInputEl();
-      // I use prepand expecially for checkbox traits
-      const inputWrap = this.el.querySelector(`.${this.inputhClass}`);
-      inputWrap.insertBefore(el, inputWrap.childNodes[0]);
+    const { $el, target, appendInput } = this;
+    let tpl = this.getInputEl();
+
+    if (this.createInput) {
+      tpl = this.createInput({ component: target });
+    }
+
+    const inputs = $el.find('[data-input]');
+    const el = inputs[inputs.length - 1];
+
+    if (isString(tpl)) {
+      el.innerHTML = tpl;
+    } else {
+      appendInput ? el.appendChild(tpl) : el.insertBefore(tpl, el.firstChild);
     }
   },
 
   render() {
+    const { $el, pfx, ppfx, model } = this;
+    const { noLabel } = model.attributes;
+    const cls = `${pfx}trait`;
     this.$input = null;
-    this.renderLabel();
+    let tmpl = `<div class="${cls}">
+      ${!noLabel ? `<div class="${ppfx}label-wrp" data-label></div>` : ''}
+      <div class="${ppfx}field-wrp ${ppfx}field-wrp--${model.get(
+      'type'
+    )}" data-input>
+        ${this.templateInput && this.templateInput()}
+      </div>
+    </div>`;
+    $el.empty().append(tmpl);
+    !noLabel && this.renderLabel();
     this.renderField();
-    this.el.className = this.className;
+    this.el.className = `${cls}__wrp`;
     return this;
   }
 });