1 |
85ad3d82
|
Assos Assos
|
|
2 |
|
|
|
3 |
|
|
|
4 |
|
|
|
5 |
|
|
|
6 |
|
|
|
7 |
|
|
|
8 |
|
|
|
9 |
|
|
(function ($) {
|
10 |
|
|
var ColorPicker = function () {
|
11 |
|
|
var
|
12 |
|
|
ids = {},
|
13 |
|
|
inAction,
|
14 |
|
|
charMin = 65,
|
15 |
|
|
visible,
|
16 |
|
|
tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_transparent"><a href="" title="Make transparent" alt="Make transparent">Transparent</a></div><div class="colorpicker_submit"></div><div class="colorpicker_previous_colors"></div></div>',
|
17 |
|
|
defaults = {
|
18 |
|
|
eventName: 'click',
|
19 |
|
|
onShow: function () {},
|
20 |
|
|
onBeforeShow: function(){},
|
21 |
|
|
onHide: function () {},
|
22 |
|
|
onChange: function () {},
|
23 |
|
|
onSubmit: function () {},
|
24 |
|
|
color: 'ff0000',
|
25 |
|
|
livePreview: true,
|
26 |
|
|
flat: false
|
27 |
|
|
},
|
28 |
|
|
fillRGBFields = function (hsb, cal) {
|
29 |
|
|
var rgb = HSBToRGB(hsb);
|
30 |
|
|
$(cal).data('colorpicker').fields
|
31 |
|
|
.eq(1).val(rgb.r).end()
|
32 |
|
|
.eq(2).val(rgb.g).end()
|
33 |
|
|
.eq(3).val(rgb.b).end();
|
34 |
|
|
},
|
35 |
|
|
fillHSBFields = function (hsb, cal) {
|
36 |
|
|
$(cal).data('colorpicker').fields
|
37 |
|
|
.eq(4).val(hsb.h).end()
|
38 |
|
|
.eq(5).val(hsb.s).end()
|
39 |
|
|
.eq(6).val(hsb.b).end();
|
40 |
|
|
},
|
41 |
|
|
fillHexFields = function (hsb, cal) {
|
42 |
|
|
$(cal).data('colorpicker').fields
|
43 |
|
|
.eq(0).val(HSBToHex(hsb)).end();
|
44 |
|
|
},
|
45 |
|
|
setSelector = function (hsb, cal) {
|
46 |
|
|
$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
|
47 |
|
|
$(cal).data('colorpicker').selectorIndic.css({
|
48 |
|
|
left: parseInt(150 * hsb.s/100, 10),
|
49 |
|
|
top: parseInt(150 * (100-hsb.b)/100, 10)
|
50 |
|
|
});
|
51 |
|
|
},
|
52 |
|
|
setHue = function (hsb, cal) {
|
53 |
|
|
$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
|
54 |
|
|
},
|
55 |
|
|
setCurrentColor = function (hsb, cal) {
|
56 |
|
|
$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
57 |
|
|
},
|
58 |
|
|
setNewColor = function (hsb, cal) {
|
59 |
|
|
$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
60 |
|
|
},
|
61 |
|
|
keyDown = function (ev) {
|
62 |
|
|
var pressedKey = ev.charCode || ev.keyCode || -1;
|
63 |
|
|
if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
|
64 |
|
|
return false;
|
65 |
|
|
}
|
66 |
|
|
var cal = $(this).parent().parent();
|
67 |
|
|
if (cal.data('colorpicker').livePreview === true) {
|
68 |
|
|
change.apply(this);
|
69 |
|
|
}
|
70 |
|
|
},
|
71 |
|
|
change = function (ev) {
|
72 |
|
|
var cal = $(this).parent().parent(), col;
|
73 |
|
|
if (this.parentNode.className.indexOf('_hex') > 0) {
|
74 |
|
|
cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
|
75 |
|
|
} else if (this.parentNode.className.indexOf('_hsb') > 0) {
|
76 |
|
|
cal.data('colorpicker').color = col = fixHSB({
|
77 |
|
|
h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
|
78 |
|
|
s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
|
79 |
|
|
b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
|
80 |
|
|
});
|
81 |
|
|
} else {
|
82 |
|
|
cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
|
83 |
|
|
r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
|
84 |
|
|
g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
|
85 |
|
|
b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
|
86 |
|
|
}));
|
87 |
|
|
}
|
88 |
|
|
if (ev) {
|
89 |
|
|
fillRGBFields(col, cal.get(0));
|
90 |
|
|
fillHexFields(col, cal.get(0));
|
91 |
|
|
fillHSBFields(col, cal.get(0));
|
92 |
|
|
}
|
93 |
|
|
setSelector(col, cal.get(0));
|
94 |
|
|
setHue(col, cal.get(0));
|
95 |
|
|
setNewColor(col, cal.get(0));
|
96 |
|
|
cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
|
97 |
|
|
},
|
98 |
|
|
blur = function (ev) {
|
99 |
|
|
var cal = $(this).parent().parent();
|
100 |
|
|
cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
101 |
|
|
},
|
102 |
|
|
focus = function () {
|
103 |
|
|
charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
|
104 |
|
|
$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
105 |
|
|
$(this).parent().addClass('colorpicker_focus');
|
106 |
|
|
},
|
107 |
|
|
downIncrement = function (ev) {
|
108 |
|
|
var field = $(this).parent().find('input').focus();
|
109 |
|
|
var current = {
|
110 |
|
|
el: $(this).parent().addClass('colorpicker_slider'),
|
111 |
|
|
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
|
112 |
|
|
y: ev.pageY,
|
113 |
|
|
field: field,
|
114 |
|
|
val: parseInt(field.val(), 10),
|
115 |
|
|
preview: $(this).parent().parent().data('colorpicker').livePreview
|
116 |
|
|
};
|
117 |
|
|
$(document).bind('mouseup', current, upIncrement);
|
118 |
|
|
$(document).bind('mousemove', current, moveIncrement);
|
119 |
|
|
},
|
120 |
|
|
moveIncrement = function (ev) {
|
121 |
|
|
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
|
122 |
|
|
if (ev.data.preview) {
|
123 |
|
|
change.apply(ev.data.field.get(0), [true]);
|
124 |
|
|
}
|
125 |
|
|
return false;
|
126 |
|
|
},
|
127 |
|
|
upIncrement = function (ev) {
|
128 |
|
|
change.apply(ev.data.field.get(0), [true]);
|
129 |
|
|
ev.data.el.removeClass('colorpicker_slider').find('input').focus();
|
130 |
|
|
$(document).unbind('mouseup', upIncrement);
|
131 |
|
|
$(document).unbind('mousemove', moveIncrement);
|
132 |
|
|
return false;
|
133 |
|
|
},
|
134 |
|
|
downHue = function (ev) {
|
135 |
|
|
var current = {
|
136 |
|
|
cal: $(this).parent(),
|
137 |
|
|
y: $(this).offset().top
|
138 |
|
|
};
|
139 |
|
|
current.preview = current.cal.data('colorpicker').livePreview;
|
140 |
|
|
$(document).bind('mouseup', current, upHue);
|
141 |
|
|
$(document).bind('mousemove', current, moveHue);
|
142 |
|
|
sweaver_add_colors(ev);
|
143 |
|
|
return false;
|
144 |
|
|
},
|
145 |
|
|
moveHue = function (ev) {
|
146 |
|
|
change.apply(
|
147 |
|
|
ev.data.cal.data('colorpicker')
|
148 |
|
|
.fields
|
149 |
|
|
.eq(4)
|
150 |
|
|
.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
|
151 |
|
|
.get(0),
|
152 |
|
|
[ev.data.preview]
|
153 |
|
|
);
|
154 |
|
|
return false;
|
155 |
|
|
},
|
156 |
|
|
upHue = function (ev) {
|
157 |
|
|
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
158 |
|
|
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
159 |
|
|
$(document).unbind('mouseup', upHue);
|
160 |
|
|
$(document).unbind('mousemove', moveHue);
|
161 |
|
|
sweaver_add_colors(ev);
|
162 |
|
|
return false;
|
163 |
|
|
},
|
164 |
|
|
downSelector = function (ev) {
|
165 |
|
|
var current = {
|
166 |
|
|
cal: $(this).parent(),
|
167 |
|
|
pos: $(this).offset()
|
168 |
|
|
};
|
169 |
|
|
current.preview = current.cal.data('colorpicker').livePreview;
|
170 |
|
|
$(document).bind('mouseup', current, upSelector);
|
171 |
|
|
$(document).bind('mousemove', current, moveSelector);
|
172 |
|
|
},
|
173 |
|
|
|
174 |
|
|
|
175 |
|
|
|
176 |
|
|
|
177 |
|
|
|
178 |
|
|
|
179 |
|
|
clickSelector = function (ev) {
|
180 |
|
|
var current = {
|
181 |
|
|
cal: $(this).parent(),
|
182 |
|
|
pos: $(this).offset()
|
183 |
|
|
};
|
184 |
|
|
current.preview = current.cal.data('colorpicker').livePreview;
|
185 |
|
|
ev.data = {};
|
186 |
|
|
ev.data.cal = current.cal;
|
187 |
|
|
ev.data.pos = current.pos;
|
188 |
|
|
moveSelector(ev);
|
189 |
|
|
},
|
190 |
|
|
|
191 |
|
|
|
192 |
|
|
makeTransparent = function(ev) {
|
193 |
|
|
var cal = $(this).parent().parent(), col;
|
194 |
|
|
cal.data('colorpicker').onChange.apply(cal, ['transparent', 'transparent', 'transparent']);
|
195 |
|
|
return false;
|
196 |
|
|
},
|
197 |
|
|
|
198 |
|
|
|
199 |
|
|
selectPreviousColor = function(ev) {
|
200 |
|
|
|
201 |
|
|
|
202 |
|
|
var new_color = {};
|
203 |
|
|
color = $(this).css('background-color').replace('rgb(', '').replace(')', '').split(',');
|
204 |
|
|
new_color.r = color[0];
|
205 |
|
|
new_color.g = color[1];
|
206 |
|
|
new_color.b = color[2];
|
207 |
|
|
new_color = fixRGB(new_color);
|
208 |
|
|
new_color = RGBToHSB(new_color);
|
209 |
|
|
new_color = fixHSB(new_color);
|
210 |
|
|
|
211 |
|
|
var cal = $(this).parent().parent(), col;
|
212 |
|
|
|
213 |
|
|
|
214 |
|
|
fillRGBFields(new_color, cal);
|
215 |
|
|
fillHexFields(new_color, cal);
|
216 |
|
|
fillHSBFields(new_color, cal);
|
217 |
|
|
setSelector(new_color, cal);
|
218 |
|
|
setHue(new_color, cal);
|
219 |
|
|
setNewColor(new_color, cal);
|
220 |
|
|
cal.data('colorpicker').onChange.apply(cal, [new_color, HSBToHex(new_color), HSBToRGB(new_color)]);
|
221 |
|
|
|
222 |
|
|
|
223 |
|
|
sweaver_add_colors(ev);
|
224 |
|
|
},
|
225 |
|
|
|
226 |
|
|
|
227 |
|
|
sweaver_add_colors = function (ev) {
|
228 |
|
|
colors = '';
|
229 |
|
|
var new_color = '';
|
230 |
|
|
previous_colors = new Array;
|
231 |
|
|
|
232 |
|
|
for (var key in Drupal.Sweaver.css) {
|
233 |
|
|
var target = Drupal.Sweaver.css[key];
|
234 |
|
|
for (var prop in target) {
|
235 |
|
|
if (Drupal.Sweaver.properties[prop]) {
|
236 |
|
|
var properties = Drupal.Sweaver.properties[prop]['property'].split(' ');
|
237 |
|
|
$.each(properties, function(i, property) {
|
238 |
|
|
|
239 |
|
|
if ((property == 'background-color' || property == 'color') && target[prop] != 'transparent' && $.inArray(target[prop], previous_colors) < 0) {
|
240 |
|
|
previous_colors.push(target[prop]);
|
241 |
|
|
colors += '<div class="colorpicker_previous_colors_color" style="background-color: #'+ target[prop] +';"></div>';
|
242 |
|
|
}
|
243 |
|
|
});
|
244 |
|
|
}
|
245 |
|
|
}
|
246 |
|
|
}
|
247 |
|
|
|
248 |
|
|
var cal = $(this).parent().parent(), col;
|
249 |
|
|
|
250 |
|
|
$('.colorpicker_previous_colors').html(colors);
|
251 |
|
|
|
252 |
|
|
$('.colorpicker_previous_colors_color').bind('click', selectPreviousColor);
|
253 |
|
|
},
|
254 |
|
|
|
255 |
|
|
|
256 |
|
|
|
257 |
|
|
|
258 |
|
|
|
259 |
|
|
moveSelector = function (ev) {
|
260 |
|
|
change.apply(
|
261 |
|
|
ev.data.cal.data('colorpicker')
|
262 |
|
|
.fields
|
263 |
|
|
.eq(6)
|
264 |
|
|
.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
|
265 |
|
|
.end()
|
266 |
|
|
.eq(5)
|
267 |
|
|
.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
|
268 |
|
|
.get(0),
|
269 |
|
|
[ev.data.preview]
|
270 |
|
|
);
|
271 |
|
|
return false;
|
272 |
|
|
},
|
273 |
|
|
upSelector = function (ev) {
|
274 |
|
|
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
275 |
|
|
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
276 |
|
|
$(document).unbind('mouseup', upSelector);
|
277 |
|
|
$(document).unbind('mousemove', moveSelector);
|
278 |
|
|
sweaver_add_colors(ev);
|
279 |
|
|
return false;
|
280 |
|
|
},
|
281 |
|
|
enterSubmit = function (ev) {
|
282 |
|
|
$(this).addClass('colorpicker_focus');
|
283 |
|
|
},
|
284 |
|
|
leaveSubmit = function (ev) {
|
285 |
|
|
$(this).removeClass('colorpicker_focus');
|
286 |
|
|
},
|
287 |
|
|
clickSubmit = function (ev) {
|
288 |
|
|
var cal = $(this).parent();
|
289 |
|
|
var col = cal.data('colorpicker').color;
|
290 |
|
|
cal.data('colorpicker').origColor = col;
|
291 |
|
|
setCurrentColor(col, cal.get(0));
|
292 |
|
|
cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
|
293 |
|
|
},
|
294 |
|
|
show = function (ev) {
|
295 |
|
|
var cal = $('#' + $(this).data('colorpickerId'));
|
296 |
|
|
cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
|
297 |
|
|
var pos = $(this).offset();
|
298 |
|
|
var viewPort = getViewport();
|
299 |
|
|
var top = pos.top + this.offsetHeight;
|
300 |
|
|
var left = pos.left;
|
301 |
|
|
if (top + 176 > viewPort.t + viewPort.h) {
|
302 |
|
|
top -= this.offsetHeight + 176;
|
303 |
|
|
}
|
304 |
|
|
if (left + 356 > viewPort.l + viewPort.w) {
|
305 |
|
|
left -= 356;
|
306 |
|
|
}
|
307 |
|
|
cal.css({left: left + 'px', top: top + 'px'});
|
308 |
|
|
if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
|
309 |
|
|
cal.show();
|
310 |
|
|
}
|
311 |
|
|
$(document).bind('mousedown', {cal: cal}, hide);
|
312 |
|
|
sweaver_add_colors(ev);
|
313 |
|
|
return false;
|
314 |
|
|
},
|
315 |
|
|
hide = function (ev) {
|
316 |
|
|
if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
|
317 |
|
|
if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
|
318 |
|
|
ev.data.cal.hide();
|
319 |
|
|
}
|
320 |
|
|
$(document).unbind('mousedown', hide);
|
321 |
|
|
}
|
322 |
|
|
},
|
323 |
|
|
isChildOf = function(parentEl, el, container) {
|
324 |
|
|
if (parentEl == el) {
|
325 |
|
|
return true;
|
326 |
|
|
}
|
327 |
|
|
if (parentEl.contains) {
|
328 |
|
|
return parentEl.contains(el);
|
329 |
|
|
}
|
330 |
|
|
if ( parentEl.compareDocumentPosition ) {
|
331 |
|
|
return !!(parentEl.compareDocumentPosition(el) & 16);
|
332 |
|
|
}
|
333 |
|
|
var prEl = el.parentNode;
|
334 |
|
|
while(prEl && prEl != container) {
|
335 |
|
|
if (prEl == parentEl)
|
336 |
|
|
return true;
|
337 |
|
|
prEl = prEl.parentNode;
|
338 |
|
|
}
|
339 |
|
|
return false;
|
340 |
|
|
},
|
341 |
|
|
getViewport = function () {
|
342 |
|
|
var m = document.compatMode == 'CSS1Compat';
|
343 |
|
|
return {
|
344 |
|
|
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
|
345 |
|
|
t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
|
346 |
|
|
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
|
347 |
|
|
h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
|
348 |
|
|
};
|
349 |
|
|
},
|
350 |
|
|
fixHSB = function (hsb) {
|
351 |
|
|
return {
|
352 |
|
|
h: Math.min(360, Math.max(0, hsb.h)),
|
353 |
|
|
s: Math.min(100, Math.max(0, hsb.s)),
|
354 |
|
|
b: Math.min(100, Math.max(0, hsb.b))
|
355 |
|
|
};
|
356 |
|
|
},
|
357 |
|
|
fixRGB = function (rgb) {
|
358 |
|
|
return {
|
359 |
|
|
r: Math.min(255, Math.max(0, rgb.r)),
|
360 |
|
|
g: Math.min(255, Math.max(0, rgb.g)),
|
361 |
|
|
b: Math.min(255, Math.max(0, rgb.b))
|
362 |
|
|
};
|
363 |
|
|
},
|
364 |
|
|
fixHex = function (hex) {
|
365 |
|
|
var len = 6 - hex.length;
|
366 |
|
|
if (len > 0) {
|
367 |
|
|
var o = [];
|
368 |
|
|
for (var i=0; i<len; i++) {
|
369 |
|
|
o.push('0');
|
370 |
|
|
}
|
371 |
|
|
o.push(hex);
|
372 |
|
|
hex = o.join('');
|
373 |
|
|
}
|
374 |
|
|
return hex;
|
375 |
|
|
},
|
376 |
|
|
HexToRGB = function (hex) {
|
377 |
|
|
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
378 |
|
|
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
379 |
|
|
},
|
380 |
|
|
HexToHSB = function (hex) {
|
381 |
|
|
return RGBToHSB(HexToRGB(hex));
|
382 |
|
|
},
|
383 |
|
|
RGBToHSB = function (rgb) {
|
384 |
|
|
var hsb = {
|
385 |
|
|
h: 0,
|
386 |
|
|
s: 0,
|
387 |
|
|
b: 0
|
388 |
|
|
};
|
389 |
|
|
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
390 |
|
|
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
391 |
|
|
var delta = max - min;
|
392 |
|
|
hsb.b = max;
|
393 |
|
|
if (max != 0) {
|
394 |
|
|
|
395 |
|
|
}
|
396 |
|
|
hsb.s = max != 0 ? 255 * delta / max : 0;
|
397 |
|
|
if (hsb.s != 0) {
|
398 |
|
|
if (rgb.r == max) {
|
399 |
|
|
hsb.h = (rgb.g - rgb.b) / delta;
|
400 |
|
|
} else if (rgb.g == max) {
|
401 |
|
|
hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
402 |
|
|
} else {
|
403 |
|
|
hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
404 |
|
|
}
|
405 |
|
|
} else {
|
406 |
|
|
hsb.h = -1;
|
407 |
|
|
}
|
408 |
|
|
hsb.h *= 60;
|
409 |
|
|
if (hsb.h < 0) {
|
410 |
|
|
hsb.h += 360;
|
411 |
|
|
}
|
412 |
|
|
hsb.s *= 100/255;
|
413 |
|
|
hsb.b *= 100/255;
|
414 |
|
|
|
415 |
|
|
|
416 |
|
|
hsb.h = Math.round(hsb.h);
|
417 |
|
|
hsb.s = Math.round(hsb.s);
|
418 |
|
|
hsb.b = Math.round(hsb.b);
|
419 |
|
|
|
420 |
|
|
return hsb;
|
421 |
|
|
},
|
422 |
|
|
HSBToRGB = function (hsb) {
|
423 |
|
|
var rgb = {};
|
424 |
|
|
var h = Math.round(hsb.h);
|
425 |
|
|
var s = Math.round(hsb.s*255/100);
|
426 |
|
|
var v = Math.round(hsb.b*255/100);
|
427 |
|
|
if(s == 0) {
|
428 |
|
|
rgb.r = rgb.g = rgb.b = v;
|
429 |
|
|
} else {
|
430 |
|
|
var t1 = v;
|
431 |
|
|
var t2 = (255-s)*v/255;
|
432 |
|
|
var t3 = (t1-t2)*(h%60)/60;
|
433 |
|
|
if(h==360) h = 0;
|
434 |
|
|
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
435 |
|
|
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
436 |
|
|
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
437 |
|
|
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
438 |
|
|
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
439 |
|
|
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
440 |
|
|
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
441 |
|
|
}
|
442 |
|
|
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
443 |
|
|
},
|
444 |
|
|
RGBToHex = function (rgb) {
|
445 |
|
|
var hex = [
|
446 |
|
|
rgb.r.toString(16),
|
447 |
|
|
rgb.g.toString(16),
|
448 |
|
|
rgb.b.toString(16)
|
449 |
|
|
];
|
450 |
|
|
$.each(hex, function (nr, val) {
|
451 |
|
|
if (val.length == 1) {
|
452 |
|
|
hex[nr] = '0' + val;
|
453 |
|
|
}
|
454 |
|
|
});
|
455 |
|
|
return hex.join('');
|
456 |
|
|
},
|
457 |
|
|
HSBToHex = function (hsb) {
|
458 |
|
|
return RGBToHex(HSBToRGB(hsb));
|
459 |
|
|
},
|
460 |
|
|
restoreOriginal = function () {
|
461 |
|
|
var cal = $(this).parent();
|
462 |
|
|
var col = cal.data('colorpicker').origColor;
|
463 |
|
|
cal.data('colorpicker').color = col;
|
464 |
|
|
fillRGBFields(col, cal.get(0));
|
465 |
|
|
fillHexFields(col, cal.get(0));
|
466 |
|
|
fillHSBFields(col, cal.get(0));
|
467 |
|
|
setSelector(col, cal.get(0));
|
468 |
|
|
setHue(col, cal.get(0));
|
469 |
|
|
setNewColor(col, cal.get(0));
|
470 |
|
|
};
|
471 |
|
|
return {
|
472 |
|
|
init: function (opt) {
|
473 |
|
|
opt = $.extend({}, defaults, opt||{});
|
474 |
|
|
if (typeof opt.color == 'string') {
|
475 |
|
|
opt.color = HexToHSB(opt.color);
|
476 |
|
|
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
|
477 |
|
|
opt.color = RGBToHSB(opt.color);
|
478 |
|
|
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
|
479 |
|
|
opt.color = fixHSB(opt.color);
|
480 |
|
|
} else {
|
481 |
|
|
return this;
|
482 |
|
|
}
|
483 |
|
|
return this.each(function () {
|
484 |
|
|
if (!$(this).data('colorpickerId')) {
|
485 |
|
|
var options = $.extend({}, opt);
|
486 |
|
|
options.origColor = opt.color;
|
487 |
|
|
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
|
488 |
|
|
$(this).data('colorpickerId', id);
|
489 |
|
|
var cal = $(tpl).attr('id', id);
|
490 |
|
|
if (options.flat) {
|
491 |
|
|
cal.appendTo(this).show();
|
492 |
|
|
} else {
|
493 |
|
|
cal.appendTo(document.body);
|
494 |
|
|
}
|
495 |
|
|
options.fields = cal
|
496 |
|
|
.find('input')
|
497 |
|
|
.bind('keyup', keyDown)
|
498 |
|
|
.bind('change', change)
|
499 |
|
|
.bind('blur', blur)
|
500 |
|
|
.bind('focus', focus);
|
501 |
|
|
cal
|
502 |
|
|
.find('span').bind('mousedown', downIncrement).end()
|
503 |
|
|
.find('>div.colorpicker_current_color').bind('click', restoreOriginal);
|
504 |
|
|
|
505 |
|
|
options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector).bind('click', clickSelector);
|
506 |
|
|
options.selectorIndic = options.selector.find('div div');
|
507 |
|
|
options.el = this;
|
508 |
|
|
options.hue = cal.find('div.colorpicker_hue div');
|
509 |
|
|
cal.find('div.colorpicker_hue').bind('mousedown', downHue);
|
510 |
|
|
options.newColor = cal.find('div.colorpicker_new_color');
|
511 |
|
|
options.currentColor = cal.find('div.colorpicker_current_color');
|
512 |
|
|
cal.data('colorpicker', options);
|
513 |
|
|
cal.find('div.colorpicker_submit')
|
514 |
|
|
.bind('mouseenter', enterSubmit)
|
515 |
|
|
.bind('mouseleave', leaveSubmit)
|
516 |
|
|
.bind('click', clickSubmit);
|
517 |
|
|
|
518 |
|
|
cal.find('div.colorpicker_transparent a').bind('click', makeTransparent);
|
519 |
|
|
fillRGBFields(options.color, cal.get(0));
|
520 |
|
|
fillHSBFields(options.color, cal.get(0));
|
521 |
|
|
fillHexFields(options.color, cal.get(0));
|
522 |
|
|
setHue(options.color, cal.get(0));
|
523 |
|
|
setSelector(options.color, cal.get(0));
|
524 |
|
|
setCurrentColor(options.color, cal.get(0));
|
525 |
|
|
setNewColor(options.color, cal.get(0));
|
526 |
|
|
if (options.flat) {
|
527 |
|
|
cal.css({
|
528 |
|
|
position: 'relative',
|
529 |
|
|
display: 'block'
|
530 |
|
|
});
|
531 |
|
|
} else {
|
532 |
|
|
$(this).bind(options.eventName, show);
|
533 |
|
|
}
|
534 |
|
|
}
|
535 |
|
|
});
|
536 |
|
|
},
|
537 |
|
|
showPicker: function() {
|
538 |
|
|
return this.each( function () {
|
539 |
|
|
if ($(this).data('colorpickerId')) {
|
540 |
|
|
show.apply(this);
|
541 |
|
|
}
|
542 |
|
|
});
|
543 |
|
|
},
|
544 |
|
|
hidePicker: function() {
|
545 |
|
|
return this.each( function () {
|
546 |
|
|
if ($(this).data('colorpickerId')) {
|
547 |
|
|
$('#' + $(this).data('colorpickerId')).hide();
|
548 |
|
|
}
|
549 |
|
|
});
|
550 |
|
|
},
|
551 |
|
|
setColor: function(col) {
|
552 |
|
|
if (typeof col == 'string') {
|
553 |
|
|
col = HexToHSB(col);
|
554 |
|
|
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
555 |
|
|
col = RGBToHSB(col);
|
556 |
|
|
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
557 |
|
|
col = fixHSB(col);
|
558 |
|
|
} else {
|
559 |
|
|
return this;
|
560 |
|
|
}
|
561 |
|
|
return this.each(function(){
|
562 |
|
|
if ($(this).data('colorpickerId')) {
|
563 |
|
|
var cal = $('#' + $(this).data('colorpickerId'));
|
564 |
|
|
cal.data('colorpicker').color = col;
|
565 |
|
|
cal.data('colorpicker').origColor = col;
|
566 |
|
|
fillRGBFields(col, cal.get(0));
|
567 |
|
|
fillHSBFields(col, cal.get(0));
|
568 |
|
|
fillHexFields(col, cal.get(0));
|
569 |
|
|
setHue(col, cal.get(0));
|
570 |
|
|
setSelector(col, cal.get(0));
|
571 |
|
|
setCurrentColor(col, cal.get(0));
|
572 |
|
|
setNewColor(col, cal.get(0));
|
573 |
|
|
}
|
574 |
|
|
});
|
575 |
|
|
}
|
576 |
|
|
};
|
577 |
|
|
}();
|
578 |
|
|
$.fn.extend({
|
579 |
|
|
ColorPicker: ColorPicker.init,
|
580 |
|
|
ColorPickerHide: ColorPicker.hidePicker,
|
581 |
|
|
ColorPickerShow: ColorPicker.showPicker,
|
582 |
|
|
ColorPickerSetColor: ColorPicker.setColor
|
583 |
|
|
});
|
584 |
|
|
})(jQuery) |