Changeset 26942 in spip-zone


Ignore:
Timestamp:
Feb 26, 2009, 3:14:34 PM (10 years ago)
Author:
kent1@…
Message:

le vrai farbtastic modifié

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _libs_/farbtastic/farbtastic.js

    r26449 r26942  
    22// Originaly from acko : http://acko.net/dev/farbtastic
    33// Modified by kent1 for new jQuery compatibility
    4 // Farbtastic 1.3
    54
    6 jQuery.fn.farbtastic = function (callback) {
    7   $.farbtastic(this, callback);
    8   return this;
    9 };
    10 
    11 jQuery.farbtastic = function (container, callback) {
    12   var container = $(container).get(0);
    13   return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback));
    14 }
    15 
    16 jQuery._farbtastic = function (container, callback) {
    17   // Store farbtastic object
    18   var fb = this;
    19 
    20   // Insert markup
    21   $(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>');
    22   var e = $('.farbtastic', container);
    23   fb.wheel = $('.wheel', container).get(0);
    24   // Dimensions
    25   fb.radius = 84;
    26   fb.square = 100;
    27   fb.width = 194;
    28 
    29   // Fix background PNGs in IE6
    30   if (navigator.appVersion.match(/MSIE [0-6]\./)) {
    31     $('*', e).each(function () {
    32       if (this.currentStyle.backgroundImage != 'none') {
    33         var image = this.currentStyle.backgroundImage;
    34         image = this.currentStyle.backgroundImage.substring(5, image.length - 2);
    35         $(this).css({
    36           'backgroundImage': 'none',
    37           'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
    38         });
    39       }
    40     });
    41   }
    42 
    43   /**
    44    * Link to the given element(s) or callback.
    45    */
    46   fb.linkTo = function (callback) {
    47     // Unbind previous nodes
    48     if (typeof fb.callback == 'object') {
    49       $(fb.callback).unbind('keyup', fb.updateValue);
    50     }
    51 
    52     // Reset color
    53     fb.color = null;
    54 
    55     // Bind callback or elements
    56     if (typeof callback == 'function') {
    57       fb.callback = callback;
    58     }
    59     else if (typeof callback == 'object' || typeof callback == 'string') {
    60       fb.callback = $(callback);
    61       fb.callback.bind('keyup', fb.updateValue);
    62       if (fb.callback.get(0).value) {
    63         fb.setColor(fb.callback.get(0).value);
    64       }
    65     }
    66     return this;
    67   }
    68   fb.updateValue = function (event) {
    69     if (this.value && this.value != fb.color) {
    70       fb.setColor(this.value);
    71     }
    72   }
    73 
    74   /**
    75    * Change color with HTML syntax #123456
    76    */
    77   fb.setColor = function (color) {
    78     var unpack = fb.unpack(color);
    79     if (fb.color != color && unpack) {
    80       fb.color = color;
    81       fb.rgb = unpack;
    82       fb.hsl = fb.RGBToHSL(fb.rgb);
    83       fb.updateDisplay();
    84     }
    85     return this;
    86   }
    87 
    88   /**
    89    * Change color with HSL triplet [0..1, 0..1, 0..1]
    90    */
    91   fb.setHSL = function (hsl) {
    92     fb.hsl = hsl;
    93     fb.rgb = fb.HSLToRGB(hsl);
    94     fb.color = fb.pack(fb.rgb);
    95     fb.updateDisplay();
    96     return this;
    97   }
    98 
    99   /////////////////////////////////////////////////////
    100 
    101   /**
    102    * Retrieve the coordinates of the given event relative to the center
    103    * of the widget.
    104    */
    105   fb.widgetCoords = function (event) {
    106     var x, y;
    107     var el = event.target || event.srcElement;
    108     var reference = fb.wheel;
    109 
    110     if (typeof event.offsetX != 'undefined') {
    111       // Use offset coordinates and find common offsetParent
    112       var pos = { x: event.offsetX, y: event.offsetY };
    113 
    114       // Send the coordinates upwards through the offsetParent chain.
    115       var e = el;
    116       while (e) {
    117         e.mouseX = pos.x;
    118         e.mouseY = pos.y;
    119         pos.x += e.offsetLeft;
    120         pos.y += e.offsetTop;
    121         e = e.offsetParent;
    122       }
    123 
    124       // Look for the coordinates starting from the wheel widget.
    125       var e = reference;
    126       var offset = { x: 0, y: 0 }
    127       while (e) {
    128         if (typeof e.mouseX != 'undefined') {
    129           x = e.mouseX - offset.x;
    130           y = e.mouseY - offset.y;
    131           break;
    132         }
    133         offset.x += e.offsetLeft;
    134         offset.y += e.offsetTop;
    135         e = e.offsetParent;
    136       }
    137 
    138       // Reset stored coordinates
    139       e = el;
    140       while (e) {
    141         e.mouseX = undefined;
    142         e.mouseY = undefined;
    143         e = e.offsetParent;
    144       }
    145     }
    146     else {
    147       // Use absolute coordinates
    148       var pos = fb.absolutePosition(reference);
    149       x = (event.pageX || 0*(event.clientX + $('html').get(0).scrollLeft)) - pos.x;
    150       y = (event.pageY || 0*(event.clientY + $('html').get(0).scrollTop)) - pos.y;
    151     }
    152     // Subtract distance to middle
    153     return { x: x - fb.width / 2, y: y - fb.width / 2 };
    154   }
    155 
    156   /**
    157    * Mousedown handler
    158    */
    159   fb.mousedown = function (event) {
    160     // Capture mouse
    161     if (!document.dragging) {
    162       $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup);
    163       document.dragging = true;
    164     }
    165 
    166     // Check which area is being dragged
    167     var pos = fb.widgetCoords(event);
    168     fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square;
    169 
    170     // Process
    171     fb.mousemove(event);
    172     return false;
    173   }
    174 
    175   /**
    176    * Mousemove handler
    177    */
    178   fb.mousemove = function (event) {
    179     // Get coordinates relative to color picker center
    180     var pos = fb.widgetCoords(event);
    181 
    182     // Set new HSL parameters
    183     if (fb.circleDrag) {
    184       var hue = Math.atan2(pos.x, -pos.y) / 6.28;
    185       if (hue < 0) hue += 1;
    186       fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]);
    187     }
    188     else {
    189       var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5));
    190       var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5));
    191       fb.setHSL([fb.hsl[0], sat, lum]);
    192     }
    193     return false;
    194   }
    195 
    196   /**
    197    * Mouseup handler
    198    */
    199   fb.mouseup = function () {
    200     // Uncapture mouse
    201     $(document).unbind('mousemove', fb.mousemove);
    202     $(document).unbind('mouseup', fb.mouseup);
    203     document.dragging = false;
    204   }
    205 
    206   /**
    207    * Update the markers and styles
    208    */
    209   fb.updateDisplay = function () {
    210     // Markers
    211     var angle = fb.hsl[0] * 6.28;
    212     $('.h-marker', e).css({
    213       left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px',
    214       top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px'
    215     });
    216 
    217     $('.sl-marker', e).css({
    218       left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px',
    219       top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px'
    220     });
    221 
    222     // Saturation/Luminance gradient
    223     $('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])));
    224 
    225     // Linked elements or callback
    226     if (typeof fb.callback == 'object') {
    227       // Set background/foreground color
    228       $(fb.callback).css({
    229         backgroundColor: fb.color,
    230         color: fb.hsl[2] > 0.5 ? '#000' : '#fff'
    231       });
    232 
    233       // Change linked value
    234       $(fb.callback).each(function() {
    235         if (this.value && this.value != fb.color) {
    236           this.value = fb.color;
    237         }
    238       });
    239     }
    240     else if (typeof fb.callback == 'function') {
    241       fb.callback.call(fb, fb.color);
    242     }
    243   }
    244 
    245   /**
    246    * Get absolute position of element
    247    */
    248   fb.absolutePosition = function (el) {
    249     var r = { x: el.offsetLeft, y: el.offsetTop };
    250     // Resolve relative to offsetParent
    251     if (el.offsetParent) {
    252       var tmp = fb.absolutePosition(el.offsetParent);
    253       r.x += tmp.x;
    254       r.y += tmp.y;
    255     }
    256     return r;
    257   };
    258 
    259   /* Various color utility functions */
    260   fb.pack = function (rgb) {
    261     var r = Math.round(rgb[0] * 255);
    262     var g = Math.round(rgb[1] * 255);
    263     var b = Math.round(rgb[2] * 255);
    264     return '#' + (r < 16 ? '0' : '') + r.toString(16) +
    265            (g < 16 ? '0' : '') + g.toString(16) +
    266            (b < 16 ? '0' : '') + b.toString(16);
    267   }
    268 
    269   fb.unpack = function (color) {
    270     if (color.length == 7) {
    271       return [parseInt('0x' + color.substring(1, 3)) / 255,
    272         parseInt('0x' + color.substring(3, 5)) / 255,
    273         parseInt('0x' + color.substring(5, 7)) / 255];
    274     }
    275     else if (color.length == 4) {
    276       return [parseInt('0x' + color.substring(1, 2)) / 15,
    277         parseInt('0x' + color.substring(2, 3)) / 15,
    278         parseInt('0x' + color.substring(3, 4)) / 15];
    279     }
    280   }
    281 
    282   fb.HSLToRGB = function (hsl) {
    283     var m1, m2, r, g, b;
    284     var h = hsl[0], s = hsl[1], l = hsl[2];
    285     m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s;
    286     m1 = l * 2 - m2;
    287     return [this.hueToRGB(m1, m2, h+0.33333),
    288         this.hueToRGB(m1, m2, h),
    289         this.hueToRGB(m1, m2, h-0.33333)];
    290   }
    291 
    292   fb.hueToRGB = function (m1, m2, h) {
    293     h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
    294     if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
    295     if (h * 2 < 1) return m2;
    296     if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
    297     return m1;
    298   }
    299 
    300   fb.RGBToHSL = function (rgb) {
    301     var min, max, delta, h, s, l;
    302     var r = rgb[0], g = rgb[1], b = rgb[2];
    303     min = Math.min(r, Math.min(g, b));
    304     max = Math.max(r, Math.max(g, b));
    305     delta = max - min;
    306     l = (min + max) / 2;
    307     s = 0;
    308     if (l > 0 && l < 1) {
    309       s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
    310     }
    311     h = 0;
    312     if (delta > 0) {
    313       if (max == r && max != g) h += (g - b) / delta;
    314       if (max == g && max != b) h += (2 + (b - r) / delta);
    315       if (max == b && max != r) h += (4 + (r - g) / delta);
    316       h /= 6;
    317     }
    318     return [h, s, l];
    319   }
    320 
    321   // Install mousedown handler (the others are set on the document on-demand)
    322   $('*', e).mousedown(fb.mousedown);
    323 
    324     // Init color
    325   fb.setColor('#000000');
    326 
    327   // Set linked elements/callback
    328   if (callback) {
    329     fb.linkTo(callback);
    330   }
    331 }
     5(function($) {
     6        $.fn.farbtastic = function (callback) {
     7          $.farbtastic(this, callback);
     8          return this;
     9        };
     10       
     11        $.farbtastic = function (container, callback) {
     12          var container = $(container)[0];
     13          return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback));
     14        }
     15       
     16        $._farbtastic = function (container, callback) {
     17          // Store farbtastic object
     18          var fb = this;
     19       
     20          // Insert markup
     21          $(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>');
     22          var e = $('.farbtastic', container);
     23          fb.wheel = $('.wheel', container)[0];
     24          // Dimensions
     25          fb.radius = 84;
     26          fb.square = 100;
     27          fb.width = 194;
     28       
     29          // Fix background PNGs in IE6
     30          if (navigator.appVersion.match(/MSIE [0-6]\./)) {
     31            $('*', e).each(function () {
     32              if (this.currentStyle.backgroundImage != 'none') {
     33                var image = this.currentStyle.backgroundImage;
     34                image = this.currentStyle.backgroundImage.substring(5, image.length - 2);
     35                $(this).css({
     36                  'backgroundImage': 'none',
     37                  'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')"
     38                });
     39              }
     40            });
     41          }
     42       
     43          /**
     44           * Link to the given element(s) or callback.
     45           */
     46          fb.linkTo = function (callback) {
     47            // Unbind previous nodes
     48            if (typeof fb.callback == 'object') {
     49              $(fb.callback).unbind('keyup', fb.updateValue);
     50            }
     51       
     52            // Reset color
     53            fb.color = null;
     54       
     55            // Bind callback or elements
     56            if (typeof callback == 'function') {
     57              fb.callback = callback;
     58            }
     59            else if (typeof callback == 'object' || typeof callback == 'string') {
     60              fb.callback = $(callback);
     61              fb.callback.bind('keyup', fb.updateValue);
     62              if (fb.callback[0].value) {
     63                fb.setColor(fb.callback[0].value);
     64              }
     65            }
     66            return this;
     67          }
     68          fb.updateValue = function (event) {
     69            if (this.value && this.value != fb.color) {
     70              fb.setColor(this.value);
     71            }
     72          }
     73       
     74          /**
     75           * Change color with HTML syntax #123456
     76           */
     77          fb.setColor = function (color) {
     78            var unpack = fb.unpack(color);
     79            if (fb.color != color && unpack) {
     80              fb.color = color;
     81              fb.rgb = unpack;
     82              fb.hsl = fb.RGBToHSL(fb.rgb);
     83              fb.updateDisplay();
     84            }
     85            return this;
     86          }
     87       
     88          /**
     89           * Change color with HSL triplet [0..1, 0..1, 0..1]
     90           */
     91          fb.setHSL = function (hsl) {
     92            fb.hsl = hsl;
     93            fb.rgb = fb.HSLToRGB(hsl);
     94            fb.color = fb.pack(fb.rgb);
     95            fb.updateDisplay();
     96            return this;
     97          }
     98       
     99          /////////////////////////////////////////////////////
     100       
     101          /**
     102           * Retrieve the coordinates of the given event relative to the center
     103           * of the widget.
     104           */
     105          fb.widgetCoords = function (event) {
     106            var offset = $(fb.wheel).offset();
     107            return { x: (event.pageX - offset.left) - fb.width / 2, y: (event.pageY - offset.top) - fb.width / 2 };
     108          }
     109       
     110          /**
     111           * Mousedown handler
     112           */
     113          fb.mousedown = function (event) {
     114            // Capture mouse
     115            if (!document.dragging) {
     116              $(document).bind('mousemove', fb.mousemove).bind('mouseup', fb.mouseup);
     117              document.dragging = true;
     118            }
     119       
     120            // Check which area is being dragged
     121            var pos = fb.widgetCoords(event);
     122            fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square;
     123       
     124            // Process
     125            fb.mousemove(event);
     126            return false;
     127          }
     128       
     129          /**
     130           * Mousemove handler
     131           */
     132          fb.mousemove = function (event) {
     133            // Get coordinates relative to color picker center
     134            var pos = fb.widgetCoords(event);
     135       
     136            // Set new HSL parameters
     137            if (fb.circleDrag) {
     138              var hue = Math.atan2(pos.x, -pos.y) / 6.28;
     139              if (hue < 0) hue += 1;
     140              fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]);
     141            }
     142            else {
     143              var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5));
     144              var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5));
     145              fb.setHSL([fb.hsl[0], sat, lum]);
     146            }
     147            return false;
     148          }
     149       
     150          /**
     151           * Mouseup handler
     152           */
     153          fb.mouseup = function () {
     154            // Uncapture mouse
     155            $(document).unbind('mousemove', fb.mousemove);
     156            $(document).unbind('mouseup', fb.mouseup);
     157            document.dragging = false;
     158          }
     159       
     160          /**
     161           * Update the markers and styles
     162           */
     163          fb.updateDisplay = function () {
     164            // Markers
     165            var angle = fb.hsl[0] * 6.28;
     166            $('.h-marker', e).css({
     167              left: Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px',
     168              top: Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px'
     169            });
     170       
     171            $('.sl-marker', e).css({
     172              left: Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px',
     173              top: Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px'
     174            });
     175       
     176            // Saturation/Luminance gradient
     177            $('.color', e).css('backgroundColor', fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])));
     178       
     179            // Linked elements or callback
     180            if (typeof fb.callback == 'object') {
     181              // Set background/foreground color
     182              $(fb.callback).css({
     183                backgroundColor: fb.color,
     184                color: fb.hsl[2] > 0.5 ? '#000' : '#fff'
     185              });
     186       
     187              // Change linked value
     188              $(fb.callback).each(function() {
     189                if (this.value && this.value != fb.color) {
     190                  this.value = fb.color;
     191                }
     192              });
     193            }
     194            else if (typeof fb.callback == 'function') {
     195              fb.callback.call(fb, fb.color);
     196            }
     197          }
     198       
     199          /**
     200           * Get absolute position of element
     201           */
     202          fb.absolutePosition = function (el) {
     203            var r = { x: el.offsetLeft, y: el.offsetTop };
     204            // Resolve relative to offsetParent
     205            if (el.offsetParent) {
     206              var tmp = fb.absolutePosition(el.offsetParent);
     207              r.x += tmp.x;
     208              r.y += tmp.y;
     209            }
     210            return r;
     211          };
     212       
     213          /* Various color utility functions */
     214          fb.pack = function (rgb) {
     215            var r = Math.round(rgb[0] * 255);
     216            var g = Math.round(rgb[1] * 255);
     217            var b = Math.round(rgb[2] * 255);
     218            return '#' + (r < 16 ? '0' : '') + r.toString(16) +
     219                   (g < 16 ? '0' : '') + g.toString(16) +
     220                   (b < 16 ? '0' : '') + b.toString(16);
     221          }
     222       
     223          fb.unpack = function (color) {
     224            if (color.length == 7) {
     225              return [parseInt('0x' + color.substring(1, 3)) / 255,
     226                parseInt('0x' + color.substring(3, 5)) / 255,
     227                parseInt('0x' + color.substring(5, 7)) / 255];
     228            }
     229            else if (color.length == 4) {
     230              return [parseInt('0x' + color.substring(1, 2)) / 15,
     231                parseInt('0x' + color.substring(2, 3)) / 15,
     232                parseInt('0x' + color.substring(3, 4)) / 15];
     233            }
     234          }
     235       
     236          fb.HSLToRGB = function (hsl) {
     237            var m1, m2, r, g, b;
     238            var h = hsl[0], s = hsl[1], l = hsl[2];
     239            m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s;
     240            m1 = l * 2 - m2;
     241            return [this.hueToRGB(m1, m2, h+0.33333),
     242                this.hueToRGB(m1, m2, h),
     243                this.hueToRGB(m1, m2, h-0.33333)];
     244          }
     245       
     246          fb.hueToRGB = function (m1, m2, h) {
     247            h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h);
     248            if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
     249            if (h * 2 < 1) return m2;
     250            if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6;
     251            return m1;
     252          }
     253       
     254          fb.RGBToHSL = function (rgb) {
     255            var min, max, delta, h, s, l;
     256            var r = rgb[0], g = rgb[1], b = rgb[2];
     257            min = Math.min(r, Math.min(g, b));
     258            max = Math.max(r, Math.max(g, b));
     259            delta = max - min;
     260            l = (min + max) / 2;
     261            s = 0;
     262            if (l > 0 && l < 1) {
     263              s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l));
     264            }
     265            h = 0;
     266            if (delta > 0) {
     267              if (max == r && max != g) h += (g - b) / delta;
     268              if (max == g && max != b) h += (2 + (b - r) / delta);
     269              if (max == b && max != r) h += (4 + (r - g) / delta);
     270              h /= 6;
     271            }
     272            return [h, s, l];
     273          }
     274       
     275          // Install mousedown handler (the others are set on the document on-demand)
     276          $('*', e).mousedown(fb.mousedown);
     277       
     278            // Init color
     279          fb.setColor('#000000');
     280       
     281          // Set linked elements/callback
     282          if (callback) {
     283            fb.linkTo(callback);
     284          }
     285        }
     286})(jQuery);
Note: See TracChangeset for help on using the changeset viewer.