5 files changed, 137 insertions, 74 deletions
diff --git a/source/js/darkmode.js b/source/js/darkmode.js
deleted file mode 100644
index c08347a..0000000
--- a/source/js/darkmode.js
+++ /dev/null
@@ -1,36 +0,0 @@
-"use strict";
-// Darkmode Listener
-var SystemDarkmodePrefrence;
-(function (SystemDarkmodePrefrence) {
-    SystemDarkmodePrefrence[SystemDarkmodePrefrence["dark"] = 0] = "dark";
-    SystemDarkmodePrefrence[SystemDarkmodePrefrence["light"] = 1] = "light";
-})(SystemDarkmodePrefrence || (SystemDarkmodePrefrence = {}));
-;
-var DarkmodeListener = /** @class */ (function () {
-    function DarkmodeListener() {
-        var darking = window.matchMedia('(prefers-color-scheme: dark)').matches;
-        this._mode = darking ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light;
-        this._handlers = [];
-        this._listen();
-    }
-    DarkmodeListener.prototype._listen = function () {
-        var _this = this;
-        var media = window.matchMedia('(prefers-color-scheme: dark)');
-        var callback = function (event) {
-            var mode = event.matches ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light;
-            _this._handlers.forEach(function (handler) {
-                handler(mode);
-            });
-            _this._mode = mode;
-        };
-        media.addEventListener("change", callback);
-    };
-    DarkmodeListener.prototype.add = function (callback) {
-        this._handlers.push(callback);
-    };
-    DarkmodeListener.prototype.mode = function () {
-        return this._mode;
-    };
-    return DarkmodeListener;
-}());
-;
diff --git a/source/js/darkmode.ts b/source/js/darkmode.ts
deleted file mode 100644
index db24d0a..0000000
--- a/source/js/darkmode.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-// 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;
-    }
-};
diff --git a/source/js/script.js b/source/js/script.js
new file mode 100644
index 0000000..eb6bff5
--- /dev/null
+++ b/source/js/script.js
@@ -0,0 +1,66 @@
+"use strict";
+/* Add elements listener */
+window.addEventListener("load", function () {
+    // Menubar burgers click listenr
+    var burgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0);
+    if (burgers.length > 0) {
+        burgers.forEach(function (element) {
+            element.addEventListener("click", function () {
+                var idstr = element.getAttribute("data-target");
+                element.classList.toggle("is-active");
+                if (!idstr)
+                    return;
+                var target = document.getElementById(idstr);
+                target === null || target === void 0 ? void 0 : target.classList.toggle("is-active");
+            }, false);
+        });
+    }
+    // Add header hover page class changer
+    darklistener.add(function (mode) {
+        var page = document.getElementById("header-page");
+        if (mode === SystemDarkmodePrefrence.dark) {
+            page === null || page === void 0 ? void 0 : page.classList.add("is-dark");
+            page === null || page === void 0 ? void 0 : page.classList.remove("is-light");
+        }
+        else {
+            page === null || page === void 0 ? void 0 : page.classList.add("is-light");
+            page === null || page === void 0 ? void 0 : page.classList.remove("is-dark");
+        }
+    });
+});
+/* Darkmode listener */
+var SystemDarkmodePrefrence;
+(function (SystemDarkmodePrefrence) {
+    SystemDarkmodePrefrence[SystemDarkmodePrefrence["dark"] = 0] = "dark";
+    SystemDarkmodePrefrence[SystemDarkmodePrefrence["light"] = 1] = "light";
+})(SystemDarkmodePrefrence || (SystemDarkmodePrefrence = {}));
+;
+var DarkmodeListener = /** @class */ (function () {
+    function DarkmodeListener() {
+        var darking = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        this._mode = darking ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light;
+        this._handlers = [];
+        this._listen();
+    }
+    DarkmodeListener.prototype._listen = function () {
+        var _this = this;
+        var media = window.matchMedia('(prefers-color-scheme: dark)');
+        var callback = function (event) {
+            var mode = event.matches ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light;
+            _this._handlers.forEach(function (handler) {
+                handler(mode);
+            });
+            _this._mode = mode;
+        };
+        media.addEventListener("change", callback);
+    };
+    DarkmodeListener.prototype.add = function (callback) {
+        this._handlers.push(callback);
+    };
+    DarkmodeListener.prototype.mode = function () {
+        return this._mode;
+    };
+    return DarkmodeListener;
+}());
+;
+var darklistener = new DarkmodeListener();
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();
diff --git a/source/js/tsconfig.json b/source/js/tsconfig.json
index 0e0c422..3370c73 100644
--- a/source/js/tsconfig.json
+++ b/source/js/tsconfig.json
@@ -69,6 +69,6 @@
     "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
   },
   "files": [
-    "darkmode.ts"
+    "script.ts"
   ]
 }