diff options
Diffstat (limited to 'source/js/script.ts')
-rw-r--r-- | source/js/script.ts | 70 |
1 files changed, 70 insertions, 0 deletions
diff --git a/source/js/script.ts b/source/js/script.ts new file mode 100644 index 0000000..ea07b07 --- /dev/null +++ b/source/js/script.ts @@ -0,0 +1,70 @@ +/* Add elements listener */ +window.addEventListener("load", () => { + + // Menubar burgers click listenr + const burgers: Element[] = Array.prototype.slice.call( + document.querySelectorAll(".navbar-burger"), 0); + if (burgers.length > 0) { + burgers.forEach((element) => { + element.addEventListener("click", () => { + const idstr = element.getAttribute("data-target"); + element.classList.toggle("is-active"); + if (!idstr) return; + const target = document.getElementById(idstr); + target?.classList.toggle("is-active"); + }, false); + }); + } + + // Add header hover page class changer + darklistener.add((mode) => { + const page = document.getElementById("header-page"); + if (mode === SystemDarkmodePrefrence.dark) { + page?.classList.add("is-dark"); + page?.classList.remove("is-light"); + } else { + page?.classList.add("is-light"); + page?.classList.remove("is-dark"); + } + }); +}); + +/* Darkmode listener */ +enum SystemDarkmodePrefrence { + dark = 0, + light = 1 +}; + +class DarkmodeListener { + private _mode: SystemDarkmodePrefrence; + private _handlers: ((mode: SystemDarkmodePrefrence) => void)[]; + + public constructor() { + let darking = window.matchMedia('(prefers-color-scheme: dark)').matches; + this._mode = darking ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light; + this._handlers = []; + this._listen(); + } + + private _listen(): void { + let media = window.matchMedia('(prefers-color-scheme: dark)'); + let callback = (event: MediaQueryListEvent) => { + let mode = event.matches ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light; + this._handlers.forEach(handler => { + handler(mode); + }); + this._mode = mode; + }; + media.addEventListener("change", callback); + } + + public add(callback: (mode: SystemDarkmodePrefrence) => void): void { + this._handlers.push(callback); + } + + public mode(): SystemDarkmodePrefrence { + return this._mode; + } +}; + +var darklistener = new DarkmodeListener(); |