aboutsummaryrefslogtreecommitdiff
path: root/static/files/articles/site-backend/script.js.txt
diff options
context:
space:
mode:
Diffstat (limited to 'static/files/articles/site-backend/script.js.txt')
-rw-r--r--static/files/articles/site-backend/script.js.txt37
1 files changed, 37 insertions, 0 deletions
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')
+ )
+ }));
+});