1 /** |
|
2 * ColorPicker.js |
|
3 * |
|
4 * Copyright, Moxiecode Systems AB |
|
5 * Released under LGPL License. |
|
6 * |
|
7 * License: http://www.tinymce.com/license |
|
8 * Contributing: http://www.tinymce.com/contributing |
|
9 */ |
|
10 |
|
11 /** |
|
12 * Color picker widget lets you select colors. |
|
13 * |
|
14 * @-x-less ColorPicker.less |
|
15 * @class tinymce.ui.ColorPicker |
|
16 * @extends tinymce.ui.Widget |
|
17 */ |
|
18 define("tinymce/ui/ColorPicker", [ |
|
19 "tinymce/ui/Widget", |
|
20 "tinymce/ui/DragHelper", |
|
21 "tinymce/ui/DomUtils", |
|
22 "tinymce/util/Color" |
|
23 ], function(Widget, DragHelper, DomUtils, Color) { |
|
24 "use strict"; |
|
25 |
|
26 return Widget.extend({ |
|
27 Defaults: { |
|
28 classes: "widget colorpicker" |
|
29 }, |
|
30 |
|
31 /** |
|
32 * Constructs a new colorpicker instance with the specified settings. |
|
33 * |
|
34 * @constructor |
|
35 * @param {Object} settings Name/value object with settings. |
|
36 * @setting {String} color Initial color value. |
|
37 */ |
|
38 init: function(settings) { |
|
39 this._super(settings); |
|
40 }, |
|
41 |
|
42 postRender: function() { |
|
43 var self = this, color = self.color(), hsv, hueRootElm, huePointElm, svRootElm, svPointElm; |
|
44 |
|
45 hueRootElm = self.getEl('h'); |
|
46 huePointElm = self.getEl('hp'); |
|
47 svRootElm = self.getEl('sv'); |
|
48 svPointElm = self.getEl('svp'); |
|
49 |
|
50 function getPos(elm, event) { |
|
51 var pos = DomUtils.getPos(elm), x, y; |
|
52 |
|
53 x = event.pageX - pos.x; |
|
54 y = event.pageY - pos.y; |
|
55 |
|
56 x = Math.max(0, Math.min(x / elm.clientWidth, 1)); |
|
57 y = Math.max(0, Math.min(y / elm.clientHeight, 1)); |
|
58 |
|
59 return { |
|
60 x: x, |
|
61 y: y |
|
62 }; |
|
63 } |
|
64 |
|
65 function updateColor(hsv, hueUpdate) { |
|
66 var hue = (360 - hsv.h) / 360; |
|
67 |
|
68 DomUtils.css(huePointElm, { |
|
69 top: (hue * 100) + '%' |
|
70 }); |
|
71 |
|
72 if (!hueUpdate) { |
|
73 DomUtils.css(svPointElm, { |
|
74 left: hsv.s + '%', |
|
75 top: (100 - hsv.v) + '%' |
|
76 }); |
|
77 } |
|
78 |
|
79 svRootElm.style.background = new Color({s: 100, v: 100, h: hsv.h}).toHex(); |
|
80 self.color().parse({s: hsv.s, v: hsv.v, h: hsv.h}); |
|
81 } |
|
82 |
|
83 function updateSaturationAndValue(e) { |
|
84 var pos; |
|
85 |
|
86 pos = getPos(svRootElm, e); |
|
87 hsv.s = pos.x * 100; |
|
88 hsv.v = (1 - pos.y) * 100; |
|
89 |
|
90 updateColor(hsv); |
|
91 self.fire('change'); |
|
92 } |
|
93 |
|
94 function updateHue(e) { |
|
95 var pos; |
|
96 |
|
97 pos = getPos(hueRootElm, e); |
|
98 hsv = color.toHsv(); |
|
99 hsv.h = (1 - pos.y) * 360; |
|
100 updateColor(hsv, true); |
|
101 self.fire('change'); |
|
102 } |
|
103 |
|
104 self._repaint = function() { |
|
105 hsv = color.toHsv(); |
|
106 updateColor(hsv); |
|
107 }; |
|
108 |
|
109 self._super(); |
|
110 |
|
111 self._svdraghelper = new DragHelper(self._id + '-sv', { |
|
112 start: updateSaturationAndValue, |
|
113 drag: updateSaturationAndValue |
|
114 }); |
|
115 |
|
116 self._hdraghelper = new DragHelper(self._id + '-h', { |
|
117 start: updateHue, |
|
118 drag: updateHue |
|
119 }); |
|
120 |
|
121 self._repaint(); |
|
122 }, |
|
123 |
|
124 rgb: function() { |
|
125 return this.color().toRgb(); |
|
126 }, |
|
127 |
|
128 value: function(value) { |
|
129 var self = this; |
|
130 |
|
131 if (arguments.length) { |
|
132 self.color().parse(value); |
|
133 |
|
134 if (self._rendered) { |
|
135 self._repaint(); |
|
136 } |
|
137 } else { |
|
138 return self.color().toHex(); |
|
139 } |
|
140 }, |
|
141 |
|
142 color: function() { |
|
143 if (!this._color) { |
|
144 this._color = new Color(); |
|
145 } |
|
146 |
|
147 return this._color; |
|
148 }, |
|
149 |
|
150 /** |
|
151 * Renders the control as a HTML string. |
|
152 * |
|
153 * @method renderHtml |
|
154 * @return {String} HTML representing the control. |
|
155 */ |
|
156 renderHtml: function() { |
|
157 var self = this, id = self._id, prefix = self.classPrefix, hueHtml; |
|
158 var stops = '#ff0000,#ff0080,#ff00ff,#8000ff,#0000ff,#0080ff,#00ffff,#00ff80,#00ff00,#80ff00,#ffff00,#ff8000,#ff0000'; |
|
159 |
|
160 function getOldIeFallbackHtml() { |
|
161 var i, l, html = '', gradientPrefix, stopsList; |
|
162 |
|
163 gradientPrefix = 'filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='; |
|
164 stopsList = stops.split(','); |
|
165 for (i = 0, l = stopsList.length - 1; i < l; i++) { |
|
166 html += ( |
|
167 '<div class="' + prefix + 'colorpicker-h-chunk" style="' + |
|
168 'height:' + (100 / l) + '%;' + |
|
169 gradientPrefix + stopsList[i] + ',endColorstr=' + stopsList[i + 1] + ');' + |
|
170 '-ms-' + gradientPrefix + stopsList[i] + ',endColorstr=' + stopsList[i + 1] + ')' + |
|
171 '"></div>' |
|
172 ); |
|
173 } |
|
174 |
|
175 return html; |
|
176 } |
|
177 |
|
178 var gradientCssText = ( |
|
179 'background: -ms-linear-gradient(top,' + stops + ');' + |
|
180 'background: linear-gradient(to bottom,' + stops + ');' |
|
181 ); |
|
182 |
|
183 hueHtml = ( |
|
184 '<div id="' + id + '-h" class="' + prefix + 'colorpicker-h" style="' + gradientCssText + '">' + |
|
185 getOldIeFallbackHtml() + |
|
186 '<div id="' + id + '-hp" class="' + prefix + 'colorpicker-h-marker"></div>' + |
|
187 '</div>' |
|
188 ); |
|
189 |
|
190 return ( |
|
191 '<div id="' + id + '" class="' + self.classes() + '">' + |
|
192 '<div id="' + id + '-sv" class="' + prefix + 'colorpicker-sv">' + |
|
193 '<div class="' + prefix + 'colorpicker-overlay1">' + |
|
194 '<div class="' + prefix + 'colorpicker-overlay2">' + |
|
195 '<div id="' + id + '-svp" class="' + prefix + 'colorpicker-selector1">' + |
|
196 '<div class="' + prefix + 'colorpicker-selector2"></div>' + |
|
197 '</div>' + |
|
198 '</div>' + |
|
199 '</div>' + |
|
200 '</div>' + |
|
201 hueHtml + |
|
202 '</div>' |
|
203 ); |
|
204 } |
|
205 }); |
|
206 }); |
|