jekyll-garden 0.0.12

data/assets/js/theme-colors.js

@@ -0,0 +1,57 @@
+---
+---
+
+export default class ThemeColors {
+  constructor() {
+    // this.theme set in initThemeColors();
+    this.favicon = document.querySelector('[rel="icon"]');
+    this.navBonsai = document.getElementById('nav-bonsai');
+    this.navBase = document.getElementById('nav-base');
+    this.themeColorBtns = document.querySelectorAll('a[data-theme-id]');
+    // logo
+    this.homeLogo = document.getElementById('home-logo');
+    this.rootLogo = document.getElementById('root-logo');
+    this.init();
+  }
+
+  init() {
+    this.initThemeColors();
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    Array.prototype.forEach.call(this.themeColorBtns, (btn) => {
+      btn.addEventListener('click', (event) => {
+        this.updateThemeColors(event);
+      });
+    });
+  }
+
+  initThemeColors() {
+    this.theme = localStorage.getItem("theme-colors");
+    if (!this.theme) {
+      this.theme = '{{ site.bonsai.default_theme }}' !== "" ? '{{ site.bonsai.default_theme }}' : '{{ site.data.themes[0].id }}';
+    }
+    this.updateThemeColors();
+  }
+
+  updateThemeColors (event) {
+    if (event) {
+      this.theme = event.target.dataset.themeId;
+    }
+    // update theme color data
+    document.documentElement.setAttribute('data-theme', this.theme);
+    // update icons and images
+    this.favicon.setAttribute('href', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--favicon-src')}`.replaceAll(/\s/g,''));
+    this.navBase.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--nav-burger-base')}`.replaceAll(/\s/g,''));
+    this.navBonsai.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--nav-burger-bonsai')}`.replaceAll(/\s/g,''));
+    if (this.homeLogo) {
+      this.homeLogo.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--logo-src')}`.replaceAll(/\s/g,''));
+    }
+    if (this.rootLogo) {
+      this.rootLogo.setAttribute('src', `{{site.baseurl}}${getComputedStyle(document.documentElement).getPropertyValue('--logo-src')}`.replaceAll(/\s/g,''));
+    }
+    // save to local storage
+    window.localStorage.setItem('theme-colors', this.theme);
+  }
+}