[5341] | 1 | /** |
---|
| 2 | * Farbtastic Color Picker 1.2 |
---|
| 3 | * © 2008 Steven Wittens |
---|
| 4 | * |
---|
| 5 | * This program is free software; you can redistribute it and/or modify |
---|
| 6 | * it under the terms of the GNU General Public License as published by |
---|
| 7 | * the Free Software Foundation; either version 2 of the License, or |
---|
| 8 | * (at your option) any later version. |
---|
| 9 | * |
---|
| 10 | * This program is distributed in the hope that it will be useful, |
---|
| 11 | * but WITHOUT ANY WARRANTY; without even the implied warranty of |
---|
| 12 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
---|
| 13 | * GNU General Public License for more details. |
---|
| 14 | * |
---|
| 15 | * You should have received a copy of the GNU General Public License |
---|
| 16 | * along with this program; if not, write to the Free Software |
---|
| 17 | * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA |
---|
| 18 | */ |
---|
| 19 | |
---|
| 20 | jQuery.fn.farbtastic = function (callback) { |
---|
| 21 | $.farbtastic(this, callback); |
---|
| 22 | return this; |
---|
| 23 | }; |
---|
| 24 | |
---|
| 25 | jQuery.farbtastic = function (container, callback) { |
---|
| 26 | var container = $(container).get(0); |
---|
| 27 | return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback)); |
---|
| 28 | } |
---|
| 29 | |
---|
| 30 | jQuery._farbtastic = function (container, callback) { |
---|
| 31 | // Store farbtastic object |
---|
| 32 | var fb = this; |
---|
| 33 | |
---|
| 34 | // Insert markup |
---|
| 35 | $(container).html('<div class="farbtastic"><div class="color"></div><div class="wheel"></div><div class="overlay"></div><div class="h-marker marker"></div><div class="sl-marker marker"></div></div>'); |
---|
| 36 | var e = $('.farbtastic', container); |
---|
| 37 | fb.wheel = $('.wheel', container).get(0); |
---|
| 38 | // Dimensions |
---|
| 39 | fb.radius = 84; |
---|
| 40 | fb.square = 100; |
---|
| 41 | fb.width = 194; |
---|
| 42 | |
---|
| 43 | // Fix background PNGs in IE6 |
---|
| 44 | if (navigator.appVersion.match(/MSIE [0-6]\./)) { |
---|
| 45 | $('*', e).each(function () { |
---|
| 46 | if (this.currentStyle.backgroundImage != 'none') { |
---|
| 47 | var image = this.currentStyle.backgroundImage; |
---|
| 48 | image = this.currentStyle.backgroundImage.substring(5, image.length - 2); |
---|
| 49 | $(this).css({ |
---|
| 50 | 'backgroundImage': 'none', |
---|
| 51 | 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')" |
---|
| 52 | }); |
---|
| 53 | } |
---|
| 54 | }); |
---|
| 55 | } |
---|
| 56 | |
---|
| 57 | /** |
---|
| 58 | * Link to the given element(s) or callback. |
---|
| 59 | */ |
---|
| 60 | fb.linkTo = function (callback) { |
---|
| 61 | // Unbind previous nodes |
---|
| 62 | if (typeof fb.callback == 'object') { |
---|
| 63 | $(fb.callback).unbind('keyup', fb.updateValue); |
---|
| 64 | } |
---|
| 65 | |
---|
| 66 | // Reset color |
---|
| 67 | fb.color = null; |
---|
| 68 | |
---|
| 69 | // Bind callback or elements |
---|
| 70 | if (typeof callback == 'function') { |
---|
| 71 | fb.callback = callback; |
---|
| 72 | } |
---|
| 73 | else if (typeof callback == 'object' || typeof callback == 'string') { |
---|
| 74 | fb.callback = $(callback); |
---|
| 75 | fb.callback.bind('keyup', fb.updateValue); |
---|
| 76 | if (fb.callback.get(0).value) { |
---|
| 77 | fb.setColor(fb.callback.get(0).value); |
---|
| 78 | } |
---|
| 79 | } |
---|
| 80 | return this; |
---|
| 81 | } |
---|
| 82 | fb.updateValue = function (event) { |
---|
| 83 | if (this.value && this.value != fb.color) { |
---|
| 84 | fb.setColor(this.value); |
---|
| 85 | } |
---|
| 86 | } |
---|
| 87 | |
---|
| 88 | /** |
---|
| 89 | * Change color with HTML syntax #123456 |
---|
| 90 | */ |
---|
| 91 | fb.setColor = function (color) { |
---|
| 92 | var unpack = fb.unpack(color); |
---|
| 93 | if (fb.color != color && unpack) { |
---|
| 94 | fb.color = color; |
---|
| 95 | fb.rgb = unpack; |
---|
| 96 | fb.hsl = fb.RGBToHSL(fb.rgb); |
---|
| 97 | fb.updateDisplay(); |
---|
| 98 | } |
---|
| 99 | return this; |
---|
| 100 | } |
---|
| 101 | |
---|
| 102 | /** |
---|
| 103 | * Change color with HSL triplet [0..1, 0..1, 0..1] |
---|
| 104 | */ |
---|
| 105 | fb.setHSL = function (hsl) { |
---|
| 106 | fb.hsl = hsl; |
---|
| 107 | fb.rgb = fb.HSLToRGB(hsl); |
---|
| 108 | fb.color = fb.pack(fb.rgb); |
---|
| 109 | fb.updateDisplay(); |
---|
| 110 | return this; |
---|
| 111 | } |
---|
| 112 | |
---|
| 113 | ///////////////////////////////////////////////////// |
---|
| 114 | |
---|
| 115 | /** |
---|
| 116 | * Retrieve the coordinates of the given event relative to the center |
---|
| 117 | * of the widget. |
---|
| 118 | */ |
---|
| 119 | fb.widgetCoords = function (event) { |
---|
| 120 | var x, y; |
---|
| 121 | var el = event.target || event.srcElement; |
---|
| 122 | var reference = fb.wheel; |
---|
| 123 | |
---|
| 124 | if (typeof event.offsetX != 'undefined') { |
---|
| 125 | // Use offset coordinates and find common offsetParent |
---|
| 126 | var pos = { x: event.offsetX, y: event.offsetY }; |
---|
| 127 | |
---|
| 128 | // Send the coordinates upwards through the offsetParent chain. |
---|
| 129 | var e = el; |
---|
| 130 | while (e) { |
---|
| 131 | e.mouseX = pos.x; |
---|
| 132 | e.mouseY = pos.y; |
---|
| 133 | pos.x += e.offsetLeft; |
---|
| 134 | pos.y += e.offsetTop; |
---|
| 135 | e = e.offsetParent; |
---|
| 136 | } |
---|
| 137 | |
---|
| 138 | // Look for the coordinates starting from the wheel widget. |
---|
| 139 | var e = reference; |
---|
| 140 | var offset = { x: 0, y: 0 } |
---|
| 141 | while (e) { |
---|
| 142 | if (typeof e.mouseX != 'undefined') { |
---|
| 143 | x = e.mouseX - offset.x; |
---|
| 144 | y = e.mouseY - offset.y; |
---|
| 145 | break; |
---|
| 146 | } |
---|
| 147 | offset.x += e.offsetLeft; |
---|
| 148 | offset.y += e.offsetTop; |
---|
| 149 | e = e.offsetParent; |
---|
| 150 | } |
---|
| 151 | |
---|
| 152 | // Reset stored coordinates |
---|
| 153 | e = el; |
---|
| 154 | while (e) { |
---|
| 155 | e.mouseX = undefined; |
---|
| 156 | e.mouseY = undefined; |
---|
| 157 | e = e.offsetParent; |
---|
| 158 | } |
---|
| 159 | } |
---|
| 160 | else { |
---|
| 161 | // Use absolute coordinates |
---|
| 162 | var pos = fb.absolutePosition(reference); |
---|
| 163 | |
---|
| 164 | /** |
---|
| 165 | * TODO - |
---|
| 166 | * Remover este código assim que a comunidade do plugin farbtastic incorporar |
---|
| 167 | * uma solução definitiva para o problema do container com scroll |
---|
| 168 | */ |
---|
| 169 | /** |
---|
| 170 | * Begin: Solução temporária para o problema do container com scroll |
---|
| 171 | */ |
---|
| 172 | var pr = $(el).parents("div#divAppbox"); |
---|
| 173 | pos.x -= + pr.scrollLeft(); |
---|
| 174 | pos.y -= + pr.scrollTop(); |
---|
| 175 | /** |
---|
| 176 | * End: Solução temporária para o problema do container com scroll |
---|
| 177 | */ |
---|
| 178 | |
---|
| 179 | x = (event.pageX || 0*(event.clientX + $('html').get(0).scrollLeft)) - pos.x; |
---|
| 180 | y = (event.pageY || 0*(event.clientY + $('html').get(0).scrollTop)) - pos.y; |
---|
| 181 | } |
---|
| 182 | // Subtract distance to middle |
---|
| 183 | return { x: x - fb.width / 2, y: y - fb.width / 2 }; |
---|
| 184 | } |
---|
| 185 | |
---|
| 186 | /** |
---|
| 187 | * Mousedown handler |
---|
| 188 | */ |
---|
| 189 | fb.mousedown = function (event) { |
---|
| 190 | // Capture mouse |
---|
| 191 | if (!document.dragging) { |
---|
| 192 | $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup); |
---|
| 193 | document.dragging = true; |
---|
| 194 | } |
---|
| 195 | |
---|
| 196 | // Check which area is being dragged |
---|
| 197 | var pos = fb.widgetCoords(event); |
---|
| 198 | fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square; |
---|
| 199 | |
---|
| 200 | // Process |
---|
| 201 | fb.mousemove(event); |
---|
| 202 | return false; |
---|
| 203 | } |
---|
| 204 | |
---|
| 205 | /** |
---|
| 206 | * Mousemove handler |
---|
| 207 | */ |
---|
| 208 | fb.mousemove = function (event) { |
---|
| 209 | // Get coordinates relative to color picker center |
---|
| 210 | var pos = fb.widgetCoords(event); |
---|
| 211 | |
---|
| 212 | // Set new HSL parameters |
---|
| 213 | if (fb.circleDrag) { |
---|
| 214 | var hue = Math.atan2(pos.x, -pos.y) / 6.28; |
---|
| 215 | if (hue < 0) hue += 1; |
---|
| 216 | fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]); |
---|
| 217 | } |
---|
| 218 | else { |
---|
| 219 | var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5)); |
---|
| 220 | var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5)); |
---|
| 221 | fb.setHSL([fb.hsl[0], sat, lum]); |
---|
| 222 | } |
---|
| 223 | return false; |
---|
| 224 | } |
---|
| 225 | |
---|
| 226 | /** |
---|
| 227 | * Mouseup handler |
---|
| 228 | */ |
---|
| 229 | fb.mouseup = function () { |
---|
| 230 | // Uncapture mouse |
---|
| 231 | $(document).unbind('mousemove', fb.mousemove); |
---|
| 232 | $(document).unbind('mouseup', fb.mouseup); |
---|
| 233 | document.dragging = false; |
---|
| 234 | } |
---|
| 235 | |
---|
| 236 | /** |
---|
| 237 | * Update the markers and styles |
---|
| 238 | */ |
---|
| 239 | fb.updateDisplay = function () { |
---|
| 240 | // Markers |
---|
| 241 | var angle = fb.hsl[0] * 6.28; |
---|
| 242 | $('.h-marker', e).css({ |
---|
| 243 | left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px', |
---|
| 244 | top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px' |
---|
| 245 | }); |
---|
| 246 | |
---|
| 247 | $('.sl-marker', e).css({ |
---|
| 248 | left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px', |
---|
| 249 | top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px' |
---|
| 250 | }); |
---|
| 251 | |
---|
| 252 | // Saturation/Luminance gradient |
---|
| 253 | $('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5]))); |
---|
| 254 | |
---|
| 255 | // Linked elements or callback |
---|
| 256 | if (typeof fb.callback == 'object') { |
---|
| 257 | // Set background/foreground color |
---|
| 258 | $(fb.callback).css({ |
---|
| 259 | backgroundColor: fb.color, |
---|
| 260 | color: fb.hsl[2] > 0.5 ? '#000' : '#fff' |
---|
| 261 | }); |
---|
| 262 | |
---|
| 263 | // Change linked value |
---|
| 264 | $(fb.callback).each(function() { |
---|
| 265 | if (this.value && this.value != fb.color) { |
---|
| 266 | this.value = fb.color; |
---|
| 267 | } |
---|
| 268 | }); |
---|
| 269 | } |
---|
| 270 | else if (typeof fb.callback == 'function') { |
---|
| 271 | fb.callback.call(fb, fb.color); |
---|
| 272 | } |
---|
| 273 | } |
---|
| 274 | |
---|
| 275 | /** |
---|
| 276 | * Get absolute position of element |
---|
| 277 | */ |
---|
| 278 | fb.absolutePosition = function (el) { |
---|
| 279 | var r = { x: el.offsetLeft, y: el.offsetTop }; |
---|
| 280 | // Resolve relative to offsetParent |
---|
| 281 | if (el.offsetParent) { |
---|
| 282 | var tmp = fb.absolutePosition(el.offsetParent); |
---|
| 283 | r.x += tmp.x; |
---|
| 284 | r.y += tmp.y; |
---|
| 285 | } |
---|
| 286 | return r; |
---|
| 287 | }; |
---|
| 288 | |
---|
| 289 | /* Various color utility functions */ |
---|
| 290 | fb.pack = function (rgb) { |
---|
| 291 | var r = Math.round(rgb[0] * 255); |
---|
| 292 | var g = Math.round(rgb[1] * 255); |
---|
| 293 | var b = Math.round(rgb[2] * 255); |
---|
| 294 | return '#' + (r < 16 ? '0' : '') + r.toString(16) + |
---|
| 295 | (g < 16 ? '0' : '') + g.toString(16) + |
---|
| 296 | (b < 16 ? '0' : '') + b.toString(16); |
---|
| 297 | } |
---|
| 298 | |
---|
| 299 | fb.unpack = function (color) { |
---|
| 300 | if (color.length == 7) { |
---|
| 301 | return [parseInt('0x' + color.substring(1, 3)) / 255, |
---|
| 302 | parseInt('0x' + color.substring(3, 5)) / 255, |
---|
| 303 | parseInt('0x' + color.substring(5, 7)) / 255]; |
---|
| 304 | } |
---|
| 305 | else if (color.length == 4) { |
---|
| 306 | return [parseInt('0x' + color.substring(1, 2)) / 15, |
---|
| 307 | parseInt('0x' + color.substring(2, 3)) / 15, |
---|
| 308 | parseInt('0x' + color.substring(3, 4)) / 15]; |
---|
| 309 | } |
---|
| 310 | } |
---|
| 311 | |
---|
| 312 | fb.HSLToRGB = function (hsl) { |
---|
| 313 | var m1, m2, r, g, b; |
---|
| 314 | var h = hsl[0], s = hsl[1], l = hsl[2]; |
---|
| 315 | m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s; |
---|
| 316 | m1 = l * 2 - m2; |
---|
| 317 | return [this.hueToRGB(m1, m2, h+0.33333), |
---|
| 318 | this.hueToRGB(m1, m2, h), |
---|
| 319 | this.hueToRGB(m1, m2, h-0.33333)]; |
---|
| 320 | } |
---|
| 321 | |
---|
| 322 | fb.hueToRGB = function (m1, m2, h) { |
---|
| 323 | h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); |
---|
| 324 | if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; |
---|
| 325 | if (h * 2 < 1) return m2; |
---|
| 326 | if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; |
---|
| 327 | return m1; |
---|
| 328 | } |
---|
| 329 | |
---|
| 330 | fb.RGBToHSL = function (rgb) { |
---|
| 331 | var min, max, delta, h, s, l; |
---|
| 332 | var r = rgb[0], g = rgb[1], b = rgb[2]; |
---|
| 333 | min = Math.min(r, Math.min(g, b)); |
---|
| 334 | max = Math.max(r, Math.max(g, b)); |
---|
| 335 | delta = max - min; |
---|
| 336 | l = (min + max) / 2; |
---|
| 337 | s = 0; |
---|
| 338 | if (l > 0 && l < 1) { |
---|
| 339 | s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); |
---|
| 340 | } |
---|
| 341 | h = 0; |
---|
| 342 | if (delta > 0) { |
---|
| 343 | if (max == r && max != g) h += (g - b) / delta; |
---|
| 344 | if (max == g && max != b) h += (2 + (b - r) / delta); |
---|
| 345 | if (max == b && max != r) h += (4 + (r - g) / delta); |
---|
| 346 | h /= 6; |
---|
| 347 | } |
---|
| 348 | return [h, s, l]; |
---|
| 349 | } |
---|
| 350 | |
---|
| 351 | // Install mousedown handler (the others are set on the document on-demand) |
---|
| 352 | $('*', e).mousedown(fb.mousedown); |
---|
| 353 | |
---|
| 354 | // Init color |
---|
| 355 | fb.setColor('#000000'); |
---|
| 356 | |
---|
| 357 | // Set linked elements/callback |
---|
| 358 | if (callback) { |
---|
| 359 | fb.linkTo(callback); |
---|
| 360 | } |
---|
| 361 | } |
---|