API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 30th, 2013
85
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.77 KB | None | 0 0
raw download clone embed print report
  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: 'FF6000',
  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)
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!