Fix for color.js - before i rewrite

View
Fix

Fixes are not saved to the database until you submit.

Summary:

Tags:

Any tags you'd like to associate with your code, delimitered by commas (example: Views, CCK, Module, etc).

Show summary in full view

// $Id: color.js,v 1.3 2008/07/09 07:33:17 skiquel Exp $

Drupal.behaviors.color = function (context) {
  // This behavior attaches by ID, so is only valid once on a page.
  if ($('#color_scheme_form .color-form.color-processed').size()) {
    return;
  }
  var form = $('#color_scheme_form .color-form', context);
  var inputs = [];

// Add Farbtastic
  $(form).prepend('<div id="placeholder"></div>').addClass('color-processed');
  var farb = $.farbtastic('#placeholder');

// Decode reference colors to HSL
  var reference = Drupal.settings.color.reference;
  for (i in reference) {
    reference[i] = farb.RGBToHSL(farb.unpack(reference[i]));
  }

// Build preview
  $('#preview:not(.color-processed)')
    .append('<div id="gradient"></div>')
    .addClass('color-processed');
  var gradient = $('#preview #gradient');
  var h = parseInt(gradient.css('height')) / 10;
  for (i = 0; i < h; ++i) {
    gradient.append('<div class="gradient-line"></div>');
  }

// Fix preview background in IE6
  if (navigator.appVersion.match(/MSIE [0-6]\./)) {
    var e = $('#preview #img')[0];
    var image = e.currentStyle.backgroundImage;
    e.style.backgroundImage = 'none';
    e.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image.substring(5, image.length - 2) + "')";
  }

// Set up colorscheme selector
  $('#edit-scheme', form).change(function () {
    var colors = this.options[this.selectedIndex].value;
    if (colors != '') {
      colors = colors.split(',');
      for (i in colors) {
        new Drupal.color.callback(inputs[i], colors[i], false, true);
      }
      preview();
    }
  });
  
  $('#edit-scheme', form).each(function () {
    /*alert(this.value);*/
  });

// Initialize color fields
  new Drupal.color(inputs, form, farb);

};

Drupal.color = function (inputs, form, farb) {
  this.focused = null;
  this.hooks = null;
  this.hook = null;
  this.inputs = inputs;
  this.form = form;
  this.farb = farb;

this.initialize(this.inputs, this.form, this.farb);
  $('#palette label', this.form)

// Focus first color
  this.focus(this.inputs, this.focus, this.farb).call(this.inputs[0]);

// Render preview
  this.preview();
  
  //.focus(focus)

//  $(this.input)
//  .keydown(function (event) { return ac.onkeydown(this, event); })
//  .keyup(function (event) { ac.onkeyup(this, event); })
//  .blur(function () { ac.hidePopup(); ac.db.cancel(); });
};

Drupal.color.prototype.initialize = function (inputs, form, farb) {
  var hooks = [];
  var locks = [];

$('#palette input.form-text', form)
  .each(function () {
    // Extract palette field name
    this.key = this.id.substring(13);

// Link to color picker temporarily to initialize.
    farb.linkTo(function () {}).setColor('#000').linkTo(this);

// Add lock
    var i = inputs.length;
    if (inputs.length) {
      var lock = $('<div class="lock"></div>').toggle(
        function () {
          $(this).addClass('unlocked');
          $(hooks[i - 1]).attr('class',
            locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook'
          );
          $(hooks[i]).attr('class',
            locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook down' : 'hook'
          );
        },
        function () {
          $(this).removeClass('unlocked');
          $(hooks[i - 1]).attr('class',
            locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down'
          );
          $(hooks[i]).attr('class',
            locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook both' : 'hook up'
          );
        }
      );
      $(this).after(lock);
      locks.push(lock);
    };

// Add hook
    var hook = $('<div class="hook"></div>');
    $(this).after(hook);
    hooks.push(hook);
    this.hook = hook;
    this.hooks = hooks;

$(this).parent().find('.lock').click();
    this.i = i;
    inputs.push(this);
  })
  //.focus(focus)
};

/**
   * Render the preview.
   */
Drupal.color.prototype.preview = function (form, inputs) {
  // Solid background
  $('#preview', this.form).css('backgroundColor', this.inputs[0].value);

// Text preview
  
  var field;
  $("input[@name^=palette]").each(
    function intIndex() {
      
      field = $(this).attr("name").replace("palette[", '').replace("]", '');
        if (/text|link/.test(field)) {
          $('#preview #'+ field, this.form).css('color', $(this).val());

}
        else {
          $('#preview #'+ field, this.form).css('background-color', $(this).val());

}
    }
  );
  // this.setGradient

};

