diff options
author | Doge <[email protected]> | 2021-05-08 16:36:00 +0800 |
---|---|---|
committer | Doge <[email protected]> | 2021-05-08 16:36:00 +0800 |
commit | 569f72f60f6a8e6227c2eac081ec1a91398c07d6 (patch) | |
tree | 2d026c1afa94fbec40b9c79c0cdb033bd90aa6e7 | |
parent | 45265444c24fc2439c9769d9151a6bf560f22575 (diff) | |
download | chromate-569f72f60f6a8e6227c2eac081ec1a91398c07d6.tar.gz chromate-569f72f60f6a8e6227c2eac081ec1a91398c07d6.tar.bz2 chromate-569f72f60f6a8e6227c2eac081ec1a91398c07d6.zip |
Combine js files
-rw-r--r-- | layout/_partial/scripts.ejs | 7 | ||||
-rw-r--r-- | source/js/darkmode.js | 36 | ||||
-rw-r--r-- | source/js/darkmode.ts | 37 | ||||
-rw-r--r-- | source/js/script.js | 66 | ||||
-rw-r--r-- | source/js/script.ts | 70 | ||||
-rw-r--r-- | source/js/tsconfig.json | 2 |
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" ] } |