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