html5forms-rails 0.1.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (93) hide show
  1. data/CHANGELOG.md +5 -0
  2. data/Gemfile +11 -0
  3. data/README.md +208 -0
  4. data/Rakefile +49 -0
  5. data/VERSION +1 -0
  6. data/demos/html5-form-demo.html +79 -0
  7. data/html5forms-rails.gemspec +142 -0
  8. data/lib/html5forms.rb +6 -0
  9. data/vendor/assets/images/colorpicker/blank.gif +0 -0
  10. data/vendor/assets/images/colorpicker/colorpicker_background.png +0 -0
  11. data/vendor/assets/images/colorpicker/colorpicker_hex.png +0 -0
  12. data/vendor/assets/images/colorpicker/colorpicker_hsb_b.png +0 -0
  13. data/vendor/assets/images/colorpicker/colorpicker_hsb_h.png +0 -0
  14. data/vendor/assets/images/colorpicker/colorpicker_hsb_s.png +0 -0
  15. data/vendor/assets/images/colorpicker/colorpicker_indic.gif +0 -0
  16. data/vendor/assets/images/colorpicker/colorpicker_overlay.png +0 -0
  17. data/vendor/assets/images/colorpicker/colorpicker_rgb_b.png +0 -0
  18. data/vendor/assets/images/colorpicker/colorpicker_rgb_g.png +0 -0
  19. data/vendor/assets/images/colorpicker/colorpicker_rgb_r.png +0 -0
  20. data/vendor/assets/images/colorpicker/colorpicker_select.gif +0 -0
  21. data/vendor/assets/images/colorpicker/colorpicker_submit.png +0 -0
  22. data/vendor/assets/images/colorpicker/custom_background.png +0 -0
  23. data/vendor/assets/images/colorpicker/custom_hex.png +0 -0
  24. data/vendor/assets/images/colorpicker/custom_hsb_b.png +0 -0
  25. data/vendor/assets/images/colorpicker/custom_hsb_h.png +0 -0
  26. data/vendor/assets/images/colorpicker/custom_hsb_s.png +0 -0
  27. data/vendor/assets/images/colorpicker/custom_indic.gif +0 -0
  28. data/vendor/assets/images/colorpicker/custom_rgb_b.png +0 -0
  29. data/vendor/assets/images/colorpicker/custom_rgb_g.png +0 -0
  30. data/vendor/assets/images/colorpicker/custom_rgb_r.png +0 -0
  31. data/vendor/assets/images/colorpicker/custom_submit.png +0 -0
  32. data/vendor/assets/images/colorpicker/select.png +0 -0
  33. data/vendor/assets/images/colorpicker/select2.png +0 -0
  34. data/vendor/assets/images/colorpicker/slider.png +0 -0
  35. data/vendor/assets/images/h5f/form_validation.png +0 -0
  36. data/vendor/assets/images/html5form-shim/asterisk.png +0 -0
  37. data/vendor/assets/images/html5form-shim/down.png +0 -0
  38. data/vendor/assets/images/html5form-shim/fail.png +0 -0
  39. data/vendor/assets/images/html5form-shim/ok.png +0 -0
  40. data/vendor/assets/images/html5forms/jscolor/arrow.gif +0 -0
  41. data/vendor/assets/images/html5forms/jscolor/cross.gif +0 -0
  42. data/vendor/assets/images/html5forms/jscolor/hs.png +0 -0
  43. data/vendor/assets/images/html5forms/jscolor/hv.png +0 -0
  44. data/vendor/assets/images/html5forms/slider/slider-1.png +0 -0
  45. data/vendor/assets/images/html5forms/slider/slider-disabled-1.png +0 -0
  46. data/vendor/assets/images/html5forms/slider/slider-disabled.png +0 -0
  47. data/vendor/assets/images/html5forms/slider/slider.png +0 -0
  48. data/vendor/assets/javascripts/colorpicker.js +484 -0
  49. data/vendor/assets/javascripts/colorpicker.min.js +9 -0
  50. data/vendor/assets/javascripts/h5f.js +328 -0
  51. data/vendor/assets/javascripts/h5f.min.js +4 -0
  52. data/vendor/assets/javascripts/html5forms/EventHelpers.min.js +15 -0
  53. data/vendor/assets/javascripts/html5forms/autocomplete.min.js +1 -0
  54. data/vendor/assets/javascripts/html5forms/cssQuery-p.min.js +6 -0
  55. data/vendor/assets/javascripts/html5forms/dev/EventHelpers.js +486 -0
  56. data/vendor/assets/javascripts/html5forms/dev/autocomplete.js +387 -0
  57. data/vendor/assets/javascripts/html5forms/dev/cssQuery-p.js +6 -0
  58. data/vendor/assets/javascripts/html5forms/dev/html5.js +121 -0
  59. data/vendor/assets/javascripts/html5forms/dev/html5Forms.js +892 -0
  60. data/vendor/assets/javascripts/html5forms/dev/html5Widgets.js +1417 -0
  61. data/vendor/assets/javascripts/html5forms/dev/jscolor.js +840 -0
  62. data/vendor/assets/javascripts/html5forms/dev/slider.js +797 -0
  63. data/vendor/assets/javascripts/html5forms/dev/timer.js +137 -0
  64. data/vendor/assets/javascripts/html5forms/dev/visibleIf.js +1100 -0
  65. data/vendor/assets/javascripts/html5forms/html5.min.js +2 -0
  66. data/vendor/assets/javascripts/html5forms/html5Forms.min.js +1 -0
  67. data/vendor/assets/javascripts/html5forms/html5Widgets.min.js +20 -0
  68. data/vendor/assets/javascripts/html5forms/jscolor.min.js +10 -0
  69. data/vendor/assets/javascripts/html5forms/slider.min.js +25 -0
  70. data/vendor/assets/javascripts/html5forms/timer.min.js +1 -0
  71. data/vendor/assets/javascripts/html5forms/visibleIf.min.js +19 -0
  72. data/vendor/assets/javascripts/html5forms.fallback.js +115 -0
  73. data/vendor/assets/javascripts/html5forms.fallback.min.js +11 -0
  74. data/vendor/assets/javascripts/jquery.html5form-shim.js +402 -0
  75. data/vendor/assets/javascripts/jquery.html5form.min.js +4 -0
  76. data/vendor/assets/javascripts/jquery.placehold.min.js +7 -0
  77. data/vendor/assets/javascripts/ui.spinner.js +649 -0
  78. data/vendor/assets/javascripts/ui.spinner.min.js +7 -0
  79. data/vendor/assets/javascripts/webforms2/webforms2-msie.js +1 -0
  80. data/vendor/assets/javascripts/webforms2/webforms2-p.js +14 -0
  81. data/vendor/assets/javascripts/webforms2/webforms2.js +14 -0
  82. data/vendor/assets/javascripts/webforms2/webforms2_src.js +3195 -0
  83. data/vendor/assets/stylesheets/colorpicker.css +161 -0
  84. data/vendor/assets/stylesheets/h5f.css +86 -0
  85. data/vendor/assets/stylesheets/html5form-shim.css +109 -0
  86. data/vendor/assets/stylesheets/html5forms/number.css +35 -0
  87. data/vendor/assets/stylesheets/html5forms/slider.css +169 -0
  88. data/vendor/assets/stylesheets/html5forms/slider_ie.css +41 -0
  89. data/vendor/assets/stylesheets/html5forms/visibleIf.css +23 -0
  90. data/vendor/assets/stylesheets/html5forms.layout.css +116 -0
  91. data/vendor/assets/stylesheets/ui.spinner.css +3 -0
  92. data/vendor/assets/stylesheets/webforms2.css +42 -0
  93. metadata +221 -0
