Refactor color input UI

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

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 = $('<input>', {
-					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 = $('<div>', {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;
 		}
 

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 = $('<input>', {placeholder: this.defaultValue, type: 'text' });
-				this.$el.find('#' + this.pfx + 'input-holder').html(this.$input);
-			}
-			if(!this.$colorPicker){
-				this.$colorPicker = $('<div>', {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});
 		},
 
 	});