wp-admin/js/farbtastic.js

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