diff --git a/src/domain_abstract/ui/Input.js b/src/domain_abstract/ui/Input.js index c467bad61..70fd04fc6 100644 --- a/src/domain_abstract/ui/Input.js +++ b/src/domain_abstract/ui/Input.js @@ -3,18 +3,20 @@ define(['backbone', 'text!./templates/input.html'], return Backbone.View.extend({ - events: {}, + events: { + 'change': 'handleChange', + }, template: _.template(inputTemplate), initialize: function(opts) { var opt = opts || {}; var ppfx = opt.ppfx || ''; + this.target = opt.target || {}; this.inputClass = ppfx + 'field'; this.inputHolderClass = ppfx + 'input-holder'; this.ppfx = ppfx; this.listenTo(this.model, 'change:value', this.handleModelChange); - this.delegateEvents(); }, /** @@ -33,7 +35,9 @@ define(['backbone', 'text!./templates/input.html'], setValue: function(value, opts) { var opt = opts || {}; var model = this.model; - model.set(value || model.get('defaults'), opt); + model.set({ + value: value || model.get('defaults') + }, opt); // Generally I get silent when I need to reflect data to view without // reupdating the target @@ -67,7 +71,10 @@ define(['backbone', 'text!./templates/input.html'], render: function() { var el = this.$el; el.addClass(this.inputClass); - el.html(this.template({holderClass: this.inputHolderClass})); + el.html(this.template({ + holderClass: this.inputHolderClass, + ppfx: this.ppfx + })); el.find('.'+ this.inputHolderClass).html(this.getInputEl()); return this; } diff --git a/src/domain_abstract/ui/InputColor.js b/src/domain_abstract/ui/InputColor.js index 6f2017dd3..0e3306f8c 100644 --- a/src/domain_abstract/ui/InputColor.js +++ b/src/domain_abstract/ui/InputColor.js @@ -1,89 +1,35 @@ -define(['backbone', 'text!./templates/inputColor.html'], - function (Backbone, inputTemplate) { +define(['backbone', './Input', 'Spectrum', 'text!./templates/inputColor.html'], + function (Backbone, Input, Spectrum, inputTemplate) { - return Backbone.View.extend({ - - events: {}, + return Input.extend({ template: _.template(inputTemplate), initialize: function(opts) { - var ppfx = opts.ppfx || ''; - this.ppfx = ppfx; - this.inputCls = ppfx + 'input-number'; + Input.prototype.initialize.apply(this, arguments); + var ppfx = this.ppfx; this.colorCls = ppfx + 'field-color-picker'; - this.events['change .' + this.inputCls] = 'handleChange'; - this.events['change .' + this.unitCls] = 'handleUnitChange'; + this.inputClass = ppfx + 'field ' + ppfx + 'field-color'; + this.colorHolderClass = ppfx + 'field-colorp-c'; this.listenTo(this.model, 'change:value', this.handleModelChange); - this.delegateEvents(); - }, - - /** - * Set value to the model - * @param {string} value - * @param {Object} opts - */ - setValue: function(value, opts) { - var opt = opts || {}; - var model = this.model; - var val = value || model.get('defaults'); - - var valid = this.validateInputValue(value, {deepCheck: 1}); - var validObj = {value: valid.value}; - - this.model.set(val, opt); - - if(opt.silent) { - this.handleModelChange(); - } }, - /** - * Handled when the view is changed - */ - handleChange: function (e) { - e.stopPropagation(); - this.setValue(this.getInputEl().value); - }, - - /** - * Handled when the view is changed - */ - handleUnitChange: function (e) { - e.stopPropagation(); - var value = this.getUnitEl().value; - this.model.set('unit', value); - }, - /** * Updates the view when the model is changed * */ handleModelChange: function() { - var m = this.model; - var value = m.get('value'); - this.getInputEl().value = value; + Input.prototype.handleModelChange.apply(this, arguments); + var value = this.model.get('value'); var colorEl = this.getColorEl(); + + // If no color selected I will set white for the picker + value = value === 'none' ? '#fff' : value; colorEl.spectrum('set', value); colorEl.get(0).style.backgroundColor = value; }, - /** - * Get the input element - * @return {HTMLElement} - */ - getInputEl: function() { - if(!this.inputEl) { - this.inputEl = $('', { - type: 'text', - class: this.inputCls, - placeholder: this.model.get('defaults') - }); - } - return this.inputEl.get(0); - }, - /** * Get the color input element * @return {HTMLElement} @@ -93,9 +39,9 @@ define(['backbone', 'text!./templates/inputColor.html'], var model = this.model; var colorEl = $('
', {class: this.colorCls}); var cpStyle = colorEl.get(0).style; - var elToAppend = this.target.config ? this.target.config.el : ''; + var elToAppend = this.target && this.target.config ? this.target.config.el : ''; colorEl.spectrum({ - appendTo: el || 'body', + appendTo: elToAppend || 'body', maxSelectionSize: 8, showPalette: true, showAlpha: true, @@ -115,16 +61,12 @@ define(['backbone', 'text!./templates/inputColor.html'], }); this.colorEl = colorEl; } - return this.colorEl && this.colorEl.get(0); + return this.colorEl; }, render: function() { - var ppfx = this.ppfx; - var el = this.$el; - el.html(this.template({ppfx: ppfx})); - el.find('.' + ppfx +'input-holder').html(this.getInputEl()); - el.find('.' + ppfx + 'field-colorp-c').html(this.getColorEl()); - el.addClass(ppfx + 'field ' + ppfx + 'field-color'); + Input.prototype.render.apply(this, arguments); + this.$el.find('.' + this.colorHolderClass).html(this.getColorEl()); return this; } diff --git a/src/domain_abstract/ui/templates/propertyInput.html b/src/domain_abstract/ui/templates/input.html similarity index 100% rename from src/domain_abstract/ui/templates/propertyInput.html rename to src/domain_abstract/ui/templates/input.html diff --git a/src/domain_abstract/ui/templates/propertyColor.html b/src/domain_abstract/ui/templates/inputColor.html similarity index 100% rename from src/domain_abstract/ui/templates/propertyColor.html rename to src/domain_abstract/ui/templates/inputColor.html diff --git a/src/style_manager/view/PropertyColorView.js b/src/style_manager/view/PropertyColorView.js index 6f0b3addc..e38ac894f 100644 --- a/src/style_manager/view/PropertyColorView.js +++ b/src/style_manager/view/PropertyColorView.js @@ -1,57 +1,27 @@ -define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyColor.html'], - function (Backbone, PropertyView, Spectrum, propertyTemplate) { - /** - * @class PropertyColorView - * */ +define(['backbone','./PropertyView', 'Abstract/ui/InputColor'], + function (Backbone, PropertyView, InputColor) { + return PropertyView.extend({ - template: _.template(propertyTemplate), + renderTemplate: function(){}, - /** @inheritdoc */ renderInput: function() { - if(!this.$input){ - this.$input = $('', {placeholder: this.defaultValue, type: 'text' }); - this.$el.find('#' + this.pfx + 'input-holder').html(this.$input); - } - if(!this.$colorPicker){ - this.$colorPicker = $('
', {class: this.ppfx + "field-color-picker"}); - cpStyle = this.$colorPicker.get(0).style; - var that = this; - var el = this.target.config ? this.target.config.el : ''; - this.$colorPicker.spectrum({ - appendTo: el || 'body', - showPalette: true, - maxSelectionSize: 8, - palette: [], - showAlpha: true, - chooseText: 'Ok', - cancelText: 'тип', - move: function(color) { - var c = color.getAlpha() == 1 ? color.toHexString() : color.toRgbString(); - cpStyle.backgroundColor = c; - }, - change: function(color) { - var c = color.getAlpha() == 1 ? color.toHexString() : color.toRgbString(); - c = c.replace(/ /g,''); - cpStyle.backgroundColor = c; - that.model.set('value', c); - } + if (!this.input) { + var inputColor = new InputColor({ + target: this.target, + model: this.model, + ppfx: this.ppfx }); - this.$el.find('.' + this.ppfx + 'field-colorp-c').append(this.$colorPicker); + this.input = inputColor.render(); + this.$el.append(this.input.$el); + this.$input = this.input.inputEl; + this.$color = this.input.colorEl; } - this.setValue(this.componentValue, 0); + this.setValue(this.componentValue); }, - /** @inheritdoc */ - setValue: function(value, f){ - PropertyView.prototype.setValue.apply(this, arguments); - var v = this.model.get('value') || this.defaultValue; - v = value || v; - if(this.$colorPicker){ - v = v === 'none' ? '#fff' : v; - this.$colorPicker.spectrum("set", v); - this.$colorPicker.get(0).style.backgroundColor = v; - } + setValue: function(value){ + this.input.setValue(value, {silent: 1}); }, });