Ticket #14707: farbtastic-1.3u.patch
File farbtastic-1.3u.patch, 9.3 KB (added by , 15 years ago) |
---|
-
js/farbtastic.js
1 // $Id: farbtastic.js,v 1.2 2007/01/08 22:53:01 unconed Exp $ 2 // Farbtastic 1.2 1 /*! 2 * Farbtastic: jQuery color picker plug-in v1.3u 3 * 4 * Licensed under the GPL license: 5 * http://www.gnu.org/licenses/gpl.html 6 */ 7 (function($) { 3 8 4 var farbtastic_click = false; 5 6 jQuery.fn.farbtastic = function (callback) { 7 jQuery.farbtastic(this, callback); 9 $.fn.farbtastic = function (options) { 10 $.farbtastic(this, options); 8 11 return this; 9 12 }; 10 13 11 jQuery.farbtastic = function (container, callback) {12 var container = jQuery(container).get(0);13 return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback));14 } 14 $.farbtastic = function (container, callback) { 15 var container = $(container).get(0); 16 return container.farbtastic || (container.farbtastic = new $._farbtastic(container, callback)); 17 }; 15 18 16 jQuery._farbtastic = function (container, callback) {19 $._farbtastic = function (container, callback) { 17 20 // Store farbtastic object 18 21 var fb = this; 19 22 20 23 // Insert markup 21 jQuery(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>');22 var e = jQuery('.farbtastic', container);23 fb.wheel = jQuery('.wheel', container).get(0);24 $(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>'); 25 var e = $('.farbtastic', container); 26 fb.wheel = $('.wheel', container).get(0); 24 27 // Dimensions 25 28 fb.radius = 84; 26 29 fb.square = 100; … … 28 31 29 32 // Fix background PNGs in IE6 30 33 if (navigator.appVersion.match(/MSIE [0-6]\./)) { 31 jQuery('*', e).each(function () {34 $('*', e).each(function () { 32 35 if (this.currentStyle.backgroundImage != 'none') { 33 36 var image = this.currentStyle.backgroundImage; 34 37 image = this.currentStyle.backgroundImage.substring(5, image.length - 2); 35 jQuery(this).css({38 $(this).css({ 36 39 'backgroundImage': 'none', 37 40 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')" 38 41 }); … … 46 49 fb.linkTo = function (callback) { 47 50 // Unbind previous nodes 48 51 if (typeof fb.callback == 'object') { 49 jQuery(fb.callback).unbind('keyup', fb.updateValue);52 $(fb.callback).unbind('keyup', fb.updateValue); 50 53 } 51 54 52 55 // Reset color … … 57 60 fb.callback = callback; 58 61 } 59 62 else if (typeof callback == 'object' || typeof callback == 'string') { 60 fb.callback = jQuery(callback);63 fb.callback = $(callback); 61 64 fb.callback.bind('keyup', fb.updateValue); 62 65 if (fb.callback.get(0).value) { 63 66 fb.setColor(fb.callback.get(0).value); 64 67 } 65 68 } 66 69 return this; 67 } 70 }; 68 71 fb.updateValue = function (event) { 69 72 if (this.value && this.value != fb.color) { 70 73 fb.setColor(this.value); 71 74 } 72 } 75 }; 73 76 74 77 /** 75 78 * Change color with HTML syntax #123456 … … 83 86 fb.updateDisplay(); 84 87 } 85 88 return this; 86 } 89 }; 87 90 88 91 /** 89 92 * Change color with HSL triplet [0..1, 0..1, 0..1] … … 94 97 fb.color = fb.pack(fb.rgb); 95 98 fb.updateDisplay(); 96 99 return this; 97 } 100 }; 98 101 99 102 ///////////////////////////////////////////////////// 100 103 … … 103 106 * of the widget. 104 107 */ 105 108 fb.widgetCoords = function (event) { 106 var x, y;107 var el = event.target || event.srcElement;108 var reference = fb.wheel;109 var offset = $(fb.wheel).offset(); 110 return { x: (event.pageX - offset.left) - fb.width / 2, y: (event.pageY - offset.top) - fb.width / 2 }; 111 }; 109 112 110 if (typeof event.offsetX != 'undefined') {111 // Use offset coordinates and find common offsetParent112 var pos = { x: event.offsetX, y: event.offsetY };113 114 // Send the coordinates upwards through the offsetParent chain.115 var e = el;116 while (e) {117 e.mouseX = pos.x;118 e.mouseY = pos.y;119 pos.x += e.offsetLeft;120 pos.y += e.offsetTop;121 e = e.offsetParent;122 }123 124 // Look for the coordinates starting from the wheel widget.125 var e = reference;126 var offset = { x: 0, y: 0 }127 while (e) {128 if (typeof e.mouseX != 'undefined') {129 x = e.mouseX - offset.x;130 y = e.mouseY - offset.y;131 break;132 }133 offset.x += e.offsetLeft;134 offset.y += e.offsetTop;135 e = e.offsetParent;136 }137 138 // Reset stored coordinates139 e = el;140 while (e) {141 e.mouseX = undefined;142 e.mouseY = undefined;143 e = e.offsetParent;144 }145 }146 else {147 // Use absolute coordinates148 var pos = fb.absolutePosition(reference);149 x = (event.pageX || 0*(event.clientX + jQuery('html').get(0).scrollLeft)) - pos.x;150 y = (event.pageY || 0*(event.clientY + jQuery('html').get(0).scrollTop)) - pos.y;151 }152 // Subtract distance to middle153 return { x: x - fb.width / 2, y: y - fb.width / 2 };154 }155 156 113 /** 157 114 * Mousedown handler 158 115 */ 159 116 fb.mousedown = function (event) { 160 farbtastic_click = true;161 117 // Capture mouse 162 118 if (!document.dragging) { 163 jQuery(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup);119 $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup); 164 120 document.dragging = true; 165 121 } 166 122 … … 171 127 // Process 172 128 fb.mousemove(event); 173 129 return false; 174 } 130 }; 175 131 176 132 /** 177 133 * Mousemove handler … … 192 148 fb.setHSL([fb.hsl[0], sat, lum]); 193 149 } 194 150 return false; 195 } 151 }; 196 152 197 153 /** 198 154 * Mouseup handler 199 155 */ 200 156 fb.mouseup = function () { 201 157 // Uncapture mouse 202 farbtastic_click = false; 203 jQuery(document).unbind('mousemove', fb.mousemove); 204 jQuery(document).unbind('mouseup', fb.mouseup); 158 $(document).unbind('mousemove', fb.mousemove); 159 $(document).unbind('mouseup', fb.mouseup); 205 160 document.dragging = false; 206 } 161 }; 207 162 208 163 /** 209 164 * Update the markers and styles … … 211 166 fb.updateDisplay = function () { 212 167 // Markers 213 168 var angle = fb.hsl[0] * 6.28; 214 jQuery('.h-marker', e).css({169 $('.h-marker', e).css({ 215 170 left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px', 216 171 top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px' 217 172 }); 218 173 219 jQuery('.sl-marker', e).css({174 $('.sl-marker', e).css({ 220 175 left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px', 221 176 top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px' 222 177 }); 223 178 224 179 // Saturation/Luminance gradient 225 jQuery('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])));180 $('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5]))); 226 181 227 182 // Linked elements or callback 228 183 if (typeof fb.callback == 'object') { 229 184 // Set background/foreground color 230 jQuery(fb.callback).css({185 $(fb.callback).css({ 231 186 backgroundColor: fb.color, 232 187 color: fb.hsl[2] > 0.5 ? '#000' : '#fff' 233 188 }); 234 189 235 190 // Change linked value 236 jQuery(fb.callback).each(function() {191 $(fb.callback).each(function() { 237 192 if (this.value && this.value != fb.color) { 238 193 this.value = fb.color; 239 194 } … … 242 197 else if (typeof fb.callback == 'function') { 243 198 fb.callback.call(fb, fb.color); 244 199 } 245 }246 247 /**248 * Get absolute position of element249 */250 fb.absolutePosition = function (el) {251 var r = { x: el.offsetLeft, y: el.offsetTop };252 // Resolve relative to offsetParent253 if (el.offsetParent) {254 var tmp = fb.absolutePosition(el.offsetParent);255 r.x += tmp.x;256 r.y += tmp.y;257 }258 return r;259 200 }; 260 201 261 202 /* Various color utility functions */ … … 266 207 return '#' + (r < 16 ? '0' : '') + r.toString(16) + 267 208 (g < 16 ? '0' : '') + g.toString(16) + 268 209 (b < 16 ? '0' : '') + b.toString(16); 269 } 210 }; 270 211 271 212 fb.unpack = function (color) { 272 213 if (color.length == 7) { … … 279 220 parseInt('0x' + color.substring(2, 3)) / 15, 280 221 parseInt('0x' + color.substring(3, 4)) / 15]; 281 222 } 282 } 223 }; 283 224 284 225 fb.HSLToRGB = function (hsl) { 285 226 var m1, m2, r, g, b; … … 289 230 return [this.hueToRGB(m1, m2, h+0.33333), 290 231 this.hueToRGB(m1, m2, h), 291 232 this.hueToRGB(m1, m2, h-0.33333)]; 292 } 233 }; 293 234 294 235 fb.hueToRGB = function (m1, m2, h) { 295 236 h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); … … 297 238 if (h * 2 < 1) return m2; 298 239 if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; 299 240 return m1; 300 } 241 }; 301 242 302 243 fb.RGBToHSL = function (rgb) { 303 244 var min, max, delta, h, s, l; … … 318 259 h /= 6; 319 260 } 320 261 return [h, s, l]; 321 } 262 }; 322 263 323 264 // Install mousedown handler (the others are set on the document on-demand) 324 jQuery('*', e).mousedown(fb.mousedown);265 $('*', e).mousedown(fb.mousedown); 325 266 326 267 // Init color 327 268 fb.setColor('#000000'); … … 330 271 if (callback) { 331 272 fb.linkTo(callback); 332 273 } 333 } 334 No newline at end of file 274 }; 275 276 })(jQuery); 277 No newline at end of file