* Attaches the behaviors for the Color module.
*/
-(function ($, Drupal) {
+(function($, Drupal) {
/**
* Displays farbtastic color selector and initialize color administration UI.
*
let j;
let colors;
// This behavior attaches by ID, so is only valid once on a page.
- const form = $(context).find('#system-theme-settings .color-form').once('color');
+ const form = $(context)
+ .find('#system-theme-settings .color-form')
+ .once('color');
if (form.length === 0) {
return;
}
let focused = null;
// Add Farbtastic.
- $('<div class="color-placeholder"></div>').once('color').prependTo(form);
+ $('<div class="color-placeholder"></div>')
+ .once('color')
+ .prependTo(form);
const farb = $.farbtastic('.color-placeholder');
// Decode reference colors to HSL.
const reference = settings.color.reference;
- for (i in reference) {
- if (reference.hasOwnProperty(i)) {
- reference[i] = farb.RGBToHSL(farb.unpack(reference[i]));
- }
- }
+ Object.keys(reference || {}).forEach(color => {
+ reference[color] = farb.RGBToHSL(farb.unpack(reference[color]));
+ });
// Build a preview.
const height = [];
const width = [];
- // Loop through all defined gradients.
- for (i in settings.gradients) {
- if (settings.gradients.hasOwnProperty(i)) {
- // Add element to display the gradient.
- $('.color-preview').once('color').append(`<div id="gradient-${i}"></div>`);
- const gradient = $(`.color-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>');
- }
- }
- }
-
- // Set up colorScheme selector.
- form.find('#edit-scheme').on('change', function () {
- const schemes = settings.color.schemes;
- const colorScheme = this.options[this.selectedIndex].value;
- if (colorScheme !== '' && schemes[colorScheme]) {
- // Get colors of active scheme.
- colors = schemes[colorScheme];
- for (const fieldName in colors) {
- if (colors.hasOwnProperty(fieldName)) {
- callback($(`#edit-palette-${fieldName}`), colors[fieldName], false, true);
- }
- }
- preview();
- }
- });
/**
* Renders the preview.
Drupal.color.callback(context, settings, form, farb, height, width);
}
+ /**
+ * Resets the color scheme selector.
+ */
+ function resetScheme() {
+ form.find('#edit-scheme').each(function() {
+ this.selectedIndex = this.options.length - 1;
+ });
+ }
+
/**
* Shifts a given color, using a reference pair (ref in HSL).
*
* This algorithm ensures relative ordering on the saturation and
* luminance axes is preserved, and performs a simple hue shift.
*
- * It is also symmetrical. If: shift_color(c, a, b) === d, then
- * shift_color(d, b, a) === c.
+ * It is also symmetrical. If: shiftColor(c, a, b) === d, then
+ * shiftColor(d, b, a) === c.
*
- * @function Drupal.color~shift_color
+ * @function Drupal.color~shiftColor
*
* @param {string} given
* A hex color code to shift.
* @return {string}
* A hex color, shifted.
*/
- function shift_color(given, ref1, ref2) {
+ function shiftColor(given, ref1, ref2) {
let d;
// Convert to HSL.
given = farb.RGBToHSL(farb.unpack(given));
// Saturation: interpolate.
if (ref1[1] === 0 || ref2[1] === 0) {
given[1] = ref2[1];
- }
- else {
+ } else {
d = ref1[1] / ref2[1];
if (d > 1) {
given[1] /= d;
- }
- else {
+ } else {
given[1] = 1 - (1 - given[1]) * d;
}
}
// Luminance: interpolate.
if (ref1[2] === 0 || ref2[2] === 0) {
given[2] = ref2[2];
- }
- else {
+ } else {
d = ref1[2] / ref2[2];
if (d > 1) {
given[2] /= d;
- }
- else {
+ } else {
given[2] = 1 - (1 - given[2]) * d;
}
}
if (!locks[j - 1] || $(locks[j - 1]).is('.is-unlocked')) {
break;
}
- matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
+ matched = shiftColor(
+ color,
+ reference[input.key],
+ reference[inputs[j].key],
+ );
callback(inputs[j], matched, false);
}
for (j = i - 1; ; --j) {
if (!locks[j] || $(locks[j]).is('.is-unlocked')) {
break;
}
- matched = shift_color(color, reference[input.key], reference[inputs[j].key]);
+ matched = shiftColor(
+ color,
+ reference[input.key],
+ reference[inputs[j].key],
+ );
callback(inputs[j], matched, false);
}
}
}
- /**
- * Resets the color scheme selector.
- */
- function resetScheme() {
- form.find('#edit-scheme').each(function () {
- this.selectedIndex = this.options.length - 1;
- });
- }
+ // Loop through all defined gradients.
+ Object.keys(settings.gradients || {}).forEach(i => {
+ // Add element to display the gradient.
+ $('.color-preview')
+ .once('color')
+ .append(`<div id="gradient-${i}"></div>`);
+ const gradient = $(`.color-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>');
+ }
+ });
+
+ // Set up colorScheme selector.
+ form.find('#edit-scheme').on('change', function() {
+ const schemes = settings.color.schemes;
+ const colorScheme = this.options[this.selectedIndex].value;
+ if (colorScheme !== '' && schemes[colorScheme]) {
+ // Get colors of active scheme.
+ colors = schemes[colorScheme];
+ Object.keys(colors || {}).forEach(fieldName => {
+ callback(
+ $(`#edit-palette-${fieldName}`),
+ colors[fieldName],
+ false,
+ true,
+ );
+ });
+ preview();
+ }
+ });
/**
* Focuses Farbtastic on a particular field.
const input = e.target;
// Remove old bindings.
if (focused) {
- $(focused).off('keyup', farb.updateValue)
- .off('keyup', preview).off('keyup', resetScheme)
- .parent().removeClass('item-selected');
+ $(focused)
+ .off('keyup', farb.updateValue)
+ .off('keyup', preview)
+ .off('keyup', resetScheme)
+ .parent()
+ .removeClass('item-selected');
}
// Add new bindings.
focused = input;
- farb.linkTo((color) => {
+ farb.linkTo(color => {
callback(input, color, true, false);
});
farb.setColor(input.value);
- $(focused).on('keyup', farb.updateValue).on('keyup', preview).on('keyup', resetScheme)
- .parent().addClass('item-selected');
+ $(focused)
+ .on('keyup', farb.updateValue)
+ .on('keyup', preview)
+ .on('keyup', resetScheme)
+ .parent()
+ .addClass('item-selected');
}
// Initialize color fields.
- form.find('.js-color-palette input.form-text')
- .each(function () {
+ form
+ .find('.js-color-palette input.form-text')
+ .each(function() {
// Extract palette field name.
this.key = this.id.substring(13);
// Link to color picker temporarily to initialize.
- farb.linkTo(() => {}).setColor('#000').linkTo(this);
+ farb
+ .linkTo(() => {})
+ .setColor('#000')
+ .linkTo(this);
// Add lock.
const i = inputs.length;
if (inputs.length) {
let toggleClick = true;
- const lock = $(`<button class="color-palette__lock">${Drupal.t('Unlock')}</button>`).on('click', function (e) {
+ const lock = $(
+ `<button class="color-palette__lock">${Drupal.t(
+ 'Unlock',
+ )}</button>`,
+ ).on('click', function(e) {
e.preventDefault();
if (toggleClick) {
- $(this).addClass('is-unlocked').html(Drupal.t('Lock'));
- $(hooks[i - 1]).attr('class',
- locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-up' : 'color-palette__hook',
+ $(this)
+ .addClass('is-unlocked')
+ .html(Drupal.t('Lock'));
+ $(hooks[i - 1]).attr(
+ 'class',
+ locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)')
+ ? 'color-palette__hook is-up'
+ : 'color-palette__hook',
);
- $(hooks[i]).attr('class',
- locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-down' : 'color-palette__hook',
+ $(hooks[i]).attr(
+ 'class',
+ locks[i] && $(locks[i]).is(':not(.is-unlocked)')
+ ? 'color-palette__hook is-down'
+ : 'color-palette__hook',
);
- }
- else {
- $(this).removeClass('is-unlocked').html(Drupal.t('Unlock'));
- $(hooks[i - 1]).attr('class',
- locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-down',
+ } else {
+ $(this)
+ .removeClass('is-unlocked')
+ .html(Drupal.t('Unlock'));
+ $(hooks[i - 1]).attr(
+ 'class',
+ locks[i - 2] && $(locks[i - 2]).is(':not(.is-unlocked)')
+ ? 'color-palette__hook is-both'
+ : 'color-palette__hook is-down',
);
- $(hooks[i]).attr('class',
- locks[i] && $(locks[i]).is(':not(.is-unlocked)') ? 'color-palette__hook is-both' : 'color-palette__hook is-up',
+ $(hooks[i]).attr(
+ 'class',
+ locks[i] && $(locks[i]).is(':not(.is-unlocked)')
+ ? 'color-palette__hook is-both'
+ : 'color-palette__hook is-up',
);
}
toggleClick = !toggleClick;
$(this).after(hook);
hooks.push(hook);
- $(this).parent().find('.color-palette__lock').trigger('click');
+ $(this)
+ .parent()
+ .find('.color-palette__lock')
+ .trigger('click');
this.i = i;
inputs.push(this);
})
preview();
},
};
-}(jQuery, Drupal));
+})(jQuery, Drupal);
projects / yaffs-website / blobdiff