From dc68c42ce1b8efc1003137c08dd5961b93705684 Mon Sep 17 00:00:00 2001
From: Paul Duncan <pabs@pablotron.org>
Date: Fri, 31 May 2024 03:58:29 -0400
Subject: content/articles/site-backend.md: populate most of the content

---
 static/files/articles/site-backend/script.js.txt | 37 ++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 static/files/articles/site-backend/script.js.txt

(limited to 'static/files/articles/site-backend/script.js.txt')

diff --git a/static/files/articles/site-backend/script.js.txt b/static/files/articles/site-backend/script.js.txt
new file mode 100644
index 0000000..ecf41b8
--- /dev/null
+++ b/static/files/articles/site-backend/script.js.txt
@@ -0,0 +1,37 @@
+'use strict';
+
+//
+// script.js - script which handles:
+//
+// - set theme
+// - theme switcher and burger menu event handlers
+//
+
+const D = document,
+      C = D.body.parentElement.classList,
+      L = localStorage,
+      M = window.matchMedia,
+      on = (el, id, fn) => el.addEventListener(id, fn);
+
+// use theme if set, otherwise fall back to browser preference
+if (L && L.theme && L.theme === 'dark') {
+  C.add('dark'); // theme set to "dark"
+} else if ((!L || !L.theme) && M && M('(prefers-color-scheme: dark)').matches) {
+  C.add('dark'); // prefers dark color scheme
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  // theme toggle event handler
+  on(D.querySelector('.navbar-item[data-id="theme"]'), 'click', (e) => {
+    e.preventDefault(); // stop event
+    L.theme = C.toggle('dark') ? 'dark' : 'light'; // toggle
+  });
+
+  // iterate through burgers, bind to click events
+  D.querySelectorAll('.navbar-burger').forEach(e => on(e, 'click', () => {
+    // then toggle is-active on burger and menu
+    [e, D.getElementById(e.dataset.target)].forEach(
+      e => e.classList.toggle('is-active')
+    )
+  }));
+});
-- 
cgit v1.2.3