[Summary view] [Print] [Text view]

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