| 1 |
// $Id: color.js,v 1.2.2.3 2008/08/21 22:18:51 skiquel Exp $
|
| 2 |
|
| 3 |
Drupal.behaviors.color = function(context) {
|
| 4 |
// Constructor
|
| 5 |
// - Initialize one particular color selector
|
| 6 |
// - Store data related to that selector in 'this'
|
| 7 |
// - Create markup required for the color picker
|
| 8 |
// - Do other setup tasks
|
| 9 |
var inputs = [];
|
| 10 |
var hooks = [];
|
| 11 |
var locks = [];
|
| 12 |
var focused = null;
|
| 13 |
var form = $('#color-scheme-wrapper .color-form');
|
| 14 |
this.farb = [];
|
| 15 |
this.form = form;
|
| 16 |
this.context = context;
|
| 17 |
this.inputs = inputs;
|
| 18 |
this.hooks = [];
|
| 19 |
this.locks = [];
|
| 20 |
this.lock = [];
|
| 21 |
this.hook = [];
|
| 22 |
this.focused = focused;
|
| 23 |
this.reference = [];
|
| 24 |
this.hslColor = [];
|
| 25 |
this.hexColor = [];
|
| 26 |
this.hex = [];
|
| 27 |
|
| 28 |
var colorPicker = this;
|
| 29 |
|
| 30 |
if ( $("#preview").length > 0 ) {
|
| 31 |
// Build preview
|
| 32 |
$('#preview:not(.color-processed)')
|
| 33 |
.append('<div id="gradient"></div>')
|
| 34 |
.addClass('color-processed');
|
| 35 |
var gradient = $('#preview #gradient');
|
| 36 |
var h = parseInt(gradient.css('height')) / 10;
|
| 37 |
for (i = 0; i < h; ++i) {
|
| 38 |
gradient.append('<div class="gradient-line"></div>');
|
| 39 |
}
|
| 40 |
|
| 41 |
// Fix preview background in IE6
|
| 42 |
if ($("#preview #img").length > 0 && navigator.appVersion.match(/MSIE [0-6]\./)) {
|
| 43 |
var e = $('#preview #img')[0];
|
| 44 |
var image = e.currentStyle.backgroundImage;
|
| 45 |
e.style.backgroundImage = 'none';
|
| 46 |
e.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image.substring(5, image.length - 2) + "')";
|
| 47 |
}
|
| 48 |
}
|
| 49 |
//var self = this;
|
| 50 |
var focus=function () {
|
| 51 |
var input = this;
|
| 52 |
|
| 53 |
// Remove old bindings.
|
| 54 |
colorPicker.focused && $(colorPicker.focused).unbind('keyup', colorPicker.farb.updateValue)
|
| 55 |
.unbind('keyup', preview).unbind('keyup', resetScheme)
|
| 56 |
.parent().removeClass('item-selected');
|
| 57 |
|
| 58 |
// Add new bindings.
|
| 59 |
colorPicker.focused = input;
|
| 60 |
colorPicker.farb.linkTo(function (color) { callback(input, color, true, false); });
|
| 61 |
colorPicker.farb.setColor(input.value);
|
| 62 |
$(this).keyup(colorPicker.farb.updateValue).keyup(preview).keyup(resetScheme)
|
| 63 |
.parent().addClass('item-selected');
|
| 64 |
};
|
| 65 |
|
| 66 |
var colorSchemeSelect = function () {
|
| 67 |
var colors = this.options[this.selectedIndex].value;
|
| 68 |
//alert(colors);
|
| 69 |
if (colors != '') {
|
| 70 |
colors = colors.split(',');
|
| 71 |
for (i in colors) {
|
| 72 |
callback(colorPicker.inputs[i], colors[i], false, true);
|
| 73 |
}
|
| 74 |
preview();
|
| 75 |
}
|
| 76 |
};
|
| 77 |
|
| 78 |
var schemeSelector = function () {
|
| 79 |
// Extract palette field name
|
| 80 |
this.key = this.id.substring(13);
|
| 81 |
|
| 82 |
// Link to color picker temporarily to initialize.
|
| 83 |
colorPicker.farb.linkTo(function () {}).setColor('#000').linkTo(this);
|
| 84 |
|
| 85 |
var i = colorPicker.inputs.length;
|
| 86 |
|
| 87 |
// Add lock
|
| 88 |
if (colorPicker.inputs.length) {
|
| 89 |
colorPicker.lock = $('<div class="lock"></div>').toggle(
|
| 90 |
function () {
|
| 91 |
$(this).addClass('unlocked');
|
| 92 |
$(colorPicker.hooks[i - 1]).attr('class',
|
| 93 |
colorPicker.locks[i - 2] && $(colorPicker.locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook'
|
| 94 |
);
|
| 95 |
$(colorPicker.hooks[i]).attr('class',
|
| 96 |
colorPicker.locks[i] && $(colorPicker.locks[i]).is(':not(.unlocked)') ? 'hook down' : 'hook'
|
| 97 |
);
|
| 98 |
},
|
| 99 |
function () {
|
| 100 |
$(this).removeClass('unlocked');
|
| 101 |
$(colorPicker.hooks[i - 1]).attr('class',
|
| 102 |
colorPicker.locks[i - 2] && $(colorPicker.locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down'
|
| 103 |
);
|
| 104 |
$(colorPicker.hooks[i]).attr('class',
|
| 105 |
colorPicker.locks[i] && $(colorPicker.locks[i]).is(':not(.unlocked)') ? 'hook both' : 'hook up'
|
| 106 |
);
|
| 107 |
}
|
| 108 |
);
|
| 109 |
|
| 110 |
var la = $(this);
|
| 111 |
$('#palette:not(.locks-processed)').each(function() {
|
| 112 |
// alert('1');
|
| 113 |
$(la).after(colorPicker.lock);
|
| 114 |
colorPicker.locks.push(colorPicker.lock);
|
| 115 |
|
| 116 |
});
|
| 117 |
|
| 118 |
};
|
| 119 |
|
| 120 |
|
| 121 |
|
| 122 |
var hook = $('<div class="hook"></div>');
|
| 123 |
var la = $(this);
|
| 124 |
$('#palette:not(.hooks-processed)').each(function() {
|
| 125 |
$(la).after(hook);
|
| 126 |
});
|
| 127 |
|
| 128 |
$(la).parent().find('.lock').click();
|
| 129 |
|
| 130 |
colorPicker.hooks.push(hook);
|
| 131 |
colorPicker.hook = hook;
|
| 132 |
|
| 133 |
// colorPicker.hooks = hooks;
|
| 134 |
|
| 135 |
this.i = i;
|
| 136 |
colorPicker.inputs.push(this);
|
| 137 |
};
|
| 138 |
|
| 139 |
var getLength = function (variable) {
|
| 140 |
return variable.length;
|
| 141 |
};
|
| 142 |
|
| 143 |
var callback = function (input, color, propagate, colorscheme) {
|
| 144 |
if (color === "") {
|
| 145 |
$(input).css("background-color", 'gray').css("color", "black").attr('disabled',true).val('None');
|
| 146 |
}
|
| 147 |
else {
|
| 148 |
// Set background/foreground color
|
| 149 |
$(input).css({
|
| 150 |
backgroundColor: color,
|
| 151 |
'color': colorPicker.farb.RGBToHSL(colorPicker.farb.unpack(color))[2] > 0.5 ? '#000' : '#fff'
|
| 152 |
}).attr('disabled',false);
|
| 153 |
|
| 154 |
|
| 155 |
// Change input value
|
| 156 |
if (input.value && input.value != color) {
|
| 157 |
input.value = color;
|
| 158 |
// Update locked values
|
| 159 |
if (propagate) {
|
| 160 |
var i = input.i;
|
| 161 |
for (j = i + 1; ; ++j) {
|
| 162 |
if (!colorPicker.locks[j - 1] || $(colorPicker.locks[j - 1]).is('.unlocked')) break;
|
| 163 |
var matched = shift_color(color, colorPicker.reference[input.key], colorPicker.reference[colorPicker.inputs[j].key]);
|
| 164 |
callback(colorPicker.inputs[j], matched, false);
|
| 165 |
}
|
| 166 |
for (j = i - 1; ; --j) {
|
| 167 |
if (!colorPicker.locks[j] || $(colorPicker.locks[j]).is('.unlocked')) break;
|
| 168 |
var matched = shift_color(color, colorPicker.reference[input.key], colorPicker.reference[colorPicker.inputs[j].key]);
|
| 169 |
|
| 170 |
callback(colorPicker.inputs[j], matched, false);
|
| 171 |
}
|
| 172 |
|
| 173 |
// Update preview
|
| 174 |
preview();
|
| 175 |
colorPicker.farb.updateCompatibleColors();
|
| 176 |
colorPicker.farb.addPrevColor(input.value);
|
| 177 |
colorPicker.farb.listPrevColors();
|
| 178 |
|
| 179 |
}
|
| 180 |
|
| 181 |
// Reset colorscheme selector
|
| 182 |
if (!colorscheme) {
|
| 183 |
resetScheme;
|
| 184 |
}
|
| 185 |
}
|
| 186 |
}
|
| 187 |
};
|
| 188 |
|
| 189 |
var preview = function () {
|
| 190 |
// Solid background
|
| 191 |
$('#preview', colorPicker.form).css('backgroundColor', colorPicker.inputs[0].value);
|
| 192 |
|
| 193 |
// Text preview
|
| 194 |
|
| 195 |
var field;
|
| 196 |
$("input[@name^=palette]").each(
|
| 197 |
function intIndex() {
|
| 198 |
|
| 199 |
field = $(this).attr("name").replace("palette[", '').replace("]", '');
|
| 200 |
if (/text|link/.test(field)) {
|
| 201 |
$('#preview #'+ field, colorPicker.form).css('color', $(this).val());
|
| 202 |
}
|
| 203 |
else {
|
| 204 |
$('#preview #'+ field, colorPicker.form).css('background-color', $(this).val());
|
| 205 |
}
|
| 206 |
}
|
| 207 |
);
|
| 208 |
|
| 209 |
// Set up gradient
|
| 210 |
|
| 211 |
if (typeof(colorPicker.inputs[2]) != "undefined") {
|
| 212 |
var top = colorPicker.farb.unpack(colorPicker.inputs[2].value);
|
| 213 |
}
|
| 214 |
if (typeof(colorPicker.inputs[3]) != "undefined") {
|
| 215 |
var bottom = colorPicker.farb.unpack(colorPicker.inputs[3].value);
|
| 216 |
}
|
| 217 |
if (top && bottom) {
|
| 218 |
var delta = [];
|
| 219 |
for (i in top) {
|
| 220 |
delta[i] = (bottom[i] - top[i]) / h;
|
| 221 |
}
|
| 222 |
var accum = top;
|
| 223 |
|
| 224 |
// Render gradient lines
|
| 225 |
$('#gradient > div', colorPicker.form).each(function () {
|
| 226 |
for (i in accum) {
|
| 227 |
accum[i] += delta[i];
|
| 228 |
}
|
| 229 |
this.style.backgroundColor = colorPicker.farb.pack(accum);
|
| 230 |
});
|
| 231 |
}
|
| 232 |
|
| 233 |
};
|
| 234 |
|
| 235 |
var resetScheme = function(form) {
|
| 236 |
$('#edit-scheme', colorPicker.form).each(function () {
|
| 237 |
colorPicker.selectedIndex = colorPicker.options.length - 1;
|
| 238 |
});
|
| 239 |
};
|
| 240 |
|
| 241 |
/**
|
| 242 |
* Shift a given color, using a reference pair (ref in HSL).
|
| 243 |
*
|
| 244 |
* This algorithm ensures relative ordering on the saturation and luminance
|
| 245 |
* axes is preserved, and performs a simple hue shift.
|
| 246 |
*
|
| 247 |
* It is also symmetrical. If: shift_color(c, a, b) == d,
|
| 248 |
* then shift_color(d, b, a) == c.
|
| 249 |
*/
|
| 250 |
var shift_color = function (given, ref1, ref2) {
|
| 251 |
// Convert to HSL
|
| 252 |
given = colorPicker.farb.RGBToHSL(colorPicker.farb.unpack(given));
|
| 253 |
|
| 254 |
// Hue: apply delta
|
| 255 |
given[0] += ref2[0] - ref1[0];
|
| 256 |
|
| 257 |
// Saturation: interpolate
|
| 258 |
if (ref1[1] == 0 || ref2[1] == 0) {
|
| 259 |
given[1] = ref2[1];
|
| 260 |
}
|
| 261 |
else {
|
| 262 |
var d = ref1[1] / ref2[1];
|
| 263 |
if (d > 1) {
|
| 264 |
given[1] /= d;
|
| 265 |
}
|
| 266 |
else {
|
| 267 |
given[1] = 1 - (1 - given[1]) * d;
|
| 268 |
}
|
| 269 |
}
|
| 270 |
|
| 271 |
// Luminance: interpolate
|
| 272 |
if (ref1[2] == 0 || ref2[2] == 0) {
|
| 273 |
given[2] = ref2[2];
|
| 274 |
}
|
| 275 |
else {
|
| 276 |
var d = ref1[2] / ref2[2];
|
| 277 |
if (d > 1) {
|
| 278 |
given[2] /= d;
|
| 279 |
}
|
| 280 |
else {
|
| 281 |
given[2] = 1 - (1 - given[2]) * d;
|
| 282 |
}
|
| 283 |
}
|
| 284 |
|
| 285 |
return colorPicker.farb.pack(colorPicker.farb.HSLToRGB(given));
|
| 286 |
};
|
| 287 |
|
| 288 |
|
| 289 |
$('#color-scheme-wrapper .color-form:not(.color-processed)').each(function () {
|
| 290 |
$(colorPicker.form).prepend('<div id="placeholder"></div>');
|
| 291 |
colorPicker.farb = $.farbtastic('#placeholder');
|
| 292 |
|
| 293 |
// Decode reference colors to HSL
|
| 294 |
colorPicker.reference = Drupal.settings.color.reference;
|
| 295 |
for (i in colorPicker.reference) {
|
| 296 |
colorPicker.reference[i] = colorPicker.farb.RGBToHSL(colorPicker.farb.unpack(colorPicker.reference[i]));
|
| 297 |
}
|
| 298 |
Drupal.settings.color.reference = colorPicker.reference;
|
| 299 |
|
| 300 |
});
|
| 301 |
|
| 302 |
$('#color-scheme-wrapper .color-form:not(.color-processed)').addClass('color-processed').each(function() {
|
| 303 |
$('#palette input.form-text', colorPicker.form)
|
| 304 |
.each(schemeSelector).focus(focus);
|
| 305 |
$('#palette:not(.locks-processed)').addClass('locks-processed');
|
| 306 |
$('#palette:not(.hooks-processed)').addClass('hooks-processed');
|
| 307 |
|
| 308 |
$('#palette label', colorPicker.form).focus;
|
| 309 |
|
| 310 |
focus.call(colorPicker.inputs[0]);
|
| 311 |
preview();
|
| 312 |
});
|
| 313 |
|
| 314 |
if (colorPicker.farb == 0){
|
| 315 |
colorPicker.farb = $.farbtastic('#placeholder');
|
| 316 |
$('#palette.color-processed').removeClass('color-processed');
|
| 317 |
$('#palette input.form-text', colorPicker.form)
|
| 318 |
.each(schemeSelector).focus(focus);
|
| 319 |
$('#palette label', form).focus;
|
| 320 |
focus.call(colorPicker.inputs[0]);
|
| 321 |
}
|
| 322 |
|
| 323 |
$('#edit-edit-scheme:not(.color-processed)').addClass('color-processed').each(function() {
|
| 324 |
$('#edit-edit-scheme').change(colorSchemeSelect);
|
| 325 |
});
|
| 326 |
|
| 327 |
var hslColor, hexColor, hex;
|
| 328 |
|
| 329 |
|
| 330 |
$('#darken').click(function(){
|
| 331 |
colorPicker.hslColor = colorPicker.farb.hsl;
|
| 332 |
var h = colorPicker.hslColor[0], s = colorPicker.hslColor[1], l = colorPicker.hslColor[2];
|
| 333 |
if ((l-.05) > 0) {
|
| 334 |
l = l - .05;
|
| 335 |
}
|
| 336 |
colorPicker.hex = colorPicker.farb.HSLToHex([h,s,l]);
|
| 337 |
colorPicker.farb.setColor(colorPicker.hex);
|
| 338 |
return false;
|
| 339 |
|
| 340 |
});
|
| 341 |
|
| 342 |
|
| 343 |
$('#lighten').click(function(){
|
| 344 |
colorPicker.hslColor = colorPicker.farb.hsl;
|
| 345 |
var h = colorPicker.hslColor[0], s = colorPicker.hslColor[1], l = colorPicker.hslColor[2];
|
| 346 |
if ((l+.05) < 1) {
|
| 347 |
l = l + .05;
|
| 348 |
}
|
| 349 |
colorPicker.hex = colorPicker.farb.HSLToHex([h,s,l]);
|
| 350 |
colorPicker.farb.setColor(colorPicker.hex);
|
| 351 |
return false;
|
| 352 |
|
| 353 |
});
|
| 354 |
|
| 355 |
$('#randomize').click(function(){
|
| 356 |
colorPicker.hslColor = colorPicker.farb.hsl;
|
| 357 |
var h = colorPicker.hslColor[0], s = colorPicker.hslColor[1], l = colorPicker.hslColor[2];
|
| 358 |
//h = 1/(360/90);
|
| 359 |
// s is saturation. left to right, 1 to 0 on square. 0 to .75
|
| 360 |
s = (.25+(.75)*Math.random());
|
| 361 |
// l is luminosity, up to down, 1 to 0 on square. .25 to .75
|
| 362 |
l = (.25 + (.50)*Math.random());
|
| 363 |
//alert(s);
|
| 364 |
|
| 365 |
colorPicker.hex = colorPicker.farb.HSLToHex([Math.random(),s,l]);
|
| 366 |
colorPicker.farb.setColor(colorPicker.hex);
|
| 367 |
return false;
|
| 368 |
|
| 369 |
});
|
| 370 |
|
| 371 |
|
| 372 |
/*
|
| 373 |
$('#edit-selectsuggestedcolors').change(function(){
|
| 374 |
colorPicker.farb.updateCompatibleColors();
|
| 375 |
});*/
|
| 376 |
};
|
| 377 |
|
Parent Directory
| 
Revision Log
| 
Revision Graph