jscolor

jscolor Color Picker

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/19017/121465/jscolor.js

  1. /**
  2. * jscolor - JavaScript Color Picker
  3. *
  4. * @link http://jscolor.com
  5. * @license For open source use: GPLv3
  6. * For commercial use: JSColor Commercial License
  7. * @author Jan Odvarko
  8. * @version 2.0.4
  9. *
  10. * See usage examples at http://jscolor.com/examples/
  11. */
  12.  
  13.  
  14.  
  15.  
  16. if (!window.jscolor) { window.jscolor = (function () {
  17.  
  18.  
  19. var jsc = {
  20.  
  21.  
  22. register : function () {
  23. jsc.attachDOMReadyEvent(jsc.init);
  24. jsc.attachEvent(document, 'mousedown', jsc.onDocumentMouseDown);
  25. jsc.attachEvent(document, 'touchstart', jsc.onDocumentTouchStart);
  26. jsc.attachEvent(window, 'resize', jsc.onWindowResize);
  27. },
  28.  
  29.  
  30. init : function () {
  31. if (jsc.jscolor.lookupClass) {
  32. jsc.jscolor.installByClassName(jsc.jscolor.lookupClass);
  33. }
  34. },
  35.  
  36.  
  37. tryInstallOnElements : function (elms, className) {
  38. var matchClass = new RegExp('(^|\\s)(' + className + ')(\\s*(\\{[^}]*\\})|\\s|$)', 'i');
  39.  
  40. for (var i = 0; i < elms.length; i += 1) {
  41. if (elms[i].type !== undefined && elms[i].type.toLowerCase() == 'color') {
  42. if (jsc.isColorAttrSupported) {
  43. // skip inputs of type 'color' if supported by the browser
  44. continue;
  45. }
  46. }
  47. var m;
  48. if (!elms[i].jscolor && elms[i].className && (m = elms[i].className.match(matchClass))) {
  49. var targetElm = elms[i];
  50. var optsStr = null;
  51.  
  52. var dataOptions = jsc.getDataAttr(targetElm, 'jscolor');
  53. if (dataOptions !== null) {
  54. optsStr = dataOptions;
  55. } else if (m[4]) {
  56. optsStr = m[4];
  57. }
  58.  
  59. var opts = {};
  60. if (optsStr) {
  61. try {
  62. opts = (new Function ('return (' + optsStr + ')'))();
  63. } catch(eParseError) {
  64. jsc.warn('Error parsing jscolor options: ' + eParseError + ':\n' + optsStr);
  65. }
  66. }
  67. targetElm.jscolor = new jsc.jscolor(targetElm, opts);
  68. }
  69. }
  70. },
  71.  
  72.  
  73. isColorAttrSupported : (function () {
  74. var elm = document.createElement('input');
  75. if (elm.setAttribute) {
  76. elm.setAttribute('type', 'color');
  77. if (elm.type.toLowerCase() == 'color') {
  78. return true;
  79. }
  80. }
  81. return false;
  82. })(),
  83.  
  84.  
  85. isCanvasSupported : (function () {
  86. var elm = document.createElement('canvas');
  87. return !!(elm.getContext && elm.getContext('2d'));
  88. })(),
  89.  
  90.  
  91. fetchElement : function (mixed) {
  92. return typeof mixed === 'string' ? document.getElementById(mixed) : mixed;
  93. },
  94.  
  95.  
  96. isElementType : function (elm, type) {
  97. return elm.nodeName.toLowerCase() === type.toLowerCase();
  98. },
  99.  
  100.  
  101. getDataAttr : function (el, name) {
  102. var attrName = 'data-' + name;
  103. var attrValue = el.getAttribute(attrName);
  104. if (attrValue !== null) {
  105. return attrValue;
  106. }
  107. return null;
  108. },
  109.  
  110.  
  111. attachEvent : function (el, evnt, func) {
  112. if (el.addEventListener) {
  113. el.addEventListener(evnt, func, false);
  114. } else if (el.attachEvent) {
  115. el.attachEvent('on' + evnt, func);
  116. }
  117. },
  118.  
  119.  
  120. detachEvent : function (el, evnt, func) {
  121. if (el.removeEventListener) {
  122. el.removeEventListener(evnt, func, false);
  123. } else if (el.detachEvent) {
  124. el.detachEvent('on' + evnt, func);
  125. }
  126. },
  127.  
  128.  
  129. _attachedGroupEvents : {},
  130.  
  131.  
  132. attachGroupEvent : function (groupName, el, evnt, func) {
  133. if (!jsc._attachedGroupEvents.hasOwnProperty(groupName)) {
  134. jsc._attachedGroupEvents[groupName] = [];
  135. }
  136. jsc._attachedGroupEvents[groupName].push([el, evnt, func]);
  137. jsc.attachEvent(el, evnt, func);
  138. },
  139.  
  140.  
  141. detachGroupEvents : function (groupName) {
  142. if (jsc._attachedGroupEvents.hasOwnProperty(groupName)) {
  143. for (var i = 0; i < jsc._attachedGroupEvents[groupName].length; i += 1) {
  144. var evt = jsc._attachedGroupEvents[groupName][i];
  145. jsc.detachEvent(evt[0], evt[1], evt[2]);
  146. }
  147. delete jsc._attachedGroupEvents[groupName];
  148. }
  149. },
  150.  
  151.  
  152. attachDOMReadyEvent : function (func) {
  153. var fired = false;
  154. var fireOnce = function () {
  155. if (!fired) {
  156. fired = true;
  157. func();
  158. }
  159. };
  160.  
  161. if (document.readyState === 'complete') {
  162. setTimeout(fireOnce, 1); // async
  163. return;
  164. }
  165.  
  166. if (document.addEventListener) {
  167. document.addEventListener('DOMContentLoaded', fireOnce, false);
  168.  
  169. // Fallback
  170. window.addEventListener('load', fireOnce, false);
  171.  
  172. } else if (document.attachEvent) {
  173. // IE
  174. document.attachEvent('onreadystatechange', function () {
  175. if (document.readyState === 'complete') {
  176. document.detachEvent('onreadystatechange', arguments.callee);
  177. fireOnce();
  178. }
  179. })
  180.  
  181. // Fallback
  182. window.attachEvent('onload', fireOnce);
  183.  
  184. // IE7/8
  185. if (document.documentElement.doScroll && window == window.top) {
  186. var tryScroll = function () {
  187. if (!document.body) { return; }
  188. try {
  189. document.documentElement.doScroll('left');
  190. fireOnce();
  191. } catch (e) {
  192. setTimeout(tryScroll, 1);
  193. }
  194. };
  195. tryScroll();
  196. }
  197. }
  198. },
  199.  
  200.  
  201. warn : function (msg) {
  202. if (window.console && window.console.warn) {
  203. window.console.warn(msg);
  204. }
  205. },
  206.  
  207.  
  208. preventDefault : function (e) {
  209. if (e.preventDefault) { e.preventDefault(); }
  210. e.returnValue = false;
  211. },
  212.  
  213.  
  214. captureTarget : function (target) {
  215. // IE
  216. if (target.setCapture) {
  217. jsc._capturedTarget = target;
  218. jsc._capturedTarget.setCapture();
  219. }
  220. },
  221.  
  222.  
  223. releaseTarget : function () {
  224. // IE
  225. if (jsc._capturedTarget) {
  226. jsc._capturedTarget.releaseCapture();
  227. jsc._capturedTarget = null;
  228. }
  229. },
  230.  
  231.  
  232. fireEvent : function (el, evnt) {
  233. if (!el) {
  234. return;
  235. }
  236. if (document.createEvent) {
  237. var ev = document.createEvent('HTMLEvents');
  238. ev.initEvent(evnt, true, true);
  239. el.dispatchEvent(ev);
  240. } else if (document.createEventObject) {
  241. var ev = document.createEventObject();
  242. el.fireEvent('on' + evnt, ev);
  243. } else if (el['on' + evnt]) { // alternatively use the traditional event model
  244. el['on' + evnt]();
  245. }
  246. },
  247.  
  248.  
  249. classNameToList : function (className) {
  250. return className.replace(/^\s+|\s+$/g, '').split(/\s+/);
  251. },
  252.  
  253.  
  254. // The className parameter (str) can only contain a single class name
  255. hasClass : function (elm, className) {
  256. if (!className) {
  257. return false;
  258. }
  259. return -1 != (' ' + elm.className.replace(/\s+/g, ' ') + ' ').indexOf(' ' + className + ' ');
  260. },
  261.  
  262.  
  263. // The className parameter (str) can contain multiple class names separated by whitespace
  264. setClass : function (elm, className) {
  265. var classList = jsc.classNameToList(className);
  266. for (var i = 0; i < classList.length; i += 1) {
  267. if (!jsc.hasClass(elm, classList[i])) {
  268. elm.className += (elm.className ? ' ' : '') + classList[i];
  269. }
  270. }
  271. },
  272.  
  273.  
  274. // The className parameter (str) can contain multiple class names separated by whitespace
  275. unsetClass : function (elm, className) {
  276. var classList = jsc.classNameToList(className);
  277. for (var i = 0; i < classList.length; i += 1) {
  278. var repl = new RegExp(
  279. '^\\s*' + classList[i] + '\\s*|' +
  280. '\\s*' + classList[i] + '\\s*$|' +
  281. '\\s+' + classList[i] + '(\\s+)',
  282. 'g'
  283. );
  284. elm.className = elm.className.replace(repl, '$1');
  285. }
  286. },
  287.  
  288.  
  289. getStyle : function (elm) {
  290. return window.getComputedStyle ? window.getComputedStyle(elm) : elm.currentStyle;
  291. },
  292.  
  293.  
  294. setStyle : (function () {
  295. var helper = document.createElement('div');
  296. var getSupportedProp = function (names) {
  297. for (var i = 0; i < names.length; i += 1) {
  298. if (names[i] in helper.style) {
  299. return names[i];
  300. }
  301. }
  302. };
  303. var props = {
  304. borderRadius: getSupportedProp(['borderRadius', 'MozBorderRadius', 'webkitBorderRadius']),
  305. boxShadow: getSupportedProp(['boxShadow', 'MozBoxShadow', 'webkitBoxShadow'])
  306. };
  307. return function (elm, prop, value) {
  308. switch (prop.toLowerCase()) {
  309. case 'opacity':
  310. var alphaOpacity = Math.round(parseFloat(value) * 100);
  311. elm.style.opacity = value;
  312. elm.style.filter = 'alpha(opacity=' + alphaOpacity + ')';
  313. break;
  314. default:
  315. elm.style[props[prop]] = value;
  316. break;
  317. }
  318. };
  319. })(),
  320.  
  321.  
  322. setBorderRadius : function (elm, value) {
  323. jsc.setStyle(elm, 'borderRadius', value || '0');
  324. },
  325.  
  326.  
  327. setBoxShadow : function (elm, value) {
  328. jsc.setStyle(elm, 'boxShadow', value || 'none');
  329. },
  330.  
  331.  
  332. getElementPos : function (e, relativeToViewport) {
  333. var x=0, y=0;
  334. var rect = e.getBoundingClientRect();
  335. x = rect.left;
  336. y = rect.top;
  337. if (!relativeToViewport) {
  338. var viewPos = jsc.getViewPos();
  339. x += viewPos[0];
  340. y += viewPos[1];
  341. }
  342. return [x, y];
  343. },
  344.  
  345.  
  346. getElementSize : function (e) {
  347. return [e.offsetWidth, e.offsetHeight];
  348. },
  349.  
  350.  
  351. // get pointer's X/Y coordinates relative to viewport
  352. getAbsPointerPos : function (e) {
  353. if (!e) { e = window.event; }
  354. var x = 0, y = 0;
  355. if (typeof e.changedTouches !== 'undefined' && e.changedTouches.length) {
  356. // touch devices
  357. x = e.changedTouches[0].clientX;
  358. y = e.changedTouches[0].clientY;
  359. } else if (typeof e.clientX === 'number') {
  360. x = e.clientX;
  361. y = e.clientY;
  362. }
  363. return { x: x, y: y };
  364. },
  365.  
  366.  
  367. // get pointer's X/Y coordinates relative to target element
  368. getRelPointerPos : function (e) {
  369. if (!e) { e = window.event; }
  370. var target = e.target || e.srcElement;
  371. var targetRect = target.getBoundingClientRect();
  372.  
  373. var x = 0, y = 0;
  374.  
  375. var clientX = 0, clientY = 0;
  376. if (typeof e.changedTouches !== 'undefined' && e.changedTouches.length) {
  377. // touch devices
  378. clientX = e.changedTouches[0].clientX;
  379. clientY = e.changedTouches[0].clientY;
  380. } else if (typeof e.clientX === 'number') {
  381. clientX = e.clientX;
  382. clientY = e.clientY;
  383. }
  384.  
  385. x = clientX - targetRect.left;
  386. y = clientY - targetRect.top;
  387. return { x: x, y: y };
  388. },
  389.  
  390.  
  391. getViewPos : function () {
  392. var doc = document.documentElement;
  393. return [
  394. (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0),
  395. (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
  396. ];
  397. },
  398.  
  399.  
  400. getViewSize : function () {
  401. var doc = document.documentElement;
  402. return [
  403. (window.innerWidth || doc.clientWidth),
  404. (window.innerHeight || doc.clientHeight),
  405. ];
  406. },
  407.  
  408.  
  409. redrawPosition : function () {
  410.  
  411. if (jsc.picker && jsc.picker.owner) {
  412. var thisObj = jsc.picker.owner;
  413.  
  414. var tp, vp;
  415.  
  416. if (thisObj.fixed) {
  417. // Fixed elements are positioned relative to viewport,
  418. // therefore we can ignore the scroll offset
  419. tp = jsc.getElementPos(thisObj.targetElement, true); // target pos
  420. vp = [0, 0]; // view pos
  421. } else {
  422. tp = jsc.getElementPos(thisObj.targetElement); // target pos
  423. vp = jsc.getViewPos(); // view pos
  424. }
  425.  
  426. var ts = jsc.getElementSize(thisObj.targetElement); // target size
  427. var vs = jsc.getViewSize(); // view size
  428. var ps = jsc.getPickerOuterDims(thisObj); // picker size
  429. var a, b, c;
  430. switch (thisObj.position.toLowerCase()) {
  431. case 'left': a=1; b=0; c=-1; break;
  432. case 'right':a=1; b=0; c=1; break;
  433. case 'top': a=0; b=1; c=-1; break;
  434. default: a=0; b=1; c=1; break;
  435. }
  436. var l = (ts[b]+ps[b])/2;
  437.  
  438. // compute picker position
  439. if (!thisObj.smartPosition) {
  440. var pp = [
  441. tp[a],
  442. tp[b]+ts[b]-l+l*c
  443. ];
  444. } else {
  445. var pp = [
  446. -vp[a]+tp[a]+ps[a] > vs[a] ?
  447. (-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
  448. tp[a],
  449. -vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
  450. (-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
  451. (tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
  452. ];
  453. }
  454.  
  455. var x = pp[a];
  456. var y = pp[b];
  457. var positionValue = thisObj.fixed ? 'fixed' : 'absolute';
  458. var contractShadow =
  459. (pp[0] + ps[0] > tp[0] || pp[0] < tp[0] + ts[0]) &&
  460. (pp[1] + ps[1] < tp[1] + ts[1]);
  461.  
  462. jsc._drawPosition(thisObj, x, y, positionValue, contractShadow);
  463. }
  464. },
  465.  
  466.  
  467. _drawPosition : function (thisObj, x, y, positionValue, contractShadow) {
  468. var vShadow = contractShadow ? 0 : thisObj.shadowBlur; // px
  469.  
  470. jsc.picker.wrap.style.position = positionValue;
  471. jsc.picker.wrap.style.left = x + 'px';
  472. jsc.picker.wrap.style.top = y + 'px';
  473.  
  474. jsc.setBoxShadow(
  475. jsc.picker.boxS,
  476. thisObj.shadow ?
  477. new jsc.BoxShadow(0, vShadow, thisObj.shadowBlur, 0, thisObj.shadowColor) :
  478. null);
  479. },
  480.  
  481.  
  482. getPickerDims : function (thisObj) {
  483. var displaySlider = !!jsc.getSliderComponent(thisObj);
  484. var dims = [
  485. 2 * thisObj.insetWidth + 2 * thisObj.padding + thisObj.width +
  486. (displaySlider ? 2 * thisObj.insetWidth + jsc.getPadToSliderPadding(thisObj) + thisObj.sliderSize : 0),
  487. 2 * thisObj.insetWidth + 2 * thisObj.padding + thisObj.height +
  488. (thisObj.closable ? 2 * thisObj.insetWidth + thisObj.padding + thisObj.buttonHeight : 0)
  489. ];
  490. return dims;
  491. },
  492.  
  493.  
  494. getPickerOuterDims : function (thisObj) {
  495. var dims = jsc.getPickerDims(thisObj);
  496. return [
  497. dims[0] + 2 * thisObj.borderWidth,
  498. dims[1] + 2 * thisObj.borderWidth
  499. ];
  500. },
  501.  
  502.  
  503. getPadToSliderPadding : function (thisObj) {
  504. return Math.max(thisObj.padding, 1.5 * (2 * thisObj.pointerBorderWidth + thisObj.pointerThickness));
  505. },
  506.  
  507.  
  508. getPadYComponent : function (thisObj) {
  509. switch (thisObj.mode.charAt(1).toLowerCase()) {
  510. case 'v': return 'v'; break;
  511. }
  512. return 's';
  513. },
  514.  
  515.  
  516. getSliderComponent : function (thisObj) {
  517. if (thisObj.mode.length > 2) {
  518. switch (thisObj.mode.charAt(2).toLowerCase()) {
  519. case 's': return 's'; break;
  520. case 'v': return 'v'; break;
  521. }
  522. }
  523. return null;
  524. },
  525.  
  526.  
  527. onDocumentMouseDown : function (e) {
  528. if (!e) { e = window.event; }
  529. var target = e.target || e.srcElement;
  530.  
  531. if (target._jscLinkedInstance) {
  532. if (target._jscLinkedInstance.showOnClick) {
  533. target._jscLinkedInstance.show();
  534. }
  535. } else if (target._jscControlName) {
  536. jsc.onControlPointerStart(e, target, target._jscControlName, 'mouse');
  537. } else {
  538. // Mouse is outside the picker controls -> hide the color picker!
  539. if (jsc.picker && jsc.picker.owner) {
  540. jsc.picker.owner.hide();
  541. }
  542. }
  543. },
  544.  
  545.  
  546. onDocumentTouchStart : function (e) {
  547. if (!e) { e = window.event; }
  548. var target = e.target || e.srcElement;
  549.  
  550. if (target._jscLinkedInstance) {
  551. if (target._jscLinkedInstance.showOnClick) {
  552. target._jscLinkedInstance.show();
  553. }
  554. } else if (target._jscControlName) {
  555. jsc.onControlPointerStart(e, target, target._jscControlName, 'touch');
  556. } else {
  557. if (jsc.picker && jsc.picker.owner) {
  558. jsc.picker.owner.hide();
  559. }
  560. }
  561. },
  562.  
  563.  
  564. onWindowResize : function (e) {
  565. jsc.redrawPosition();
  566. },
  567.  
  568.  
  569. onParentScroll : function (e) {
  570. // hide the picker when one of the parent elements is scrolled
  571. if (jsc.picker && jsc.picker.owner) {
  572. jsc.picker.owner.hide();
  573. }
  574. },
  575.  
  576.  
  577. _pointerMoveEvent : {
  578. mouse: 'mousemove',
  579. touch: 'touchmove'
  580. },
  581. _pointerEndEvent : {
  582. mouse: 'mouseup',
  583. touch: 'touchend'
  584. },
  585.  
  586.  
  587. _pointerOrigin : null,
  588. _capturedTarget : null,
  589.  
  590.  
  591. onControlPointerStart : function (e, target, controlName, pointerType) {
  592. var thisObj = target._jscInstance;
  593.  
  594. jsc.preventDefault(e);
  595. jsc.captureTarget(target);
  596.  
  597. var registerDragEvents = function (doc, offset) {
  598. jsc.attachGroupEvent('drag', doc, jsc._pointerMoveEvent[pointerType],
  599. jsc.onDocumentPointerMove(e, target, controlName, pointerType, offset));
  600. jsc.attachGroupEvent('drag', doc, jsc._pointerEndEvent[pointerType],
  601. jsc.onDocumentPointerEnd(e, target, controlName, pointerType));
  602. };
  603.  
  604. registerDragEvents(document, [0, 0]);
  605.  
  606. if (window.parent && window.frameElement) {
  607. var rect = window.frameElement.getBoundingClientRect();
  608. var ofs = [-rect.left, -rect.top];
  609. registerDragEvents(window.parent.window.document, ofs);
  610. }
  611.  
  612. var abs = jsc.getAbsPointerPos(e);
  613. var rel = jsc.getRelPointerPos(e);
  614. jsc._pointerOrigin = {
  615. x: abs.x - rel.x,
  616. y: abs.y - rel.y
  617. };
  618.  
  619. switch (controlName) {
  620. case 'pad':
  621. // if the slider is at the bottom, move it up
  622. switch (jsc.getSliderComponent(thisObj)) {
  623. case 's': if (thisObj.hsv[1] === 0) { thisObj.fromHSV(null, 100, null); }; break;
  624. case 'v': if (thisObj.hsv[2] === 0) { thisObj.fromHSV(null, null, 100); }; break;
  625. }
  626. jsc.setPad(thisObj, e, 0, 0);
  627. break;
  628.  
  629. case 'sld':
  630. jsc.setSld(thisObj, e, 0);
  631. break;
  632. }
  633.  
  634. jsc.dispatchFineChange(thisObj);
  635. },
  636.  
  637.  
  638. onDocumentPointerMove : function (e, target, controlName, pointerType, offset) {
  639. return function (e) {
  640. var thisObj = target._jscInstance;
  641. switch (controlName) {
  642. case 'pad':
  643. if (!e) { e = window.event; }
  644. jsc.setPad(thisObj, e, offset[0], offset[1]);
  645. jsc.dispatchFineChange(thisObj);
  646. break;
  647.  
  648. case 'sld':
  649. if (!e) { e = window.event; }
  650. jsc.setSld(thisObj, e, offset[1]);
  651. jsc.dispatchFineChange(thisObj);
  652. break;
  653. }
  654. }
  655. },
  656.  
  657.  
  658. onDocumentPointerEnd : function (e, target, controlName, pointerType) {
  659. return function (e) {
  660. var thisObj = target._jscInstance;
  661. jsc.detachGroupEvents('drag');
  662. jsc.releaseTarget();
  663. // Always dispatch changes after detaching outstanding mouse handlers,
  664. // in case some user interaction will occur in user's onchange callback
  665. // that would intrude with current mouse events
  666. jsc.dispatchChange(thisObj);
  667. };
  668. },
  669.  
  670.  
  671. dispatchChange : function (thisObj) {
  672. if (thisObj.valueElement) {
  673. if (jsc.isElementType(thisObj.valueElement, 'input')) {
  674. jsc.fireEvent(thisObj.valueElement, 'change');
  675. }
  676. }
  677. },
  678.  
  679.  
  680. dispatchFineChange : function (thisObj) {
  681. if (thisObj.onFineChange) {
  682. var callback;
  683. if (typeof thisObj.onFineChange === 'string') {
  684. callback = new Function (thisObj.onFineChange);
  685. } else {
  686. callback = thisObj.onFineChange;
  687. }
  688. callback.call(thisObj);
  689. }
  690. },
  691.  
  692.  
  693. setPad : function (thisObj, e, ofsX, ofsY) {
  694. var pointerAbs = jsc.getAbsPointerPos(e);
  695. var x = ofsX + pointerAbs.x - jsc._pointerOrigin.x - thisObj.padding - thisObj.insetWidth;
  696. var y = ofsY + pointerAbs.y - jsc._pointerOrigin.y - thisObj.padding - thisObj.insetWidth;
  697.  
  698. var xVal = x * (360 / (thisObj.width - 1));
  699. var yVal = 100 - (y * (100 / (thisObj.height - 1)));
  700.  
  701. switch (jsc.getPadYComponent(thisObj)) {
  702. case 's': thisObj.fromHSV(xVal, yVal, null, jsc.leaveSld); break;
  703. case 'v': thisObj.fromHSV(xVal, null, yVal, jsc.leaveSld); break;
  704. }
  705. },
  706.  
  707.  
  708. setSld : function (thisObj, e, ofsY) {
  709. var pointerAbs = jsc.getAbsPointerPos(e);
  710. var y = ofsY + pointerAbs.y - jsc._pointerOrigin.y - thisObj.padding - thisObj.insetWidth;
  711.  
  712. var yVal = 100 - (y * (100 / (thisObj.height - 1)));
  713.  
  714. switch (jsc.getSliderComponent(thisObj)) {
  715. case 's': thisObj.fromHSV(null, yVal, null, jsc.leavePad); break;
  716. case 'v': thisObj.fromHSV(null, null, yVal, jsc.leavePad); break;
  717. }
  718. },
  719.  
  720.  
  721. _vmlNS : 'jsc_vml_',
  722. _vmlCSS : 'jsc_vml_css_',
  723. _vmlReady : false,
  724.  
  725.  
  726. initVML : function () {
  727. if (!jsc._vmlReady) {
  728. // init VML namespace
  729. var doc = document;
  730. if (!doc.namespaces[jsc._vmlNS]) {
  731. doc.namespaces.add(jsc._vmlNS, 'urn:schemas-microsoft-com:vml');
  732. }
  733. if (!doc.styleSheets[jsc._vmlCSS]) {
  734. var tags = ['shape', 'shapetype', 'group', 'background', 'path', 'formulas', 'handles', 'fill', 'stroke', 'shadow', 'textbox', 'textpath', 'imagedata', 'line', 'polyline', 'curve', 'rect', 'roundrect', 'oval', 'arc', 'image'];
  735. var ss = doc.createStyleSheet();
  736. ss.owningElement.id = jsc._vmlCSS;
  737. for (var i = 0; i < tags.length; i += 1) {
  738. ss.addRule(jsc._vmlNS + '\\:' + tags[i], 'behavior:url(#default#VML);');
  739. }
  740. }
  741. jsc._vmlReady = true;
  742. }
  743. },
  744.  
  745.  
  746. createPalette : function () {
  747.  
  748. var paletteObj = {
  749. elm: null,
  750. draw: null
  751. };
  752.  
  753. if (jsc.isCanvasSupported) {
  754. // Canvas implementation for modern browsers
  755.  
  756. var canvas = document.createElement('canvas');
  757. var ctx = canvas.getContext('2d');
  758.  
  759. var drawFunc = function (width, height, type) {
  760. canvas.width = width;
  761. canvas.height = height;
  762.  
  763. ctx.clearRect(0, 0, canvas.width, canvas.height);
  764.  
  765. var hGrad = ctx.createLinearGradient(0, 0, canvas.width, 0);
  766. hGrad.addColorStop(0 / 6, '#F00');
  767. hGrad.addColorStop(1 / 6, '#FF0');
  768. hGrad.addColorStop(2 / 6, '#0F0');
  769. hGrad.addColorStop(3 / 6, '#0FF');
  770. hGrad.addColorStop(4 / 6, '#00F');
  771. hGrad.addColorStop(5 / 6, '#F0F');
  772. hGrad.addColorStop(6 / 6, '#F00');
  773.  
  774. ctx.fillStyle = hGrad;
  775. ctx.fillRect(0, 0, canvas.width, canvas.height);
  776.  
  777. var vGrad = ctx.createLinearGradient(0, 0, 0, canvas.height);
  778. switch (type.toLowerCase()) {
  779. case 's':
  780. vGrad.addColorStop(0, 'rgba(255,255,255,0)');
  781. vGrad.addColorStop(1, 'rgba(255,255,255,1)');
  782. break;
  783. case 'v':
  784. vGrad.addColorStop(0, 'rgba(0,0,0,0)');
  785. vGrad.addColorStop(1, 'rgba(0,0,0,1)');
  786. break;
  787. }
  788. ctx.fillStyle = vGrad;
  789. ctx.fillRect(0, 0, canvas.width, canvas.height);
  790. };
  791.  
  792. paletteObj.elm = canvas;
  793. paletteObj.draw = drawFunc;
  794.  
  795. } else {
  796. // VML fallback for IE 7 and 8
  797.  
  798. jsc.initVML();
  799.  
  800. var vmlContainer = document.createElement('div');
  801. vmlContainer.style.position = 'relative';
  802. vmlContainer.style.overflow = 'hidden';
  803.  
  804. var hGrad = document.createElement(jsc._vmlNS + ':fill');
  805. hGrad.type = 'gradient';
  806. hGrad.method = 'linear';
  807. hGrad.angle = '90';
  808. hGrad.colors = '16.67% #F0F, 33.33% #00F, 50% #0FF, 66.67% #0F0, 83.33% #FF0'
  809.  
  810. var hRect = document.createElement(jsc._vmlNS + ':rect');
  811. hRect.style.position = 'absolute';
  812. hRect.style.left = -1 + 'px';
  813. hRect.style.top = -1 + 'px';
  814. hRect.stroked = false;
  815. hRect.appendChild(hGrad);
  816. vmlContainer.appendChild(hRect);
  817.  
  818. var vGrad = document.createElement(jsc._vmlNS + ':fill');
  819. vGrad.type = 'gradient';
  820. vGrad.method = 'linear';
  821. vGrad.angle = '180';
  822. vGrad.opacity = '0';
  823.  
  824. var vRect = document.createElement(jsc._vmlNS + ':rect');
  825. vRect.style.position = 'absolute';
  826. vRect.style.left = -1 + 'px';
  827. vRect.style.top = -1 + 'px';
  828. vRect.stroked = false;
  829. vRect.appendChild(vGrad);
  830. vmlContainer.appendChild(vRect);
  831.  
  832. var drawFunc = function (width, height, type) {
  833. vmlContainer.style.width = width + 'px';
  834. vmlContainer.style.height = height + 'px';
  835.  
  836. hRect.style.width =
  837. vRect.style.width =
  838. (width + 1) + 'px';
  839. hRect.style.height =
  840. vRect.style.height =
  841. (height + 1) + 'px';
  842.  
  843. // Colors must be specified during every redraw, otherwise IE won't display
  844. // a full gradient during a subsequential redraw
  845. hGrad.color = '#F00';
  846. hGrad.color2 = '#F00';
  847.  
  848. switch (type.toLowerCase()) {
  849. case 's':
  850. vGrad.color = vGrad.color2 = '#FFF';
  851. break;
  852. case 'v':
  853. vGrad.color = vGrad.color2 = '#000';
  854. break;
  855. }
  856. };
  857. paletteObj.elm = vmlContainer;
  858. paletteObj.draw = drawFunc;
  859. }
  860.  
  861. return paletteObj;
  862. },
  863.  
  864.  
  865. createSliderGradient : function () {
  866.  
  867. var sliderObj = {
  868. elm: null,
  869. draw: null
  870. };
  871.  
  872. if (jsc.isCanvasSupported) {
  873. // Canvas implementation for modern browsers
  874.  
  875. var canvas = document.createElement('canvas');
  876. var ctx = canvas.getContext('2d');
  877.  
  878. var drawFunc = function (width, height, color1, color2) {
  879. canvas.width = width;
  880. canvas.height = height;
  881.  
  882. ctx.clearRect(0, 0, canvas.width, canvas.height);
  883.  
  884. var grad = ctx.createLinearGradient(0, 0, 0, canvas.height);
  885. grad.addColorStop(0, color1);
  886. grad.addColorStop(1, color2);
  887.  
  888. ctx.fillStyle = grad;
  889. ctx.fillRect(0, 0, canvas.width, canvas.height);
  890. };
  891.  
  892. sliderObj.elm = canvas;
  893. sliderObj.draw = drawFunc;
  894.  
  895. } else {
  896. // VML fallback for IE 7 and 8
  897.  
  898. jsc.initVML();
  899.  
  900. var vmlContainer = document.createElement('div');
  901. vmlContainer.style.position = 'relative';
  902. vmlContainer.style.overflow = 'hidden';
  903.  
  904. var grad = document.createElement(jsc._vmlNS + ':fill');
  905. grad.type = 'gradient';
  906. grad.method = 'linear';
  907. grad.angle = '180';
  908.  
  909. var rect = document.createElement(jsc._vmlNS + ':rect');
  910. rect.style.position = 'absolute';
  911. rect.style.left = -1 + 'px';
  912. rect.style.top = -1 + 'px';
  913. rect.stroked = false;
  914. rect.appendChild(grad);
  915. vmlContainer.appendChild(rect);
  916.  
  917. var drawFunc = function (width, height, color1, color2) {
  918. vmlContainer.style.width = width + 'px';
  919. vmlContainer.style.height = height + 'px';
  920.  
  921. rect.style.width = (width + 1) + 'px';
  922. rect.style.height = (height + 1) + 'px';
  923.  
  924. grad.color = color1;
  925. grad.color2 = color2;
  926. };
  927. sliderObj.elm = vmlContainer;
  928. sliderObj.draw = drawFunc;
  929. }
  930.  
  931. return sliderObj;
  932. },
  933.  
  934.  
  935. leaveValue : 1<<0,
  936. leaveStyle : 1<<1,
  937. leavePad : 1<<2,
  938. leaveSld : 1<<3,
  939.  
  940.  
  941. BoxShadow : (function () {
  942. var BoxShadow = function (hShadow, vShadow, blur, spread, color, inset) {
  943. this.hShadow = hShadow;
  944. this.vShadow = vShadow;
  945. this.blur = blur;
  946. this.spread = spread;
  947. this.color = color;
  948. this.inset = !!inset;
  949. };
  950.  
  951. BoxShadow.prototype.toString = function () {
  952. var vals = [
  953. Math.round(this.hShadow) + 'px',
  954. Math.round(this.vShadow) + 'px',
  955. Math.round(this.blur) + 'px',
  956. Math.round(this.spread) + 'px',
  957. this.color
  958. ];
  959. if (this.inset) {
  960. vals.push('inset');
  961. }
  962. return vals.join(' ');
  963. };
  964.  
  965. return BoxShadow;
  966. })(),
  967.  
  968.  
  969. //
  970. // Usage:
  971. // var myColor = new jscolor(<targetElement> [, <options>])
  972. //
  973.  
  974. jscolor : function (targetElement, options) {
  975.  
  976. // General options
  977. //
  978. this.value = null; // initial HEX color. To change it later, use methods fromString(), fromHSV() and fromRGB()
  979. this.valueElement = targetElement; // element that will be used to display and input the color code
  980. this.styleElement = targetElement; // element that will preview the picked color using CSS backgroundColor
  981. this.required = true; // whether the associated text <input> can be left empty
  982. this.refine = true; // whether to refine the entered color code (e.g. uppercase it and remove whitespace)
  983. this.hash = false; // whether to prefix the HEX color code with # symbol
  984. this.uppercase = true; // whether to uppercase the color code
  985. this.onFineChange = null; // called instantly every time the color changes (value can be either a function or a string with javascript code)
  986. this.activeClass = 'jscolor-active'; // class to be set to the target element when a picker window is open on it
  987. this.minS = 0; // min allowed saturation (0 - 100)
  988. this.maxS = 100; // max allowed saturation (0 - 100)
  989. this.minV = 0; // min allowed value (brightness) (0 - 100)
  990. this.maxV = 100; // max allowed value (brightness) (0 - 100)
  991.  
  992. // Accessing the picked color
  993. //
  994. this.hsv = [0, 0, 100]; // read-only [0-360, 0-100, 0-100]
  995. this.rgb = [255, 255, 255]; // read-only [0-255, 0-255, 0-255]
  996.  
  997. // Color Picker options
  998. //
  999. this.width = 181; // width of color palette (in px)
  1000. this.height = 101; // height of color palette (in px)
  1001. this.showOnClick = true; // whether to display the color picker when user clicks on its target element
  1002. this.mode = 'HSV'; // HSV | HVS | HS | HV - layout of the color picker controls
  1003. this.position = 'bottom'; // left | right | top | bottom - position relative to the target element
  1004. this.smartPosition = true; // automatically change picker position when there is not enough space for it
  1005. this.sliderSize = 16; // px
  1006. this.crossSize = 8; // px
  1007. this.closable = false; // whether to display the Close button
  1008. this.closeText = 'Close';
  1009. this.buttonColor = '#000000'; // CSS color
  1010. this.buttonHeight = 18; // px
  1011. this.padding = 12; // px
  1012. this.backgroundColor = '#FFFFFF'; // CSS color
  1013. this.borderWidth = 1; // px
  1014. this.borderColor = '#BBBBBB'; // CSS color
  1015. this.borderRadius = 8; // px
  1016. this.insetWidth = 1; // px
  1017. this.insetColor = '#BBBBBB'; // CSS color
  1018. this.shadow = true; // whether to display shadow
  1019. this.shadowBlur = 15; // px
  1020. this.shadowColor = 'rgba(0,0,0,0.2)'; // CSS color
  1021. this.pointerColor = '#4C4C4C'; // px
  1022. this.pointerBorderColor = '#FFFFFF'; // px
  1023. this.pointerBorderWidth = 1; // px
  1024. this.pointerThickness = 2; // px
  1025. this.zIndex = 1000;
  1026. this.container = null; // where to append the color picker (BODY element by default)
  1027.  
  1028.  
  1029. for (var opt in options) {
  1030. if (options.hasOwnProperty(opt)) {
  1031. this[opt] = options[opt];
  1032. }
  1033. }
  1034.  
  1035.  
  1036. this.hide = function () {
  1037. if (isPickerOwner()) {
  1038. detachPicker();
  1039. }
  1040. };
  1041.  
  1042.  
  1043. this.show = function () {
  1044. drawPicker();
  1045. };
  1046.  
  1047.  
  1048. this.redraw = function () {
  1049. if (isPickerOwner()) {
  1050. drawPicker();
  1051. }
  1052. };
  1053.  
  1054.  
  1055. this.importColor = function () {
  1056. if (!this.valueElement) {
  1057. this.exportColor();
  1058. } else {
  1059. if (jsc.isElementType(this.valueElement, 'input')) {
  1060. if (!this.refine) {
  1061. if (!this.fromString(this.valueElement.value, jsc.leaveValue)) {
  1062. if (this.styleElement) {
  1063. this.styleElement.style.backgroundImage = this.styleElement._jscOrigStyle.backgroundImage;
  1064. this.styleElement.style.backgroundColor = this.styleElement._jscOrigStyle.backgroundColor;
  1065. this.styleElement.style.color = this.styleElement._jscOrigStyle.color;
  1066. }
  1067. this.exportColor(jsc.leaveValue | jsc.leaveStyle);
  1068. }
  1069. } else if (!this.required && /^\s*$/.test(this.valueElement.value)) {
  1070. this.valueElement.value = '';
  1071. if (this.styleElement) {
  1072. this.styleElement.style.backgroundImage = this.styleElement._jscOrigStyle.backgroundImage;
  1073. this.styleElement.style.backgroundColor = this.styleElement._jscOrigStyle.backgroundColor;
  1074. this.styleElement.style.color = this.styleElement._jscOrigStyle.color;
  1075. }
  1076. this.exportColor(jsc.leaveValue | jsc.leaveStyle);
  1077.  
  1078. } else if (this.fromString(this.valueElement.value)) {
  1079. // managed to import color successfully from the value -> OK, don't do anything
  1080. } else {
  1081. this.exportColor();
  1082. }
  1083. } else {
  1084. // not an input element -> doesn't have any value
  1085. this.exportColor();
  1086. }
  1087. }
  1088. };
  1089.  
  1090.  
  1091. this.exportColor = function (flags) {
  1092. if (!(flags & jsc.leaveValue) && this.valueElement) {
  1093. var value = this.toString();
  1094. if (this.uppercase) { value = value.toUpperCase(); }
  1095. if (this.hash) { value = '#' + value; }
  1096.  
  1097. if (jsc.isElementType(this.valueElement, 'input')) {
  1098. this.valueElement.value = value;
  1099. } else {
  1100. this.valueElement.innerHTML = value;
  1101. }
  1102. }
  1103. if (!(flags & jsc.leaveStyle)) {
  1104. if (this.styleElement) {
  1105. this.styleElement.style.backgroundImage = 'none';
  1106. this.styleElement.style.backgroundColor = '#' + this.toString();
  1107. this.styleElement.style.color = this.isLight() ? '#000' : '#FFF';
  1108. }
  1109. }
  1110. if (!(flags & jsc.leavePad) && isPickerOwner()) {
  1111. redrawPad();
  1112. }
  1113. if (!(flags & jsc.leaveSld) && isPickerOwner()) {
  1114. redrawSld();
  1115. }
  1116. };
  1117.  
  1118.  
  1119. // h: 0-360
  1120. // s: 0-100
  1121. // v: 0-100
  1122. //
  1123. this.fromHSV = function (h, s, v, flags) { // null = don't change
  1124. if (h !== null) {
  1125. if (isNaN(h)) { return false; }
  1126. h = Math.max(0, Math.min(360, h));
  1127. }
  1128. if (s !== null) {
  1129. if (isNaN(s)) { return false; }
  1130. s = Math.max(0, Math.min(100, this.maxS, s), this.minS);
  1131. }
  1132. if (v !== null) {
  1133. if (isNaN(v)) { return false; }
  1134. v = Math.max(0, Math.min(100, this.maxV, v), this.minV);
  1135. }
  1136.  
  1137. this.rgb = HSV_RGB(
  1138. h===null ? this.hsv[0] : (this.hsv[0]=h),
  1139. s===null ? this.hsv[1] : (this.hsv[1]=s),
  1140. v===null ? this.hsv[2] : (this.hsv[2]=v)
  1141. );
  1142.  
  1143. this.exportColor(flags);
  1144. };
  1145.  
  1146.  
  1147. // r: 0-255
  1148. // g: 0-255
  1149. // b: 0-255
  1150. //
  1151. this.fromRGB = function (r, g, b, flags) { // null = don't change
  1152. if (r !== null) {
  1153. if (isNaN(r)) { return false; }
  1154. r = Math.max(0, Math.min(255, r));
  1155. }
  1156. if (g !== null) {
  1157. if (isNaN(g)) { return false; }
  1158. g = Math.max(0, Math.min(255, g));
  1159. }
  1160. if (b !== null) {
  1161. if (isNaN(b)) { return false; }
  1162. b = Math.max(0, Math.min(255, b));
  1163. }
  1164.  
  1165. var hsv = RGB_HSV(
  1166. r===null ? this.rgb[0] : r,
  1167. g===null ? this.rgb[1] : g,
  1168. b===null ? this.rgb[2] : b
  1169. );
  1170. if (hsv[0] !== null) {
  1171. this.hsv[0] = Math.max(0, Math.min(360, hsv[0]));
  1172. }
  1173. if (hsv[2] !== 0) {
  1174. this.hsv[1] = hsv[1]===null ? null : Math.max(0, this.minS, Math.min(100, this.maxS, hsv[1]));
  1175. }
  1176. this.hsv[2] = hsv[2]===null ? null : Math.max(0, this.minV, Math.min(100, this.maxV, hsv[2]));
  1177.  
  1178. // update RGB according to final HSV, as some values might be trimmed
  1179. var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
  1180. this.rgb[0] = rgb[0];
  1181. this.rgb[1] = rgb[1];
  1182. this.rgb[2] = rgb[2];
  1183.  
  1184. this.exportColor(flags);
  1185. };
  1186.  
  1187.  
  1188. this.fromString = function (str, flags) {
  1189. var m;
  1190. if (m = str.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i)) {
  1191. // HEX notation
  1192. //
  1193.  
  1194. if (m[1].length === 6) {
  1195. // 6-char notation
  1196. this.fromRGB(
  1197. parseInt(m[1].substr(0,2),16),
  1198. parseInt(m[1].substr(2,2),16),
  1199. parseInt(m[1].substr(4,2),16),
  1200. flags
  1201. );
  1202. } else {
  1203. // 3-char notation
  1204. this.fromRGB(
  1205. parseInt(m[1].charAt(0) + m[1].charAt(0),16),
  1206. parseInt(m[1].charAt(1) + m[1].charAt(1),16),
  1207. parseInt(m[1].charAt(2) + m[1].charAt(2),16),
  1208. flags
  1209. );
  1210. }
  1211. return true;
  1212.  
  1213. } else if (m = str.match(/^\W*rgba?\(([^)]*)\)\W*$/i)) {
  1214. var params = m[1].split(',');
  1215. var re = /^\s*(\d*)(\.\d+)?\s*$/;
  1216. var mR, mG, mB;
  1217. if (
  1218. params.length >= 3 &&
  1219. (mR = params[0].match(re)) &&
  1220. (mG = params[1].match(re)) &&
  1221. (mB = params[2].match(re))
  1222. ) {
  1223. var r = parseFloat((mR[1] || '0') + (mR[2] || ''));
  1224. var g = parseFloat((mG[1] || '0') + (mG[2] || ''));
  1225. var b = parseFloat((mB[1] || '0') + (mB[2] || ''));
  1226. this.fromRGB(r, g, b, flags);
  1227. return true;
  1228. }
  1229. }
  1230. return false;
  1231. };
  1232.  
  1233.  
  1234. this.toString = function () {
  1235. return (
  1236. (0x100 | Math.round(this.rgb[0])).toString(16).substr(1) +
  1237. (0x100 | Math.round(this.rgb[1])).toString(16).substr(1) +
  1238. (0x100 | Math.round(this.rgb[2])).toString(16).substr(1)
  1239. );
  1240. };
  1241.  
  1242.  
  1243. this.toHEXString = function () {
  1244. return '#' + this.toString().toUpperCase();
  1245. };
  1246.  
  1247.  
  1248. this.toRGBString = function () {
  1249. return ('rgb(' +
  1250. Math.round(this.rgb[0]) + ',' +
  1251. Math.round(this.rgb[1]) + ',' +
  1252. Math.round(this.rgb[2]) + ')'
  1253. );
  1254. };
  1255.  
  1256.  
  1257. this.isLight = function () {
  1258. return (
  1259. 0.213 * this.rgb[0] +
  1260. 0.715 * this.rgb[1] +
  1261. 0.072 * this.rgb[2] >
  1262. 255 / 2
  1263. );
  1264. };
  1265.  
  1266.  
  1267. this._processParentElementsInDOM = function () {
  1268. if (this._linkedElementsProcessed) { return; }
  1269. this._linkedElementsProcessed = true;
  1270.  
  1271. var elm = this.targetElement;
  1272. do {
  1273. // If the target element or one of its parent nodes has fixed position,
  1274. // then use fixed positioning instead
  1275. //
  1276. // Note: In Firefox, getComputedStyle returns null in a hidden iframe,
  1277. // that's why we need to check if the returned style object is non-empty
  1278. var currStyle = jsc.getStyle(elm);
  1279. if (currStyle && currStyle.position.toLowerCase() === 'fixed') {
  1280. this.fixed = true;
  1281. }
  1282.  
  1283. if (elm !== this.targetElement) {
  1284. // Ensure to attach onParentScroll only once to each parent element
  1285. // (multiple targetElements can share the same parent nodes)
  1286. //
  1287. // Note: It's not just offsetParents that can be scrollable,
  1288. // that's why we loop through all parent nodes
  1289. if (!elm._jscEventsAttached) {
  1290. jsc.attachEvent(elm, 'scroll', jsc.onParentScroll);
  1291. elm._jscEventsAttached = true;
  1292. }
  1293. }
  1294. } while ((elm = elm.parentNode) && !jsc.isElementType(elm, 'body'));
  1295. };
  1296.  
  1297.  
  1298. // r: 0-255
  1299. // g: 0-255
  1300. // b: 0-255
  1301. //
  1302. // returns: [ 0-360, 0-100, 0-100 ]
  1303. //
  1304. function RGB_HSV (r, g, b) {
  1305. r /= 255;
  1306. g /= 255;
  1307. b /= 255;
  1308. var n = Math.min(Math.min(r,g),b);
  1309. var v = Math.max(Math.max(r,g),b);
  1310. var m = v - n;
  1311. if (m === 0) { return [ null, 0, 100 * v ]; }
  1312. var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
  1313. return [
  1314. 60 * (h===6?0:h),
  1315. 100 * (m/v),
  1316. 100 * v
  1317. ];
  1318. }
  1319.  
  1320.  
  1321. // h: 0-360
  1322. // s: 0-100
  1323. // v: 0-100
  1324. //
  1325. // returns: [ 0-255, 0-255, 0-255 ]
  1326. //
  1327. function HSV_RGB (h, s, v) {
  1328. var u = 255 * (v / 100);
  1329.  
  1330. if (h === null) {
  1331. return [ u, u, u ];
  1332. }
  1333.  
  1334. h /= 60;
  1335. s /= 100;
  1336.  
  1337. var i = Math.floor(h);
  1338. var f = i%2 ? h-i : 1-(h-i);
  1339. var m = u * (1 - s);
  1340. var n = u * (1 - s * f);
  1341. switch (i) {
  1342. case 6:
  1343. case 0: return [u,n,m];
  1344. case 1: return [n,u,m];
  1345. case 2: return [m,u,n];
  1346. case 3: return [m,n,u];
  1347. case 4: return [n,m,u];
  1348. case 5: return [u,m,n];
  1349. }
  1350. }
  1351.  
  1352.  
  1353. function detachPicker () {
  1354. jsc.unsetClass(THIS.targetElement, THIS.activeClass);
  1355. jsc.picker.wrap.parentNode.removeChild(jsc.picker.wrap);
  1356. delete jsc.picker.owner;
  1357. }
  1358.  
  1359.  
  1360. function drawPicker () {
  1361.  
  1362. // At this point, when drawing the picker, we know what the parent elements are
  1363. // and we can do all related DOM operations, such as registering events on them
  1364. // or checking their positioning
  1365. THIS._processParentElementsInDOM();
  1366.  
  1367. if (!jsc.picker) {
  1368. jsc.picker = {
  1369. owner: null,
  1370. wrap : document.createElement('div'),
  1371. box : document.createElement('div'),
  1372. boxS : document.createElement('div'), // shadow area
  1373. boxB : document.createElement('div'), // border
  1374. pad : document.createElement('div'),
  1375. padB : document.createElement('div'), // border
  1376. padM : document.createElement('div'), // mouse/touch area
  1377. padPal : jsc.createPalette(),
  1378. cross : document.createElement('div'),
  1379. crossBY : document.createElement('div'), // border Y
  1380. crossBX : document.createElement('div'), // border X
  1381. crossLY : document.createElement('div'), // line Y
  1382. crossLX : document.createElement('div'), // line X
  1383. sld : document.createElement('div'),
  1384. sldB : document.createElement('div'), // border
  1385. sldM : document.createElement('div'), // mouse/touch area
  1386. sldGrad : jsc.createSliderGradient(),
  1387. sldPtrS : document.createElement('div'), // slider pointer spacer
  1388. sldPtrIB : document.createElement('div'), // slider pointer inner border
  1389. sldPtrMB : document.createElement('div'), // slider pointer middle border
  1390. sldPtrOB : document.createElement('div'), // slider pointer outer border
  1391. btn : document.createElement('div'),
  1392. btnT : document.createElement('span') // text
  1393. };
  1394.  
  1395. jsc.picker.pad.appendChild(jsc.picker.padPal.elm);
  1396. jsc.picker.padB.appendChild(jsc.picker.pad);
  1397. jsc.picker.cross.appendChild(jsc.picker.crossBY);
  1398. jsc.picker.cross.appendChild(jsc.picker.crossBX);
  1399. jsc.picker.cross.appendChild(jsc.picker.crossLY);
  1400. jsc.picker.cross.appendChild(jsc.picker.crossLX);
  1401. jsc.picker.padB.appendChild(jsc.picker.cross);
  1402. jsc.picker.box.appendChild(jsc.picker.padB);
  1403. jsc.picker.box.appendChild(jsc.picker.padM);
  1404.  
  1405. jsc.picker.sld.appendChild(jsc.picker.sldGrad.elm);
  1406. jsc.picker.sldB.appendChild(jsc.picker.sld);
  1407. jsc.picker.sldB.appendChild(jsc.picker.sldPtrOB);
  1408. jsc.picker.sldPtrOB.appendChild(jsc.picker.sldPtrMB);
  1409. jsc.picker.sldPtrMB.appendChild(jsc.picker.sldPtrIB);
  1410. jsc.picker.sldPtrIB.appendChild(jsc.picker.sldPtrS);
  1411. jsc.picker.box.appendChild(jsc.picker.sldB);
  1412. jsc.picker.box.appendChild(jsc.picker.sldM);
  1413.  
  1414. jsc.picker.btn.appendChild(jsc.picker.btnT);
  1415. jsc.picker.box.appendChild(jsc.picker.btn);
  1416.  
  1417. jsc.picker.boxB.appendChild(jsc.picker.box);
  1418. jsc.picker.wrap.appendChild(jsc.picker.boxS);
  1419. jsc.picker.wrap.appendChild(jsc.picker.boxB);
  1420. }
  1421.  
  1422. var p = jsc.picker;
  1423.  
  1424. var displaySlider = !!jsc.getSliderComponent(THIS);
  1425. var dims = jsc.getPickerDims(THIS);
  1426. var crossOuterSize = (2 * THIS.pointerBorderWidth + THIS.pointerThickness + 2 * THIS.crossSize);
  1427. var padToSliderPadding = jsc.getPadToSliderPadding(THIS);
  1428. var borderRadius = Math.min(
  1429. THIS.borderRadius,
  1430. Math.round(THIS.padding * Math.PI)); // px
  1431. var padCursor = 'crosshair';
  1432.  
  1433. // wrap
  1434. p.wrap.style.clear = 'both';
  1435. p.wrap.style.width = (dims[0] + 2 * THIS.borderWidth) + 'px';
  1436. p.wrap.style.height = (dims[1] + 2 * THIS.borderWidth) + 'px';
  1437. p.wrap.style.zIndex = THIS.zIndex;
  1438.  
  1439. // picker
  1440. p.box.style.width = dims[0] + 'px';
  1441. p.box.style.height = dims[1] + 'px';
  1442.  
  1443. p.boxS.style.position = 'absolute';
  1444. p.boxS.style.left = '0';
  1445. p.boxS.style.top = '0';
  1446. p.boxS.style.width = '100%';
  1447. p.boxS.style.height = '100%';
  1448. jsc.setBorderRadius(p.boxS, borderRadius + 'px');
  1449.  
  1450. // picker border
  1451. p.boxB.style.position = 'relative';
  1452. p.boxB.style.border = THIS.borderWidth + 'px solid';
  1453. p.boxB.style.borderColor = THIS.borderColor;
  1454. p.boxB.style.background = THIS.backgroundColor;
  1455. jsc.setBorderRadius(p.boxB, borderRadius + 'px');
  1456.  
  1457. // IE hack:
  1458. // If the element is transparent, IE will trigger the event on the elements under it,
  1459. // e.g. on Canvas or on elements with border
  1460. p.padM.style.background =
  1461. p.sldM.style.background =
  1462. '#FFF';
  1463. jsc.setStyle(p.padM, 'opacity', '0');
  1464. jsc.setStyle(p.sldM, 'opacity', '0');
  1465.  
  1466. // pad
  1467. p.pad.style.position = 'relative';
  1468. p.pad.style.width = THIS.width + 'px';
  1469. p.pad.style.height = THIS.height + 'px';
  1470.  
  1471. // pad palettes (HSV and HVS)
  1472. p.padPal.draw(THIS.width, THIS.height, jsc.getPadYComponent(THIS));
  1473.  
  1474. // pad border
  1475. p.padB.style.position = 'absolute';
  1476. p.padB.style.left = THIS.padding + 'px';
  1477. p.padB.style.top = THIS.padding + 'px';
  1478. p.padB.style.border = THIS.insetWidth + 'px solid';
  1479. p.padB.style.borderColor = THIS.insetColor;
  1480.  
  1481. // pad mouse area
  1482. p.padM._jscInstance = THIS;
  1483. p.padM._jscControlName = 'pad';
  1484. p.padM.style.position = 'absolute';
  1485. p.padM.style.left = '0';
  1486. p.padM.style.top = '0';
  1487. p.padM.style.width = (THIS.padding + 2 * THIS.insetWidth + THIS.width + padToSliderPadding / 2) + 'px';
  1488. p.padM.style.height = dims[1] + 'px';
  1489. p.padM.style.cursor = padCursor;
  1490.  
  1491. // pad cross
  1492. p.cross.style.position = 'absolute';
  1493. p.cross.style.left =
  1494. p.cross.style.top =
  1495. '0';
  1496. p.cross.style.width =
  1497. p.cross.style.height =
  1498. crossOuterSize + 'px';
  1499.  
  1500. // pad cross border Y and X
  1501. p.crossBY.style.position =
  1502. p.crossBX.style.position =
  1503. 'absolute';
  1504. p.crossBY.style.background =
  1505. p.crossBX.style.background =
  1506. THIS.pointerBorderColor;
  1507. p.crossBY.style.width =
  1508. p.crossBX.style.height =
  1509. (2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';
  1510. p.crossBY.style.height =
  1511. p.crossBX.style.width =
  1512. crossOuterSize + 'px';
  1513. p.crossBY.style.left =
  1514. p.crossBX.style.top =
  1515. (Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2) - THIS.pointerBorderWidth) + 'px';
  1516. p.crossBY.style.top =
  1517. p.crossBX.style.left =
  1518. '0';
  1519.  
  1520. // pad cross line Y and X
  1521. p.crossLY.style.position =
  1522. p.crossLX.style.position =
  1523. 'absolute';
  1524. p.crossLY.style.background =
  1525. p.crossLX.style.background =
  1526. THIS.pointerColor;
  1527. p.crossLY.style.height =
  1528. p.crossLX.style.width =
  1529. (crossOuterSize - 2 * THIS.pointerBorderWidth) + 'px';
  1530. p.crossLY.style.width =
  1531. p.crossLX.style.height =
  1532. THIS.pointerThickness + 'px';
  1533. p.crossLY.style.left =
  1534. p.crossLX.style.top =
  1535. (Math.floor(crossOuterSize / 2) - Math.floor(THIS.pointerThickness / 2)) + 'px';
  1536. p.crossLY.style.top =
  1537. p.crossLX.style.left =
  1538. THIS.pointerBorderWidth + 'px';
  1539.  
  1540. // slider
  1541. p.sld.style.overflow = 'hidden';
  1542. p.sld.style.width = THIS.sliderSize + 'px';
  1543. p.sld.style.height = THIS.height + 'px';
  1544.  
  1545. // slider gradient
  1546. p.sldGrad.draw(THIS.sliderSize, THIS.height, '#000', '#000');
  1547.  
  1548. // slider border
  1549. p.sldB.style.display = displaySlider ? 'block' : 'none';
  1550. p.sldB.style.position = 'absolute';
  1551. p.sldB.style.right = THIS.padding + 'px';
  1552. p.sldB.style.top = THIS.padding + 'px';
  1553. p.sldB.style.border = THIS.insetWidth + 'px solid';
  1554. p.sldB.style.borderColor = THIS.insetColor;
  1555.  
  1556. // slider mouse area
  1557. p.sldM._jscInstance = THIS;
  1558. p.sldM._jscControlName = 'sld';
  1559. p.sldM.style.display = displaySlider ? 'block' : 'none';
  1560. p.sldM.style.position = 'absolute';
  1561. p.sldM.style.right = '0';
  1562. p.sldM.style.top = '0';
  1563. p.sldM.style.width = (THIS.sliderSize + padToSliderPadding / 2 + THIS.padding + 2 * THIS.insetWidth) + 'px';
  1564. p.sldM.style.height = dims[1] + 'px';
  1565. p.sldM.style.cursor = 'default';
  1566.  
  1567. // slider pointer inner and outer border
  1568. p.sldPtrIB.style.border =
  1569. p.sldPtrOB.style.border =
  1570. THIS.pointerBorderWidth + 'px solid ' + THIS.pointerBorderColor;
  1571.  
  1572. // slider pointer outer border
  1573. p.sldPtrOB.style.position = 'absolute';
  1574. p.sldPtrOB.style.left = -(2 * THIS.pointerBorderWidth + THIS.pointerThickness) + 'px';
  1575. p.sldPtrOB.style.top = '0';
  1576.  
  1577. // slider pointer middle border
  1578. p.sldPtrMB.style.border = THIS.pointerThickness + 'px solid ' + THIS.pointerColor;
  1579.  
  1580. // slider pointer spacer
  1581. p.sldPtrS.style.width = THIS.sliderSize + 'px';
  1582. p.sldPtrS.style.height = sliderPtrSpace + 'px';
  1583.  
  1584. // the Close button
  1585. function setBtnBorder () {
  1586. var insetColors = THIS.insetColor.split(/\s+/);
  1587. var outsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
  1588. p.btn.style.borderColor = outsetColor;
  1589. }
  1590. p.btn.style.display = THIS.closable ? 'block' : 'none';
  1591. p.btn.style.position = 'absolute';
  1592. p.btn.style.left = THIS.padding + 'px';
  1593. p.btn.style.bottom = THIS.padding + 'px';
  1594. p.btn.style.padding = '0 15px';
  1595. p.btn.style.height = THIS.buttonHeight + 'px';
  1596. p.btn.style.border = THIS.insetWidth + 'px solid';
  1597. setBtnBorder();
  1598. p.btn.style.color = THIS.buttonColor;
  1599. p.btn.style.font = '12px sans-serif';
  1600. p.btn.style.textAlign = 'center';
  1601. try {
  1602. p.btn.style.cursor = 'pointer';
  1603. } catch(eOldIE) {
  1604. p.btn.style.cursor = 'hand';
  1605. }
  1606. p.btn.onmousedown = function () {
  1607. THIS.hide();
  1608. };
  1609. p.btnT.style.lineHeight = THIS.buttonHeight + 'px';
  1610. p.btnT.innerHTML = '';
  1611. p.btnT.appendChild(document.createTextNode(THIS.closeText));
  1612.  
  1613. // place pointers
  1614. redrawPad();
  1615. redrawSld();
  1616.  
  1617. // If we are changing the owner without first closing the picker,
  1618. // make sure to first deal with the old owner
  1619. if (jsc.picker.owner && jsc.picker.owner !== THIS) {
  1620. jsc.unsetClass(jsc.picker.owner.targetElement, THIS.activeClass);
  1621. }
  1622.  
  1623. // Set the new picker owner
  1624. jsc.picker.owner = THIS;
  1625.  
  1626. // The redrawPosition() method needs picker.owner to be set, that's why we call it here,
  1627. // after setting the owner
  1628. if (jsc.isElementType(container, 'body')) {
  1629. jsc.redrawPosition();
  1630. } else {
  1631. jsc._drawPosition(THIS, 0, 0, 'relative', false);
  1632. }
  1633.  
  1634. if (p.wrap.parentNode != container) {
  1635. container.appendChild(p.wrap);
  1636. }
  1637.  
  1638. jsc.setClass(THIS.targetElement, THIS.activeClass);
  1639. }
  1640.  
  1641.  
  1642. function redrawPad () {
  1643. // redraw the pad pointer
  1644. switch (jsc.getPadYComponent(THIS)) {
  1645. case 's': var yComponent = 1; break;
  1646. case 'v': var yComponent = 2; break;
  1647. }
  1648. var x = Math.round((THIS.hsv[0] / 360) * (THIS.width - 1));
  1649. var y = Math.round((1 - THIS.hsv[yComponent] / 100) * (THIS.height - 1));
  1650. var crossOuterSize = (2 * THIS.pointerBorderWidth + THIS.pointerThickness + 2 * THIS.crossSize);
  1651. var ofs = -Math.floor(crossOuterSize / 2);
  1652. jsc.picker.cross.style.left = (x + ofs) + 'px';
  1653. jsc.picker.cross.style.top = (y + ofs) + 'px';
  1654.  
  1655. // redraw the slider
  1656. switch (jsc.getSliderComponent(THIS)) {
  1657. case 's':
  1658. var rgb1 = HSV_RGB(THIS.hsv[0], 100, THIS.hsv[2]);
  1659. var rgb2 = HSV_RGB(THIS.hsv[0], 0, THIS.hsv[2]);
  1660. var color1 = 'rgb(' +
  1661. Math.round(rgb1[0]) + ',' +
  1662. Math.round(rgb1[1]) + ',' +
  1663. Math.round(rgb1[2]) + ')';
  1664. var color2 = 'rgb(' +
  1665. Math.round(rgb2[0]) + ',' +
  1666. Math.round(rgb2[1]) + ',' +
  1667. Math.round(rgb2[2]) + ')';
  1668. jsc.picker.sldGrad.draw(THIS.sliderSize, THIS.height, color1, color2);
  1669. break;
  1670. case 'v':
  1671. var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 100);
  1672. var color1 = 'rgb(' +
  1673. Math.round(rgb[0]) + ',' +
  1674. Math.round(rgb[1]) + ',' +
  1675. Math.round(rgb[2]) + ')';
  1676. var color2 = '#000';
  1677. jsc.picker.sldGrad.draw(THIS.sliderSize, THIS.height, color1, color2);
  1678. break;
  1679. }
  1680. }
  1681.  
  1682.  
  1683. function redrawSld () {
  1684. var sldComponent = jsc.getSliderComponent(THIS);
  1685. if (sldComponent) {
  1686. // redraw the slider pointer
  1687. switch (sldComponent) {
  1688. case 's': var yComponent = 1; break;
  1689. case 'v': var yComponent = 2; break;
  1690. }
  1691. var y = Math.round((1 - THIS.hsv[yComponent] / 100) * (THIS.height - 1));
  1692. jsc.picker.sldPtrOB.style.top = (y - (2 * THIS.pointerBorderWidth + THIS.pointerThickness) - Math.floor(sliderPtrSpace / 2)) + 'px';
  1693. }
  1694. }
  1695.  
  1696.  
  1697. function isPickerOwner () {
  1698. return jsc.picker && jsc.picker.owner === THIS;
  1699. }
  1700.  
  1701.  
  1702. function blurValue () {
  1703. THIS.importColor();
  1704. }
  1705.  
  1706.  
  1707. // Find the target element
  1708. if (typeof targetElement === 'string') {
  1709. var id = targetElement;
  1710. var elm = document.getElementById(id);
  1711. if (elm) {
  1712. this.targetElement = elm;
  1713. } else {
  1714. jsc.warn('Could not find target element with ID \'' + id + '\'');
  1715. }
  1716. } else if (targetElement) {
  1717. this.targetElement = targetElement;
  1718. } else {
  1719. jsc.warn('Invalid target element: \'' + targetElement + '\'');
  1720. }
  1721.  
  1722. if (this.targetElement._jscLinkedInstance) {
  1723. jsc.warn('Cannot link jscolor twice to the same element. Skipping.');
  1724. return;
  1725. }
  1726. this.targetElement._jscLinkedInstance = this;
  1727.  
  1728. // Find the value element
  1729. this.valueElement = jsc.fetchElement(this.valueElement);
  1730. // Find the style element
  1731. this.styleElement = jsc.fetchElement(this.styleElement);
  1732.  
  1733. var THIS = this;
  1734. var container =
  1735. this.container ?
  1736. jsc.fetchElement(this.container) :
  1737. document.getElementsByTagName('body')[0];
  1738. var sliderPtrSpace = 3; // px
  1739.  
  1740. // For BUTTON elements it's important to stop them from sending the form when clicked
  1741. // (e.g. in Safari)
  1742. if (jsc.isElementType(this.targetElement, 'button')) {
  1743. if (this.targetElement.onclick) {
  1744. var origCallback = this.targetElement.onclick;
  1745. this.targetElement.onclick = function (evt) {
  1746. origCallback.call(this, evt);
  1747. return false;
  1748. };
  1749. } else {
  1750. this.targetElement.onclick = function () { return false; };
  1751. }
  1752. }
  1753.  
  1754. /*
  1755. var elm = this.targetElement;
  1756. do {
  1757. // If the target element or one of its offsetParents has fixed position,
  1758. // then use fixed positioning instead
  1759. //
  1760. // Note: In Firefox, getComputedStyle returns null in a hidden iframe,
  1761. // that's why we need to check if the returned style object is non-empty
  1762. var currStyle = jsc.getStyle(elm);
  1763. if (currStyle && currStyle.position.toLowerCase() === 'fixed') {
  1764. this.fixed = true;
  1765. }
  1766.  
  1767. if (elm !== this.targetElement) {
  1768. // attach onParentScroll so that we can recompute the picker position
  1769. // when one of the offsetParents is scrolled
  1770. if (!elm._jscEventsAttached) {
  1771. jsc.attachEvent(elm, 'scroll', jsc.onParentScroll);
  1772. elm._jscEventsAttached = true;
  1773. }
  1774. }
  1775. } while ((elm = elm.offsetParent) && !jsc.isElementType(elm, 'body'));
  1776. */
  1777.  
  1778. // valueElement
  1779. if (this.valueElement) {
  1780. if (jsc.isElementType(this.valueElement, 'input')) {
  1781. var updateField = function () {
  1782. THIS.fromString(THIS.valueElement.value, jsc.leaveValue);
  1783. jsc.dispatchFineChange(THIS);
  1784. };
  1785. jsc.attachEvent(this.valueElement, 'keyup', updateField);
  1786. jsc.attachEvent(this.valueElement, 'input', updateField);
  1787. jsc.attachEvent(this.valueElement, 'blur', blurValue);
  1788. this.valueElement.setAttribute('autocomplete', 'off');
  1789. }
  1790. }
  1791.  
  1792. // styleElement
  1793. if (this.styleElement) {
  1794. this.styleElement._jscOrigStyle = {
  1795. backgroundImage : this.styleElement.style.backgroundImage,
  1796. backgroundColor : this.styleElement.style.backgroundColor,
  1797. color : this.styleElement.style.color
  1798. };
  1799. }
  1800.  
  1801. if (this.value) {
  1802. // Try to set the color from the .value option and if unsuccessful,
  1803. // export the current color
  1804. this.fromString(this.value) || this.exportColor();
  1805. } else {
  1806. this.importColor();
  1807. }
  1808. }
  1809.  
  1810. };
  1811.  
  1812.  
  1813. //================================
  1814. // Public properties and methods
  1815. //================================
  1816.  
  1817.  
  1818. // By default, search for all elements with class="jscolor" and install a color picker on them.
  1819. //
  1820. // You can change what class name will be looked for by setting the property jscolor.lookupClass
  1821. // anywhere in your HTML document. To completely disable the automatic lookup, set it to null.
  1822. //
  1823. jsc.jscolor.lookupClass = 'jscolor';
  1824.  
  1825.  
  1826. jsc.jscolor.installByClassName = function (className) {
  1827. var inputElms = document.getElementsByTagName('input');
  1828. var buttonElms = document.getElementsByTagName('button');
  1829.  
  1830. jsc.tryInstallOnElements(inputElms, className);
  1831. jsc.tryInstallOnElements(buttonElms, className);
  1832. };
  1833.  
  1834.  
  1835. jsc.register();
  1836.  
  1837.  
  1838. return jsc.jscolor;
  1839.  
  1840.  
  1841. })(); }