resources/jquery/jquery.farbtastic.js

   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 //Adapted to uniform style with jQuery UI widgets and slightly change behavior
  21 //TODO:
  22 // - remove duplicated code by replacing it with jquery.colorUtils and modern jQuery
  23 // - uniform code style
  24
  25 jQuery.fn.farbtastic = function (callback) {
  26         $.farbtastic(this, callback);
  27         return this;
  28 };
  29
  30 jQuery.farbtastic = function (container, callback) {
  31         var container = $(container).get(0);
  32         return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback));
  33 }
  34
  35 jQuery._farbtastic = function (container, callback) {
  36         // Store farbtastic object
  37         var fb = this;
  38
  39         // Insert markup
  40         $(container).html('<div class="farbtastic ui-widget-content"><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>');
  41         $(container).addClass('ui-widget');
  42         var e = $('.farbtastic', container);
  43         fb.wheel = $('.wheel', container).get(0);
  44         // Dimensions
  45         fb.radius = 84;
  46         fb.square = 100;
  47         fb.width = 194;
  48
  49         // Fix background PNGs in IE6
  50         if (navigator.appVersion.match(/MSIE [0-6]\./)) {
  51                 $('*', e).each(function () {
  52                         if (this.currentStyle.backgroundImage != 'none') {
  53                                 var image = this.currentStyle.backgroundImage;
  54                                 image = this.currentStyle.backgroundImage.substring(5, image.length - 2);
  55                                 $(this).css({
  56                                         'backgroundImage': 'none',
  57                                         'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
  58                                 });
  59                         }
  60                 });
  61         }
  62
  63         /**
  64          * Link to the given element(s) or callback.
  65          */
  66         fb.linkTo = function (callback) {
  67                 // Unbind previous nodes
  68                 if (typeof fb.callback == 'object') {
  69                         $(fb.callback).unbind('keyup', fb.updateValue);
  70                 }
  71
  72                 // Reset color
  73                 fb.color = null;
  74
  75                 // Bind callback or elements
  76                 if (typeof callback == 'function') {
  77                         fb.callback = callback;
  78                 }
  79                 else if (typeof callback == 'object' || typeof callback == 'string') {
  80                         fb.callback = $(callback);
  81                         fb.callback.bind('keyup', fb.updateValue);
  82                         if (fb.callback.get(0).value) {
  83                                 fb.setColor(fb.callback.get(0).value);
  84                         }
  85                 }
  86                 return this;
  87         }
  88         fb.updateValue = function (event) {
  89                 if (this.value != fb.color) {
  90                         fb.setColor(this.value);
  91                 }
  92         }
  93
  94         /**
  95          * Change color with HTML syntax #123456
  96          */
  97         fb.setColor = function (color) {
  98                 var rgb = $.colorUtil.getRGB( color );
  99                 if (fb.color != color && rgb) {
 100                         rgb = rgb.slice( 0 ); //make a clone
 101                         //TODO: rewrite code so that this is not needed
 102                         rgb[0] /= 255;
 103                         rgb[1] /= 255;
 104                         rgb[2] /= 255;
 105                         fb.color = color;
 106                         fb.rgb = rgb;
 107                         fb.hsl = fb.RGBToHSL(fb.rgb);
 108                         fb.updateDisplay();
 109                 }
 110                 return this;
 111         }
 112
 113         /**
 114          * Change color with HSL triplet [0..1, 0..1, 0..1]
 115          */
 116         fb.setHSL = function (hsl) {
 117                 fb.hsl = hsl;
 118                 fb.rgb = fb.HSLToRGB(hsl);
 119                 fb.color = fb.pack(fb.rgb);
 120                 fb.updateDisplay();
 121                 return this;
 122         }
 123
 124         /////////////////////////////////////////////////////
 125
 126         /**
 127          * Retrieve the coordinates of the given event relative to the center
 128          * of the widget.
 129          */
 130         fb.widgetCoords = function (event) {
 131                 var ref = $( fb.wheel ).offset();
 132                 return {
 133                         x: event.pageX - ref.left - fb.width / 2,
 134                         y: event.pageY - ref.top - fb.width / 2
 135                 };
 136         }
 137
 138         /**
 139          * Mousedown handler
 140          */
 141         fb.mousedown = function (event) {
 142                 // Capture mouse
 143                 if (!document.dragging) {
 144                         $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup);
 145                         document.dragging = true;
 146                 }
 147
 148                 // Check which area is being dragged
 149                 var pos = fb.widgetCoords(event);
 150                 fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square;
 151
 152                 // Process
 153                 fb.mousemove(event);
 154                 return false;
 155         }
 156
 157         /**
 158          * Mousemove handler
 159          */
 160         fb.mousemove = function (event) {
 161                 // Get coordinates relative to color picker center
 162                 var pos = fb.widgetCoords(event);
 163
 164                 // Set new HSL parameters
 165                 if (fb.circleDrag) {
 166                         var hue = Math.atan2(pos.x, -pos.y) / 6.28;
 167                         if (hue < 0) hue += 1;
 168                         fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]);
 169                 }
 170                 else {
 171                         var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5));
 172                         var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5));
 173                         fb.setHSL([fb.hsl[0], sat, lum]);
 174                 }
 175                 return false;
 176         }
 177
 178         /**
 179          * Mouseup handler
 180          */
 181         fb.mouseup = function () {
 182                 // Uncapture mouse
 183                 $(document).unbind('mousemove', fb.mousemove);
 184                 $(document).unbind('mouseup', fb.mouseup);
 185                 document.dragging = false;
 186         }
 187
 188         /**
 189          * Update the markers and styles
 190          */
 191         fb.updateDisplay = function () {
 192                 // Markers
 193                 var angle = fb.hsl[0] * 6.28;
 194                 $('.h-marker', e).css({
 195                         left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px',
 196                         top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px'
 197                 });
 198
 199                 $('.sl-marker', e).css({
 200                         left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px',
 201                         top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px'
 202                 });
 203
 204                 // Saturation/Luminance gradient
 205                 $('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])));
 206
 207                 // Linked elements or callback
 208                 if (typeof fb.callback == 'object') {
 209                         // Set background/foreground color
 210                         $(fb.callback).css({
 211                                 backgroundColor: fb.color,
 212                                 color: fb.hsl[2] > 0.5 ? '#000' : '#fff'
 213                         });
 214
 215                         // Change linked value
 216                         $(fb.callback).each(function() {
 217                                 if ( $( this ).val() != fb.color) {
 218                                         $( this ).val( fb.color ).change();
 219                                 }
 220                         });
 221                 }
 222                 else if (typeof fb.callback == 'function') {
 223                         fb.callback.call(fb, fb.color);
 224                 }
 225         }
 226
 227         /* Various color utility functions */
 228         fb.pack = function (rgb) {
 229                 var r = Math.round(rgb[0] * 255);
 230                 var g = Math.round(rgb[1] * 255);
 231                 var b = Math.round(rgb[2] * 255);
 232                 return '#' + (r < 16 ? '0' : '') + r.toString(16) +
 233                                          (g < 16 ? '0' : '') + g.toString(16) +
 234                                          (b < 16 ? '0' : '') + b.toString(16);
 235         }
 236
 237         fb.HSLToRGB = function (hsl) {
 238                 var m1, m2, r, g, b;
 239                 var h = hsl[0], s = hsl[1], l = hsl[2];
 240                 m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s;
 241                 m1 = l * 2 - m2;
 242                 return [this.hueToRGB(m1, m2, h+0.33333),
 243                                 this.hueToRGB(m1, m2, h),
 244                                 this.hueToRGB(m1, m2, h-0.33333)];
 245         }
 246
 247         fb.hueToRGB = function (m1, m2, h) {
 248                 h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
 249                 if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
 250                 if (h * 2 < 1) return m2;
 251                 if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
 252                 return m1;
 253         }
 254
 255         fb.RGBToHSL = function (rgb) {
 256                 var min, max, delta, h, s, l;
 257                 var r = rgb[0], g = rgb[1], b = rgb[2];
 258                 min = Math.min(r, Math.min(g, b));
 259                 max = Math.max(r, Math.max(g, b));
 260                 delta = max - min;
 261                 l = (min + max) / 2;
 262                 s = 0;
 263                 if (l > 0 && l < 1) {
 264                         s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
 265                 }
 266                 h = 0;
 267                 if (delta > 0) {
 268                         if (max == r && max != g) h += (g - b) / delta;
 269                         if (max == g && max != b) h += (2 + (b - r) / delta);
 270                         if (max == b && max != r) h += (4 + (r - g) / delta);
 271                         h /= 6;
 272                 }
 273                 return [h, s, l];
 274         }
 275
 276         // Install mousedown handler (the others are set on the document on-demand)
 277         $('*', e).mousedown(fb.mousedown);
 278
 279                 // Init color
 280         fb.setColor('#000000');
 281
 282         // Set linked elements/callback
 283         if (callback) {
 284                 fb.linkTo(callback);
 285         }
 286 }