diff options
author | Paul Duncan <pabs@pablotron.org> | 2025-04-01 00:43:42 -0400 |
---|---|---|
committer | Paul Duncan <pabs@pablotron.org> | 2025-04-01 00:43:42 -0400 |
commit | e2493786fa2b45d7df849426b9f0233b0bbd4683 (patch) | |
tree | bd6caf2151ea268fdc74dda80e7db07e3d5f76d2 | |
parent | c5ad9e769eeb0d1cfa3d1ecbade6fe1a7fd6f33d (diff) | |
download | pablotron.org-main.tar.xz pablotron.org-main.zip |
-rw-r--r-- | static/files/articles/site-backend/script.js.txt | 43 |
1 files changed, 15 insertions, 28 deletions
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 |