summaryrefslogtreecommitdiff
path: root/source/js/script.ts
diff options
context:
space:
mode:
Diffstat (limited to 'source/js/script.ts')
-rw-r--r--source/js/script.ts70
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();