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);