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

   1 /**
   2  * @file
   3  * Preview for the Bartik theme.
   4  */
   5 (function ($, Drupal, drupalSettings) {
   6   Drupal.color = {
   7     logoChanged: false,
   8     callback(context, settings, $form) {
   9       // Change the logo to be the real one.
  10       if (!this.logoChanged) {
  11         $('.color-preview .color-preview-logo img').attr('src', drupalSettings.color.logo);
  12         this.logoChanged = true;
  13       }
  14       // Remove the logo if the setting is toggled off.
  15       if (drupalSettings.color.logo === null) {
  16         $('div').remove('.color-preview-logo');
  17       }
  18
  19       const $colorPreview = $form.find('.color-preview');
  20       const $colorPalette = $form.find('.js-color-palette');
  21
  22       // Solid background.
  23       $colorPreview.css('backgroundColor', $colorPalette.find('input[name="palette[bg]"]').val());
  24
  25       // Text preview.
  26       $colorPreview.find('.color-preview-main h2, .color-preview .preview-content').css('color', $colorPalette.find('input[name="palette[text]"]').val());
  27       $colorPreview.find('.color-preview-content a').css('color', $colorPalette.find('input[name="palette[link]"]').val());
  28
  29       // Sidebar block.
  30       const $colorPreviewBlock = $colorPreview.find('.color-preview-sidebar .color-preview-block');
  31       $colorPreviewBlock.css('background-color', $colorPalette.find('input[name="palette[sidebar]"]').val());
  32       $colorPreviewBlock.css('border-color', $colorPalette.find('input[name="palette[sidebarborders]"]').val());
  33
  34       // Footer wrapper background.
  35       $colorPreview.find('.color-preview-footer-wrapper').css('background-color', $colorPalette.find('input[name="palette[footer]"]').val());
  36
  37       // CSS3 Gradients.
  38       const gradient_start = $colorPalette.find('input[name="palette[top]"]').val();
  39       const gradient_end = $colorPalette.find('input[name="palette[bottom]"]').val();
  40
  41       $colorPreview.find('.color-preview-header').attr('style', `background-color: ${gradient_start}; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(${gradient_start}), to(${gradient_end})); background-image: -moz-linear-gradient(-90deg, ${gradient_start}, ${gradient_end});`);
  42
  43       $colorPreview.find('.color-preview-site-name').css('color', $colorPalette.find('input[name="palette[titleslogan]"]').val());
  44     },
  45   };
  46 }(jQuery, Drupal, drupalSettings));