[Summary view] [Print] [Text view]

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