| 1 |
// $Id: flowplayer3_colorpicker.js,v 1.3 2009/03/16 23:30:49 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 |
};
|
Parent Directory
| 
Revision Log
| 
Revision Graph