summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--layout/_partial/scripts.ejs7
-rw-r--r--source/js/darkmode.js36
-rw-r--r--source/js/darkmode.ts37
-rw-r--r--source/js/script.js66
-rw-r--r--source/js/script.ts70
-rw-r--r--source/js/tsconfig.json2
6 files changed, 138 insertions, 80 deletions
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index c07d83d..2e9be0f 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -1,4 +1,5 @@
<!-- Lazyload support -->
+<%- js('js/script.js') %>
<% if (theme.lazyload) { %>
<script defer src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.min.js"></script>
<script>
@@ -10,12 +11,6 @@
</script>
<% } %>
-<!-- Darkmode support -->
-<%- js('js/darkmode.js') %>
-<script>
- var darklistener = new DarkmodeListener();
-</script>
-
<!-- Highlight.js support -->
<% if (theme.highlight.enable === true) { %>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/highlight.pack.min.js"></script>
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"
]
}
Powered by cgit, Theme cgit-dark created by Ted Yin, updated by Mole Shang.