Home

color.js - before i rewrite

July 16, 2008 - 1:06pm — Anonymous
  1. // $Id: color.js,v 1.3 2008/07/09 07:33:17 skiquel 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.  
  11.   // Add Farbtastic
  12.   $(form).prepend('<div id="placeholder"></div>').addClass('color-processed');
  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:not(.color-processed)')
  23.     .append('<div id="gradient"></div>')
  24.     .addClass('color-processed');
  25.   var gradient = $('#preview #gradient');
  26.   var h = parseInt(gradient.css('height')) / 10;
  27.   for (i = 0; i < h; ++i) {
  28.     gradient.append('<div class="gradient-line"></div>');
  29.   }
  30.  
  31.   // Fix preview background in IE6
  32.   if (navigator.appVersion.match(/MSIE [0-6]\./)) {
  33.     var e = $('#preview #img')[0];
  34.     var image = e.currentStyle.backgroundImage;
  35.     e.style.backgroundImage = 'none';
  36.     e.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image.substring(5, image.length - 2) + "')";
  37.   }
  38.  
  39.   // Set up colorscheme selector
  40.   $('#edit-scheme', form).change(function () {
  41.     var colors = this.options[this.selectedIndex].value;
  42.     if (colors != '') {
  43.       colors = colors.split(',');
  44.       for (i in colors) {
  45.         new Drupal.color.callback(inputs[i], colors[i], false, true);
  46.       }
  47.       preview();
  48.     }
  49.   });
  50.  
  51.   $('#edit-scheme', form).each(function () {
  52.     /*alert(this.value);*/
  53.   });
  54.  
  55.   // Initialize color fields
  56.   new Drupal.color(inputs, form, farb);
  57.  
  58.  
  59.  
  60. };
  61.  
  62.  
  63.  
  64. Drupal.color = function (inputs, form, farb) {
  65.   this.focused = null;
  66.   this.hooks = null;
  67.   this.hook = null;
  68.   this.inputs = inputs;
  69.   this.form = form;
  70.   this.farb = farb;
  71.  
  72.  
  73.   this.initialize(this.inputs, this.form, this.farb);
  74.   $('#palette label', this.form)
  75.  
  76.  
  77.   // Focus first color
  78.   this.focus(this.inputs, this.focus, this.farb).call(this.inputs[0]);
  79.  
  80.   // Render preview
  81.   this.preview();
  82.  
  83.   //.focus(focus)
  84.  
  85. //  $(this.input)
  86. //  .keydown(function (event) { return ac.onkeydown(this, event); })
  87. //  .keyup(function (event) { ac.onkeyup(this, event); })
  88. //  .blur(function () { ac.hidePopup(); ac.db.cancel(); });
  89. };
  90.  
  91. Drupal.color.prototype.initialize = function (inputs, form, farb) {
  92.   var hooks = [];
  93.   var locks = [];
  94.  
  95.   $('#palette input.form-text', form)
  96.   .each(function () {
  97.     // Extract palette field name
  98.     this.key = this.id.substring(13);
  99.  
  100.     // Link to color picker temporarily to initialize.
  101.     farb.linkTo(function () {}).setColor('#000').linkTo(this);
  102.  
  103.     // Add lock
  104.     var i = inputs.length;
  105.     if (inputs.length) {
  106.       var lock = $('<div class="lock"></div>').toggle(
  107.         function () {
  108.           $(this).addClass('unlocked');
  109.           $(hooks[i - 1]).attr('class',
  110.             locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook'
  111.           );
  112.           $(hooks[i]).attr('class',
  113.             locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook down' : 'hook'
  114.           );
  115.         },
  116.         function () {
  117.           $(this).removeClass('unlocked');
  118.           $(hooks[i - 1]).attr('class',
  119.             locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down'
  120.           );
  121.           $(hooks[i]).attr('class',
  122.             locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook both' : 'hook up'
  123.           );
  124.         }
  125.       );
  126.       $(this).after(lock);
  127.       locks.push(lock);
  128.     };
  129.  
  130.     // Add hook
  131.     var hook = $('<div class="hook"></div>');
  132.     $(this).after(hook);
  133.     hooks.push(hook);
  134.     this.hook = hook;
  135.     this.hooks = hooks;
  136.  
  137.     $(this).parent().find('.lock').click();
  138.     this.i = i;
  139.     inputs.push(this);
  140.   })
  141.   //.focus(focus)
  142. };
  143.  
  144.   /**
  145.    * Render the preview.
  146.    */
  147. Drupal.color.prototype.preview = function (form, inputs) {
  148.   // Solid background
  149.   $('#preview', this.form).css('backgroundColor', this.inputs[0].value);
  150.  
  151.   // Text preview
  152.  
  153.   var field;
  154.   $("input[@name^=palette]").each(
  155.     function intIndex() {
  156.      
  157.       field = $(this).attr("name").replace("palette[", '').replace("]", '');
  158.         if (/text|link/.test(field)) {
  159.           $('#preview #'+ field, this.form).css('color', $(this).val());
  160.  
  161.         }
  162.         else {
  163.           $('#preview #'+ field, this.form).css('background-color', $(this).val());
  164.  
  165.         }
  166.     }
  167.   );
  168.   // this.setGradient
  169.  
  170.  
  171. };
  172.  
  173. Drupal.color.prototype.setGradient = function (farb) {
  174.   // Set up gradient
  175.   var top = farb.unpack(inputs[2].value);
  176.   var bottom = farb.unpack(inputs[3].value);
  177.   if (top && bottom) {
  178.     var delta = [];
  179.     for (i in top) {
  180.       delta[i] = (bottom[i] - top[i]) / h;
  181.     }
  182.     var accum = top;
  183.  
  184.     // Render gradient lines
  185.     $('#gradient > div', form).each(function () {
  186.       for (i in accum) {
  187.         accum[i] += delta[i];
  188.       }
  189.       this.style.backgroundColor = farb.pack(accum);
  190.     });
  191.   }
  192. };
  193.  
  194. /**
  195.  * Shift a given color, using a reference pair (ref in HSL).
  196.  *
  197.  * This algorithm ensures relative ordering on the saturation and luminance
  198.  * axes is preserved, and performs a simple hue shift.
  199.  *
  200.  * It is also symmetrical. If: shift_color(c, a, b) == d,
  201.  *                        then shift_color(d, b, a) == c.
  202.  */
  203. Drupal.color.prototype.shift_color = function (given, ref1, ref2) {
  204.   // Convert to HSL
  205.   given = farb.RGBToHSL(farb.unpack(given));
  206.  
  207.   // Hue: apply delta
  208.   given[0] += ref2[0] - ref1[0];
  209.  
  210.   // Saturation: interpolate
  211.   if (ref1[1] == 0 || ref2[1] == 0) {
  212.     given[1] = ref2[1];
  213.   }
  214.   else {
  215.     var d = ref1[1] / ref2[1];
  216.     if (d > 1) {
  217.       given[1] /= d;
  218.     }
  219.     else {
  220.       given[1] = 1 - (1 - given[1]) * d;
  221.     }
  222.   }
  223.  
  224.   // Luminance: interpolate
  225.   if (ref1[2] == 0 || ref2[2] == 0) {
  226.     given[2] = ref2[2];
  227.   }
  228.   else {
  229.     var d = ref1[2] / ref2[2];
  230.     if (d > 1) {
  231.       given[2] /= d;
  232.     }
  233.     else {
  234.       given[2] = 1 - (1 - given[2]) * d;
  235.     }
  236.   }
  237.  
  238.   return farb.pack(farb.HSLToRGB(given));
  239. };
  240.  
  241. /**
  242.  * Reset the color scheme selector.
  243.  */
  244. Drupal.color.prototype.resetScheme = function(form) {
  245.   $('#edit-scheme', this.form).each(function () {
  246.     this.selectedIndex = this.options.length - 1;
  247.   });
  248. };
  249.  
  250. // Focus the Farbtastic on a particular field.
  251. Drupal.color.prototype.focus = function (inputs, focused, farb) {
  252.     var input = inputs[0];
  253.   // Remove old bindings
  254.   focused && $(focused).unbind('keyup', farb.updateValue)
  255.       .unbind('keyup', this.preview).unbind('keyup', this.resetScheme())
  256.       .parent().removeClass('item-selected');
  257.  
  258.   // Add new bindings
  259.   focused = input;
  260.   this.farb.linkTo(function (color) { this.callback(input, color, true, false, this.farb); });
  261.   this.farb.setColor(input.value);
  262.   //  farb.setColor(this.value);
  263.   $(focused).keyup(farb.updateValue).keyup(this.preview()).keyup(this.resetScheme())
  264.     .parent().addClass('item-selected');
  265. };
  266.  
  267. /**
  268.  * Callback for Farbtastic when a new color is chosen.
  269.  */
  270. Drupal.color.prototype.callback = function (input, color, propagate, colorscheme, farb) {
  271.   if (color === "") {
  272.     $(input).css("background-color", 'gray').css("color", "black").attr('disabled',true).val('None');
  273.   }
  274.   else {
  275.   // Set background/foreground color
  276.     $(input).css({
  277.       backgroundColor: color,
  278.       'color': farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
  279.     });
  280.  
  281.  
  282.     // Change input value
  283.     if (input.value && input.value != color) {
  284.       input.value = color;
  285.  
  286.       // Update locked values
  287.       if (propagate) {
  288.         var i = input.i;
  289.         for (j = i + 1; ; ++j) {
  290.           if (!this.locks[j - 1] || $(this.locks[j - 1]).is('.unlocked')) break;
  291.           var matched = this.shift_color(color, reference[input.key], reference[inputs[j].key]);
  292.           callback(inputs[j], matched, false);
  293.         }
  294.         for (j = i - 1; ; --j) {
  295.           if (!this.locks[j] || $(this.locks[j]).is('.unlocked')) break;
  296.           var matched = this.shift_color(color, reference[input.key], reference[inputs[j].key]);
  297.           callback(inputs[j], matched, false);
  298.         }
  299.  
  300.         // Update preview
  301.         this.preview();
  302.       }
  303.  
  304.       // Reset colorscheme selector
  305.       if (!colorscheme) {
  306.         this.resetScheme();
  307.       }
  308.     }
  309.   }
  310. };