Drupal.color.prototype.setGradient = function (farb) {
  // Set up gradient
  var top = farb.unpack(inputs[2].value);
  var bottom = farb.unpack(inputs[3].value);
  if (top && bottom) {
    var delta = [];
    for (i in top) {
      delta[i] = (bottom[i] - top[i]) / h;
    }
    var accum = top;

// Render gradient lines
    $('#gradient > div', form).each(function () {
      for (i in accum) {
        accum[i] += delta[i];
      }
      this.style.backgroundColor = farb.pack(accum);
    });
  }
};

/**
 * Shift a given color, using a reference pair (ref in HSL).
 *
 * This algorithm ensures relative ordering on the saturation and luminance
 * axes is preserved, and performs a simple hue shift.
 *
 * It is also symmetrical. If: shift_color(c, a, b) == d,
 *                        then shift_color(d, b, a) == c.
 */
Drupal.color.prototype.shift_color = function (given, ref1, ref2) {
  // Convert to HSL
  given = farb.RGBToHSL(farb.unpack(given));

// Hue: apply delta
  given[0] += ref2[0] - ref1[0];

// Saturation: interpolate
  if (ref1[1] == 0 || ref2[1] == 0) {
    given[1] = ref2[1];
  }
  else {
    var d = ref1[1] / ref2[1];
    if (d > 1) {
      given[1] /= d;
    }
    else {
      given[1] = 1 - (1 - given[1]) * d;
    }
  }

// Luminance: interpolate
  if (ref1[2] == 0 || ref2[2] == 0) {
    given[2] = ref2[2];
  }
  else {
    var d = ref1[2] / ref2[2];
    if (d > 1) {
      given[2] /= d;
    }
    else {
      given[2] = 1 - (1 - given[2]) * d;
    }
  }

return farb.pack(farb.HSLToRGB(given));
};

/**
 * Reset the color scheme selector.
 */
Drupal.color.prototype.resetScheme = function(form) {
  $('#edit-scheme', this.form).each(function () {
    this.selectedIndex = this.options.length - 1;
  });
};

// Focus the Farbtastic on a particular field.
Drupal.color.prototype.focus = function (inputs, focused, farb) {
    var input = inputs[0];
  // Remove old bindings
  focused && $(focused).unbind('keyup', farb.updateValue)
      .unbind('keyup', this.preview).unbind('keyup', this.resetScheme())
      .parent().removeClass('item-selected');

// Add new bindings
  focused = input;
  this.farb.linkTo(function (color) { this.callback(input, color, true, false, this.farb); });
  this.farb.setColor(input.value);
  //  farb.setColor(this.value);
  $(focused).keyup(farb.updateValue).keyup(this.preview()).keyup(this.resetScheme())
    .parent().addClass('item-selected');
};
  
/**
 * Callback for Farbtastic when a new color is chosen.
 */
Drupal.color.prototype.callback = function (input, color, propagate, colorscheme, farb) {
  if (color === "") {
    $(input).css("background-color", 'gray').css("color", "black").attr('disabled',true).val('None');
  }
  else {
  // Set background/foreground color
    $(input).css({
      backgroundColor: color,
      'color': farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
    });

// Change input value
    if (input.value && input.value != color) {
      input.value = color;

// Update locked values
      if (propagate) {
        var i = input.i;
        for (j = i + 1; ; ++j) {
          if (!this.locks[j - 1] || $(this.locks[j - 1]).is('.unlocked')) break;
          var matched = this.shift_color(color, reference[input.key], reference[inputs[j].key]);
          callback(inputs[j], matched, false);
        }
        for (j = i - 1; ; --j) {
          if (!this.locks[j] || $(this.locks[j]).is('.unlocked')) break;
          var matched = this.shift_color(color, reference[input.key], reference[inputs[j].key]);
          callback(inputs[j], matched, false);
        }

// Update preview
        this.preview();
      }

// Reset colorscheme selector
      if (!colorscheme) {
        this.resetScheme();
      }
    }
  }
};

Syntax highlighting mode:

Select the syntax highlighting mode to use.

See Also:		Order
	Title: URL:
	Title: URL:

Any links you'd like to have associated with the post (Drupal.org issue, Wikipedia article, etc).

File attachments

Changes made to the attachments are not permanent until you save this post. The first "listed" file will be included in RSS feeds.

Attach new file:

The maximum upload size is 1 MB. Only files with the following extensions may be uploaded: jpg jpeg gif png txt doc xls pdf ppt pps odt ods odp phps.

DrupalBin

Recent Posts

User login

Tags

Fix for color.js - before i rewrite