home *** CD-ROM | disk | FTP | other *** search
/ HTML Examples / WP.iso / wordpress2 / wp-admin / js / farbtastic.js < prev    next >
Encoding:
JavaScript  |  2010-11-11  |  7.5 KB  |  276 lines
  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);