@@ -0,0 +1,484 @@
1
+ /**
2
+ *
3
+ * Color picker
4
+ * Author: Stefan Petre www.eyecon.ro
5
+ *
6
+ * Dual licensed under the MIT and GPL licenses
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_submit"></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
+ },
143
+ moveHue = function (ev) {
144
+ change.apply(
145
+ ev.data.cal.data('colorpicker')
146
+ .fields
147
+ .eq(4)
148
+ .val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
149
+ .get(0),
150
+ [ev.data.preview]
151
+ );
152
+ return false;
153
+ },
154
+ upHue = function (ev) {
155
+ fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
156
+ fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
157
+ $(document).unbind('mouseup', upHue);
158
+ $(document).unbind('mousemove', moveHue);
159
+ return false;
160
+ },
161
+ downSelector = function (ev) {
162
+ var current = {
163
+ cal: $(this).parent(),
164
+ pos: $(this).offset()
165
+ };
166
+ current.preview = current.cal.data('colorpicker').livePreview;
167
+ $(document).bind('mouseup', current, upSelector);
168
+ $(document).bind('mousemove', current, moveSelector);
169
+ },
170
+ moveSelector = function (ev) {
171
+ change.apply(
172
+ ev.data.cal.data('colorpicker')
173
+ .fields
174
+ .eq(6)
175
+ .val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
176
+ .end()
177
+ .eq(5)
178
+ .val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
179
+ .get(0),
180
+ [ev.data.preview]
181
+ );
182
+ return false;
183
+ },
184
+ upSelector = function (ev) {
185
+ fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
186
+ fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
187
+ $(document).unbind('mouseup', upSelector);
188
+ $(document).unbind('mousemove', moveSelector);
189
+ return false;
190
+ },
191
+ enterSubmit = function (ev) {
192
+ $(this).addClass('colorpicker_focus');
193
+ },
194
+ leaveSubmit = function (ev) {
195
+ $(this).removeClass('colorpicker_focus');
196
+ },
197
+ clickSubmit = function (ev) {
198
+ var cal = $(this).parent();
199
+ var col = cal.data('colorpicker').color;
200
+ cal.data('colorpicker').origColor = col;
201
+ setCurrentColor(col, cal.get(0));
202
+ cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
203
+ },
204
+ show = function (ev) {
205
+ var cal = $('#' + $(this).data('colorpickerId'));
206
+ cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
207
+ var pos = $(this).offset();
208
+ var viewPort = getViewport();
209
+ var top = pos.top + this.offsetHeight;
210
+ var left = pos.left;
211
+ if (top + 176 > viewPort.t + viewPort.h) {
212
+ top -= this.offsetHeight + 176;
213
+ }
214
+ if (left + 356 > viewPort.l + viewPort.w) {
215
+ left -= 356;
216
+ }
217
+ cal.css({left: left + 'px', top: top + 'px'});
218
+ if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
219
+ cal.show();
220
+ }
221
+ $(document).bind('mousedown', {cal: cal}, hide);
222
+ return false;
223
+ },
224
+ hide = function (ev) {
225
+ if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
226
+ if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
227
+ ev.data.cal.hide();
228
+ }
229
+ $(document).unbind('mousedown', hide);
230
+ }
231
+ },
232
+ isChildOf = function(parentEl, el, container) {
233
+ if (parentEl == el) {
234
+ return true;
235
+ }
236
+ if (parentEl.contains) {
237
+ return parentEl.contains(el);
238
+ }
239
+ if ( parentEl.compareDocumentPosition ) {
240
+ return !!(parentEl.compareDocumentPosition(el) & 16);
241
+ }
242
+ var prEl = el.parentNode;
243
+ while(prEl && prEl != container) {
244
+ if (prEl == parentEl)
245
+ return true;
246
+ prEl = prEl.parentNode;
247
+ }
248
+ return false;
249
+ },
250
+ getViewport = function () {
251
+ var m = document.compatMode == 'CSS1Compat';
252
+ return {
253
+ l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
254
+ t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
255
+ w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
256
+ h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
257
+ };
258
+ },
259
+ fixHSB = function (hsb) {
260
+ return {
261
+ h: Math.min(360, Math.max(0, hsb.h)),
262
+ s: Math.min(100, Math.max(0, hsb.s)),
263
+ b: Math.min(100, Math.max(0, hsb.b))
264
+ };
265
+ },
266
+ fixRGB = function (rgb) {
267
+ return {
268
+ r: Math.min(255, Math.max(0, rgb.r)),
269
+ g: Math.min(255, Math.max(0, rgb.g)),
270
+ b: Math.min(255, Math.max(0, rgb.b))
271
+ };
272
+ },
273
+ fixHex = function (hex) {
274
+ var len = 6 - hex.length;
275
+ if (len > 0) {
276
+ var o = [];
277
+ for (var i=0; i<len; i++) {
278
+ o.push('0');
279
+ }
280
+ o.push(hex);
281
+ hex = o.join('');
282
+ }
283
+ return hex;
284
+ },
285
+ HexToRGB = function (hex) {
286
+ var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
287
+ return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
288
+ },
289
+ HexToHSB = function (hex) {
290
+ return RGBToHSB(HexToRGB(hex));
291
+ },
292
+ RGBToHSB = function (rgb) {
293
+ var hsb = {
294
+ h: 0,
295
+ s: 0,
296
+ b: 0
297
+ };
298
+ var min = Math.min(rgb.r, rgb.g, rgb.b);
299
+ var max = Math.max(rgb.r, rgb.g, rgb.b);
300
+ var delta = max - min;
301
+ hsb.b = max;
302
+ if (max != 0) {
303
+
304
+ }
305
+ hsb.s = max != 0 ? 255 * delta / max : 0;
306
+ if (hsb.s != 0) {
307
+ if (rgb.r == max) {
308
+ hsb.h = (rgb.g - rgb.b) / delta;
309
+ } else if (rgb.g == max) {
310
+ hsb.h = 2 + (rgb.b - rgb.r) / delta;
311
+ } else {
312
+ hsb.h = 4 + (rgb.r - rgb.g) / delta;
313
+ }
314
+ } else {
315
+ hsb.h = -1;
316
+ }
317
+ hsb.h *= 60;
318
+ if (hsb.h < 0) {
319
+ hsb.h += 360;
320
+ }
321
+ hsb.s *= 100/255;
322
+ hsb.b *= 100/255;
323
+ return hsb;
324
+ },
325
+ HSBToRGB = function (hsb) {
326
+ var rgb = {};
327
+ var h = Math.round(hsb.h);
328
+ var s = Math.round(hsb.s*255/100);
329
+ var v = Math.round(hsb.b*255/100);
330
+ if(s == 0) {
331
+ rgb.r = rgb.g = rgb.b = v;
332
+ } else {
333
+ var t1 = v;
334
+ var t2 = (255-s)*v/255;
335
+ var t3 = (t1-t2)*(h%60)/60;
336
+ if(h==360) h = 0;
337
+ if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
338
+ else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
339
+ else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
340
+ else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
341
+ else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
342
+ else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
343
+ else {rgb.r=0; rgb.g=0; rgb.b=0}
344
+ }
345
+ return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
346
+ },
347
+ RGBToHex = function (rgb) {
348
+ var hex = [
349
+ rgb.r.toString(16),
350
+ rgb.g.toString(16),
351
+ rgb.b.toString(16)
352
+ ];
353
+ $.each(hex, function (nr, val) {
354
+ if (val.length == 1) {
355
+ hex[nr] = '0' + val;
356
+ }
357
+ });
358
+ return hex.join('');
359
+ },
360
+ HSBToHex = function (hsb) {
361
+ return RGBToHex(HSBToRGB(hsb));
362
+ },
363
+ restoreOriginal = function () {
364
+ var cal = $(this).parent();
365
+ var col = cal.data('colorpicker').origColor;
366
+ cal.data('colorpicker').color = col;
367
+ fillRGBFields(col, cal.get(0));
368
+ fillHexFields(col, cal.get(0));
369
+ fillHSBFields(col, cal.get(0));
370
+ setSelector(col, cal.get(0));
371
+ setHue(col, cal.get(0));
372
+ setNewColor(col, cal.get(0));
373
+ };
374
+ return {
375
+ init: function (opt) {
376
+ opt = $.extend({}, defaults, opt||{});
377
+ if (typeof opt.color == 'string') {
378
+ opt.color = HexToHSB(opt.color);
379
+ } else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
380
+ opt.color = RGBToHSB(opt.color);
381
+ } else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
382
+ opt.color = fixHSB(opt.color);
383
+ } else {
384
+ return this;
385
+ }
386
+ return this.each(function () {
387
+ if (!$(this).data('colorpickerId')) {
388
+ var options = $.extend({}, opt);
389
+ options.origColor = opt.color;
390
+ var id = 'collorpicker_' + parseInt(Math.random() * 1000);
391
+ $(this).data('colorpickerId', id);
392
+ var cal = $(tpl).attr('id', id);
393
+ if (options.flat) {
394
+ cal.appendTo(this).show();
395
+ } else {
396
+ cal.appendTo(document.body);
397
+ }
398
+ options.fields = cal
399
+ .find('input')
400
+ .bind('keyup', keyDown)
401
+ .bind('change', change)
402
+ .bind('blur', blur)
403
+ .bind('focus', focus);
404
+ cal
405
+ .find('span').bind('mousedown', downIncrement).end()
406
+ .find('>div.colorpicker_current_color').bind('click', restoreOriginal);
407
+ options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
408
+ options.selectorIndic = options.selector.find('div div');
409
+ options.el = this;
410
+ options.hue = cal.find('div.colorpicker_hue div');
411
+ cal.find('div.colorpicker_hue').bind('mousedown', downHue);
412
+ options.newColor = cal.find('div.colorpicker_new_color');
413
+ options.currentColor = cal.find('div.colorpicker_current_color');
414
+ cal.data('colorpicker', options);
415
+ cal.find('div.colorpicker_submit')
416
+ .bind('mouseenter', enterSubmit)
417
+ .bind('mouseleave', leaveSubmit)
418
+ .bind('click', clickSubmit);
419
+ fillRGBFields(options.color, cal.get(0));
420
+ fillHSBFields(options.color, cal.get(0));
421
+ fillHexFields(options.color, cal.get(0));
422
+ setHue(options.color, cal.get(0));
423
+ setSelector(options.color, cal.get(0));
424
+ setCurrentColor(options.color, cal.get(0));
425
+ setNewColor(options.color, cal.get(0));
426
+ if (options.flat) {
427
+ cal.css({
428
+ position: 'relative',
429
+ display: 'block'
430
+ });
431
+ } else {
432
+ $(this).bind(options.eventName, show);
433
+ }
434
+ }
435
+ });
436
+ },
437
+ showPicker: function() {
438
+ return this.each( function () {
439
+ if ($(this).data('colorpickerId')) {
440
+ show.apply(this);
441
+ }
442
+ });
443
+ },
444
+ hidePicker: function() {
445
+ return this.each( function () {
446
+ if ($(this).data('colorpickerId')) {
447
+ $('#' + $(this).data('colorpickerId')).hide();
448
+ }
449
+ });
450
+ },
451
+ setColor: function(col) {
452
+ if (typeof col == 'string') {
453
+ col = HexToHSB(col);
454
+ } else if (col.r != undefined && col.g != undefined && col.b != undefined) {
455
+ col = RGBToHSB(col);
456
+ } else if (col.h != undefined && col.s != undefined && col.b != undefined) {
457
+ col = fixHSB(col);
458
+ } else {
459
+ return this;
460
+ }
461
+ return this.each(function(){
462
+ if ($(this).data('colorpickerId')) {
463
+ var cal = $('#' + $(this).data('colorpickerId'));
464
+ cal.data('colorpicker').color = col;
465
+ cal.data('colorpicker').origColor = col;
466
+ fillRGBFields(col, cal.get(0));
467
+ fillHSBFields(col, cal.get(0));
468
+ fillHexFields(col, cal.get(0));
469
+ setHue(col, cal.get(0));
470
+ setSelector(col, cal.get(0));
471
+ setCurrentColor(col, cal.get(0));
472
+ setNewColor(col, cal.get(0));
473
+ }
474
+ });
475
+ }
476
+ };
477
+ }();
478
+ $.fn.extend({
479
+ ColorPicker: ColorPicker.init,
480
+ ColorPickerHide: ColorPicker.hidePicker,
481
+ ColorPickerShow: ColorPicker.showPicker,
482
+ ColorPickerSetColor: ColorPicker.setColor
483
+ });
484
+ })(jQuery)
@@ -0,0 +1,9 @@
1
+ /**
2
+ *
3
+ * Color picker
4
+ * Author: Stefan Petre www.eyecon.ro
5
+ *
6
+ * Dual licensed under the MIT and GPL licenses
7
+ *
8
+ */
9
+ (function($){var ColorPicker=function(){var ids={},inAction,charMin=65,visible,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_submit"></div></div>',defaults={eventName:'click',onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:'ff0000',livePreview:true,flat:false},fillRGBFields=function(hsb,cal){var rgb=HSBToRGB(hsb);$(cal).data('colorpicker').fields.eq(1).val(rgb.r).end().eq(2).val(rgb.g).end().eq(3).val(rgb.b).end()},fillHSBFields=function(hsb,cal){$(cal).data('colorpicker').fields.eq(4).val(hsb.h).end().eq(5).val(hsb.s).end().eq(6).val(hsb.b).end()},fillHexFields=function(hsb,cal){$(cal).data('colorpicker').fields.eq(0).val(HSBToHex(hsb)).end()},setSelector=function(hsb,cal){$(cal).data('colorpicker').selector.css('backgroundColor','#'+HSBToHex({h:hsb.h,s:100,b:100}));$(cal).data('colorpicker').selectorIndic.css({left:parseInt(150*hsb.s/100,10),top:parseInt(150*(100-hsb.b)/100,10)})},setHue=function(hsb,cal){$(cal).data('colorpicker').hue.css('top',parseInt(150-150*hsb.h/360,10))},setCurrentColor=function(hsb,cal){$(cal).data('colorpicker').currentColor.css('backgroundColor','#'+HSBToHex(hsb))},setNewColor=function(hsb,cal){$(cal).data('colorpicker').newColor.css('backgroundColor','#'+HSBToHex(hsb))},keyDown=function(ev){var pressedKey=ev.charCode||ev.keyCode||-1;if((pressedKey>charMin&&pressedKey<=90)||pressedKey==32){return false}var cal=$(this).parent().parent();if(cal.data('colorpicker').livePreview===true){change.apply(this)}},change=function(ev){var cal=$(this).parent().parent(),col;if(this.parentNode.className.indexOf('_hex')>0){cal.data('colorpicker').color=col=HexToHSB(fixHex(this.value))}else if(this.parentNode.className.indexOf('_hsb')>0){cal.data('colorpicker').color=col=fixHSB({h:parseInt(cal.data('colorpicker').fields.eq(4).val(),10),s:parseInt(cal.data('colorpicker').fields.eq(5).val(),10),b:parseInt(cal.data('colorpicker').fields.eq(6).val(),10)})}else{cal.data('colorpicker').color=col=RGBToHSB(fixRGB({r:parseInt(cal.data('colorpicker').fields.eq(1).val(),10),g:parseInt(cal.data('colorpicker').fields.eq(2).val(),10),b:parseInt(cal.data('colorpicker').fields.eq(3).val(),10)}))}if(ev){fillRGBFields(col,cal.get(0));fillHexFields(col,cal.get(0));fillHSBFields(col,cal.get(0))}setSelector(col,cal.get(0));setHue(col,cal.get(0));setNewColor(col,cal.get(0));cal.data('colorpicker').onChange.apply(cal,[col,HSBToHex(col),HSBToRGB(col)])},blur=function(ev){var cal=$(this).parent().parent();cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus')},focus=function(){charMin=this.parentNode.className.indexOf('_hex')>0?70:65;$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');$(this).parent().addClass('colorpicker_focus')},downIncrement=function(ev){var field=$(this).parent().find('input').focus();var current={el:$(this).parent().addClass('colorpicker_slider'),max:this.parentNode.className.indexOf('_hsb_h')>0?360:(this.parentNode.className.indexOf('_hsb')>0?100:255),y:ev.pageY,field:field,val:parseInt(field.val(),10),preview:$(this).parent().parent().data('colorpicker').livePreview};$(document).bind('mouseup',current,upIncrement);$(document).bind('mousemove',current,moveIncrement)},moveIncrement=function(ev){ev.data.field.val(Math.max(0,Math.min(ev.data.max,parseInt(ev.data.val+ev.pageY-ev.data.y,10))));if(ev.data.preview){change.apply(ev.data.field.get(0),[true])}return false},upIncrement=function(ev){change.apply(ev.data.field.get(0),[true]);ev.data.el.removeClass('colorpicker_slider').find('input').focus();$(document).unbind('mouseup',upIncrement);$(document).unbind('mousemove',moveIncrement);return false},downHue=function(ev){var current={cal:$(this).parent(),y:$(this).offset().top};current.preview=current.cal.data('colorpicker').livePreview;$(document).bind('mouseup',current,upHue);$(document).bind('mousemove',current,moveHue)},moveHue=function(ev){change.apply(ev.data.cal.data('colorpicker').fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,(ev.pageY-ev.data.y))))/150,10)).get(0),[ev.data.preview]);return false},upHue=function(ev){fillRGBFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));fillHexFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));$(document).unbind('mouseup',upHue);$(document).unbind('mousemove',moveHue);return false},downSelector=function(ev){var current={cal:$(this).parent(),pos:$(this).offset()};current.preview=current.cal.data('colorpicker').livePreview;$(document).bind('mouseup',current,upSelector);$(document).bind('mousemove',current,moveSelector)},moveSelector=function(ev){change.apply(ev.data.cal.data('colorpicker').fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,(ev.pageY-ev.data.pos.top))))/150,10)).end().eq(5).val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX-ev.data.pos.left))))/150,10)).get(0),[ev.data.preview]);return false},upSelector=function(ev){fillRGBFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));fillHexFields(ev.data.cal.data('colorpicker').color,ev.data.cal.get(0));$(document).unbind('mouseup',upSelector);$(document).unbind('mousemove',moveSelector);return false},enterSubmit=function(ev){$(this).addClass('colorpicker_focus')},leaveSubmit=function(ev){$(this).removeClass('colorpicker_focus')},clickSubmit=function(ev){var cal=$(this).parent();var col=cal.data('colorpicker').color;cal.data('colorpicker').origColor=col;setCurrentColor(col,cal.get(0));cal.data('colorpicker').onSubmit(col,HSBToHex(col),HSBToRGB(col),cal.data('colorpicker').el)},show=function(ev){var cal=$('#'+$(this).data('colorpickerId'));cal.data('colorpicker').onBeforeShow.apply(this,[cal.get(0)]);var pos=$(this).offset();var viewPort=getViewport();var top=pos.top+this.offsetHeight;var left=pos.left;if(top+176>viewPort.t+viewPort.h){top-=this.offsetHeight+176}if(left+356>viewPort.l+viewPort.w){left-=356}cal.css({left:left+'px',top:top+'px'});if(cal.data('colorpicker').onShow.apply(this,[cal.get(0)])!=false){cal.show()}$(document).bind('mousedown',{cal:cal},hide);return false},hide=function(ev){if(!isChildOf(ev.data.cal.get(0),ev.target,ev.data.cal.get(0))){if(ev.data.cal.data('colorpicker').onHide.apply(this,[ev.data.cal.get(0)])!=false){ev.data.cal.hide()}$(document).unbind('mousedown',hide)}},isChildOf=function(parentEl,el,container){if(parentEl==el){return true}if(parentEl.contains){return parentEl.contains(el)}if(parentEl.compareDocumentPosition){return!!(parentEl.compareDocumentPosition(el)&16)}var prEl=el.parentNode;while(prEl&&prEl!=container){if(prEl==parentEl)return true;prEl=prEl.parentNode}return false},getViewport=function(){var m=document.compatMode=='CSS1Compat';return{l:window.pageXOffset||(m?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(m?document.documentElement.scrollTop:document.body.scrollTop),w:window.innerWidth||(m?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||(m?document.documentElement.clientHeight:document.body.clientHeight)}},fixHSB=function(hsb){return{h:Math.min(360,Math.max(0,hsb.h)),s:Math.min(100,Math.max(0,hsb.s)),b:Math.min(100,Math.max(0,hsb.b))}},fixRGB=function(rgb){return{r:Math.min(255,Math.max(0,rgb.r)),g:Math.min(255,Math.max(0,rgb.g)),b:Math.min(255,Math.max(0,rgb.b))}},fixHex=function(hex){var len=6-hex.length;if(len>0){var o=[];for(var i=0;i<len;i++){o.push('0')}o.push(hex);hex=o.join('')}return hex},HexToRGB=function(hex){var hex=parseInt(((hex.indexOf('#')>-1)?hex.substring(1):hex),16);return{r:hex>>16,g:(hex&0x00FF00)>>8,b:(hex&0x0000FF)}},HexToHSB=function(hex){return RGBToHSB(HexToRGB(hex))},RGBToHSB=function(rgb){var hsb={h:0,s:0,b:0};var min=Math.min(rgb.r,rgb.g,rgb.b);var max=Math.max(rgb.r,rgb.g,rgb.b);var delta=max-min;hsb.b=max;if(max!=0){}hsb.s=max!=0?255*delta/max:0;if(hsb.s!=0){if(rgb.r==max){hsb.h=(rgb.g-rgb.b)/delta}else if(rgb.g==max){hsb.h=2+(rgb.b-rgb.r)/delta}else{hsb.h=4+(rgb.r-rgb.g)/delta}}else{hsb.h=-1}hsb.h*=60;if(hsb.h<0){hsb.h+=360}hsb.s*=100/255;hsb.b*=100/255;return hsb},HSBToRGB=function(hsb){var rgb={};var h=Math.round(hsb.h);var s=Math.round(hsb.s*255/100);var v=Math.round(hsb.b*255/100);if(s==0){rgb.r=rgb.g=rgb.b=v}else{var t1=v;var t2=(255-s)*v/255;var t3=(t1-t2)*(h%60)/60;if(h==360)h=0;if(h<60){rgb.r=t1;rgb.b=t2;rgb.g=t2+t3}else if(h<120){rgb.g=t1;rgb.b=t2;rgb.r=t1-t3}else if(h<180){rgb.g=t1;rgb.r=t2;rgb.b=t2+t3}else if(h<240){rgb.b=t1;rgb.r=t2;rgb.g=t1-t3}else if(h<300){rgb.b=t1;rgb.g=t2;rgb.r=t2+t3}else if(h<360){rgb.r=t1;rgb.g=t2;rgb.b=t1-t3}else{rgb.r=0;rgb.g=0;rgb.b=0}}return{r:Math.round(rgb.r),g:Math.round(rgb.g),b:Math.round(rgb.b)}},RGBToHex=function(rgb){var hex=[rgb.r.toString(16),rgb.g.toString(16),rgb.b.toString(16)];$.each(hex,function(nr,val){if(val.length==1){hex[nr]='0'+val}});return hex.join('')},HSBToHex=function(hsb){return RGBToHex(HSBToRGB(hsb))},restoreOriginal=function(){var cal=$(this).parent();var col=cal.data('colorpicker').origColor;cal.data('colorpicker').color=col;fillRGBFields(col,cal.get(0));fillHexFields(col,cal.get(0));fillHSBFields(col,cal.get(0));setSelector(col,cal.get(0));setHue(col,cal.get(0));setNewColor(col,cal.get(0))};return{init:function(opt){opt=$.extend({},defaults,opt||{});if(typeof opt.color=='string'){opt.color=HexToHSB(opt.color)}else if(opt.color.r!=undefined&&opt.color.g!=undefined&&opt.color.b!=undefined){opt.color=RGBToHSB(opt.color)}else if(opt.color.h!=undefined&&opt.color.s!=undefined&&opt.color.b!=undefined){opt.color=fixHSB(opt.color)}else{return this}return this.each(function(){if(!$(this).data('colorpickerId')){var options=$.extend({},opt);options.origColor=opt.color;var id='collorpicker_'+parseInt(Math.random()*1000);$(this).data('colorpickerId',id);var cal=$(tpl).attr('id',id);if(options.flat){cal.appendTo(this).show()}else{cal.appendTo(document.body)}options.fields=cal.find('input').bind('keyup',keyDown).bind('change',change).bind('blur',blur).bind('focus',focus);cal.find('span').bind('mousedown',downIncrement).end().find('>div.colorpicker_current_color').bind('click',restoreOriginal);options.selector=cal.find('div.colorpicker_color').bind('mousedown',downSelector);options.selectorIndic=options.selector.find('div div');options.el=this;options.hue=cal.find('div.colorpicker_hue div');cal.find('div.colorpicker_hue').bind('mousedown',downHue);options.newColor=cal.find('div.colorpicker_new_color');options.currentColor=cal.find('div.colorpicker_current_color');cal.data('colorpicker',options);cal.find('div.colorpicker_submit').bind('mouseenter',enterSubmit).bind('mouseleave',leaveSubmit).bind('click',clickSubmit);fillRGBFields(options.color,cal.get(0));fillHSBFields(options.color,cal.get(0));fillHexFields(options.color,cal.get(0));setHue(options.color,cal.get(0));setSelector(options.color,cal.get(0));setCurrentColor(options.color,cal.get(0));setNewColor(options.color,cal.get(0));if(options.flat){cal.css({position:'relative',display:'block'})}else{$(this).bind(options.eventName,show)}}})},showPicker:function(){return this.each(function(){if($(this).data('colorpickerId')){show.apply(this)}})},hidePicker:function(){return this.each(function(){if($(this).data('colorpickerId')){$('#'+$(this).data('colorpickerId')).hide()}})},setColor:function(col){if(typeof col=='string'){col=HexToHSB(col)}else if(col.r!=undefined&&col.g!=undefined&&col.b!=undefined){col=RGBToHSB(col)}else if(col.h!=undefined&&col.s!=undefined&&col.b!=undefined){col=fixHSB(col)}else{return this}return this.each(function(){if($(this).data('colorpickerId')){var cal=$('#'+$(this).data('colorpickerId'));cal.data('colorpicker').color=col;cal.data('colorpicker').origColor=col;fillRGBFields(col,cal.get(0));fillHSBFields(col,cal.get(0));fillHexFields(col,cal.get(0));setHue(col,cal.get(0));setSelector(col,cal.get(0));setCurrentColor(col,cal.get(0));setNewColor(col,cal.get(0))}})}}}();$.fn.extend({ColorPicker:ColorPicker.init,ColorPickerHide:ColorPicker.hidePicker,ColorPickerShow:ColorPicker.showPicker,ColorPickerSetColor:ColorPicker.setColor})})(jQuery)