API tools faq
paste
Advertisement
glaba13

Untitled

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