acquia_claro-1.3.0/color/preview.es6.js

/**
 * @file
 * Preview for the Acquia Claro theme.
 * Edit preview.es6.js then run 'npm run color' to build preview.js.
 * Do not edit preview.js.
 */
(function ($, Drupal, drupalSettings) {
  Drupal.color = {
    logoChanged: false,
    callback (context, settings, $form) {

      const $colorPreview = $form.find('.color-preview');
      const $colorPalette = $form.find('.js-color-palette');

      // Header background.
      $colorPreview
        .find('.content-header')
        .css(
          'background-color',
          $colorPalette.find('input[name="palette[contentheader]"]').val(),
        );

      // Breadcrumbs.
      $colorPreview
        .find('.breadcrumb__item a')
        .css(
          'color',
          $colorPalette.find('input[name="palette[pagetitle]"]').val(),
        );

      // Title.
      $colorPreview
        .find('.block-page-title-block')
        .css(
          'color',
          $colorPalette.find('input[name="palette[pagetitle]"]').val(),
        );

      // Text color.
      $colorPreview
        .find('.page-wrapper')
        .css(
          'color',
          $colorPalette.find('input[name="palette[text]"]').val(),
        );

      $colorPreview
        .find('.admin-item__description')
        .css(
          'color',
          $colorPalette.find('input[name="palette[text]"]').val(),
        );

      // Link color.
      $colorPreview
        .find('.panel a')
        .css(
          'color',
          $colorPalette.find('input[name="palette[link]"]').val(),
        );

      $colorPreview
        .find('.content-header a').hover(function () {
          $(this).css('color', $colorPalette.find('input[name="palette[link]"]').val());
        }, function () {
          $(this).css('color', '#222330');
        });

      $colorPreview
        .find('.tabs__link')
        .css(
          'color',
          $colorPalette.find('input[name="palette[primarytabs]"]').val(),
        );

      $colorPreview
        .find('.tabs__link.active')
        .css(
          'border-color',
          $colorPalette.find('input[name="palette[primarytabs]"]').val(),
        );

      // Primary Tabs.
      $colorPreview
        .find('.is-horizontal .tabs__link').hover(function () {
          $(this).css('color', $colorPalette.find('input[name="palette[link]"]').val());
        }, function () {
          $(this).css('color', $colorPalette.find('input[name="palette[primarytabs]"]').val());
        });

      $colorPreview
        .find('.is-horizontal .tabs__link').hover(function () {
          $(this).css('background', $colorPalette.find('input[name="palette[primarytabshover]"]').val());
        }, function () {
          $(this).css('background', '');
        });

      $colorPreview
        .find('.panel__title')
        .css(
          'background-color',
          $colorPalette.find('input[name="palette[primarytabshover]"]').val(),
        );

      // Icon Color.
      let $iconColor = $colorPalette.find('input[name="palette[link]"]').val();
      $colorPreview
        .find('.admin-item__title')
        .before('<svg height="14" width="9"><path d="M 1.7109375,0.31445312 0.2890625,1.7226562 5.5917969,7.0761719 0.2890625,12.429688 1.7109375,13.837891 8.4082031,7.0761719 Z" fill="' + $iconColor + '";/></svg>'
        );

      // Button.
      $colorPreview
        .find('.button')
        .css(
          'background',
          $colorPalette.find('input[name="palette[link]"]').val(),
        );

      // Button hover.
      $colorPreview
        .find('.button').hover(function () {
          $(this).css('background', $colorPalette.find('input[name="palette[primarybuttonhover]"]').val());
        }, function () {
          $(this).css('background', $colorPalette.find('input[name="palette[link]"]').val());
        });

    },
  };
})(jQuery, Drupal, drupalSettings);