From e2493786fa2b45d7df849426b9f0233b0bbd4683 Mon Sep 17 00:00:00 2001
From: Paul Duncan <pabs@pablotron.org>
Date: Tue, 1 Apr 2025 00:43:42 -0400
Subject: static/files/articles/site-backend/script.js.txt: update
---
static/files/articles/site-backend/script.js.txt | 43 +++++++++---------------
1 file changed, 15 insertions(+), 28 deletions(-)
(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
index ae47804..1ab4045 100644
--- a/static/files/articles/site-backend/script.js.txt
+++ b/static/files/articles/site-backend/script.js.txt
@@ -1,26 +1,23 @@
'use strict';
//
-// script.js - script which handles:
+// script.js: minimal JS for pablotron.org
//
-// - check/set dark mode (added 2024-05-27)
-// - enable burger menu support
+// - set theme on page load
+// - bind theme switcher and burger menu event handlers
//
-// original notes regarding burger menu and minification are in the
-// "burger menu" section below
+// current sizes (2025-04-01):
+// - minified: 699 bytes
+// - minified/compressed: 508 bytes
//
-// burger menu (2024-05-27)
-// ------------------------
+// notes below are slightly out of date...
+//
+// theme switcher (2024-05-27)
+// ---------------------------
// does the following:
//
// 1. checks for user setting and use that, if present.
-// 2. otherwise check browser for preferred color scheme and use that.
-//
-// this works in conjunction with the styles in `assets/dark.sass` and
-// has one minor quirk: there is a brief flash when the user transitions
-// to a new page and has dark mode enabled. this can be removed by
-// uncommenting the block at the top of `dark.sass`, but doing this
-// currently breaks the light color scheme :/.
+// 2. otherwise default to dark mode.
//
// refs:
// https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
@@ -56,26 +53,16 @@ const D = document,
M = window.matchMedia,
on = (el, id, fn) => el.addEventListener(id, fn);
-// use theme if set, otherwise fall back to dark mode
-// FIXME: move to DOMContentLoaded?
-//
-// update (2025-03-31): prefer dark mode by default and only set light
-// mode if the user has explicitly selected the light theme using the
-// theme toggle.
-//
-// the old logic also attempted to account for "prefers-color-scheme:
-// light", but i want the default to be dark unless it is explicitly
-// overridden.
-C.add('dark'); // unconditionally set dark mode
+// light theme selected by user?
if (L && L.theme && L.theme === 'light') {
C.remove('dark'); // set light theme
}
-document.addEventListener('DOMContentLoaded', () => {
+D.addEventListener('DOMContentLoaded', () => {
// theme toggle event handler
- on(D.querySelector('.navbar-item[data-id="theme"]'), 'click', (e) => {
+ on(D.querySelector('.navbar-item[data-id="theme"]'), 'click', e => {
e.preventDefault(); // stop event
- L.theme = C.toggle('dark') ? 'dark' : 'light'; // toggle
+ L.theme = C.toggle('dark') ? 'dark' : 'light'; // toggle theme
});
// iterate through burgers, bind to click events
--
cgit v1.2.3