[Summary view] [Print] [Text view]

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