root / drupal7 / sites / all / modules / ctools / js / stylizer.js @ 64ad485a
1 |
|
---|---|
2 |
(function ($) { |
3 |
Drupal.CTools = Drupal.CTools || {}; |
4 |
Drupal.CTools.Stylizer = {}; |
5 |
|
6 |
Drupal.CTools.Stylizer.addFarbtastic = function(context) { |
7 |
// This behavior attaches by ID, so is only valid once on a page.
|
8 |
if ($('ctools_stylizer_color_scheme_form .color-form.Stylizer-processed').size()) { |
9 |
return;
|
10 |
} |
11 |
|
12 |
var 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.Stylizer.reference.clone();
|
24 |
for (i in reference) {
|
25 |
reference[i] = farb.RGBToHSL(farb.unpack(reference[i]));
|
26 |
} */
|
27 |
|
28 |
// Set up colorscheme selector
|
29 |
$('#edit-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 |
* Shift a given color, using a reference pair (ref in HSL).
|
41 |
*
|
42 |
* This algorithm ensures relative ordering on the saturation and luminance
|
43 |
* axes is preserved, and performs a simple hue shift.
|
44 |
*
|
45 |
* It is also symmetrical. If: shift_color(c, a, b) == d,
|
46 |
* then shift_color(d, b, a) == c.
|
47 |
*/
|
48 |
function shift_color(given, ref1, ref2) { |
49 |
// Convert to HSL
|
50 |
given = farb.RGBToHSL(farb.unpack(given)); |
51 |
|
52 |
// Hue: apply delta
|
53 |
given[0] += ref2[0] - ref1[0]; |
54 |
|
55 |
// Saturation: interpolate
|
56 |
if (ref1[1] == 0 || ref2[1] == 0) { |
57 |
given[1] = ref2[1]; |
58 |
} |
59 |
else {
|
60 |
var d = ref1[1] / ref2[1]; |
61 |
if (d > 1) { |
62 |
given[1] /= d;
|
63 |
} |
64 |
else {
|
65 |
given[1] = 1 - (1 - given[1]) * d; |
66 |
} |
67 |
} |
68 |
|
69 |
// Luminance: interpolate
|
70 |
if (ref1[2] == 0 || ref2[2] == 0) { |
71 |
given[2] = ref2[2]; |
72 |
} |
73 |
else {
|
74 |
var d = ref1[2] / ref2[2]; |
75 |
if (d > 1) { |
76 |
given[2] /= d;
|
77 |
} |
78 |
else {
|
79 |
given[2] = 1 - (1 - given[2]) * d; |
80 |
} |
81 |
} |
82 |
|
83 |
return farb.pack(farb.HSLToRGB(given));
|
84 |
} |
85 |
|
86 |
/**
|
87 |
* Callback for Farbtastic when a new color is chosen.
|
88 |
*/
|
89 |
function callback(input, color, propagate, colorscheme) { |
90 |
// Set background/foreground color
|
91 |
$(input).css({
|
92 |
backgroundColor: color,
|
93 |
'color': farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff' |
94 |
}); |
95 |
|
96 |
// Change input value
|
97 |
if (input.value && input.value != color) {
|
98 |
input.value = color; |
99 |
|
100 |
// Update locked values
|
101 |
if (propagate) {
|
102 |
var i = input.i;
|
103 |
for (j = i + 1; ; ++j) { |
104 |
if (!locks[j - 1] || $(locks[j - 1]).is('.unlocked')) break; |
105 |
var matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
|
106 |
callback(inputs[j], matched, false);
|
107 |
} |
108 |
for (j = i - 1; ; --j) { |
109 |
if (!locks[j] || $(locks[j]).is('.unlocked')) break; |
110 |
var matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
|
111 |
callback(inputs[j], matched, false);
|
112 |
} |
113 |
|
114 |
} |
115 |
|
116 |
// Reset colorscheme selector
|
117 |
if (!colorscheme) {
|
118 |
resetScheme(); |
119 |
} |
120 |
} |
121 |
|
122 |
} |
123 |
|
124 |
/**
|
125 |
* Reset the color scheme selector.
|
126 |
*/
|
127 |
function resetScheme() { |
128 |
$('#edit-scheme', form).each(function () { |
129 |
this.selectedIndex = this.options.length - 1; |
130 |
}); |
131 |
} |
132 |
|
133 |
// Focus the Farbtastic on a particular field.
|
134 |
function focus() { |
135 |
var input = this; |
136 |
// Remove old bindings
|
137 |
focused && $(focused).unbind('keyup', farb.updateValue) |
138 |
.unbind('keyup', resetScheme)
|
139 |
.parent().removeClass('item-selected');
|
140 |
|
141 |
// Add new bindings
|
142 |
focused = this;
|
143 |
farb.linkTo(function (color) { callback(input, color, true, false); }); |
144 |
farb.setColor(this.value);
|
145 |
$(focused).keyup(farb.updateValue).keyup(resetScheme)
|
146 |
.parent().addClass('item-selected');
|
147 |
} |
148 |
|
149 |
// Initialize color fields
|
150 |
$('#palette input.form-text', form) |
151 |
.each(function () {
|
152 |
// Extract palette field name
|
153 |
this.key = this.id.substring(13); |
154 |
|
155 |
// Link to color picker temporarily to initialize.
|
156 |
farb.linkTo(function () {}).setColor('#000').linkTo(this); |
157 |
|
158 |
// Add lock
|
159 |
var i = inputs.length;
|
160 |
if (inputs.length) {
|
161 |
var lock = $('<div class="lock"></div>').toggle( |
162 |
function () {
|
163 |
$(this).addClass('unlocked'); |
164 |
$(hooks[i - 1]).attr('class', |
165 |
locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook' |
166 |
); |
167 |
$(hooks[i]).attr('class', |
168 |
locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook down' : 'hook' |
169 |
); |
170 |
}, |
171 |
function () {
|
172 |
$(this).removeClass('unlocked'); |
173 |
$(hooks[i - 1]).attr('class', |
174 |
locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down' |
175 |
); |
176 |
$(hooks[i]).attr('class', |
177 |
locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook both' : 'hook up' |
178 |
); |
179 |
} |
180 |
); |
181 |
$(this).after(lock); |
182 |
locks.push(lock); |
183 |
}; |
184 |
|
185 |
// Add hook
|
186 |
var $this = $(this); |
187 |
var hook = $('<div class="hook"></div>'); |
188 |
$this.after(hook);
|
189 |
hooks.push(hook); |
190 |
|
191 |
$this.parent().find('.lock').click(); |
192 |
this.i = i;
|
193 |
inputs.push(this);
|
194 |
}) |
195 |
.focus(focus); |
196 |
|
197 |
$('#palette label', form); |
198 |
|
199 |
// Focus first color
|
200 |
focus.call(inputs[0]);
|
201 |
}; |
202 |
|
203 |
Drupal.behaviors.CToolsColorSettings = { |
204 |
attach: function() { |
205 |
$('.ctools-stylizer-color-edit:not(.ctools-color-processed)') |
206 |
.addClass('ctools-color-processed')
|
207 |
.each(function() {
|
208 |
Drupal.CTools.Stylizer.addFarbtastic('#' + $(this).attr('id')); |
209 |
}); |
210 |
|
211 |
$('div.form-item div.ctools-style-icon:not(.ctools-color-processed)') |
212 |
.addClass('ctools-color-processed')
|
213 |
.click(function() {
|
214 |
$widget = $('input', $(this).parent()); |
215 |
// Toggle if a checkbox, turn on if a radio.
|
216 |
$widget.attr('checked', !$widget.attr('checked') || $widget.is('input[type=radio]')); |
217 |
}); |
218 |
} |
219 |
} |
220 |
})(jQuery); |