[Sommaire] [Imprimer]

   1  // $Id: color.js,v 1.1.2.1 2007/04/18 03:38:58 drumm Exp $
   2  
   3  if (Drupal.jsEnabled) {
   4    $(document).ready(function () {
   5      var form = $('#color_scheme_form .color-form');
   6      var inputs = [];
   7      var hooks = [];
   8      var locks = [];
   9      var focused = null;
  10  
  11      // Add Farbtastic
  12      $(form).prepend('<div id="placeholder"></div>');
  13      var farb = $.farbtastic('#placeholder');
  14  
  15      // Decode reference colors to HSL
  16      var reference = Drupal.settings.color.reference;
  17      for (i in reference) {
  18        reference[i] = farb.RGBToHSL(farb.unpack(reference[i]));
  19      }
  20  
  21      // Build preview
  22      $('#preview').append('<div id="gradient"></div>');
  23      var gradient = $('#preview #gradient');
  24      var h = parseInt(gradient.css('height')) / 10;
  25      for (i = 0; i < h; ++i) {
  26        gradient.append('<div class="gradient-line"></div>');
  27      }
  28  
  29      // Fix preview background in IE6
  30      if (navigator.appVersion.match(/MSIE [0-6]\./)) {
  31        var e = $('#preview #img')[0];
  32        var image = e.currentStyle.backgroundImage;
  33        e.style.backgroundImage = 'none';
  34        e.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image.substring(5, image.length - 2) + "')";
  35      }
  36  
  37      // Set up colorscheme selector
  38      $('#edit-scheme', form).change(function () {
  39        var colors = this.options[this.selectedIndex].value;
  40        if (colors != '') {
  41          colors = colors.split(',');
  42          for (i in colors) {
  43            callback(inputs[i], colors[i], false, true);
  44          }
  45          preview();
  46        }
  47      });
  48  
  49      /**
  50       * Render the preview.
  51       */
  52      function preview() {
  53        // Solid background
  54        $('#preview', form).css('backgroundColor', inputs[0].value);
  55  
  56        // Text preview
  57        $('#text', form).css('color', inputs[4].value);
  58        $('#text a, #text h2', form).css('color', inputs[1].value);
  59  
  60        // Set up gradient
  61        var top = farb.unpack(inputs[2].value);
  62        var bottom = farb.unpack(inputs[3].value);
  63        if (top && bottom) {
  64          var delta = [];
  65          for (i in top) {
  66            delta[i] = (bottom[i] - top[i]) / h;
  67          }
  68          var accum = top;
  69  
  70          // Render gradient lines
  71          $('#gradient > div', form).each(function () {
  72            for (i in accum) {
  73              accum[i] += delta[i];
  74            }
  75            this.style.backgroundColor = farb.pack(accum);
  76          });
  77        }
  78      }
  79  
  80      /**
  81       * Shift a given color, using a reference pair (ref in HSL).
  82       *
  83       * This algorithm ensures relative ordering on the saturation and luminance
  84       * axes is preserved, and performs a simple hue shift.
  85       *
  86       * It is also symmetrical. If: shift_color(c, a, b) == d,
  87       *                        then shift_color(d, b, a) == c.
  88       */
  89      function shift_color(given, ref1, ref2) {
  90        // Convert to HSL
  91        given = farb.RGBToHSL(farb.unpack(given));
  92  
  93        // Hue: apply delta
  94        given[0] += ref2[0] - ref1[0];
  95  
  96        // Saturation: interpolate
  97        if (ref1[1] == 0 || ref2[1] == 0) {
  98          given[1] = ref2[1];
  99        }
 100        else {
 101          var d = ref1[1] / ref2[1];
 102          if (d > 1) {
 103            given[1] /= d;
 104          }
 105          else {
 106            given[1] = 1 - (1 - given[1]) * d;
 107          }
 108        }
 109  
 110        // Luminance: interpolate
 111        if (ref1[2] == 0 || ref2[2] == 0) {
 112          given[2] = ref2[2];
 113        }
 114        else {
 115          var d = ref1[2] / ref2[2];
 116          if (d > 1) {
 117            given[2] /= d;
 118          }
 119          else {
 120            given[2] = 1 - (1 - given[2]) * d;
 121          }
 122        }
 123  
 124        return farb.pack(farb.HSLToRGB(given));
 125      }
 126  
 127      /**
 128       * Callback for Farbtastic when a new color is chosen.
 129       */
 130      function callback(input, color, propagate, colorscheme) {
 131        // Set background/foreground color
 132        $(input).css({
 133          backgroundColor: color,
 134          color: farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
 135        });
 136  
 137        // Change input value
 138        if (input.value && input.value != color) {
 139          input.value = color;
 140  
 141          // Update locked values
 142          if (propagate) {
 143            var i = input.i;
 144            for (j = i + 1; ; ++j) {
 145              if (!locks[j - 1] || $(locks[j - 1]).is('.unlocked')) break;
 146              var matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
 147              callback(inputs[j], matched, false);
 148            }
 149            for (j = i - 1; ; --j) {
 150              if (!locks[j] || $(locks[j]).is('.unlocked')) break;
 151              var matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
 152              callback(inputs[j], matched, false);
 153            }
 154  
 155            // Update preview
 156            preview();
 157          }
 158  
 159          // Reset colorscheme selector
 160          if (!colorscheme) {
 161            resetScheme();
 162          }
 163        }
 164  
 165      }
 166  
 167      /**
 168       * Reset the color scheme selector.
 169       */
 170      function resetScheme() {
 171        $('#edit-scheme', form).each(function () {
 172          this.selectedIndex = this.options.length - 1;
 173        });
 174      }
 175  
 176      // Focus the Farbtastic on a particular field.
 177      function focus() {
 178        var input = this;
 179        // Remove old bindings
 180        focused && $(focused).unbind('keyup', farb.updateValue)
 181            .unbind('keyup', preview).unbind('keyup', resetScheme)
 182            .parent().removeClass('item-selected');
 183  
 184        // Add new bindings
 185        focused = this;
 186        farb.linkTo(function (color) { callback(input, color, true, false) });
 187        farb.setColor(this.value);
 188        $(focused).keyup(farb.updateValue).keyup(preview).keyup(resetScheme)
 189          .parent().addClass('item-selected');
 190      }
 191  
 192      // Initialize color fields
 193      $('#palette input.form-text', form)
 194      .each(function () {
 195        // Extract palette field name
 196        this.key = this.id.substring(13);
 197  
 198        // Link to color picker temporarily to initialize.
 199        farb.linkTo(function () {}).setColor('#000').linkTo(this);
 200  
 201        // Add lock
 202        var i = inputs.length;
 203        if (inputs.length) {
 204          var lock = $('<div class="lock"></div>').toggle(
 205            function () {
 206              $(this).addClass('unlocked');
 207              $(hooks[i - 1]).attr('class',
 208                locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook'
 209              );
 210              $(hooks[i]).attr('class',
 211                locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook down' : 'hook'
 212              );
 213            },
 214            function () {
 215              $(this).removeClass('unlocked');
 216              $(hooks[i - 1]).attr('class',
 217                locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down'
 218              );
 219              $(hooks[i]).attr('class',
 220                locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook both' : 'hook up'
 221              );
 222            }
 223          );
 224          $(this).after(lock);
 225          locks.push(lock);
 226        }
 227  
 228        // Add hook
 229        var hook = $('<div class="hook"></div>');
 230        $(this).after(hook);
 231        hooks.push(hook);
 232  
 233        $(this).parent().find('.lock').click();
 234        this.i = i;
 235        inputs.push(this);
 236      })
 237      .focus(focus);
 238  
 239      $('#palette label', form)
 240  
 241      // Focus first color
 242      focus.call(inputs[0]);
 243  
 244      // Render preview
 245      preview();
 246    });
 247  }