[1.0.0] Created model structure for color palette

css/style.css

@@ -1,5 +1,4 @@
 #square {
-	background-color: blue;
 	cursor: pointer;
 	float: left;
 	height: 30px;
@@ -28,7 +27,8 @@
 
 #colors-wrapper {
 	display: inline-block;
-	margin-bottom: 10px;
+	margin: 0 0 10px 3px;
+	width: 100%;
 }
 
 #colors-wrapper > div {

scripts/ColorPicker/app.js

@@ -1,8 +1,11 @@
 define([
 	'backbone',
 	'ColorPicker/models/ColorPickerModel',
-	'ColorPicker/views/ColorPickerView'
-], function (Backbone, ColorPickerModel, ColorPickerView) {
+	'ColorPicker/views/ColorPickerView',
+	'ColorPicker/collections/CollectionColor',
+	'ColorPicker/views/ColorSquareView',
+	'ColorPicker/models/ColorModel'
+], function (Backbone, ColorPickerModel, ColorPickerView, CollectionColor, ColorSquareView, ColorModel) {
 
 	var ColorPicker = function (params) {
 		this.initialize(params);
@@ -26,24 +29,18 @@ define([
 	};
 
 	p.render = function () {
+		var that = this;
+
 		this.colorPickerView.render();
 
-		$('#miniSquare > div').hover(function () {
-			var thisColor = $(this).attr('data-color-rgb');
-
-			$('#square').css({
-				'background-color': thisColor
-			});
-			$('#rgb input[type=text]').val(thisColor);
-		}, function () {
-			var defaultColor = $('#square').attr('data-color');
+		this.colorPickerModel.get('colorsCollection').each(function (color) {
+			var thisViewColor = new ColorSquareView({
+				model: color,
+				parentView: that.colorPickerView
+			});		
 
-			$('#square').css({
-				'background-color': defaultColor
-			});
-			$('#rgb input[type=text]').val(defaultColor);
+			$('#colors-wrapper').append(thisViewColor.render().el);
 		});
-
 	};
 
 	return ColorPicker;

scripts/ColorPicker/collections/CollectionColor.js

@@ -0,0 +1,21 @@
+define([
+	'backbone',
+	'ColorPicker/models/ColorModel',
+	'ColorPicker/utility/colorHelper'
+], function (Backbone, ColorModel, colorHelper) {
+	var CollectionColor = Backbone.Collection.extend({
+		model: ColorModel,
+
+		initialize: function () {
+			this.on("add", this.editColor, this);
+		},
+
+		editColor: function (model, collection, options) {
+			var color = colorHelper.conversionRgb(model.get("rgb"));
+
+			model.set("cmyk", color.cmyk);
+		}
+	});
+
+	return CollectionColor; 
+});

scripts/ColorPicker/models/ColorModel.js

@@ -0,0 +1,19 @@
+define(['backbone'], function(Backbone) {
+
+	var ColorModel = Backbone.Model.extend({
+		defaults: {
+			rgb: null,
+			cmyk: null
+		},
+
+		url: function () {
+			return false;
+		},
+
+		sync: function () {
+			return false;
+		}
+	});
+
+	return ColorModel;
+})

scripts/ColorPicker/models/ColorPickerModel.js

@@ -1,17 +1,42 @@
-define(['backbone'], function() {
+define([
+	'backbone',
+	'ColorPicker/models/ColorModel',
+	'ColorPicker/collections/CollectionColor',
+	'ColorPicker/views/ColorSquareView'
+], function (Backbone, ColorModel, ColorsCollection, ColorSquareView) {
 
-	var ColorPickerModel = Backbone.Model.extend ({	// model
+	var ColorPickerModel = Backbone.Model.extend ({
 		defaults: {
 			divId: null,
-			defaultColor: "#000000"
+			defaultColorSquare: "#000000",
+			defaultColors: ['#654654', '#456456', '#ff00ae'],
+			currentColorRgb: "#000000",
+			currentColorCmyk: [0, 0, 0, 100],
+			colorsCollection: null
 		},
+
+		initialize: function () {
+			var that = this;
+
+			this.set('colorsCollection', new ColorsCollection([]));
+
+			_.each(this.get('defaultColors'), function (color) {
+				that.get('colorsCollection').add([
+					{
+						rgb: color
+					}
+				]);				
+			});
+		},
+
 		url: function () {
 			return false;
 		},
+
 		sync: function () {
 			return false;
 		}
 	});
 
 	return ColorPickerModel;
-})
+})

scripts/ColorPicker/templates/inputTemplate.html

@@ -1 +1 @@
-<input type="text" id="apparent-input" />
+<input type="text" id="apparent-input" />

scripts/ColorPicker/templates/mainTemplate.html

@@ -1,19 +1,19 @@
 <div id="color-palette">
 	<div id="colors-wrapper"></div>
 	<label id="rgb">
-		<input type="radio" checked name="typeColor" />
+		<input type="radio" class="radio-button" checked name="typeColor" />
 		<p>RGB (HEX)</p>
-		<input type="text" value="<%= defaultColor %>" data-color="<%= defaultColor %>" maxlength="7" />
+		<input type="text" id="input-rgb" class="text-input" value="<%= currentColorRgb %>" maxlength="7" />
 	</label>
 	<label id="cmyk">
-		<input type="radio" name="typeColor" />
+		<input type="radio" class="radio-button" name="typeColor" />
 		<p>CMYK</p>
 		<div>
-			<input type="text" value="" id="cmyk-input-c" maxlength="3" disabled />
-			<input type="text" value="" id="cmyk-input-m" maxlength="3" disabled />
-			<input type="text" value="" id="cmyk-input-y" maxlength="3" disabled />
-			<input type="text" value="" id="cmyk-input-k" maxlength="3" disabled />
+			<input type="text" class="text-input" value="<%= currentColorCmyk[0] %>" id="cmyk-input-c" maxlength="3" disabled />
+			<input type="text" class="text-input" value="<%= currentColorCmyk[1] %>" id="cmyk-input-m" maxlength="3" disabled />
+			<input type="text" class="text-input" value="<%= currentColorCmyk[2] %>" id="cmyk-input-y" maxlength="3" disabled />
+			<input type="text" class="text-input" value="<%= currentColorCmyk[3] %>" id="cmyk-input-k" maxlength="3" disabled />
 		</div>
 	</label>
-	<input type="button" name="submit" value="submit" />
+	<input type="button" name="submit" id="submit" value="submit" />
 </div>

scripts/ColorPicker/templates/squareTemplate.html

@@ -1 +1 @@
-<div id="square" data-color="blue"></div>
+<div id="square" style="background-color: <%= defaultColorSquare %>"></div>

scripts/ColorPicker/utility/colorHelper.js

@@ -0,0 +1,95 @@
+define(['backbone'], function (Backbone) {
+	var colorHelper = (function () {
+
+		// PRIVATE
+
+		var decHex;
+		var hexDec;
+
+		hexDec = function (hex) {
+			var m = hex.slice(1).match(/.{2}/g);
+
+			m[0] = parseInt(m[0], 16);
+			m[1] = parseInt(m[1], 16);
+			m[2] = parseInt(m[2], 16);
+
+			return m;
+		};
+
+		decHex = function (dec) {
+			var arr;
+			var i;
+
+			arr = [
+				(dec[0]).toString(16),
+				(dec[1]).toString(16),
+				(dec[2]).toString(16)
+			]
+
+			for (i = 0; i < arr.length; i++) {
+				if (arr[i].length === 1) {
+					arr[i] = "0" + arr[i];
+				}			
+			}
+
+			return arr;
+		};
+
+		// PUBLIC
+
+		return {
+			conversionRgb: function (color) {
+				var arr = [0,0,0,1];
+				var c;
+				var k;
+				var m;
+				var rgb;
+				var y;
+
+				if (color.length === 4) {
+					color = "#" + color[1] + color[1] + color[2] + color[2] + color[3] + color[3];
+				}
+
+				rgb = hexDec(color);
+
+				c = (255 - rgb[0]) / 255;
+				m = (255 - rgb[1]) / 255;
+				y = (255 - rgb[2]) / 255;
+				k = Math.min(c, m, y);
+
+				if (k !== 1) {
+					arr[0] = Math.round(((c - k)/(1 - k)).toFixed(2) * 100);
+					arr[1] = Math.round(((m - k)/(1 - k)).toFixed(2) * 100);
+					arr[2] = Math.round(((y - k)/(1 - k)).toFixed(2) * 100);
+					arr[3] = Math.round(k.toFixed(2) * 100);
+				}
+
+				return colorObj = {
+						rgbHex: color,
+						rgb: rgb,
+						cmyk: arr
+					}
+			},
+
+			conversionCmyk: function (color) {
+				var rgb;
+				var rgbHex;
+
+				rgb = [
+					Math.round((100 - color[0]) * 2.55),
+					Math.round((100 - color[1]) * 2.55),
+					Math.round((100 - color[2]) * 2.55)
+				];
+
+				rgbHex = decHex(rgb);
+
+				return colorObj = {
+					rgb: rgb,
+					rgbHex: rgbHex
+				}
+			}
+		};	
+	})();
+
+	return colorHelper;
+});