www.aleph1.co.uk Git - yaffs-website/blob - web/core/modules/color/preview.es6.js

   1 /**
   2  * @file
   3  * Attaches preview-related behavior for the Color module.
   4  */
   5
   6 (function ($, Drupal) {
   7   /**
   8    * Namespace for color-related functionality for Drupal.
   9    *
  10    * @namespace
  11    */
  12   Drupal.color = {
  13
  14     /**
  15      * The callback for when the color preview has been attached.
  16      *
  17      * @param {Element} context
  18      *   The context to initiate the color behaviour.
  19      * @param {object} settings
  20      *   Settings for the color functionality.
  21      * @param {HTMLFormElement} form
  22      *   The form to initiate the color behaviour on.
  23      * @param {object} farb
  24      *   The farbtastic object.
  25      * @param {number} height
  26      *   Height of gradient.
  27      * @param {number} width
  28      *   Width of gradient.
  29      */
  30     callback(context, settings, form, farb, height, width) {
  31       let accum;
  32       let delta;
  33       // Solid background.
  34       form.find('.color-preview').css('backgroundColor', form.find('.color-palette input[name="palette[base]"]').val());
  35
  36       // Text preview.
  37       form.find('#text').css('color', form.find('.color-palette input[name="palette[text]"]').val());
  38       form.find('#text a, #text h2').css('color', form.find('.color-palette input[name="palette[link]"]').val());
  39
  40       function gradientLineColor(i, element) {
  41         for (const k in accum) {
  42           if (accum.hasOwnProperty(k)) {
  43             accum[k] += delta[k];
  44           }
  45         }
  46         element.style.backgroundColor = farb.pack(accum);
  47       }
  48
  49       // Set up gradients if there are some.
  50       let color_start;
  51       let color_end;
  52       for (const i in settings.gradients) {
  53         if (settings.gradients.hasOwnProperty(i)) {
  54           color_start = farb.unpack(form.find(`.color-palette input[name="palette[${settings.gradients[i].colors[0]}]"]`).val());
  55           color_end = farb.unpack(form.find(`.color-palette input[name="palette[${settings.gradients[i].colors[1]}]"]`).val());
  56           if (color_start && color_end) {
  57             delta = [];
  58             for (const j in color_start) {
  59               if (color_start.hasOwnProperty(j)) {
  60                 delta[j] = (color_end[j] - color_start[j]) / (settings.gradients[i].vertical ? height[i] : width[i]);
  61               }
  62             }
  63             accum = color_start;
  64             // Render gradient lines.
  65             form.find(`#gradient-${i} > div`).each(gradientLineColor);
  66           }
  67         }
  68       }
  69     },
  70   };
  71 }(jQuery, Drupal));