[Summary view] [Print] [Text view]

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