5b77d309dfabbae12395832fce124efbac81c52db0c829b2ddcb410030deaae581e230b41aa8397c09f9c590d745f38e7d7f5d657bf622b18521d35563b7ed 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566
  1. /**
  2. * Colorpicker component class
  3. *
  4. * @param {Object|String} element
  5. * @param {Object} options
  6. * @constructor
  7. */
  8. var Colorpicker = function(element, options) {
  9. this.element = $(element).addClass('colorpicker-element');
  10. this.options = $.extend(true, {}, defaults, this.element.data(), options);
  11. this.component = this.options.component;
  12. this.component = (this.component !== false) ? this.element.find(this.component) : false;
  13. if (this.component && (this.component.length === 0)) {
  14. this.component = false;
  15. }
  16. this.container = (this.options.container === true) ? this.element : this.options.container;
  17. this.container = (this.container !== false) ? $(this.container) : false;
  18. // Is the element an input? Should we search inside for any input?
  19. this.input = this.element.is('input') ? this.element : (this.options.input ?
  20. this.element.find(this.options.input) : false);
  21. if (this.input && (this.input.length === 0)) {
  22. this.input = false;
  23. }
  24. // Set HSB color
  25. this.color = this.createColor(this.options.color !== false ? this.options.color : this.getValue());
  26. this.format = this.options.format !== false ? this.options.format : this.color.origFormat;
  27. if (this.options.color !== false) {
  28. this.updateInput(this.color);
  29. this.updateData(this.color);
  30. }
  31. this.disabled = false;
  32. // Setup picker
  33. var $picker = this.picker = $(this.options.template);
  34. if (this.options.customClass) {
  35. $picker.addClass(this.options.customClass);
  36. }
  37. if (this.options.inline) {
  38. $picker.addClass('colorpicker-inline colorpicker-visible');
  39. } else {
  40. $picker.addClass('colorpicker-hidden');
  41. }
  42. if (this.options.horizontal) {
  43. $picker.addClass('colorpicker-horizontal');
  44. }
  45. if (
  46. (['rgba', 'hsla', 'alias'].indexOf(this.format) !== -1) ||
  47. this.options.format === false ||
  48. this.getValue() === 'transparent'
  49. ) {
  50. $picker.addClass('colorpicker-with-alpha');
  51. }
  52. if (this.options.align === 'right') {
  53. $picker.addClass('colorpicker-right');
  54. }
  55. if (this.options.inline === true) {
  56. $picker.addClass('colorpicker-no-arrow');
  57. }
  58. if (this.options.colorSelectors) {
  59. var colorpicker = this,
  60. selectorsContainer = colorpicker.picker.find('.colorpicker-selectors');
  61. if (selectorsContainer.length > 0) {
  62. $.each(this.options.colorSelectors, function(name, color) {
  63. var $btn = $('<i />')
  64. .addClass('colorpicker-selectors-color')
  65. .css('background-color', color)
  66. .data('class', name).data('alias', name);
  67. $btn.on('mousedown.colorpicker touchstart.colorpicker', function(event) {
  68. event.preventDefault();
  69. colorpicker.setValue(
  70. colorpicker.format === 'alias' ? $(this).data('alias') : $(this).css('background-color')
  71. );
  72. });
  73. selectorsContainer.append($btn);
  74. });
  75. selectorsContainer.show().addClass('colorpicker-visible');
  76. }
  77. }
  78. // Prevent closing the colorpicker when clicking on itself
  79. $picker.on('mousedown.colorpicker touchstart.colorpicker', $.proxy(function(e) {
  80. if (e.target === e.currentTarget) {
  81. e.preventDefault();
  82. }
  83. }, this));
  84. // Bind click/tap events on the sliders
  85. $picker.find('.colorpicker-saturation, .colorpicker-hue, .colorpicker-alpha')
  86. .on('mousedown.colorpicker touchstart.colorpicker', $.proxy(this.mousedown, this));
  87. $picker.appendTo(this.container ? this.container : $('body'));
  88. // Bind other events
  89. if (this.input !== false) {
  90. this.input.on({
  91. 'keyup.colorpicker': $.proxy(this.keyup, this)
  92. });
  93. this.input.on({
  94. 'input.colorpicker': $.proxy(this.change, this)
  95. });
  96. if (this.component === false) {
  97. this.element.on({
  98. 'focus.colorpicker': $.proxy(this.show, this)
  99. });
  100. }
  101. if (this.options.inline === false) {
  102. this.element.on({
  103. 'focusout.colorpicker': $.proxy(this.hide, this)
  104. });
  105. }
  106. }
  107. if (this.component !== false) {
  108. this.component.on({
  109. 'click.colorpicker': $.proxy(this.show, this)
  110. });
  111. }
  112. if ((this.input === false) && (this.component === false)) {
  113. this.element.on({
  114. 'click.colorpicker': $.proxy(this.show, this)
  115. });
  116. }
  117. // for HTML5 input[type='color']
  118. if ((this.input !== false) && (this.component !== false) && (this.input.attr('type') === 'color')) {
  119. this.input.on({
  120. 'click.colorpicker': $.proxy(this.show, this),
  121. 'focus.colorpicker': $.proxy(this.show, this)
  122. });
  123. }
  124. this.update();
  125. $($.proxy(function() {
  126. this.element.trigger('create');
  127. }, this));
  128. };
  129. Colorpicker.Color = Color;
  130. Colorpicker.prototype = {
  131. constructor: Colorpicker,
  132. destroy: function() {
  133. this.picker.remove();
  134. this.element.removeData('colorpicker', 'color').off('.colorpicker');
  135. if (this.input !== false) {
  136. this.input.off('.colorpicker');
  137. }
  138. if (this.component !== false) {
  139. this.component.off('.colorpicker');
  140. }
  141. this.element.removeClass('colorpicker-element');
  142. this.element.trigger({
  143. type: 'destroy'
  144. });
  145. },
  146. reposition: function() {
  147. if (this.options.inline !== false || this.options.container) {
  148. return false;
  149. }
  150. var type = this.container && this.container[0] !== window.document.body ? 'position' : 'offset';
  151. var element = this.component || this.element;
  152. var offset = element[type]();
  153. if (this.options.align === 'right') {
  154. offset.left -= this.picker.outerWidth() - element.outerWidth();
  155. }
  156. this.picker.css({
  157. top: offset.top + element.outerHeight(),
  158. left: offset.left
  159. });
  160. },
  161. show: function(e) {
  162. if (this.isDisabled()) {
  163. // Don't show the widget if it's disabled (the input)
  164. return;
  165. }
  166. this.picker.addClass('colorpicker-visible').removeClass('colorpicker-hidden');
  167. this.reposition();
  168. $(window).on('resize.colorpicker', $.proxy(this.reposition, this));
  169. if (e && (!this.hasInput() || this.input.attr('type') === 'color')) {
  170. if (e.stopPropagation && e.preventDefault) {
  171. e.stopPropagation();
  172. e.preventDefault();
  173. }
  174. }
  175. if ((this.component || !this.input) && (this.options.inline === false)) {
  176. $(window.document).on({
  177. 'mousedown.colorpicker': $.proxy(this.hide, this)
  178. });
  179. }
  180. this.element.trigger({
  181. type: 'showPicker',
  182. color: this.color
  183. });
  184. },
  185. hide: function(e) {
  186. if ((typeof e !== 'undefined') && e.target) {
  187. // Prevent hide if triggered by an event and an element inside the colorpicker has been clicked/touched
  188. if (
  189. $(e.currentTarget).parents('.colorpicker').length > 0 ||
  190. $(e.target).parents('.colorpicker').length > 0
  191. ) {
  192. return false;
  193. }
  194. }
  195. this.picker.addClass('colorpicker-hidden').removeClass('colorpicker-visible');
  196. $(window).off('resize.colorpicker', this.reposition);
  197. $(window.document).off({
  198. 'mousedown.colorpicker': this.hide
  199. });
  200. this.update();
  201. this.element.trigger({
  202. type: 'hidePicker',
  203. color: this.color
  204. });
  205. },
  206. updateData: function(val) {
  207. val = val || this.color.toString(false, this.format);
  208. this.element.data('color', val);
  209. return val;
  210. },
  211. updateInput: function(val) {
  212. val = val || this.color.toString(false, this.format);
  213. if (this.input !== false) {
  214. this.input.prop('value', val);
  215. this.input.trigger('change');
  216. }
  217. return val;
  218. },
  219. updatePicker: function(val) {
  220. if (typeof val !== 'undefined') {
  221. this.color = this.createColor(val);
  222. }
  223. var sl = (this.options.horizontal === false) ? this.options.sliders : this.options.slidersHorz;
  224. var icns = this.picker.find('i');
  225. if (icns.length === 0) {
  226. return;
  227. }
  228. if (this.options.horizontal === false) {
  229. sl = this.options.sliders;
  230. icns.eq(1).css('top', sl.hue.maxTop * (1 - this.color.value.h)).end()
  231. .eq(2).css('top', sl.alpha.maxTop * (1 - this.color.value.a));
  232. } else {
  233. sl = this.options.slidersHorz;
  234. icns.eq(1).css('left', sl.hue.maxLeft * (1 - this.color.value.h)).end()
  235. .eq(2).css('left', sl.alpha.maxLeft * (1 - this.color.value.a));
  236. }
  237. icns.eq(0).css({
  238. 'top': sl.saturation.maxTop - this.color.value.b * sl.saturation.maxTop,
  239. 'left': this.color.value.s * sl.saturation.maxLeft
  240. });
  241. this.picker.find('.colorpicker-saturation')
  242. .css('backgroundColor', this.color.toHex(true, this.color.value.h, 1, 1, 1));
  243. this.picker.find('.colorpicker-alpha')
  244. .css('backgroundColor', this.color.toHex(true));
  245. this.picker.find('.colorpicker-color, .colorpicker-color div')
  246. .css('backgroundColor', this.color.toString(true, this.format));
  247. return val;
  248. },
  249. updateComponent: function(val) {
  250. var color;
  251. if (typeof val !== 'undefined') {
  252. color = this.createColor(val);
  253. } else {
  254. color = this.color;
  255. }
  256. if (this.component !== false) {
  257. var icn = this.component.find('i').eq(0);
  258. if (icn.length > 0) {
  259. icn.css({
  260. 'backgroundColor': color.toString(true, this.format)
  261. });
  262. } else {
  263. this.component.css({
  264. 'backgroundColor': color.toString(true, this.format)
  265. });
  266. }
  267. }
  268. return color.toString(false, this.format);
  269. },
  270. update: function(force) {
  271. var val;
  272. if ((this.getValue(false) !== false) || (force === true)) {
  273. // Update input/data only if the current value is not empty
  274. val = this.updateComponent();
  275. this.updateInput(val);
  276. this.updateData(val);
  277. this.updatePicker(); // only update picker if value is not empty
  278. }
  279. return val;
  280. },
  281. setValue: function(val) { // set color manually
  282. this.color = this.createColor(val);
  283. this.update(true);
  284. this.element.trigger({
  285. type: 'changeColor',
  286. color: this.color,
  287. value: val
  288. });
  289. },
  290. /**
  291. * Creates a new color using the instance options
  292. * @protected
  293. * @param {String} val
  294. * @returns {Color}
  295. */
  296. createColor: function(val) {
  297. return new Color(
  298. val ? val : null,
  299. this.options.colorSelectors,
  300. this.options.fallbackColor ? this.options.fallbackColor : this.color,
  301. this.options.fallbackFormat,
  302. this.options.hexNumberSignPrefix
  303. );
  304. },
  305. getValue: function(defaultValue) {
  306. defaultValue = (typeof defaultValue === 'undefined') ? this.options.fallbackColor : defaultValue;
  307. var val;
  308. if (this.hasInput()) {
  309. val = this.input.val();
  310. } else {
  311. val = this.element.data('color');
  312. }
  313. if ((val === undefined) || (val === '') || (val === null)) {
  314. // if not defined or empty, return default
  315. val = defaultValue;
  316. }
  317. return val;
  318. },
  319. hasInput: function() {
  320. return (this.input !== false);
  321. },
  322. isDisabled: function() {
  323. return this.disabled;
  324. },
  325. disable: function() {
  326. if (this.hasInput()) {
  327. this.input.prop('disabled', true);
  328. }
  329. this.disabled = true;
  330. this.element.trigger({
  331. type: 'disable',
  332. color: this.color,
  333. value: this.getValue()
  334. });
  335. return true;
  336. },
  337. enable: function() {
  338. if (this.hasInput()) {
  339. this.input.prop('disabled', false);
  340. }
  341. this.disabled = false;
  342. this.element.trigger({
  343. type: 'enable',
  344. color: this.color,
  345. value: this.getValue()
  346. });
  347. return true;
  348. },
  349. currentSlider: null,
  350. mousePointer: {
  351. left: 0,
  352. top: 0
  353. },
  354. mousedown: function(e) {
  355. if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) {
  356. e.pageX = e.originalEvent.touches[0].pageX;
  357. e.pageY = e.originalEvent.touches[0].pageY;
  358. }
  359. e.stopPropagation();
  360. e.preventDefault();
  361. var target = $(e.target);
  362. //detect the slider and set the limits and callbacks
  363. var zone = target.closest('div');
  364. var sl = this.options.horizontal ? this.options.slidersHorz : this.options.sliders;
  365. if (!zone.is('.colorpicker')) {
  366. if (zone.is('.colorpicker-saturation')) {
  367. this.currentSlider = $.extend({}, sl.saturation);
  368. } else if (zone.is('.colorpicker-hue')) {
  369. this.currentSlider = $.extend({}, sl.hue);
  370. } else if (zone.is('.colorpicker-alpha')) {
  371. this.currentSlider = $.extend({}, sl.alpha);
  372. } else {
  373. return false;
  374. }
  375. var offset = zone.offset();
  376. //reference to guide's style
  377. this.currentSlider.guide = zone.find('i')[0].style;
  378. this.currentSlider.left = e.pageX - offset.left;
  379. this.currentSlider.top = e.pageY - offset.top;
  380. this.mousePointer = {
  381. left: e.pageX,
  382. top: e.pageY
  383. };
  384. //trigger mousemove to move the guide to the current position
  385. $(window.document).on({
  386. 'mousemove.colorpicker': $.proxy(this.mousemove, this),
  387. 'touchmove.colorpicker': $.proxy(this.mousemove, this),
  388. 'mouseup.colorpicker': $.proxy(this.mouseup, this),
  389. 'touchend.colorpicker': $.proxy(this.mouseup, this)
  390. }).trigger('mousemove');
  391. }
  392. return false;
  393. },
  394. mousemove: function(e) {
  395. if (!e.pageX && !e.pageY && e.originalEvent && e.originalEvent.touches) {
  396. e.pageX = e.originalEvent.touches[0].pageX;
  397. e.pageY = e.originalEvent.touches[0].pageY;
  398. }
  399. e.stopPropagation();
  400. e.preventDefault();
  401. var left = Math.max(
  402. 0,
  403. Math.min(
  404. this.currentSlider.maxLeft,
  405. this.currentSlider.left + ((e.pageX || this.mousePointer.left) - this.mousePointer.left)
  406. )
  407. );
  408. var top = Math.max(
  409. 0,
  410. Math.min(
  411. this.currentSlider.maxTop,
  412. this.currentSlider.top + ((e.pageY || this.mousePointer.top) - this.mousePointer.top)
  413. )
  414. );
  415. this.currentSlider.guide.left = left + 'px';
  416. this.currentSlider.guide.top = top + 'px';
  417. if (this.currentSlider.callLeft) {
  418. this.color[this.currentSlider.callLeft].call(this.color, left / this.currentSlider.maxLeft);
  419. }
  420. if (this.currentSlider.callTop) {
  421. this.color[this.currentSlider.callTop].call(this.color, top / this.currentSlider.maxTop);
  422. }
  423. // Change format dynamically
  424. // Only occurs if user choose the dynamic format by
  425. // setting option format to false
  426. if (
  427. this.options.format === false &&
  428. (this.currentSlider.callTop === 'setAlpha' ||
  429. this.currentSlider.callLeft === 'setAlpha')
  430. ) {
  431. // Converting from hex / rgb to rgba
  432. if (this.color.value.a !== 1) {
  433. this.format = 'rgba';
  434. this.color.origFormat = 'rgba';
  435. }
  436. // Converting from rgba to hex
  437. else {
  438. this.format = 'hex';
  439. this.color.origFormat = 'hex';
  440. }
  441. }
  442. this.update(true);
  443. this.element.trigger({
  444. type: 'changeColor',
  445. color: this.color
  446. });
  447. return false;
  448. },
  449. mouseup: function(e) {
  450. e.stopPropagation();
  451. e.preventDefault();
  452. $(window.document).off({
  453. 'mousemove.colorpicker': this.mousemove,
  454. 'touchmove.colorpicker': this.mousemove,
  455. 'mouseup.colorpicker': this.mouseup,
  456. 'touchend.colorpicker': this.mouseup
  457. });
  458. return false;
  459. },
  460. change: function(e) {
  461. this.color = this.createColor(this.input.val());
  462. // Change format dynamically
  463. // Only occurs if user choose the dynamic format by
  464. // setting option format to false
  465. if (this.color.origFormat && this.options.format === false) {
  466. this.format = this.color.origFormat;
  467. }
  468. if (this.getValue(false) !== false) {
  469. this.updateData();
  470. this.updateComponent();
  471. this.updatePicker();
  472. }
  473. this.element.trigger({
  474. type: 'changeColor',
  475. color: this.color,
  476. value: this.input.val()
  477. });
  478. },
  479. keyup: function(e) {
  480. if ((e.keyCode === 38)) {
  481. if (this.color.value.a < 1) {
  482. this.color.value.a = Math.round((this.color.value.a + 0.01) * 100) / 100;
  483. }
  484. this.update(true);
  485. } else if ((e.keyCode === 40)) {
  486. if (this.color.value.a > 0) {
  487. this.color.value.a = Math.round((this.color.value.a - 0.01) * 100) / 100;
  488. }
  489. this.update(true);
  490. }
  491. this.element.trigger({
  492. type: 'changeColor',
  493. color: this.color,
  494. value: this.input.val()
  495. });
  496. }
  497. };
  498. $.colorpicker = Colorpicker;
  499. $.fn.colorpicker = function(option) {
  500. var apiArgs = Array.prototype.slice.call(arguments, 1),
  501. isSingleElement = (this.length === 1),
  502. returnValue = null;
  503. var $jq = this.each(function() {
  504. var $this = $(this),
  505. inst = $this.data('colorpicker'),
  506. options = ((typeof option === 'object') ? option : {});
  507. if (!inst) {
  508. inst = new Colorpicker(this, options);
  509. $this.data('colorpicker', inst);
  510. }
  511. if (typeof option === 'string') {
  512. if ($.isFunction(inst[option])) {
  513. returnValue = inst[option].apply(inst, apiArgs);
  514. } else { // its a property ?
  515. if (apiArgs.length) {
  516. // set property
  517. inst[option] = apiArgs[0];
  518. }
  519. returnValue = inst[option];
  520. }
  521. } else {
  522. returnValue = $this;
  523. }
  524. });
  525. return isSingleElement ? returnValue : $jq;
  526. };
  527. $.fn.colorpicker.constructor = Colorpicker;