[Summary view] [Print] [Text view]

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