123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293 |
- /**
- * @file
- * Attaches preview-related behavior for the Color module.
- */
- (function($, Drupal) {
- /**
- * Namespace for color-related functionality for Drupal.
- *
- * @namespace
- */
- Drupal.color = {
- /**
- * The callback for when the color preview has been attached.
- *
- * @param {Element} context
- * The context to initiate the color behavior.
- * @param {object} settings
- * Settings for the color functionality.
- * @param {HTMLFormElement} form
- * The form to initiate the color behavior on.
- * @param {object} farb
- * The farbtastic object.
- * @param {number} height
- * Height of gradient.
- * @param {number} width
- * Width of gradient.
- */
- callback(context, settings, form, farb, height, width) {
- let accum;
- let delta;
- // Solid background.
- form
- .find('.color-preview')
- .css(
- 'backgroundColor',
- form.find('.color-palette input[name="palette[base]"]').val(),
- );
- // Text preview.
- form
- .find('#text')
- .css(
- 'color',
- form.find('.color-palette input[name="palette[text]"]').val(),
- );
- form
- .find('#text a, #text h2')
- .css(
- 'color',
- form.find('.color-palette input[name="palette[link]"]').val(),
- );
- function gradientLineColor(i, element) {
- Object.keys(accum || {}).forEach(k => {
- accum[k] += delta[k];
- });
- element.style.backgroundColor = farb.pack(accum);
- }
- // Set up gradients if there are some.
- let colorStart;
- let colorEnd;
- Object.keys(settings.gradients || {}).forEach(i => {
- colorStart = farb.unpack(
- form
- .find(
- `.color-palette input[name="palette[${settings.gradients[i].colors[0]}]"]`,
- )
- .val(),
- );
- colorEnd = farb.unpack(
- form
- .find(
- `.color-palette input[name="palette[${settings.gradients[i].colors[1]}]"]`,
- )
- .val(),
- );
- if (colorStart && colorEnd) {
- delta = [];
- Object.keys(colorStart || {}).forEach(colorStartKey => {
- delta[colorStartKey] =
- (colorEnd[colorStartKey] - colorStart[colorStartKey]) /
- (settings.gradients[i].vertical ? height[i] : width[i]);
- });
- accum = colorStart;
- // Render gradient lines.
- form.find(`#gradient-${i} > div`).each(gradientLineColor);
- }
- });
- },
- };
- })(jQuery, Drupal);
|