/public/jscolor/jscolor.js
JavaScript | 830 lines | 668 code | 128 blank | 34 comment | 185 complexity | 48cfbe492f6d59b0b21e634d25f189cd MD5 | raw file
1/** 2 * jscolor, JavaScript Color Picker 3 * 4 * @version 1.2.3 5 * @license http://www.gnu.org/copyleft/lesser.html GNU Lesser General Public License 6 * @author Honza Odvarko <honza@odvarko.cz> 7 * @created 2008-06-15 8 * @updated 2009-02-25 9 * @link http://jscolor.com 10 */ 11 12 13var 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++) { 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++) { 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 delete srcAbs.query 61 delete srcAbs.fragment 62 return srcAbs.toString() 63 } 64 } 65 return false 66 }, 67 68 69 bind : function() { 70 var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')\\s*(\\{[^}]*\\})?', 'i') 71 var e = document.getElementsByTagName('input') 72 for(var i=0; i<e.length; i++) { 73 var m 74 if(!e[i].color && e[i].className && (m = e[i].className.match(matchClass))) { 75 var prop = {} 76 if(m[3]) { 77 try { 78 eval('prop='+m[3]) 79 } catch(eInvalidProp) {} 80 } 81 e[i].color = new jscolor.color(e[i], prop) 82 } 83 } 84 }, 85 86 87 preload : function() { 88 for(var fn in jscolor.imgRequire) { 89 jscolor.loadImage(fn) 90 } 91 }, 92 93 94 images : { 95 pad : [ 181, 101 ], 96 sld : [ 16, 101 ], 97 cross : [ 15, 15 ], 98 arrow : [ 7, 11 ] 99 }, 100 101 102 imgRequire : {}, 103 imgLoaded : {}, 104 105 106 requireImage : function(filename) { 107 jscolor.imgRequire[filename] = true 108 }, 109 110 111 loadImage : function(filename) { 112 if(!jscolor.imgLoaded[filename]) { 113 jscolor.imgLoaded[filename] = new Image() 114 jscolor.imgLoaded[filename].src = jscolor.getDir()+filename 115 } 116 }, 117 118 119 fetchElement : function(mixed) { 120 return typeof(mixed) == 'string' ? document.getElementById(mixed) : mixed 121 }, 122 123 124 addEvent : function(el, evnt, func) { 125 if(el.addEventListener) { 126 return el.addEventListener(evnt, func, false) 127 } else if(el.attachEvent) { 128 return el.attachEvent('on'+evnt, func) 129 } else { 130 return false 131 } 132 }, 133 134 135 fireEvent : function(el, evnt) { 136 if(!el) { 137 return false 138 } else if(document.createEventObject) { 139 var ev = document.createEventObject() 140 return el.fireEvent('on'+evnt, ev) 141 } else if(document.createEvent) { 142 var ev = document.createEvent('HTMLEvents') 143 ev.initEvent(evnt, true, true) 144 return el.dispatchEvent(ev) 145 } else if(el['on'+evnt]) { // alternatively use the traditional event model (IE5) 146 return el['on'+evnt]() 147 } else { 148 return false 149 } 150 }, 151 152 153 getElementPos : function(e) { 154 var e1=e, e2=e 155 var x=0, y=0 156 if(e1.offsetParent) { 157 do { 158 x += e1.offsetLeft 159 y += e1.offsetTop 160 } while(e1 = e1.offsetParent) 161 } 162 while((e2 = e2.parentNode) && e2.nodeName != 'BODY') { 163 x -= e2.scrollLeft 164 y -= e2.scrollTop 165 } 166 return [x, y] 167 }, 168 169 170 getElementSize : function(e) { 171 return [e.offsetWidth, e.offsetHeight] 172 }, 173 174 175 getMousePos : function(e) { 176 if(!e) e = window.event 177 if(typeof e.pageX == 'number') { 178 return [e.pageX, e.pageY] 179 } else if(typeof e.clientX == 'number') { 180 return [ 181 e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft, 182 e.clientY + document.body.scrollTop + document.documentElement.scrollTop 183 ] 184 } 185 }, 186 187 188 getViewPos : function() { 189 if(typeof window.pageYOffset == 'number') { 190 return [window.pageXOffset, window.pageYOffset] 191 } else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) { 192 return [document.body.scrollLeft, document.body.scrollTop] 193 } else if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) { 194 return [document.documentElement.scrollLeft, document.documentElement.scrollTop] 195 } else { 196 return [0, 0] 197 } 198 }, 199 200 201 getViewSize : function() { 202 if(typeof window.innerWidth == 'number') { 203 return [window.innerWidth, window.innerHeight] 204 } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) { 205 return [document.body.clientWidth, document.body.clientHeight] 206 } else if(document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 207 return [document.documentElement.clientWidth, document.documentElement.clientHeight] 208 } else { 209 return [0, 0] 210 } 211 }, 212 213 214 URI : function(uri) { // See RFC3986 215 216 this.scheme = null 217 this.authority = null 218 this.path = '' 219 this.query = null 220 this.fragment = null 221 222 this.parse = function(uri) { 223 var m = uri.match(/^(([A-Za-z][0-9A-Za-z+.-]*)(:))?((\/\/)([^\/?#]*))?([^?#]*)((\?)([^#]*))?((#)(.*))?/) 224 this.scheme = m[3] ? m[2] : null 225 this.authority = m[5] ? m[6] : null 226 this.path = m[7] 227 this.query = m[9] ? m[10] : null 228 this.fragment = m[12] ? m[13] : null 229 return this 230 } 231 232 this.toString = function() { 233 var result = '' 234 if(this.scheme != null) result = result + this.scheme + ':' 235 if(this.authority != null) result = result + '//' + this.authority 236 if(this.path != null) result = result + this.path 237 if(this.query != null) result = result + '?' + this.query 238 if(this.fragment != null) result = result + '#' + this.fragment 239 return result 240 } 241 242 this.toAbsolute = function(base) { 243 var base = new jscolor.URI(base) 244 var r = this 245 var t = new jscolor.URI 246 247 if(base.scheme == null) return false 248 249 if(r.scheme != null && r.scheme.toLowerCase() == base.scheme.toLowerCase()) { 250 r.scheme = null 251 } 252 253 if(r.scheme != null) { 254 t.scheme = r.scheme 255 t.authority = r.authority 256 t.path = removeDotSegments(r.path) 257 t.query = r.query 258 } else { 259 if(r.authority != null) { 260 t.authority = r.authority 261 t.path = removeDotSegments(r.path) 262 t.query = r.query 263 } else { 264 if(r.path == '') { 265 t.path = base.path 266 if(r.query != null) { 267 t.query = r.query 268 } else { 269 t.query = base.query 270 } 271 } else { 272 if(r.path.substr(0,1) == '/') { 273 t.path = removeDotSegments(r.path) 274 } else { 275 if(base.authority != null && base.path == '') { 276 t.path = '/'+r.path 277 } else { 278 t.path = base.path.replace(/[^\/]+$/,'')+r.path 279 } 280 t.path = removeDotSegments(t.path) 281 } 282 t.query = r.query 283 } 284 t.authority = base.authority 285 } 286 t.scheme = base.scheme 287 } 288 t.fragment = r.fragment 289 290 return t 291 } 292 293 function removeDotSegments(path) { 294 var out = '' 295 while(path) { 296 if(path.substr(0,3)=='../' || path.substr(0,2)=='./') { 297 path = path.replace(/^\.+/,'').substr(1) 298 } else if(path.substr(0,3)=='/./' || path=='/.') { 299 path = '/'+path.substr(3) 300 } else if(path.substr(0,4)=='/../' || path=='/..') { 301 path = '/'+path.substr(4) 302 out = out.replace(/\/?[^\/]*$/, '') 303 } else if(path=='.' || path=='..') { 304 path = '' 305 } else { 306 var rm = path.match(/^\/?[^\/]*/)[0] 307 path = path.substr(rm.length) 308 out = out + rm 309 } 310 } 311 return out 312 } 313 314 if(uri) { 315 this.parse(uri) 316 } 317 318 }, 319 320 321 /* 322 * Usage example: 323 * var myColor = new jscolor.color(myInputElement) 324 */ 325 326 color : function(target, prop) { 327 328 329 this.required = true // refuse empty values? 330 this.adjust = true // adjust value to uniform notation? 331 this.hash = false // prefix color with # symbol? 332 this.caps = true // uppercase? 333 this.valueElement = target // value holder 334 this.styleElement = target // where to reflect current color 335 this.hsv = [0, 0, 1] // read-only 0-6, 0-1, 0-1 336 this.rgb = [1, 1, 1] // read-only 0-1, 0-1, 0-1 337 338 this.pickerOnfocus = true // display picker on focus? 339 this.pickerMode = 'HSV' // HSV | HVS 340 this.pickerPosition = 'bottom' // left | right | top | bottom 341 this.pickerFace = 10 // px 342 this.pickerFaceColor = 'ThreeDFace' // CSS color 343 this.pickerBorder = 1 // px 344 this.pickerBorderColor = 'ThreeDHighlight ThreeDShadow ThreeDShadow ThreeDHighlight' // CSS color 345 this.pickerInset = 1 // px 346 this.pickerInsetColor = 'ThreeDShadow ThreeDHighlight ThreeDHighlight ThreeDShadow' // CSS color 347 this.pickerZIndex = 10000 348 349 350 for(var p in prop) this[p] = prop[p] 351 352 353 this.hidePicker = function() { 354 if(isPickerOwner()) { 355 removePicker() 356 } 357 } 358 359 360 this.showPicker = function() { 361 if(!isPickerOwner()) { 362 var tp = jscolor.getElementPos(target) // target pos 363 var ts = jscolor.getElementSize(target) // target size 364 var vp = jscolor.getViewPos() // view pos 365 var vs = jscolor.getViewSize() // view size 366 var ps = [ // picker size 367 2*this.pickerBorder + 4*this.pickerInset + 2*this.pickerFace + jscolor.images.pad[0] + 2*jscolor.images.arrow[0] + jscolor.images.sld[0], 368 2*this.pickerBorder + 2*this.pickerInset + 2*this.pickerFace + jscolor.images.pad[1] 369 ] 370 var a, b, c 371 switch(this.pickerPosition.toLowerCase()) { 372 case 'left': a=1; b=0; c=-1; break 373 case 'right':a=1; b=0; c=1; break 374 case 'top': a=0; b=1; c=-1; break 375 default: a=0; b=1; c=1; break 376 } 377 var l = (ts[b]+ps[b])/2 378 var pp = [ // picker pos 379 -vp[a]+tp[a]+ps[a] > vs[a] ? 380 (-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]) : 381 tp[a], 382 -vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ? 383 (-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) : 384 (tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c) 385 ] 386 drawPicker(pp[a], pp[b]) 387 } 388 } 389 390 391 this.importColor = function() { 392 if(!valueElement) { 393 this.exportColor() 394 } else { 395 if(!this.adjust) { 396 if(!this.fromString(valueElement.value, leaveValue)) { 397 styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor 398 styleElement.style.color = styleElement.jscStyle.color 399 this.exportColor(leaveValue | leaveStyle) 400 } 401 } else if(!this.required && /^\s*$/.test(valueElement.value)) { 402 valueElement.value = '' 403 styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor 404 styleElement.style.color = styleElement.jscStyle.color 405 this.exportColor(leaveValue | leaveStyle) 406 407 } else if(this.fromString(valueElement.value)) { 408 // OK 409 } else { 410 this.exportColor() 411 } 412 } 413 } 414 415 416 this.exportColor = function(flags) { 417 if(!(flags & leaveValue) && valueElement) { 418 var value = this.toString() 419 if(this.caps) value = value.toUpperCase() 420 if(this.hash) value = '#'+value 421 valueElement.value = value 422 } 423 if(!(flags & leaveStyle) && styleElement) { 424 styleElement.style.backgroundColor = '#'+this.toString() 425 styleElement.style.color = 426 0.213 * this.rgb[0] + 427 0.715 * this.rgb[1] + 428 0.072 * this.rgb[2] 429 < 0.5 ? '#FFF' : '#000' 430 } 431 if(!(flags & leavePad) && isPickerOwner()) { 432 redrawPad() 433 } 434 if(!(flags & leaveSld) && isPickerOwner()) { 435 redrawSld() 436 } 437 } 438 439 440 this.fromHSV = function(h, s, v, flags) { // null = don't change 441 h<0 && (h=0) || h>6 && (h=6) 442 s<0 && (s=0) || s>1 && (s=1) 443 v<0 && (v=0) || v>1 && (v=1) 444 this.rgb = HSV_RGB( 445 h==null ? this.hsv[0] : (this.hsv[0]=h), 446 s==null ? this.hsv[1] : (this.hsv[1]=s), 447 v==null ? this.hsv[2] : (this.hsv[2]=v) 448 ) 449 this.exportColor(flags) 450 } 451 452 453 this.fromRGB = function(r, g, b, flags) { // null = don't change 454 r<0 && (r=0) || r>1 && (r=1) 455 g<0 && (g=0) || g>1 && (g=1) 456 b<0 && (b=0) || b>1 && (b=1) 457 var hsv = RGB_HSV( 458 r==null ? this.rgb[0] : (this.rgb[0]=r), 459 g==null ? this.rgb[1] : (this.rgb[1]=g), 460 b==null ? this.rgb[2] : (this.rgb[2]=b) 461 ) 462 if(hsv[0] != null) { 463 this.hsv[0] = hsv[0] 464 } 465 if(hsv[2] != 0) { 466 this.hsv[1] = hsv[1] 467 } 468 this.hsv[2] = hsv[2] 469 this.exportColor(flags) 470 } 471 472 473 this.fromString = function(hex, flags) { 474 var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i) 475 if(!m) { 476 return false 477 } else { 478 if(m[1].length == 6) { // 6-char notation 479 this.fromRGB( 480 parseInt(m[1].substr(0,2),16) / 255, 481 parseInt(m[1].substr(2,2),16) / 255, 482 parseInt(m[1].substr(4,2),16) / 255, 483 flags 484 ) 485 } else { // 3-char notation 486 this.fromRGB( 487 parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255, 488 parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255, 489 parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255, 490 flags 491 ) 492 } 493 return true 494 } 495 } 496 497 498 this.toString = function() { 499 return ( 500 (0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) + 501 (0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) + 502 (0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1) 503 ) 504 } 505 506 507 function RGB_HSV(r, g, b) { 508 var n = Math.min(Math.min(r,g),b) 509 var v = Math.max(Math.max(r,g),b) 510 var m = v - n 511 if(m == 0) return [ null, 0, v ] 512 var h = r==n ? 3+(b-g)/m : (g==n ? 5+(r-b)/m : 1+(g-r)/m) 513 return [ h==6?0:h, m/v, v ] 514 } 515 516 517 function HSV_RGB(h, s, v) { 518 if(h == null) return [ v, v, v ] 519 var i = Math.floor(h) 520 var f = i%2 ? h-i : 1-(h-i) 521 var m = v * (1 - s) 522 var n = v * (1 - s*f) 523 switch(i) { 524 case 6: 525 case 0: return [v,n,m] 526 case 1: return [n,v,m] 527 case 2: return [m,v,n] 528 case 3: return [m,n,v] 529 case 4: return [n,m,v] 530 case 5: return [v,m,n] 531 } 532 } 533 534 535 function removePicker() { 536 delete jscolor.picker.owner 537 document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB) 538 } 539 540 541 function drawPicker(x, y) { 542 if(!jscolor.picker) { 543 jscolor.picker = { 544 box : document.createElement('div'), 545 boxB : document.createElement('div'), 546 pad : document.createElement('div'), 547 padB : document.createElement('div'), 548 padM : document.createElement('div'), 549 sld : document.createElement('div'), 550 sldB : document.createElement('div'), 551 sldM : document.createElement('div') 552 } 553 for(var i=0,segSize=4; i<jscolor.images.sld[1]; i+=segSize) { 554 var seg = document.createElement('div') 555 seg.style.height = segSize+'px' 556 seg.style.fontSize = '1px' 557 seg.style.lineHeight = '0' 558 jscolor.picker.sld.appendChild(seg) 559 } 560 jscolor.picker.sldB.appendChild(jscolor.picker.sld) 561 jscolor.picker.box.appendChild(jscolor.picker.sldB) 562 jscolor.picker.box.appendChild(jscolor.picker.sldM) 563 jscolor.picker.padB.appendChild(jscolor.picker.pad) 564 jscolor.picker.box.appendChild(jscolor.picker.padB) 565 jscolor.picker.box.appendChild(jscolor.picker.padM) 566 jscolor.picker.boxB.appendChild(jscolor.picker.box) 567 } 568 569 var p = jscolor.picker 570 571 // recompute controls positions 572 posPad = [ 573 x+THIS.pickerBorder+THIS.pickerFace+THIS.pickerInset, 574 y+THIS.pickerBorder+THIS.pickerFace+THIS.pickerInset ] 575 posSld = [ 576 null, 577 y+THIS.pickerBorder+THIS.pickerFace+THIS.pickerInset ] 578 579 // controls interaction 580 p.box.onmouseup = 581 p.box.onmouseout = function() { target.focus() } 582 p.box.onmousedown = function() { abortBlur=true } 583 p.box.onmousemove = function(e) { holdPad && setPad(e); holdSld && setSld(e) } 584 p.padM.onmouseup = 585 p.padM.onmouseout = function() { if(holdPad) { holdPad=false; jscolor.fireEvent(valueElement,'change') } } 586 p.padM.onmousedown = function(e) { holdPad=true; setPad(e) } 587 p.sldM.onmouseup = 588 p.sldM.onmouseout = function() { if(holdSld) { holdSld=false; jscolor.fireEvent(valueElement,'change') } } 589 p.sldM.onmousedown = function(e) { holdSld=true; setSld(e) } 590 591 // picker 592 p.box.style.width = 4*THIS.pickerInset + 2*THIS.pickerFace + jscolor.images.pad[0] + 2*jscolor.images.arrow[0] + jscolor.images.sld[0] + 'px' 593 p.box.style.height = 2*THIS.pickerInset + 2*THIS.pickerFace + jscolor.images.pad[1] + 'px' 594 595 // picker border 596 p.boxB.style.position = 'absolute' 597 p.boxB.style.clear = 'both' 598 p.boxB.style.left = x+'px' 599 p.boxB.style.top = y+'px' 600 p.boxB.style.zIndex = THIS.pickerZIndex 601 p.boxB.style.border = THIS.pickerBorder+'px solid' 602 p.boxB.style.borderColor = THIS.pickerBorderColor 603 p.boxB.style.background = THIS.pickerFaceColor 604 605 // pad image 606 p.pad.style.width = jscolor.images.pad[0]+'px' 607 p.pad.style.height = jscolor.images.pad[1]+'px' 608 609 // pad border 610 p.padB.style.position = 'absolute' 611 p.padB.style.left = THIS.pickerFace+'px' 612 p.padB.style.top = THIS.pickerFace+'px' 613 p.padB.style.border = THIS.pickerInset+'px solid' 614 p.padB.style.borderColor = THIS.pickerInsetColor 615 616 // pad mouse area 617 p.padM.style.position = 'absolute' 618 p.padM.style.left = '0' 619 p.padM.style.top = '0' 620 p.padM.style.width = THIS.pickerFace + 2*THIS.pickerInset + jscolor.images.pad[0] + jscolor.images.arrow[0] + 'px' 621 p.padM.style.height = p.box.style.height 622 p.padM.style.cursor = 'crosshair' 623 624 // slider image 625 p.sld.style.overflow = 'hidden' 626 p.sld.style.width = jscolor.images.sld[0]+'px' 627 p.sld.style.height = jscolor.images.sld[1]+'px' 628 629 // slider border 630 p.sldB.style.position = 'absolute' 631 p.sldB.style.right = THIS.pickerFace+'px' 632 p.sldB.style.top = THIS.pickerFace+'px' 633 p.sldB.style.border = THIS.pickerInset+'px solid' 634 p.sldB.style.borderColor = THIS.pickerInsetColor 635 636 // slider mouse area 637 p.sldM.style.position = 'absolute' 638 p.sldM.style.right = '0' 639 p.sldM.style.top = '0' 640 p.sldM.style.width = jscolor.images.sld[0] + jscolor.images.arrow[0] + THIS.pickerFace + 2*THIS.pickerInset + 'px' 641 p.sldM.style.height = p.box.style.height 642 try { 643 p.sldM.style.cursor = 'pointer' 644 } catch(eOldIE) { 645 p.sldM.style.cursor = 'hand' 646 } 647 648 // load images in optimal order 649 switch(modeID) { 650 case 0: var padImg = 'hs.png'; break 651 case 1: var padImg = 'hv.png'; break 652 } 653 p.padM.style.background = "url('"+jscolor.getDir()+"cross.gif') no-repeat" 654 p.sldM.style.background = "url('"+jscolor.getDir()+"arrow.gif') no-repeat" 655 p.pad.style.background = "url('"+jscolor.getDir()+padImg+"') 0 0 no-repeat" 656 657 // place pointers 658 redrawPad() 659 redrawSld() 660 661 jscolor.picker.owner = THIS 662 document.getElementsByTagName('body')[0].appendChild(p.boxB) 663 } 664 665 666 function redrawPad() { 667 // redraw the pad pointer 668 switch(modeID) { 669 case 0: var yComponent = 1; break 670 case 1: var yComponent = 2; break 671 } 672 var x = Math.round((THIS.hsv[0]/6) * (jscolor.images.pad[0]-1)) 673 var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.pad[1]-1)) 674 jscolor.picker.padM.style.backgroundPosition = 675 (THIS.pickerFace+THIS.pickerInset+x - Math.floor(jscolor.images.cross[0]/2)) + 'px ' + 676 (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.cross[1]/2)) + 'px' 677 678 // redraw the slider image 679 var seg = jscolor.picker.sld.childNodes 680 681 switch(modeID) { 682 case 0: 683 var rgb = HSV_RGB(THIS.hsv[0], THIS.hsv[1], 1) 684 for(var i=0; i<seg.length; i++) { 685 seg[i].style.backgroundColor = 'rgb('+ 686 (rgb[0]*(1-i/seg.length)*100)+'%,'+ 687 (rgb[1]*(1-i/seg.length)*100)+'%,'+ 688 (rgb[2]*(1-i/seg.length)*100)+'%)' 689 } 690 break 691 case 1: 692 var rgb, s, c = [ THIS.hsv[2], 0, 0 ] 693 var i = Math.floor(THIS.hsv[0]) 694 var f = i%2 ? THIS.hsv[0]-i : 1-(THIS.hsv[0]-i) 695 switch(i) { 696 case 6: 697 case 0: rgb=[0,1,2]; break 698 case 1: rgb=[1,0,2]; break 699 case 2: rgb=[2,0,1]; break 700 case 3: rgb=[2,1,0]; break 701 case 4: rgb=[1,2,0]; break 702 case 5: rgb=[0,2,1]; break 703 } 704 for(var i=0; i<seg.length; i++) { 705 s = 1 - 1/(seg.length-1)*i 706 c[1] = c[0] * (1 - s*f) 707 c[2] = c[0] * (1 - s) 708 seg[i].style.backgroundColor = 'rgb('+ 709 (c[rgb[0]]*100)+'%,'+ 710 (c[rgb[1]]*100)+'%,'+ 711 (c[rgb[2]]*100)+'%)' 712 } 713 break 714 } 715 } 716 717 718 function redrawSld() { 719 // redraw the slider pointer 720 switch(modeID) { 721 case 0: var yComponent = 2; break 722 case 1: var yComponent = 1; break 723 } 724 var y = Math.round((1-THIS.hsv[yComponent]) * (jscolor.images.sld[1]-1)) 725 jscolor.picker.sldM.style.backgroundPosition = 726 '0 ' + (THIS.pickerFace+THIS.pickerInset+y - Math.floor(jscolor.images.arrow[1]/2)) + 'px' 727 } 728 729 730 function isPickerOwner() { 731 return jscolor.picker && jscolor.picker.owner == THIS 732 } 733 734 735 function blurTarget() { 736 if(valueElement == target) THIS.importColor() 737 if(THIS.pickerOnfocus) THIS.hidePicker() 738 } 739 740 741 function blurValue() { 742 if(valueElement != target) THIS.importColor() 743 } 744 745 746 function setPad(e) { 747 var posM = jscolor.getMousePos(e) 748 var x = posM[0]-posPad[0] 749 var y = posM[1]-posPad[1] 750 switch(modeID) { 751 case 0: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), 1 - y/(jscolor.images.pad[1]-1), null, leaveSld); break 752 case 1: THIS.fromHSV(x*(6/(jscolor.images.pad[0]-1)), null, 1 - y/(jscolor.images.pad[1]-1), leaveSld); break 753 } 754 } 755 756 757 function setSld(e) { 758 var posM = jscolor.getMousePos(e) 759 var y = posM[1]-posPad[1] 760 switch(modeID) { 761 case 0: THIS.fromHSV(null, null, 1 - y/(jscolor.images.sld[1]-1), leavePad); break 762 case 1: THIS.fromHSV(null, 1 - y/(jscolor.images.sld[1]-1), null, leavePad); break 763 } 764 } 765 766 767 var THIS = this 768 var modeID = this.pickerMode.toLowerCase()=='hvs' ? 1 : 0 769 var abortBlur = false 770 var 771 valueElement = jscolor.fetchElement(this.valueElement), 772 styleElement = jscolor.fetchElement(this.styleElement) 773 var 774 holdPad = false, 775 holdSld = false 776 var 777 posPad, 778 posSld 779 var 780 leaveValue = 1<<0, 781 leaveStyle = 1<<1, 782 leavePad = 1<<2, 783 leaveSld = 1<<3 784 785 // target 786 jscolor.addEvent(target, 'focus', function() { 787 if(THIS.pickerOnfocus) THIS.showPicker() 788 }) 789 jscolor.addEvent(target, 'blur', function() { 790 if(!abortBlur) { 791 setTimeout(function(){ abortBlur || blurTarget(); abortBlur=false }, 0) 792 } else { 793 abortBlur = false 794 } 795 }) 796 797 // valueElement 798 if(valueElement) { 799 var updateField = function() { 800 THIS.fromString(valueElement.value, leaveValue) 801 } 802 jscolor.addEvent(valueElement, 'keyup', updateField) 803 jscolor.addEvent(valueElement, 'input', updateField) 804 jscolor.addEvent(valueElement, 'blur', blurValue) 805 valueElement.setAttribute('autocomplete', 'off') 806 } 807 808 // styleElement 809 if(styleElement) { 810 styleElement.jscStyle = { 811 backgroundColor : styleElement.style.backgroundColor, 812 color : styleElement.style.color 813 } 814 } 815 816 // require images 817 switch(modeID) { 818 case 0: jscolor.requireImage('hs.png'); break 819 case 1: jscolor.requireImage('hv.png'); break 820 } 821 jscolor.requireImage('cross.gif'); 822 jscolor.requireImage('arrow.gif'); 823 824 this.importColor() 825 } 826 827} 828 829 830jscolor.install()