TSLibrary - jsColorGM

jsColor

此脚本不应直接安装,它是供其他脚本使用的外部库。如果你需要使用该库,请在脚本元属性加入:// @require https://update.cn-greasyfork.org/scripts/19969/127670/TSLibrary%20-%20jsColorGM.js

  1. // ==UserScript=="
  2. // @name TSLibrary - jsColorGM
  3. // @author TimidScript
  4. // @homepageURL https://openuserjs.org/users/TimidScript
  5. // @Description Resource Script based on jsColor. Used by Schmoogle and other scripts
  6. // @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
  7. // @exclude *
  8. // ==/UserScript==
  9.  
  10. /**
  11. * jscolor, JavaScript Color Picker
  12. *
  13. * @version 1.4.1
  14. * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
  15. * @author Jan Odvarko, http://odvarko.cz
  16. * @created 2008-06-15
  17. * @updated 2013-04-08
  18. * @link http://jscolor.com
  19. */
  20.  
  21. var arrowgif = "data:image/gif;base64,R0lGODlhBwALAKECAAAAAP///6g8eKg8eCH5BAEKAAIALAAAAAAHAAsAAAITTIQYcLnsgGxvijrxqdQq6DRJAQA7";
  22. var crossgif = "data:image/gif;base64,R0lGODlhDwAPAKEBAAAAAP///////////yH5BAEKAAIALAAAAAAPAA8AAAIklB8Qx53b4otSUWcvyiz4/4AeQJbmKY4p1HHapBlwPL/uVRsFADs=";
  23. var hspng = "data:image/png;base64,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";
  24. var hvpng = "data:image/png;base64,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";
  25.  
  26.  
  27. var jscolor = {
  28. bindClass: 'jscolorGM', // class name
  29. binding: true, // automatic binding via <input class="...">
  30. fixed: false, //Attached to fixed element
  31.  
  32. install: function ()
  33. {
  34. jscolor.addEvent(window, 'load', jscolor.init);
  35. },
  36.  
  37. init: function ()
  38. {
  39. if (jscolor.binding)
  40. {
  41. jscolor.bind();
  42. }
  43. },
  44.  
  45. bind: function ()
  46. {
  47. var matchClass = new RegExp('(^|\\s)(' + jscolor.bindClass + ')\\s*(\\{[^}]*\\})?', 'i');
  48. var e = document.getElementsByTagName('input');
  49. for (var i = 0; i < e.length; i += 1)
  50. {
  51. var m;
  52. if (!e[i].color && e[i].className && (m = e[i].className.match(matchClass)))
  53. {
  54. var prop = {};
  55. if (m[3])
  56. {
  57. try
  58. {
  59. prop = (new Function('return (' + m[3] + ')'))();
  60. } catch (eInvalidProp) { }
  61. }
  62. e[i].color = new jscolor.color(e[i], prop);
  63. }
  64. }
  65. },
  66.  
  67. refresh: function ()
  68. {
  69. var els = document.getElementsByClassName("jscolorGM");
  70. for (var i = 0; i < els.length; i++) els[i].style.backgroundColor = "#" + els[i].value;
  71. },
  72.  
  73. images: {
  74. pad: [181, 101],
  75. sld: [16, 101],
  76. cross: [15, 15],
  77. arrow: [7, 11]
  78. },
  79.  
  80.  
  81. imgRequire: {},
  82. imgLoaded: {},
  83.  
  84.  
  85. requireImage: function (filename)
  86. {
  87. jscolor.imgRequire[filename] = true;
  88. },
  89.  
  90. fetchElement: function (mixed)
  91. {
  92. return typeof mixed === 'string' ? document.getElementById(mixed) : mixed;
  93. },
  94.  
  95.  
  96. addEvent: function (el, evnt, func)
  97. {
  98. if (el.addEventListener)
  99. {
  100. el.addEventListener(evnt, func, false);
  101. } else if (el.attachEvent)
  102. {
  103. el.attachEvent('on' + evnt, func);
  104. }
  105. },
  106.  
  107.  
  108. fireEvent: function (el, evnt)
  109. {
  110. if (!el)
  111. {
  112. return;
  113. }
  114. if (document.createEvent)
  115. {
  116. var ev = document.createEvent('HTMLEvents');
  117. ev.initEvent(evnt, true, true);
  118. el.dispatchEvent(ev);
  119. } else if (document.createEventObject)
  120. {
  121. var ev = document.createEventObject();
  122. el.fireEvent('on' + evnt, ev);
  123. } else if (el['on' + evnt])
  124. { // alternatively use the traditional event model (IE5)
  125. el['on' + evnt]();
  126. }
  127. },
  128.  
  129.  
  130. getElementPos: function (e)
  131. {
  132. var e1 = e, e2 = e;
  133. var x = 0, y = 0;
  134. if (e1.offsetParent)
  135. {
  136. do
  137. {
  138. x += e1.offsetLeft;
  139. y += e1.offsetTop;
  140. } while (e1 = e1.offsetParent);
  141. }
  142. while ((e2 = e2.parentNode) && e2.nodeName.toUpperCase() !== 'BODY')
  143. {
  144. x -= e2.scrollLeft;
  145. y -= e2.scrollTop;
  146. }
  147. return [x, y];
  148. },
  149.  
  150.  
  151. getElementSize: function (e)
  152. {
  153. return [e.offsetWidth, e.offsetHeight];
  154. },
  155.  
  156.  
  157. getRelMousePos: function (e)
  158. {
  159. var x = 0, y = 0;
  160. if (!e) { e = window.event; }
  161. if (typeof e.offsetX === 'number')
  162. {
  163. x = e.offsetX;
  164. y = e.offsetY;
  165. } else if (typeof e.layerX === 'number')
  166. {
  167. x = e.layerX;
  168. y = e.layerY;
  169. }
  170. return { x: x, y: y };
  171. },
  172.  
  173.  
  174. getViewPos: function ()
  175. {
  176. if (typeof window.pageYOffset === 'number')
  177. {
  178. return [window.pageXOffset, window.pageYOffset];
  179. } else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
  180. {
  181. return [document.body.scrollLeft, document.body.scrollTop];
  182. } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
  183. {
  184. return [document.documentElement.scrollLeft, document.documentElement.scrollTop];
  185. } else
  186. {
  187. return [0, 0];
  188. }
  189. },
  190.  
  191.  
  192. getViewSize: function ()
  193. {
  194. if (typeof window.innerWidth === 'number')
  195. {
  196. return [window.innerWidth, window.innerHeight];
  197. } else if (document.body && (document.body.clientWidth || document.body.clientHeight))
  198. {
  199. return [document.body.clientWidth, document.body.clientHeight];
  200. } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight))
  201. {
  202. return [document.documentElement.clientWidth, document.documentElement.clientHeight];
  203. } else
  204. {
  205. return [0, 0];
  206. }
  207. },
  208.  
  209.  
  210. URI: function (uri)
  211. { // See RFC3986
  212. this.scheme = null;
  213. this.authority = null;
  214. this.path = '';
  215. this.query = null;
  216. this.fragment = null;
  217.  
  218. this.parse = function (uri)
  219. {
  220. var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/);
  221. this.scheme = m[3] ? m[2] : null;
  222. this.authority = m[5] ? m[6] : null;
  223. this.path = m[7];
  224. this.query = m[9] ? m[10] : null;
  225. this.fragment = m[12] ? m[13] : null;
  226. return this;
  227. };
  228.  
  229. this.toString = function ()
  230. {
  231. var result = '';
  232. if (this.scheme !== null) { result = result + this.scheme + ':'; }
  233. if (this.authority !== null) { result = result + '//' + this.authority; }
  234. if (this.path !== null) { result = result + this.path; }
  235. if (this.query !== null) { result = result + '?' + this.query; }
  236. if (this.fragment !== null) { result = result + '#' + this.fragment; }
  237. return result;
  238. };
  239.  
  240. this.toAbsolute = function (base)
  241. {
  242. var base = new jscolor.URI(base);
  243. var r = this;
  244. var t = new jscolor.URI;
  245.  
  246. if (base.scheme === null) { return false; }
  247.  
  248. if (r.scheme !== null && r.scheme.toLowerCase() === base.scheme.toLowerCase())
  249. {
  250. r.scheme = null;
  251. }
  252.  
  253. if (r.scheme !== null)
  254. {
  255. t.scheme = r.scheme;
  256. t.authority = r.authority;
  257. t.path = removeDotSegments(r.path);
  258. t.query = r.query;
  259. } else
  260. {
  261. if (r.authority !== null)
  262. {
  263. t.authority = r.authority;
  264. t.path = removeDotSegments(r.path);
  265. t.query = r.query;
  266. } else
  267. {
  268. if (r.path === '')
  269. {
  270. t.path = base.path;
  271. if (r.query !== null)
  272. {
  273. t.query = r.query;
  274. } else
  275. {
  276. t.query = base.query;
  277. }
  278. } else
  279. {
  280. if (r.path.substr(0, 1) === '/')
  281. {
  282. t.path = removeDotSegments(r.path);
  283. } else
  284. {
  285. if (base.authority !== null && base.path === '')
  286. {
  287. t.path = '/' + r.path;
  288. } else
  289. {
  290. t.path = base.path.replace(/[^\/]+$/, '') + r.path;
  291. }
  292. t.path = removeDotSegments(t.path);
  293. }
  294. t.query = r.query;
  295. }
  296. t.authority = base.authority;
  297. }
  298. t.scheme = base.scheme;
  299. }
  300. t.fragment = r.fragment;
  301.  
  302. return t;
  303. };
  304.  
  305. function removeDotSegments(path)
  306. {
  307. var out = '';
  308. while (path)
  309. {
  310. if (path.substr(0, 3) === '../' || path.substr(0, 2) === './')
  311. {
  312. path = path.replace(/^\.+/, '').substr(1);
  313. } else if (path.substr(0, 3) === '/./' || path === '/.')
  314. {
  315. path = '/' + path.substr(3);
  316. } else if (path.substr(0, 4) === '/../' || path === '/..')
  317. {
  318. path = '/' + path.substr(4);
  319. out = out.replace(/\/?[^\/]*$/, '');
  320. } else if (path === '.' || path === '..')
  321. {
  322. path = '';
  323. } else
  324. {
  325. var rm = path.match(/^\/?[^\/]*/)[0];
  326. path = path.substr(rm.length);
  327. out = out + rm;
  328. }
  329. }
  330. return out;
  331. }
  332.  
  333. if (uri)
  334. {
  335. this.parse(uri);
  336. }
  337. },
  338.  
  339.  
  340. //
  341. // Usage example:
  342. // var myColor = new jscolor.color(myInputElement)
  343. //
  344.  
  345. color: function (target, prop)
  346. {
  347. this.required = true; // refuse empty values?
  348. this.adjust = true; // adjust value to uniform notation?
  349. this.hash = false; // prefix color with # symbol?
  350. this.caps = true; // uppercase?
  351. this.slider = true; // show the value/saturation slider?
  352. this.valueElement = target; // value holder
  353. this.styleElement = target; // where to reflect current color
  354. this.onImmediateChange = null; // onchange callback (can be either string or function)
  355. this.hsv = [0, 0, 1]; // read-only 0-6, 0-1, 0-1
  356. this.rgb = [1, 1, 1]; // read-only 0-1, 0-1, 0-1
  357. this.minH = 0; // read-only 0-6
  358. this.maxH = 6; // read-only 0-6
  359. this.minS = 0; // read-only 0-1
  360. this.maxS = 1; // read-only 0-1
  361. this.minV = 0; // read-only 0-1
  362. this.maxV = 1; // read-only 0-1
  363.  
  364. this.pickerOnfocus = true; // display picker on focus?
  365. this.pickerMode = 'HSV'; // HSV | HVS
  366. this.pickerPosition = 'bottom'; // left | right | top | bottom
  367. this.pickerSmartPosition = true; // automatically adjust picker position when necessary
  368. this.pickerButtonHeight = 20; // px
  369. this.pickerClosable = false;
  370. this.pickerCloseText = 'Close';
  371. this.pickerButtonColor = 'ButtonText'; // px
  372. this.pickerFace = 10; // px
  373. this.pickerFaceColor = 'ThreeDFace'; // CSS color
  374. this.pickerBorder = 1; // px
  375. this.pickerBorderColor = 'ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight'; // CSS color
  376. this.pickerInset = 1; // px
  377. this.pickerInsetColor = 'ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow'; // CSS color
  378. this.pickerZIndex = 10000;
  379.  
  380.  
  381. for (var p in prop)
  382. {
  383. if (prop.hasOwnProperty(p))
  384. {
  385. this[p] = prop[p];
  386. }
  387. }
  388.  
  389.  
  390. this.hidePicker = function ()
  391. {
  392. if (isPickerOwner())
  393. {
  394. removePicker();
  395. }
  396. };
  397.  
  398.  
  399. this.showPicker = function ()
  400. {
  401. if (!isPickerOwner())
  402. {
  403. var tp = jscolor.getElementPos(target); // target pos
  404. var ts = jscolor.getElementSize(target); // target size
  405. var vp = jscolor.getViewPos(); // view pos
  406. var vs = jscolor.getViewSize(); // view size
  407. var ps = getPickerDims(this); // picker size
  408. var a, b, c;
  409. switch (this.pickerPosition.toLowerCase())
  410. {
  411. case 'left': a = 1; b = 0; c = -1; break;
  412. case 'right': a = 1; b = 0; c = 1; break;
  413. case 'top': a = 0; b = 1; c = -1; break;
  414. default: a = 0; b = 1; c = 1; break;
  415. }
  416. var l = (ts[b] + ps[b]) / 2;
  417.  
  418. // picker pos
  419. if (!this.pickerSmartPosition)
  420. {
  421. var pp = [
  422. tp[a],
  423. tp[b] + ts[b] - l + l * c
  424. ];
  425. } else
  426. {
  427. var pp = [
  428. -vp[a] + tp[a] + ps[a] > vs[a] ?
  429. (-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]) :
  430. tp[a],
  431. -vp[b] + tp[b] + ts[b] + ps[b] - l + l * c > vs[b] ?
  432. (-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) :
  433. (tp[b] + ts[b] - l + l * c >= 0 ? tp[b] + ts[b] - l + l * c : tp[b] + ts[b] - l - l * c)
  434. ];
  435. }
  436. drawPicker(pp[a], pp[b]);
  437. }
  438. };
  439.  
  440.  
  441. this.importColor = function ()
  442. {
  443. if (!valueElement)
  444. {
  445. this.exportColor();
  446. } else
  447. {
  448. if (!this.adjust)
  449. {
  450. if (!this.fromString(valueElement.value, leaveValue))
  451. {
  452. styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
  453. styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
  454. styleElement.style.color = styleElement.jscStyle.color;
  455. this.exportColor(leaveValue | leaveStyle);
  456. }
  457. } else if (!this.required && /^\s*$/.test(valueElement.value))
  458. {
  459. valueElement.value = '';
  460. styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
  461. styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
  462. styleElement.style.color = styleElement.jscStyle.color;
  463. this.exportColor(leaveValue | leaveStyle);
  464. } else if (this.fromString(valueElement.value))
  465. {
  466. // OK
  467. } else
  468. {
  469. this.exportColor();
  470. }
  471. }
  472. };
  473.  
  474.  
  475. this.exportColor = function (flags)
  476. {
  477. if (!(flags & leaveValue) && valueElement)
  478. {
  479. var value = this.toString();
  480. if (this.caps) { value = value.toUpperCase(); }
  481. if (this.hash) { value = '#' + value; }
  482. valueElement.value = value;
  483. }
  484. if (!(flags & leaveStyle) && styleElement)
  485. {
  486. styleElement.style.backgroundImage = "none";
  487. styleElement.style.backgroundColor =
  488. '#' + this.toString();
  489. styleElement.style.color =
  490. 0.213 * this.rgb[0] +
  491. 0.715 * this.rgb[1] +
  492. 0.072 * this.rgb[2]
  493. < 0.5 ? '#FFF' : '#000';
  494. }
  495. if (!(flags & leavePad) && isPickerOwner())
  496. {
  497. redrawPad();
  498. }
  499. if (!(flags & leaveSld) && isPickerOwner())
  500. {
  501. redrawSld();
  502. }
  503. };
  504.  
  505.  
  506. this.fromHSV = function (h, s, v, flags)
  507. { // null = don't change
  508. if (h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); }
  509. if (s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); }
  510. if (v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); }
  511.  
  512. this.rgb = HSV_RGB(
  513. h === null ? this.hsv[0] : (this.hsv[0] = h),
  514. s === null ? this.hsv[1] : (this.hsv[1] = s),
  515. v === null ? this.hsv[2] : (this.hsv[2] = v)
  516. );
  517.  
  518. this.exportColor(flags);
  519. };
  520.  
  521.  
  522. this.fromRGB = function (r, g, b, flags)
  523. { // null = don't change
  524. if (r !== null) { r = Math.max(0.0, Math.min(1.0, r)); }
  525. if (g !== null) { g = Math.max(0.0, Math.min(1.0, g)); }
  526. if (b !== null) { b = Math.max(0.0, Math.min(1.0, b)); }
  527.  
  528. var hsv = RGB_HSV(
  529. r === null ? this.rgb[0] : r,
  530. g === null ? this.rgb[1] : g,
  531. b === null ? this.rgb[2] : b
  532. );
  533. if (hsv[0] !== null)
  534. {
  535. this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0]));
  536. }
  537. if (hsv[2] !== 0)
  538. {
  539. this.hsv[1] = hsv[1] === null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1]));
  540. }
  541. this.hsv[2] = hsv[2] === null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2]));
  542.  
  543. // update RGB according to final HSV, as some values might be trimmed
  544. var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
  545. this.rgb[0] = rgb[0];
  546. this.rgb[1] = rgb[1];
  547. this.rgb[2] = rgb[2];
  548.  
  549. this.exportColor(flags);
  550. };
  551.  
  552.  
  553. this.fromString = function (hex, flags)
  554. {
  555. var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
  556. if (!m)
  557. {
  558. return false;
  559. } else
  560. {
  561. if (m[1].length === 6)
  562. { // 6-char notation
  563. this.fromRGB(
  564. parseInt(m[1].substr(0, 2), 16) / 255,
  565. parseInt(m[1].substr(2, 2), 16) / 255,
  566. parseInt(m[1].substr(4, 2), 16) / 255,
  567. flags
  568. );
  569. } else
  570. { // 3-char notation
  571. this.fromRGB(
  572. parseInt(m[1].charAt(0) + m[1].charAt(0), 16) / 255,
  573. parseInt(m[1].charAt(1) + m[1].charAt(1), 16) / 255,
  574. parseInt(m[1].charAt(2) + m[1].charAt(2), 16) / 255,
  575. flags
  576. );
  577. }
  578. return true;
  579. }
  580. };
  581.  
  582.  
  583. this.toString = function ()
  584. {
  585. return (
  586. (0x100 | Math.round(255 * this.rgb[0])).toString(16).substr(1) +
  587. (0x100 | Math.round(255 * this.rgb[1])).toString(16).substr(1) +
  588. (0x100 | Math.round(255 * this.rgb[2])).toString(16).substr(1)
  589. );
  590. };
  591.  
  592.  
  593. function RGB_HSV(r, g, b)
  594. {
  595. var n = Math.min(Math.min(r, g), b);
  596. var v = Math.max(Math.max(r, g), b);
  597. var m = v - n;
  598. if (m === 0) { return [null, 0, v]; }
  599. var h = r === n ? 3 + (b - g) / m : (g === n ? 5 + (r - b) / m : 1 + (g - r) / m);
  600. return [h === 6 ? 0 : h, m / v, v];
  601. }
  602.  
  603.  
  604. function HSV_RGB(h, s, v)
  605. {
  606. if (h === null) { return [v, v, v]; }
  607. var i = Math.floor(h);
  608. var f = i % 2 ? h - i : 1 - (h - i);
  609. var m = v * (1 - s);
  610. var n = v * (1 - s * f);
  611. switch (i)
  612. {
  613. case 6:
  614. case 0: return [v, n, m];
  615. case 1: return [n, v, m];
  616. case 2: return [m, v, n];
  617. case 3: return [m, n, v];
  618. case 4: return [n, m, v];
  619. case 5: return [v, m, n];
  620. }
  621. }
  622.  
  623.  
  624. function removePicker()
  625. {
  626. delete jscolor.picker.owner;
  627. document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
  628. }
  629.  
  630.  
  631. function drawPicker(x, y)
  632. {
  633. if (!jscolor.picker)
  634. {
  635. jscolor.picker = {
  636. box: document.createElement('div'),
  637. boxB: document.createElement('div'),
  638. pad: document.createElement('div'),
  639. padB: document.createElement('div'),
  640. padM: document.createElement('div'),
  641. sld: document.createElement('div'),
  642. sldB: document.createElement('div'),
  643. sldM: document.createElement('div'),
  644. btn: document.createElement('div'),
  645. btnS: document.createElement('span'),
  646. btnT: document.createTextNode(THIS.pickerCloseText)
  647. };
  648. for (var i = 0, segSize = 4; i < jscolor.images.sld[1]; i += segSize)
  649. {
  650. var seg = document.createElement('div');
  651. seg.style.height = segSize + 'px';
  652. seg.style.fontSize = '1px';
  653. seg.style.lineHeight = '0';
  654. jscolor.picker.sld.appendChild(seg);
  655. }
  656. jscolor.picker.sldB.appendChild(jscolor.picker.sld);
  657. jscolor.picker.box.appendChild(jscolor.picker.sldB);
  658. jscolor.picker.box.appendChild(jscolor.picker.sldM);
  659. jscolor.picker.padB.appendChild(jscolor.picker.pad);
  660. jscolor.picker.box.appendChild(jscolor.picker.padB);
  661. jscolor.picker.box.appendChild(jscolor.picker.padM);
  662. jscolor.picker.btnS.appendChild(jscolor.picker.btnT);
  663. jscolor.picker.btn.appendChild(jscolor.picker.btnS);
  664. jscolor.picker.box.appendChild(jscolor.picker.btn);
  665. jscolor.picker.boxB.appendChild(jscolor.picker.box);
  666. }
  667.  
  668. var p = jscolor.picker;
  669.  
  670. // controls interaction
  671. p.box.onmouseup =
  672. p.box.onmouseout = function () { target.focus(); };
  673. p.box.onmousedown = function () { abortBlur = true; };
  674. p.box.onmousemove = function (e)
  675. {
  676. if (holdPad || holdSld)
  677. {
  678. holdPad && setPad(e);
  679. holdSld && setSld(e);
  680. if (document.selection)
  681. {
  682. document.selection.empty();
  683. } else if (window.getSelection)
  684. {
  685. window.getSelection().removeAllRanges();
  686. }
  687. dispatchImmediateChange();
  688. }
  689. };
  690. if ('ontouchstart' in window)
  691. { // if touch device
  692. p.box.addEventListener('touchmove', function (e)
  693. {
  694. var event = {
  695. 'offsetX': e.touches[0].pageX - touchOffset.X,
  696. 'offsetY': e.touches[0].pageY - touchOffset.Y
  697. };
  698. if (holdPad || holdSld)
  699. {
  700. holdPad && setPad(event);
  701. holdSld && setSld(event);
  702. dispatchImmediateChange();
  703. }
  704. e.stopPropagation(); // prevent move "view" on broswer
  705. e.preventDefault(); // prevent Default - Android Fix (else android generated only 1-2 touchmove events)
  706. }, false);
  707. }
  708. p.padM.onmouseup =
  709. p.padM.onmouseout = function () { if (holdPad) { holdPad = false; jscolor.fireEvent(valueElement, 'change'); } };
  710. p.padM.onmousedown = function (e)
  711. {
  712. // if the slider is at the bottom, move it up
  713. switch (modeID)
  714. {
  715. case 0: if (THIS.hsv[2] === 0) { THIS.fromHSV(null, null, 1.0); }; break;
  716. case 1: if (THIS.hsv[1] === 0) { THIS.fromHSV(null, 1.0, null); }; break;
  717. }
  718. holdSld = false;
  719. holdPad = true;
  720. setPad(e);
  721. dispatchImmediateChange();
  722. };
  723. if ('ontouchstart' in window)
  724. {
  725. p.padM.addEventListener('touchstart', function (e)
  726. {
  727. touchOffset = {
  728. 'X': e.target.offsetParent.offsetLeft,
  729. 'Y': e.target.offsetParent.offsetTop
  730. };
  731. this.onmousedown({
  732. 'offsetX': e.touches[0].pageX - touchOffset.X,
  733. 'offsetY': e.touches[0].pageY - touchOffset.Y
  734. });
  735. });
  736. }
  737. p.sldM.onmouseup =
  738. p.sldM.onmouseout = function () { if (holdSld) { holdSld = false; jscolor.fireEvent(valueElement, 'change'); } };
  739. p.sldM.onmousedown = function (e)
  740. {
  741. holdPad = false;
  742. holdSld = true;
  743. setSld(e);
  744. dispatchImmediateChange();
  745. };
  746. if ('ontouchstart' in window)
  747. {
  748. p.sldM.addEventListener('touchstart', function (e)
  749. {
  750. touchOffset = {
  751. 'X': e.target.offsetParent.offsetLeft,
  752. 'Y': e.target.offsetParent.offsetTop
  753. };
  754. this.onmousedown({
  755. 'offsetX': e.touches[0].pageX - touchOffset.X,
  756. 'offsetY': e.touches[0].pageY - touchOffset.Y
  757. });
  758. });
  759. }
  760.  
  761. // picker
  762. var dims = getPickerDims(THIS);
  763. p.box.style.width = dims[0] + 'px';
  764. p.box.style.height = dims[1] + 'px';
  765.  
  766. // picker border
  767. p.boxB.style.position = (jscolor.fixed) ? 'fixed' : 'absolute';
  768. p.boxB.style.clear = 'both';
  769. p.boxB.style.left = x + 'px';
  770. p.boxB.style.top = y + 'px';
  771. p.boxB.style.zIndex = THIS.pickerZIndex;
  772. p.boxB.style.border = THIS.pickerBorder + 'px solid';
  773. p.boxB.style.borderColor = THIS.pickerBorderColor;
  774. p.boxB.style.background = THIS.pickerFaceColor;
  775.  
  776. // pad image
  777. p.pad.style.width = jscolor.images.pad[0] + 'px';
  778. p.pad.style.height = jscolor.images.pad[1] + 'px';
  779.  
  780. // pad border
  781. p.padB.style.position = 'absolute';
  782. p.padB.style.left = THIS.pickerFace + 'px';
  783. p.padB.style.top = THIS.pickerFace + 'px';
  784. p.padB.style.border = THIS.pickerInset + 'px solid';
  785. p.padB.style.borderColor = THIS.pickerInsetColor;
  786.  
  787. // pad mouse area
  788. p.padM.style.position = 'absolute';
  789. p.padM.style.left = '0';
  790. p.padM.style.top = '0';
  791. p.padM.style.width = THIS.pickerFace + 2 * THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px';
  792. p.padM.style.height = p.box.style.height;
  793. p.padM.style.cursor = 'crosshair';
  794.  
  795. // slider image
  796. p.sld.style.overflow = 'hidden';
  797. p.sld.style.width = jscolor.images.sld[0] + 'px';
  798. p.sld.style.height = jscolor.images.sld[1] + 'px';
  799.  
  800. // slider border
  801. p.sldB.style.display = THIS.slider ? 'block' : 'none';
  802. p.sldB.style.position = 'absolute';
  803. p.sldB.style.right = THIS.pickerFace + 'px';
  804. p.sldB.style.top = THIS.pickerFace + 'px';
  805. p.sldB.style.border = THIS.pickerInset + 'px solid';
  806. p.sldB.style.borderColor = THIS.pickerInsetColor;
  807.  
  808. // slider mouse area
  809. p.sldM.style.display = THIS.slider ? 'block' : 'none';
  810. p.sldM.style.position = 'absolute';
  811. p.sldM.style.right = '0';
  812. p.sldM.style.top = '0';
  813. p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2 * THIS.pickerInset + 'px';
  814. p.sldM.style.height = p.box.style.height;
  815. try
  816. {
  817. p.sldM.style.cursor = 'pointer';
  818. } catch (eOldIE)
  819. {
  820. p.sldM.style.cursor = 'hand';
  821. }
  822.  
  823. // "close" button
  824. function setBtnBorder()
  825. {
  826. var insetColors = THIS.pickerInsetColor.split(/\s+/);
  827. var pickerOutsetColor = insetColors.length < 2 ? insetColors[0] : insetColors[1] + ' ' + insetColors[0] + ' ' + insetColors[0] + ' ' + insetColors[1];
  828. p.btn.style.borderColor = pickerOutsetColor;
  829. }
  830. p.btn.style.display = THIS.pickerClosable ? 'block' : 'none';
  831. p.btn.style.position = 'absolute';
  832. p.btn.style.left = THIS.pickerFace + 'px';
  833. p.btn.style.bottom = THIS.pickerFace + 'px';
  834. p.btn.style.padding = '0 15px';
  835. p.btn.style.height = '18px';
  836. p.btn.style.border = THIS.pickerInset + 'px solid';
  837. setBtnBorder();
  838. p.btn.style.color = THIS.pickerButtonColor;
  839. p.btn.style.font = '12px sans-serif';
  840. p.btn.style.textAlign = 'center';
  841. try
  842. {
  843. p.btn.style.cursor = 'pointer';
  844. } catch (eOldIE)
  845. {
  846. p.btn.style.cursor = 'hand';
  847. }
  848. p.btn.onmousedown = function ()
  849. {
  850. THIS.hidePicker();
  851. };
  852. p.btnS.style.lineHeight = p.btn.style.height;
  853.  
  854. // load images in optimal order
  855. switch (modeID)
  856. {
  857. case 0: var padImg = hspng; break;
  858. case 1: var padImg = hvpng; break;
  859. }
  860. p.padM.style.backgroundImage = "url('" + crossgif + "')";
  861. p.padM.style.backgroundRepeat = "no-repeat";
  862. p.sldM.style.backgroundImage = "url('" + arrowgif + "')";
  863. p.sldM.style.backgroundRepeat = "no-repeat";
  864. p.pad.style.backgroundImage = "url('" + padImg + "')";
  865. p.pad.style.backgroundRepeat = "no-repeat";
  866. p.pad.style.backgroundPosition = "0 0";
  867.  
  868. // place pointers
  869. redrawPad();
  870. redrawSld();
  871.  
  872. jscolor.picker.owner = THIS;
  873. document.getElementsByTagName('body')[0].appendChild(p.boxB);
  874. }
  875.  
  876.  
  877. function getPickerDims(o)
  878. {
  879. var dims = [
  880. 2 * o.pickerInset + 2 * o.pickerFace + jscolor.images.pad[0] +
  881. (o.slider ? 2 * o.pickerInset + 2 * jscolor.images.arrow[0] + jscolor.images.sld[0] : 0),
  882. o.pickerClosable ?
  883. 4 * o.pickerInset + 3 * o.pickerFace + jscolor.images.pad[1] + o.pickerButtonHeight :
  884. 2 * o.pickerInset + 2 * o.pickerFace + jscolor.images.pad[1]
  885. ];
  886. return dims;
  887. }
  888.  
  889.  
  890. function redrawPad()
  891. {
  892. // redraw the pad pointer
  893. switch (modeID)
  894. {
  895. case 0: var yComponent = 1; break;
  896. case 1: var yComponent = 2; break;
  897. }
  898. var x = Math.round((THIS.hsv[0] / 6) * (jscolor.images.pad[0] - 1));
  899. var y = Math.round((1 - THIS.hsv[yComponent]) * (jscolor.images.pad[1] - 1));
  900. jscolor.picker.padM.style.backgroundPosition =
  901. (THIS.pickerFace + THIS.pickerInset + x - Math.floor(jscolor.images.cross[0] / 2)) + 'px ' +
  902. (THIS.pickerFace + THIS.pickerInset + y - Math.floor(jscolor.images.cross[1] / 2)) + 'px';
  903.  
  904. // redraw the slider image
  905. var seg = jscolor.picker.sld.childNodes;
  906.  
  907. switch (modeID)
  908. {
  909. case 0:
  910. var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1);
  911. for (var i = 0; i < seg.length; i += 1)
  912. {
  913. seg[i].style.backgroundColor = 'rgb(' +
  914. (rgb[0] * (1 - i / seg.length) * 100) + '%,' +
  915. (rgb[1] * (1 - i / seg.length) * 100) + '%,' +
  916. (rgb[2] * (1 - i / seg.length) * 100) + '%)';
  917. }
  918. break;
  919. case 1:
  920. var rgb, s, c = [THIS.hsv[2], 0, 0];
  921. var i = Math.floor(THIS.hsv[0]);
  922. var f = i % 2 ? THIS.hsv[0] - i : 1 - (THIS.hsv[0] - i);
  923. switch (i)
  924. {
  925. case 6:
  926. case 0: rgb = [0, 1, 2]; break;
  927. case 1: rgb = [1, 0, 2]; break;
  928. case 2: rgb = [2, 0, 1]; break;
  929. case 3: rgb = [2, 1, 0]; break;
  930. case 4: rgb = [1, 2, 0]; break;
  931. case 5: rgb = [0, 2, 1]; break;
  932. }
  933. for (var i = 0; i < seg.length; i += 1)
  934. {
  935. s = 1 - 1 / (seg.length - 1) * i;
  936. c[1] = c[0] * (1 - s * f);
  937. c[2] = c[0] * (1 - s);
  938. seg[i].style.backgroundColor = 'rgb(' +
  939. (c[rgb[0]] * 100) + '%,' +
  940. (c[rgb[1]] * 100) + '%,' +
  941. (c[rgb[2]] * 100) + '%)';
  942. }
  943. break;
  944. }
  945. }
  946.  
  947.  
  948. function redrawSld()
  949. {
  950. // redraw the slider pointer
  951. switch (modeID)
  952. {
  953. case 0: var yComponent = 2; break;
  954. case 1: var yComponent = 1; break;
  955. }
  956. var y = Math.round((1 - THIS.hsv[yComponent]) * (jscolor.images.sld[1] - 1));
  957. jscolor.picker.sldM.style.backgroundPosition =
  958. '0 ' + (THIS.pickerFace + THIS.pickerInset + y - Math.floor(jscolor.images.arrow[1] / 2)) + 'px';
  959. }
  960.  
  961.  
  962. function isPickerOwner()
  963. {
  964. return jscolor.picker && jscolor.picker.owner === THIS;
  965. }
  966.  
  967.  
  968. function blurTarget()
  969. {
  970. if (valueElement === target)
  971. {
  972. THIS.importColor();
  973. }
  974. if (THIS.pickerOnfocus)
  975. {
  976. THIS.hidePicker();
  977. }
  978. }
  979.  
  980.  
  981. function blurValue()
  982. {
  983. if (valueElement !== target)
  984. {
  985. THIS.importColor();
  986. }
  987. }
  988.  
  989.  
  990. function setPad(e)
  991. {
  992. var mpos = jscolor.getRelMousePos(e);
  993. var x = mpos.x - THIS.pickerFace - THIS.pickerInset;
  994. var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
  995. switch (modeID)
  996. {
  997. case 0: THIS.fromHSV(x * (6 / (jscolor.images.pad[0] - 1)), 1 - y / (jscolor.images.pad[1] - 1), null, leaveSld); break;
  998. case 1: THIS.fromHSV(x * (6 / (jscolor.images.pad[0] - 1)), null, 1 - y / (jscolor.images.pad[1] - 1), leaveSld); break;
  999. }
  1000. }
  1001.  
  1002.  
  1003. function setSld(e)
  1004. {
  1005. var mpos = jscolor.getRelMousePos(e);
  1006. var y = mpos.y - THIS.pickerFace - THIS.pickerInset;
  1007. switch (modeID)
  1008. {
  1009. case 0: THIS.fromHSV(null, null, 1 - y / (jscolor.images.sld[1] - 1), leavePad); break;
  1010. case 1: THIS.fromHSV(null, 1 - y / (jscolor.images.sld[1] - 1), null, leavePad); break;
  1011. }
  1012. }
  1013.  
  1014.  
  1015. function dispatchImmediateChange()
  1016. {
  1017. if (THIS.onImmediateChange)
  1018. {
  1019. var callback;
  1020. if (typeof THIS.onImmediateChange === 'string')
  1021. {
  1022. callback = new Function(THIS.onImmediateChange);
  1023. } else
  1024. {
  1025. callback = THIS.onImmediateChange;
  1026. }
  1027. callback.call(THIS);
  1028. }
  1029. }
  1030.  
  1031.  
  1032. var THIS = this;
  1033. var modeID = this.pickerMode.toLowerCase() === 'hvs' ? 1 : 0;
  1034. var abortBlur = false;
  1035. var
  1036. valueElement = jscolor.fetchElement(this.valueElement),
  1037. styleElement = jscolor.fetchElement(this.styleElement);
  1038. var
  1039. holdPad = false,
  1040. holdSld = false,
  1041. touchOffset = {};
  1042. var
  1043. leaveValue = 1 << 0,
  1044. leaveStyle = 1 << 1,
  1045. leavePad = 1 << 2,
  1046. leaveSld = 1 << 3;
  1047.  
  1048. // target
  1049. jscolor.addEvent(target, 'focus', function ()
  1050. {
  1051. if (THIS.pickerOnfocus) { THIS.showPicker(); }
  1052. });
  1053. jscolor.addEvent(target, 'blur', function ()
  1054. {
  1055. if (!abortBlur)
  1056. {
  1057. window.setTimeout(function () { abortBlur || blurTarget(); abortBlur = false; }, 0);
  1058. } else
  1059. {
  1060. abortBlur = false;
  1061. }
  1062. });
  1063.  
  1064. // valueElement
  1065. if (valueElement)
  1066. {
  1067. var updateField = function ()
  1068. {
  1069. THIS.fromString(valueElement.value, leaveValue);
  1070. dispatchImmediateChange();
  1071. };
  1072. jscolor.addEvent(valueElement, 'keyup', updateField);
  1073. jscolor.addEvent(valueElement, 'input', updateField);
  1074. jscolor.addEvent(valueElement, 'blur', blurValue);
  1075. valueElement.setAttribute('autocomplete', 'off');
  1076. }
  1077.  
  1078. // styleElement
  1079. if (styleElement)
  1080. {
  1081. styleElement.jscStyle = {
  1082. backgroundImage: styleElement.style.backgroundImage,
  1083. backgroundColor: styleElement.style.backgroundColor,
  1084. color: styleElement.style.color
  1085. };
  1086. }
  1087.  
  1088. // require images
  1089. switch (modeID)
  1090. {
  1091. case 0: jscolor.requireImage('hs.png'); break;
  1092. case 1: jscolor.requireImage('hv.png'); break;
  1093. }
  1094. jscolor.requireImage('cross.gif');
  1095. jscolor.requireImage('arrow.gif');
  1096.  
  1097. this.importColor();
  1098. }
  1099. };
  1100.  
  1101.  
  1102. jscolor.install();
  1103. //jscolor.fixed = true;
  1104. //jscolor.bind();
  1105. //jscolor.refresh();