Commit 00175843 authored by catch's avatar catch
Browse files

Issue #1684830 by nod_, tim.plunkett: JSHint color.

parent 7a38d82d
......@@ -9,7 +9,7 @@
Drupal.behaviors.color = {
attach: function (context, settings) {
var i, j, colors, field_name;
var i, j, colors;
// This behavior attaches by ID, so is only valid once on a page.
var form = $(context).find('#system-theme-settings .color-form').once('color');
if (form.length === 0) {
......@@ -27,7 +27,9 @@ Drupal.behaviors.color = {
// Decode reference colors to HSL.
var reference = settings.color.reference;
for (i in reference) {
reference[i] = farb.RGBToHSL(farb.unpack(reference[i]));
if (reference.hasOwnProperty(i)) {
reference[i] = farb.RGBToHSL(farb.unpack(reference[i]));
}
}
// Build a preview.
......@@ -35,18 +37,20 @@ Drupal.behaviors.color = {
var width = [];
// Loop through all defined gradients.
for (i in settings.gradients) {
// Add element to display the gradient.
$('#preview').once('color').append('<div id="gradient-' + i + '"></div>');
var gradient = $('#preview #gradient-' + i);
// Add height of current gradient to the list (divided by 10).
height.push(parseInt(gradient.css('height'), 10) / 10);
// Add width of current gradient to the list (divided by 10).
width.push(parseInt(gradient.css('width'), 10) / 10);
// Add rows (or columns for horizontal gradients).
// Each gradient line should have a height (or width for horizontal
// gradients) of 10px (because we divided the height/width by 10 above).
for (j = 0; j < (settings.gradients[i]['direction'] === 'vertical' ? height[i] : width[i]); ++j) {
gradient.append('<div class="gradient-line"></div>');
if (settings.gradients.hasOwnProperty(i)) {
// Add element to display the gradient.
$('#preview').once('color').append('<div id="gradient-' + i + '"></div>');
var gradient = $('#preview #gradient-' + i);
// Add height of current gradient to the list (divided by 10).
height.push(parseInt(gradient.css('height'), 10) / 10);
// Add width of current gradient to the list (divided by 10).
width.push(parseInt(gradient.css('width'), 10) / 10);
// Add rows (or columns for horizontal gradients).
// Each gradient line should have a height (or width for horizontal
// gradients) of 10px (because we divided the height/width by 10 above).
for (j = 0; j < (settings.gradients[i].direction === 'vertical' ? height[i] : width[i]); ++j) {
gradient.append('<div class="gradient-line"></div>');
}
}
}
......@@ -56,8 +60,10 @@ Drupal.behaviors.color = {
if (colorScheme !== '' && schemes[colorScheme]) {
// Get colors of active scheme.
colors = schemes[colorScheme];
for (field_name in colors) {
callback($('#edit-palette-' + field_name), colors[field_name], false, true);
for (var fieldName in colors) {
if (colors.hasOwnProperty(fieldName)) {
callback($('#edit-palette-' + fieldName), colors[fieldName], false, true);
}
}
preview();
}
......@@ -80,6 +86,7 @@ Drupal.behaviors.color = {
* shift_color(d, b, a) === c.
*/
function shift_color(given, ref1, ref2) {
var d;
// Convert to HSL.
given = farb.RGBToHSL(farb.unpack(given));
......@@ -91,7 +98,7 @@ Drupal.behaviors.color = {
given[1] = ref2[1];
}
else {
var d = ref1[1] / ref2[1];
d = ref1[1] / ref2[1];
if (d > 1) {
given[1] /= d;
}
......@@ -105,7 +112,7 @@ Drupal.behaviors.color = {
given[2] = ref2[2];
}
else {
var d = ref1[2] / ref2[2];
d = ref1[2] / ref2[2];
if (d > 1) {
given[2] /= d;
}
......@@ -136,12 +143,16 @@ Drupal.behaviors.color = {
if (propagate) {
i = input.i;
for (j = i + 1; ; ++j) {
if (!locks[j - 1] || $(locks[j - 1]).is('.unlocked')) break;
if (!locks[j - 1] || $(locks[j - 1]).is('.unlocked')) {
break;
}
matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
callback(inputs[j], matched, false);
}
for (j = i - 1; ; --j) {
if (!locks[j] || $(locks[j]).is('.unlocked')) break;
if (!locks[j] || $(locks[j]).is('.unlocked')) {
break;
}
matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
callback(inputs[j], matched, false);
}
......@@ -169,17 +180,19 @@ Drupal.behaviors.color = {
/**
* Focuses Farbtastic on a particular field.
*/
function focus() {
var input = this;
function focus(e) {
var input = e.target;
// Remove old bindings.
focused && $(focused).unbind('keyup', farb.updateValue)
if (focused) {
$(focused).unbind('keyup', farb.updateValue)
.unbind('keyup', preview).unbind('keyup', resetScheme)
.parent().removeClass('item-selected');
}
// Add new bindings.
focused = this;
focused = input;
farb.linkTo(function (color) { callback(input, color, true, false); });
farb.setColor(this.value);
farb.setColor(input.value);
$(focused).keyup(farb.updateValue).keyup(preview).keyup(resetScheme)
.parent().addClass('item-selected');
}
......@@ -218,7 +231,7 @@ Drupal.behaviors.color = {
);
$(this).after(lock);
locks.push(lock);
};
}
// Add hook.
var hook = $('<div class="hook"></div>');
......@@ -234,7 +247,7 @@ Drupal.behaviors.color = {
form.find('#palette label');
// Focus first color.
focus.call(inputs[0]);
inputs[0].focus();
// Render preview.
preview();
......
......@@ -16,24 +16,32 @@
form.find('#text').css('color', form.find('#palette input[name="palette[text]"]').val());
form.find('#text a, #text h2').css('color', form.find('#palette input[name="palette[link]"]').val());
function gradientLineColor(i, element) {
for (var k in accum) {
if (accum.hasOwnProperty(k)) {
accum[k] += delta[k];
}
}
element.style.backgroundColor = farb.pack(accum);
}
// Set up gradients if there are some.
var color_start, color_end;
for (var i in settings.gradients) {
color_start = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i]['colors'][0] + ']"]').val());
color_end = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i]['colors'][1] + ']"]').val());
if (color_start && color_end) {
var delta = [];
for (var j in color_start) {
delta[j] = (color_end[j] - color_start[j]) / (settings.gradients[i]['vertical'] ? height[i] : width[i]);
}
var accum = color_start;
// Render gradient lines.
form.find('#gradient-' + i + ' > div').each(function () {
for (j in accum) {
accum[j] += delta[j];
if (settings.gradients.hasOwnProperty(i)) {
color_start = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i].colors[0] + ']"]').val());
color_end = farb.unpack(form.find('#palette input[name="palette[' + settings.gradients[i].colors[1] + ']"]').val());
if (color_start && color_end) {
var delta = [];
for (var j in color_start) {
if (color_start.hasOwnProperty(j)) {
delta[j] = (color_end[j] - color_start[j]) / (settings.gradients[i].vertical ? height[i] : width[i]);
}
}
this.style.backgroundColor = farb.pack(accum);
});
var accum = color_start;
// Render gradient lines.
form.find('#gradient-' + i + ' > div').each(gradientLineColor);
}
}
}
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment