/**
* @file
* Preview for the Bartik theme.
*/
(function ($, Drupal, drupalSettings) {
Drupal.color = {
logoChanged: false,
callback(context, settings, $form) {
// Change the logo to be the real one.
if (!this.logoChanged) {
$('.color-preview .color-preview-logo img').attr(
'src',
drupalSettings.color.logo,
);
this.logoChanged = true;
}
// Remove the logo if the setting is toggled off.
if (drupalSettings.color.logo === null) {
$('div').remove('.color-preview-logo');
}
const $colorPreview = $form.find('.color-preview');
const $colorPalette = $form.find('.js-color-palette');
// Solid background.
$colorPreview.css(
'backgroundColor',
$colorPalette.find('input[name="palette[bg]"]').val(),
);
// Text preview.
$colorPreview
.find('.color-preview-main h2, .color-preview .preview-content')
.css('color', $colorPalette.find('input[name="palette[text]"]').val());
$colorPreview
.find('.color-preview-content a')
.css('color', $colorPalette.find('input[name="palette[link]"]').val());
// Sidebar block.
const $colorPreviewBlock = $colorPreview.find(
'.color-preview-sidebar .color-preview-block',
);
$colorPreviewBlock.css(
'background-color',
$colorPalette.find('input[name="palette[sidebar]"]').val(),
);
$colorPreviewBlock.css(
'border-color',
$colorPalette.find('input[name="palette[sidebarborders]"]').val(),
);
// Footer wrapper background.
$colorPreview
.find('.color-preview-footer-wrapper')
.css(
'background-color',
$colorPalette.find('input[name="palette[footer]"]').val(),
);
// CSS3 Gradients.
const gradientStart = $colorPalette
.find('input[name="palette[top]"]')
.val();
const gradientEnd = $colorPalette
.find('input[name="palette[bottom]"]')
.val();
$colorPreview
.find('.color-preview-header')
.attr(
'style',
`background-color: ${gradientStart}; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(${gradientStart}), to(${gradientEnd})); background-image: -moz-linear-gradient(-90deg, ${gradientStart}, ${gradientEnd});`,
);
$colorPreview
.find('.color-preview-site-name')
.css(
'color',
$colorPalette.find('input[name="palette[titleslogan]"]').val(),
);
},
};
})(jQuery, Drupal, drupalSettings);