X-Git-Url: http://www.aleph1.co.uk/gitweb/?p=yaffs-website;a=blobdiff_plain;f=web%2Fcore%2Fthemes%2Fbartik%2Fcolor%2Fpreview.es6.js;fp=web%2Fcore%2Fthemes%2Fbartik%2Fcolor%2Fpreview.es6.js;h=590a7c76d9c73bd0c454a747affdb4f9312ec476;hp=a41f1f2c205add43e6f6f1cfbf596c50a4a80ab4;hb=0bf8d09d2542548982e81a441b1f16e75873a04f;hpb=74df008bdbb3a11eeea356744f39b802369bda3c diff --git a/web/core/themes/bartik/color/preview.es6.js b/web/core/themes/bartik/color/preview.es6.js index a41f1f2c2..590a7c76d 100644 --- a/web/core/themes/bartik/color/preview.es6.js +++ b/web/core/themes/bartik/color/preview.es6.js @@ -2,13 +2,16 @@ * @file * Preview for the Bartik theme. */ -(function ($, Drupal, drupalSettings) { +(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); + $('.color-preview .color-preview-logo img').attr( + 'src', + drupalSettings.color.logo, + ); this.logoChanged = true; } // Remove the logo if the setting is toggled off. @@ -20,27 +23,61 @@ const $colorPalette = $form.find('.js-color-palette'); // Solid background. - $colorPreview.css('backgroundColor', $colorPalette.find('input[name="palette[bg]"]').val()); + $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()); + $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()); + 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()); + $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(); + 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-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()); + $colorPreview + .find('.color-preview-site-name') + .css( + 'color', + $colorPalette.find('input[name="palette[titleslogan]"]').val(), + ); }, }; -}(jQuery, Drupal, drupalSettings)); +})(jQuery, Drupal, drupalSettings);