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);