diff options
Diffstat (limited to 'static/files/articles/site-backend/script.js.txt')
-rw-r--r-- | static/files/articles/site-backend/script.js.txt | 37 |
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') + ) + })); +}); |