Few updates on inputs

src/domain_abstract/ui/Input.js

@@ -6,12 +6,17 @@ module.exports = Backbone.View.extend({
     'change': 'handleChange',
   },
 
-  initialize(opts) {
-    var opt = opts || {};
-    var ppfx = opt.ppfx || '';
-    this.target = opt.target || {};
+  template() {
+    const holderClass = this.holderClass;
+    return `<span class="${holderClass}"></span>`;
+  },
+
+  initialize(opts = {}) {
+    const ppfx = opts.ppfx || '';
+    this.target = opts.target || {};
     this.inputClass = ppfx + 'field';
     this.inputHolderClass = ppfx + 'input-holder';
+    this.holderClass = `${ppfx}input-holder`;
     this.ppfx = ppfx;
     this.listenTo(this.model, 'change:value', this.handleModelChange);
   },
@@ -66,9 +71,9 @@ module.exports = Backbone.View.extend({
   render() {
     const el = this.$el;
     const ppfx = this.ppfx;
-    const holderClass = `${ppfx}input-holder`;
+    const holderClass = this.holderClass;
     el.addClass(this.inputClass);
-    el.html(`<span class="${holderClass}"></span>`);
+    el.html(this.template());
     el.find(`.${holderClass}`).append(this.getInputEl());
     return this;
   }

src/domain_abstract/ui/InputColor.js

@@ -5,17 +5,21 @@ const $ = Backbone.$;
 
 module.exports = Input.extend({
 
-  template: _.template(`
-  <div class='<%= ppfx %>input-holder'></div>
-  <div class="<%= ppfx %>field-colorp">
-    <div class="<%= ppfx %>field-colorp-c">
-      <div class="<%= ppfx %>checker-bg"></div>
-    </div>
-  </div>`),
+  template() {
+    const ppfx = this.ppfx;
+    return `
+      <div class="${ppfx}input-holder"></div>
+      <div class="${ppfx}field-colorp">
+        <div class="${ppfx}field-colorp-c">
+          <div class="${ppfx}checker-bg"></div>
+        </div>
+      </div>
+    `;
+  },
 
   initialize(opts) {
     Input.prototype.initialize.apply(this, arguments);
-    var ppfx = this.ppfx;
+    const ppfx = this.ppfx;
     this.colorCls = `${ppfx}field-color-picker`;
     this.inputClass = `${ppfx}field ${ppfx}field-color`;
     this.colorHolderClass = `${ppfx}field-colorp-c`;
@@ -57,14 +61,10 @@ module.exports = Input.extend({
       const self = this;
       var model = this.model;
 
-      var colorEl = $(`<div class="${this.colorCls}">`);
+      var colorEl = $(`<div class="${this.colorCls}"></div>`);
       var cpStyle = colorEl.get(0).style;
       var elToAppend = this.target && this.target.config ? this.target.config.el : '';
 
-      if (typeof colorEl.spectrum == 'undefined') {
-        throw 'Spectrum missing, probably you load jQuery twice';
-      }
-
       const getColor = color => {
         let cl = color.getAlpha() == 1 ? color.toHexString() : color.toRgbString();
         return cl.replace(/ /g, '');
@@ -113,9 +113,9 @@ module.exports = Input.extend({
     return this.colorEl;
   },
 
-  render(...args) {
-    Input.prototype.render.apply(this, args);
-    this.$el.find('.' + this.colorHolderClass).html(this.getColorEl());
+  render() {
+    Input.prototype.render.apply(this, arguments);
+    this.$el.find(`.${this.colorHolderClass}`).append(this.getColorEl());
     return this;
   }
 

src/style_manager/view/PropertyColorView.js

@@ -1,5 +1,4 @@
-var Backbone = require('backbone');
-var InputColor = require('domain_abstract/ui/InputColor');
+const InputColor = require('domain_abstract/ui/InputColor');
 
 module.exports = require('./PropertyIntegerView').extend({
 
@@ -10,13 +9,14 @@ module.exports = require('./PropertyIntegerView').extend({
 
   onRender() {
     if (!this.input) {
+      const ppfx = this.ppfx;
       const inputColor = new InputColor({
         target: this.target,
         model: this.model,
-        ppfx: this.ppfx
+        ppfx
       });
       const input = inputColor.render();
-      this.$el.append(input.$el);
+      this.el.querySelector(`.${ppfx}fields`).appendChild(input.el);
       this.$input = input.inputEl;
       this.$color = input.colorEl;
       this.input = this.$input.get(0);