diff --git a/src/domain_abstract/ui/Input.js b/src/domain_abstract/ui/Input.js
index 1ee991690..2e6843539 100644
--- a/src/domain_abstract/ui/Input.js
+++ b/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 ``;
+ },
+
+ 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(``);
+ el.html(this.template());
el.find(`.${holderClass}`).append(this.getInputEl());
return this;
}
diff --git a/src/domain_abstract/ui/InputColor.js b/src/domain_abstract/ui/InputColor.js
index a0c520ec5..fba2a1263 100644
--- a/src/domain_abstract/ui/InputColor.js
+++ b/src/domain_abstract/ui/InputColor.js
@@ -5,17 +5,21 @@ const $ = Backbone.$;
module.exports = Input.extend({
- template: _.template(`
-
- `),
+ template() {
+ const ppfx = this.ppfx;
+ return `
+
+
+ `;
+ },
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 = $(``);
+ var colorEl = $(`
`);
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;
}
diff --git a/src/style_manager/view/PropertyColorView.js b/src/style_manager/view/PropertyColorView.js
index cc9bab2a2..7e61ee65d 100644
--- a/src/style_manager/view/PropertyColorView.js
+++ b/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);