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(
  12           'src',
  13           drupalSettings.color.logo,
  14         );
  15         this.logoChanged = true;
  16       }
  17       // Remove the logo if the setting is toggled off.
  18       if (drupalSettings.color.logo === null) {
  19         $('div').remove('.color-preview-logo');
  20       }
  21
  22       const $colorPreview = $form.find('.color-preview');
  23       const $colorPalette = $form.find('.js-color-palette');
  24
  25       // Solid background.
  26       $colorPreview.css(
  27         'backgroundColor',
  28         $colorPalette.find('input[name="palette[bg]"]').val(),
  29       );
  30
  31       // Text preview.
  32       $colorPreview
  33         .find('.color-preview-main h2, .color-preview .preview-content')
  34         .css('color', $colorPalette.find('input[name="palette[text]"]').val());
  35       $colorPreview
  36         .find('.color-preview-content a')
  37         .css('color', $colorPalette.find('input[name="palette[link]"]').val());
  38
  39       // Sidebar block.
  40       const $colorPreviewBlock = $colorPreview.find(
  41         '.color-preview-sidebar .color-preview-block',
  42       );
  43       $colorPreviewBlock.css(
  44         'background-color',
  45         $colorPalette.find('input[name="palette[sidebar]"]').val(),
  46       );
  47       $colorPreviewBlock.css(
  48         'border-color',
  49         $colorPalette.find('input[name="palette[sidebarborders]"]').val(),
  50       );
  51
  52       // Footer wrapper background.
  53       $colorPreview
  54         .find('.color-preview-footer-wrapper')
  55         .css(
  56           'background-color',
  57           $colorPalette.find('input[name="palette[footer]"]').val(),
  58         );
  59
  60       // CSS3 Gradients.
  61       const gradientStart = $colorPalette
  62         .find('input[name="palette[top]"]')
  63         .val();
  64       const gradientEnd = $colorPalette
  65         .find('input[name="palette[bottom]"]')
  66         .val();
  67
  68       $colorPreview
  69         .find('.color-preview-header')
  70         .attr(
  71           'style',
  72           `background-color: ${gradientStart}; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(${gradientStart}), to(${gradientEnd})); background-image: -moz-linear-gradient(-90deg, ${gradientStart}, ${gradientEnd});`,
  73         );
  74
  75       $colorPreview
  76         .find('.color-preview-site-name')
  77         .css(
  78           'color',
  79           $colorPalette.find('input[name="palette[titleslogan]"]').val(),
  80         );
  81     },
  82   };
  83 })(jQuery, Drupal, drupalSettings);