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      * The callback for when the color preview has been attached.
  15      *
  16      * @param {Element} context
  17      *   The context to initiate the color behaviour.
  18      * @param {object} settings
  19      *   Settings for the color functionality.
  20      * @param {HTMLFormElement} form
  21      *   The form to initiate the color behaviour on.
  22      * @param {object} farb
  23      *   The farbtastic object.
  24      * @param {number} height
  25      *   Height of gradient.
  26      * @param {number} width
  27      *   Width of gradient.
  28      */
  29     callback(context, settings, form, farb, height, width) {
  30       let accum;
  31       let delta;
  32       // Solid background.
  33       form
  34         .find('.color-preview')
  35         .css(
  36           'backgroundColor',
  37           form.find('.color-palette input[name="palette[base]"]').val(),
  38         );
  39
  40       // Text preview.
  41       form
  42         .find('#text')
  43         .css(
  44           'color',
  45           form.find('.color-palette input[name="palette[text]"]').val(),
  46         );
  47       form
  48         .find('#text a, #text h2')
  49         .css(
  50           'color',
  51           form.find('.color-palette input[name="palette[link]"]').val(),
  52         );
  53
  54       function gradientLineColor(i, element) {
  55         Object.keys(accum || {}).forEach(k => {
  56           accum[k] += delta[k];
  57         });
  58         element.style.backgroundColor = farb.pack(accum);
  59       }
  60
  61       // Set up gradients if there are some.
  62       let colorStart;
  63       let colorEnd;
  64       Object.keys(settings.gradients || {}).forEach(i => {
  65         colorStart = farb.unpack(
  66           form
  67             .find(
  68               `.color-palette input[name="palette[${
  69                 settings.gradients[i].colors[0]
  70               }]"]`,
  71             )
  72             .val(),
  73         );
  74         colorEnd = farb.unpack(
  75           form
  76             .find(
  77               `.color-palette input[name="palette[${
  78                 settings.gradients[i].colors[1]
  79               }]"]`,
  80             )
  81             .val(),
  82         );
  83         if (colorStart && colorEnd) {
  84           delta = [];
  85           Object.keys(colorStart || {}).forEach(colorStartKey => {
  86             delta[colorStartKey] =
  87               (colorEnd[colorStartKey] - colorStart[colorStartKey]) /
  88               (settings.gradients[i].vertical ? height[i] : width[i]);
  89           });
  90           accum = colorStart;
  91           // Render gradient lines.
  92           form.find(`#gradient-${i} > div`).each(gradientLineColor);
  93         }
  94       });
  95     },
  96   };
  97 })(jQuery, Drupal);