| 1 |
/** |
| 2 |
* |
| 3 |
* Color picker |
| 4 |
* Author: Stefan Petre www.eyecon.ro |
| 5 |
* |
| 6 |
* Dual licensed under the MIT and GPL licenses |
| 7 |
* |
| 8 |
*/ |
| 9 |
(function ($) { |
| 10 |
var ColorPicker = function () { |
| 11 |
var |
| 12 |
ids = {}, |
| 13 |
inAction, |
| 14 |
charMin = 65, |
| 15 |
visible, |
| 16 |
tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>', |
| 17 |
defaults = { |
| 18 |
eventName: 'click', |
| 19 |
onShow: function () { }, |
| 20 |
onBeforeShow: function () { }, |
| 21 |
onHide: function () { }, |
| 22 |
onChange: function () { }, |
| 23 |
onSubmit: function () { }, |
| 24 |
color: 'ff0000', |
| 25 |
livePreview: true, |
| 26 |
flat: false |
| 27 |
}, |
| 28 |
fillRGBFields = function (hsb, cal) { |
| 29 |
var rgb = HSBToRGB(hsb); |
| 30 |
$(cal).data('colorpicker').fields |
| 31 |
.eq(1).val(rgb.r).end() |
| 32 |
.eq(2).val(rgb.g).end() |
| 33 |
.eq(3).val(rgb.b).end(); |
| 34 |
}, |
| 35 |
fillHSBFields = function (hsb, cal) { |
| 36 |
$(cal).data('colorpicker').fields |
| 37 |
.eq(4).val(hsb.h).end() |
| 38 |
.eq(5).val(hsb.s).end() |
| 39 |
.eq(6).val(hsb.b).end(); |
| 40 |
}, |
| 41 |
fillHexFields = function (hsb, cal) { |
| 42 |
$(cal).data('colorpicker').fields |
| 43 |
.eq(0).val(HSBToHex(hsb)).end(); |
| 44 |
}, |
| 45 |
setSelector = function (hsb, cal) { |
| 46 |
$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({ h: hsb.h, s: 100, b: 100 })); |
| 47 |
$(cal).data('colorpicker').selectorIndic.css({ |
| 48 |
left: parseInt(150 * hsb.s / 100, 10), |
| 49 |
top: parseInt(150 * (100 - hsb.b) / 100, 10) |
| 50 |
}); |
| 51 |
}, |
| 52 |
setHue = function (hsb, cal) { |
| 53 |
$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h / 360, 10)); |
| 54 |
}, |
| 55 |
setCurrentColor = function (hsb, cal) { |
| 56 |
$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb)); |
| 57 |
}, |
| 58 |
setNewColor = function (hsb, cal) { |
| 59 |
$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb)); |
| 60 |
}, |
| 61 |
keyDown = function (ev) { |
| 62 |
var pressedKey = ev.charCode || ev.keyCode || -1; |
| 63 |
if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) { |
| 64 |
return false; |
| 65 |
} |
| 66 |
var cal = $(this).parent().parent(); |
| 67 |
if (cal.data('colorpicker').livePreview === true) { |
| 68 |
change.apply(this); |
| 69 |
} |
| 70 |
}, |
| 71 |
change = function (ev) { |
| 72 |
|
| 73 |
var cal = $(this).parent().parent(), col; |
| 74 |
|
| 75 |
if (this.parentNode.className.indexOf('_hex') > 0) { |
| 76 |
cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value)); |
| 77 |
} else if (this.parentNode.className.indexOf('_hsb') > 0) { |
| 78 |
cal.data('colorpicker').color = col = fixHSB({ |
| 79 |
h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10), |
| 80 |
s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10), |
| 81 |
b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10) |
| 82 |
}); |
| 83 |
} else { |
| 84 |
cal.data('colorpicker').color = col = RGBToHSB(fixRGB({ |
| 85 |
r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10), |
| 86 |
g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10), |
| 87 |
b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10) |
| 88 |
})); |
| 89 |
} |
| 90 |
if (ev) { |
| 91 |
fillRGBFields(col, cal.get(0)); |
| 92 |
fillHexFields(col, cal.get(0)); |
| 93 |
fillHSBFields(col, cal.get(0)); |
| 94 |
} |
| 95 |
setSelector(col, cal.get(0)); |
| 96 |
|
| 97 |
setHue(col, cal.get(0)); |
| 98 |
setNewColor(col, cal.get(0)); |
| 99 |
//TODD H. Modified |
| 100 |
cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el]); |
| 101 |
}, |
| 102 |
blur = function (ev) { |
| 103 |
var cal = $(this).parent().parent(); |
| 104 |
cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus'); |
| 105 |
}, |
| 106 |
focus = function () { |
| 107 |
charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65; |
| 108 |
$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus'); |
| 109 |
$(this).parent().addClass('colorpicker_focus'); |
| 110 |
}, |
| 111 |
downIncrement = function (ev) { |
| 112 |
var field = $(this).parent().find('input').focus(); |
| 113 |
var current = { |
| 114 |
el: $(this).parent().addClass('colorpicker_slider'), |
| 115 |
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255), |
| 116 |
y: ev.pageY, |
| 117 |
field: field, |
| 118 |
val: parseInt(field.val(), 10), |
| 119 |
preview: $(this).parent().parent().data('colorpicker').livePreview |
| 120 |
}; |
| 121 |
$(document).bind('mouseup', current, upIncrement); |
| 122 |
$(document).bind('mousemove', current, moveIncrement); |
| 123 |
}, |
| 124 |
moveIncrement = function (ev) { |
| 125 |
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10)))); |
| 126 |
if (ev.data.preview) { |
| 127 |
change.apply(ev.data.field.get(0), [true]); |
| 128 |
} |
| 129 |
return false; |
| 130 |
}, |
| 131 |
upIncrement = function (ev) { |
| 132 |
change.apply(ev.data.field.get(0), [true]); |
| 133 |
ev.data.el.removeClass('colorpicker_slider').find('input').focus(); |
| 134 |
$(document).unbind('mouseup', upIncrement); |
| 135 |
$(document).unbind('mousemove', moveIncrement); |
| 136 |
return false; |
| 137 |
}, |
| 138 |
downHue = function (ev) { |
| 139 |
var current = { |
| 140 |
cal: $(this).parent(), |
| 141 |
y: $(this).offset().top |
| 142 |
}; |
| 143 |
current.preview = current.cal.data('colorpicker').livePreview; |
| 144 |
$(document).bind('mouseup', current, upHue); |
| 145 |
$(document).bind('mousemove', current, moveHue); |
| 146 |
}, |
| 147 |
moveHue = function (ev) { |
| 148 |
change.apply( |
| 149 |
ev.data.cal.data('colorpicker') |
| 150 |
.fields |
| 151 |
.eq(4) |
| 152 |
.val(parseInt(360 * (150 - Math.max(0, Math.min(150, (ev.pageY - ev.data.y)))) / 150, 10)) |
| 153 |
.get(0), |
| 154 |
[ev.data.preview] |
| 155 |
); |
| 156 |
return false; |
| 157 |
}, |
| 158 |
upHue = function (ev) { |
| 159 |
moveHue(ev); |
| 160 |
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); |
| 161 |
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); |
| 162 |
$(document).unbind('mouseup', upHue); |
| 163 |
$(document).unbind('mousemove', moveHue); |
| 164 |
return false; |
| 165 |
}, |
| 166 |
downSelector = function (ev) { |
| 167 |
var current = { |
| 168 |
cal: $(this).parent(), |
| 169 |
pos: $(this).offset() |
| 170 |
}; |
| 171 |
current.preview = current.cal.data('colorpicker').livePreview; |
| 172 |
$(document).bind('mouseup', current, upSelector); |
| 173 |
$(document).bind('mousemove', current, moveSelector); |
| 174 |
}, |
| 175 |
moveSelector = function (ev) { |
| 176 |
change.apply( |
| 177 |
ev.data.cal.data('colorpicker') |
| 178 |
.fields |
| 179 |
.eq(6) |
| 180 |
.val(parseInt(100 * (150 - Math.max(0, Math.min(150, (ev.pageY - ev.data.pos.top)))) / 150, 10)) |
| 181 |
.end() |
| 182 |
.eq(5) |
| 183 |
.val(parseInt(100 * (Math.max(0, Math.min(150, (ev.pageX - ev.data.pos.left)))) / 150, 10)) |
| 184 |
.get(0), |
| 185 |
[ev.data.preview] |
| 186 |
); |
| 187 |
return false; |
| 188 |
}, |
| 189 |
upSelector = function (ev) { |
| 190 |
moveSelector(ev); |
| 191 |
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); |
| 192 |
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0)); |
| 193 |
$(document).unbind('mouseup', upSelector); |
| 194 |
$(document).unbind('mousemove', moveSelector); |
| 195 |
return false; |
| 196 |
}, |
| 197 |
enterSubmit = function (ev) { |
| 198 |
$(this).addClass('colorpicker_focus'); |
| 199 |
}, |
| 200 |
leaveSubmit = function (ev) { |
| 201 |
$(this).removeClass('colorpicker_focus'); |
| 202 |
}, |
| 203 |
clickSubmit = function (ev) { |
| 204 |
var cal = $(this).parent(); |
| 205 |
|
| 206 |
var col = cal.data('colorpicker').color; |
| 207 |
cal.data('colorpicker').origColor = col; |
| 208 |
setCurrentColor(col, cal.get(0)); |
| 209 |
//TODD H. Modified |
| 210 |
cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el); |
| 211 |
}, |
| 212 |
show = function (ev) { |
| 213 |
var cal = $('#' + $(this).data('colorpickerId')); |
| 214 |
|
| 215 |
cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]); |
| 216 |
var pos = $(this).offset(); |
| 217 |
var viewPort = getViewport(); |
| 218 |
var top = pos.top + this.offsetHeight; |
| 219 |
var left = pos.left; |
| 220 |
if (top + 176 > viewPort.t + viewPort.h) { |
| 221 |
top -= this.offsetHeight + 176; |
| 222 |
} |
| 223 |
if (left + 356 > viewPort.l + viewPort.w) { |
| 224 |
left -= 356; |
| 225 |
} |
| 226 |
cal.css({ left: left + 'px', top: top + 'px' }); |
| 227 |
//TODD H. Modified |
| 228 |
if (cal.data('colorpicker').onShow.apply(this, [cal.get(0), cal.data('colorpicker').el]) != false) { |
| 229 |
cal.show(); |
| 230 |
} |
| 231 |
$(document).bind('mousedown', { cal: cal }, hide); |
| 232 |
return false; |
| 233 |
}, |
| 234 |
hide = function (ev) { |
| 235 |
if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) { |
| 236 |
//TODD H. Modified |
| 237 |
if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0), ev.data.cal.data('colorpicker').el]) != false) { |
| 238 |
ev.data.cal.hide(); |
| 239 |
} |
| 240 |
$(document).unbind('mousedown', hide); |
| 241 |
} |
| 242 |
}, |
| 243 |
isChildOf = function (parentEl, el, container) { |
| 244 |
if (parentEl == el) { |
| 245 |
return true; |
| 246 |
} |
| 247 |
if (parentEl.contains) { |
| 248 |
return parentEl.contains(el); |
| 249 |
} |
| 250 |
if (parentEl.compareDocumentPosition) { |
| 251 |
return !!(parentEl.compareDocumentPosition(el) & 16); |
| 252 |
} |
| 253 |
var prEl = el.parentNode; |
| 254 |
while (prEl && prEl != container) { |
| 255 |
if (prEl == parentEl) |
| 256 |
return true; |
| 257 |
prEl = prEl.parentNode; |
| 258 |
} |
| 259 |
return false; |
| 260 |
}, |
| 261 |
getViewport = function () { |
| 262 |
var m = document.compatMode == 'CSS1Compat'; |
| 263 |
return { |
| 264 |
l: window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft), |
| 265 |
t: window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop), |
| 266 |
w: window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth), |
| 267 |
h: window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight) |
| 268 |
}; |
| 269 |
}, |
| 270 |
fixHSB = function (hsb) { |
| 271 |
return { |
| 272 |
h: Math.min(360, Math.max(0, hsb.h)), |
| 273 |
s: Math.min(100, Math.max(0, hsb.s)), |
| 274 |
b: Math.min(100, Math.max(0, hsb.b)) |
| 275 |
}; |
| 276 |
}, |
| 277 |
fixRGB = function (rgb) { |
| 278 |
return { |
| 279 |
r: Math.min(255, Math.max(0, rgb.r)), |
| 280 |
g: Math.min(255, Math.max(0, rgb.g)), |
| 281 |
b: Math.min(255, Math.max(0, rgb.b)) |
| 282 |
}; |
| 283 |
}, |
| 284 |
fixHex = function (hex) { |
| 285 |
var len = 6 - hex.length; |
| 286 |
if (len > 0) { |
| 287 |
var o = []; |
| 288 |
for (var i = 0; i < len; i++) { |
| 289 |
o.push('0'); |
| 290 |
} |
| 291 |
o.push(hex); |
| 292 |
hex = o.join(''); |
| 293 |
} |
| 294 |
return hex; |
| 295 |
}, |
| 296 |
HexToRGB = function (hex) { |
| 297 |
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16); |
| 298 |
return { r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF) }; |
| 299 |
}, |
| 300 |
HexToHSB = function (hex) { |
| 301 |
return RGBToHSB(HexToRGB(hex)); |
| 302 |
}, |
| 303 |
RGBToHSB = function (rgb) { |
| 304 |
var hsb = { |
| 305 |
h: 0, |
| 306 |
s: 0, |
| 307 |
b: 0 |
| 308 |
}; |
| 309 |
var min = Math.min(rgb.r, rgb.g, rgb.b); |
| 310 |
var max = Math.max(rgb.r, rgb.g, rgb.b); |
| 311 |
var delta = max - min; |
| 312 |
hsb.b = max; |
| 313 |
if (max != 0) { |
| 314 |
|
| 315 |
} |
| 316 |
hsb.s = max != 0 ? 255 * delta / max : 0; |
| 317 |
if (hsb.s != 0) { |
| 318 |
if (rgb.r == max) { |
| 319 |
hsb.h = (rgb.g - rgb.b) / delta; |
| 320 |
} else if (rgb.g == max) { |
| 321 |
hsb.h = 2 + (rgb.b - rgb.r) / delta; |
| 322 |
} else { |
| 323 |
hsb.h = 4 + (rgb.r - rgb.g) / delta; |
| 324 |
} |
| 325 |
} else { |
| 326 |
hsb.h = -1; |
| 327 |
} |
| 328 |
hsb.h *= 60; |
| 329 |
if (hsb.h < 0) { |
| 330 |
hsb.h += 360; |
| 331 |
} |
| 332 |
hsb.s *= 100 / 255; |
| 333 |
hsb.b *= 100 / 255; |
| 334 |
return hsb; |
| 335 |
}, |
| 336 |
HSBToRGB = function (hsb) { |
| 337 |
var rgb = {}; |
| 338 |
var h = Math.round(hsb.h); |
| 339 |
var s = Math.round(hsb.s * 255 / 100); |
| 340 |
var v = Math.round(hsb.b * 255 / 100); |
| 341 |
if (s == 0) { |
| 342 |
rgb.r = rgb.g = rgb.b = v; |
| 343 |
} else { |
| 344 |
var t1 = v; |
| 345 |
var t2 = (255 - s) * v / 255; |
| 346 |
var t3 = (t1 - t2) * (h % 60) / 60; |
| 347 |
if (h == 360) h = 0; |
| 348 |
if (h < 60) { rgb.r = t1; rgb.b = t2; rgb.g = t2 + t3 } |
| 349 |
else if (h < 120) { rgb.g = t1; rgb.b = t2; rgb.r = t1 - t3 } |
| 350 |
else if (h < 180) { rgb.g = t1; rgb.r = t2; rgb.b = t2 + t3 } |
| 351 |
else if (h < 240) { rgb.b = t1; rgb.r = t2; rgb.g = t1 - t3 } |
| 352 |
else if (h < 300) { rgb.b = t1; rgb.g = t2; rgb.r = t2 + t3 } |
| 353 |
else if (h < 360) { rgb.r = t1; rgb.g = t2; rgb.b = t1 - t3 } |
| 354 |
else { rgb.r = 0; rgb.g = 0; rgb.b = 0 } |
| 355 |
} |
| 356 |
return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) }; |
| 357 |
}, |
| 358 |
RGBToHex = function (rgb) { |
| 359 |
var hex = [ |
| 360 |
rgb.r.toString(16), |
| 361 |
rgb.g.toString(16), |
| 362 |
rgb.b.toString(16) |
| 363 |
]; |
| 364 |
$.each(hex, function (nr, val) { |
| 365 |
if (val.length == 1) { |
| 366 |
hex[nr] = '0' + val; |
| 367 |
} |
| 368 |
}); |
| 369 |
return hex.join(''); |
| 370 |
}, |
| 371 |
HSBToHex = function (hsb) { |
| 372 |
return RGBToHex(HSBToRGB(hsb)); |
| 373 |
}, |
| 374 |
restoreOriginal = function () { |
| 375 |
var cal = $(this).parent(); |
| 376 |
var col = cal.data('colorpicker').origColor; |
| 377 |
cal.data('colorpicker').color = col; |
| 378 |
fillRGBFields(col, cal.get(0)); |
| 379 |
fillHexFields(col, cal.get(0)); |
| 380 |
fillHSBFields(col, cal.get(0)); |
| 381 |
setSelector(col, cal.get(0)); |
| 382 |
setHue(col, cal.get(0)); |
| 383 |
setNewColor(col, cal.get(0)); |
| 384 |
}; |
| 385 |
return { |
| 386 |
init: function (opt) { |
| 387 |
opt = $.extend({}, defaults, opt || {}); |
| 388 |
if (typeof opt.color == 'string') { |
| 389 |
opt.color = HexToHSB(opt.color); |
| 390 |
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) { |
| 391 |
opt.color = RGBToHSB(opt.color); |
| 392 |
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) { |
| 393 |
opt.color = fixHSB(opt.color); |
| 394 |
} else { |
| 395 |
return this; |
| 396 |
} |
| 397 |
return this.each(function () { |
| 398 |
if (!$(this).data('colorpickerId')) { |
| 399 |
var options = $.extend({}, opt); |
| 400 |
options.origColor = opt.color; |
| 401 |
|
| 402 |
/* start mod */ |
| 403 |
|
| 404 |
if (typeof $.ColorPickerCountId === 'undefined') { |
| 405 |
$.ColorPickerCountId = 0; |
| 406 |
} |
| 407 |
|
| 408 |
// instead of using a random ID, just increase a counter |
| 409 |
var id = 'vbo_colorpicker_' + (++$.ColorPickerCountId); |
| 410 |
// var id = 'collorpicker_' + parseInt(Math.random() * 1000); |
| 411 |
|
| 412 |
/* end mod */ |
| 413 |
|
| 414 |
$(this).data('colorpickerId', id); |
| 415 |
var cal = $(tpl).attr('id', id); |
| 416 |
if (options.flat) { |
| 417 |
cal.appendTo(this).show(); |
| 418 |
} else { |
| 419 |
cal.appendTo(document.body); |
| 420 |
} |
| 421 |
options.fields = cal |
| 422 |
.find('input') |
| 423 |
.bind('keyup', keyDown) |
| 424 |
.bind('change', change) |
| 425 |
.bind('blur', blur) |
| 426 |
.bind('focus', focus); |
| 427 |
cal |
| 428 |
.find('span').bind('mousedown', downIncrement).end() |
| 429 |
.find('>div.colorpicker_current_color').bind('click', restoreOriginal); |
| 430 |
options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector); |
| 431 |
options.selectorIndic = options.selector.find('div div'); |
| 432 |
options.el = this; |
| 433 |
options.hue = cal.find('div.colorpicker_hue div'); |
| 434 |
cal.find('div.colorpicker_hue').bind('mousedown', downHue); |
| 435 |
options.newColor = cal.find('div.colorpicker_new_color'); |
| 436 |
options.currentColor = cal.find('div.colorpicker_current_color'); |
| 437 |
cal.data('colorpicker', options); |
| 438 |
cal.find('div.colorpicker_submit') |
| 439 |
.bind('mouseenter', enterSubmit) |
| 440 |
.bind('mouseleave', leaveSubmit) |
| 441 |
.bind('click', clickSubmit); |
| 442 |
fillRGBFields(options.color, cal.get(0)); |
| 443 |
fillHSBFields(options.color, cal.get(0)); |
| 444 |
fillHexFields(options.color, cal.get(0)); |
| 445 |
setHue(options.color, cal.get(0)); |
| 446 |
setSelector(options.color, cal.get(0)); |
| 447 |
setCurrentColor(options.color, cal.get(0)); |
| 448 |
setNewColor(options.color, cal.get(0)); |
| 449 |
if (options.flat) { |
| 450 |
cal.css({ |
| 451 |
position: 'relative', |
| 452 |
display: 'block' |
| 453 |
}); |
| 454 |
} else { |
| 455 |
$(this).bind(options.eventName, show); |
| 456 |
} |
| 457 |
} |
| 458 |
}); |
| 459 |
}, |
| 460 |
showPicker: function () { |
| 461 |
return this.each(function () { |
| 462 |
if ($(this).data('colorpickerId')) { |
| 463 |
show.apply(this); |
| 464 |
} |
| 465 |
}); |
| 466 |
}, |
| 467 |
hidePicker: function () { |
| 468 |
return this.each(function () { |
| 469 |
if ($(this).data('colorpickerId')) { |
| 470 |
$('#' + $(this).data('colorpickerId')).hide(); |
| 471 |
} |
| 472 |
}); |
| 473 |
}, |
| 474 |
setColor: function (col) { |
| 475 |
if (typeof col == 'string') { |
| 476 |
col = HexToHSB(col); |
| 477 |
} else if (col.r != undefined && col.g != undefined && col.b != undefined) { |
| 478 |
col = RGBToHSB(col); |
| 479 |
} else if (col.h != undefined && col.s != undefined && col.b != undefined) { |
| 480 |
col = fixHSB(col); |
| 481 |
} else { |
| 482 |
return this; |
| 483 |
} |
| 484 |
return this.each(function () { |
| 485 |
if ($(this).data('colorpickerId')) { |
| 486 |
var cal = $('#' + $(this).data('colorpickerId')); |
| 487 |
cal.data('colorpicker').color = col; |
| 488 |
cal.data('colorpicker').origColor = col; |
| 489 |
fillRGBFields(col, cal.get(0)); |
| 490 |
fillHSBFields(col, cal.get(0)); |
| 491 |
fillHexFields(col, cal.get(0)); |
| 492 |
setHue(col, cal.get(0)); |
| 493 |
setSelector(col, cal.get(0)); |
| 494 |
setCurrentColor(col, cal.get(0)); |
| 495 |
setNewColor(col, cal.get(0)); |
| 496 |
} |
| 497 |
}); |
| 498 |
} |
| 499 |
}; |
| 500 |
} (); |
| 501 |
$.fn.extend({ |
| 502 |
ColorPicker: ColorPicker.init, |
| 503 |
ColorPickerHide: ColorPicker.hidePicker, |
| 504 |
ColorPickerShow: ColorPicker.showPicker, |
| 505 |
ColorPickerSetColor: ColorPicker.setColor |
| 506 |
}); |
| 507 |
})(jQuery) |
