Security update for Core, with self-updated composer
[yaffs-website] / web / core / themes / bartik / color / preview.es6.js
diff --git a/web/core/themes/bartik/color/preview.es6.js b/web/core/themes/bartik/color/preview.es6.js
new file mode 100644 (file)
index 0000000..90d3b42
--- /dev/null
@@ -0,0 +1,46 @@
+/**
+ * @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 gradient_start = $colorPalette.find('input[name="palette[top]"]').val();
+      const gradient_end = $colorPalette.find('input[name="palette[bottom]"]').val();
+
+      $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});`);
+
+      $colorPreview.find('.color-preview-site-name').css('color', $colorPalette.find('input[name="palette[titleslogan]"]').val());
+    },
+  };
+}(jQuery, Drupal, drupalSettings));