diff options
Diffstat (limited to 'source/js/script.js')
| -rw-r--r-- | source/js/script.js | 155 |
1 files changed, 136 insertions, 19 deletions
diff --git a/source/js/script.js b/source/js/script.js index 8a3daa5..665d379 100644 --- a/source/js/script.js +++ b/source/js/script.js @@ -1,4 +1,3 @@ -"use strict"; /* Add elements listener */ window.addEventListener("load", function () { // Menubar burgers click listenr @@ -20,15 +19,17 @@ window.addEventListener("load", function () { var clsname = ".auto-dark"; var elements = Array.prototype.slice.call(document.querySelectorAll(clsname), 0); elements.forEach(function (element) { - if (mode === SystemDarkmodePrefrence.dark) { + if (mode === SystemDarkmodePreference.dark) { element === null || element === void 0 ? void 0 : element.classList.add("is-dark"); element === null || element === void 0 ? void 0 : element.classList.remove("is-light"); } else { + // If mode == null , fallback to light mode element === null || element === void 0 ? void 0 : element.classList.add("is-light"); element === null || element === void 0 ? void 0 : element.classList.remove("is-dark"); } }); + console.debug("".concat(clsname, " class changed to ").concat(enumModeToStringMode(mode))); }; darklistener.add(colorman); // Add logo color selector @@ -38,36 +39,128 @@ window.addEventListener("load", function () { var lightsrc = logo === null || logo === void 0 ? void 0 : logo.getAttribute("data-src-lightmode"); if (!logo || !darksrc || !lightsrc) return; - var src = (mode === SystemDarkmodePrefrence.dark) ? darksrc : lightsrc; + var src = (mode === SystemDarkmodePreference.dark) ? darksrc : lightsrc; logo.setAttribute("src", src); + console.debug("logo src changed to ".concat(enumModeToStringMode(mode), "src")); }; darklistener.add(logoman); + // Add player theme handler + var playerman = function (mode) { + var shikwasa = document.body.querySelector('div[data-name="shikwasa"]'); + shikwasa === null || shikwasa === void 0 ? void 0 : shikwasa.setAttribute("data-theme", enumModeToStringMode(mode) ? enumModeToStringMode(mode) : "light"); + console.debug("shikwasa theme: ".concat(shikwasa === null || shikwasa === void 0 ? void 0 : shikwasa.getAttribute("data-theme"))); + }; + darklistener.add(playerman); + // Listen after all the setups (to get the handler work :p). + darklistener.listen(); }); /* Darkmode listener */ -var SystemDarkmodePrefrence; -(function (SystemDarkmodePrefrence) { - SystemDarkmodePrefrence[SystemDarkmodePrefrence["dark"] = 0] = "dark"; - SystemDarkmodePrefrence[SystemDarkmodePrefrence["light"] = 1] = "light"; -})(SystemDarkmodePrefrence || (SystemDarkmodePrefrence = {})); +var SystemDarkmodePreference; +(function (SystemDarkmodePreference) { + SystemDarkmodePreference[SystemDarkmodePreference["dark"] = 0] = "dark"; + SystemDarkmodePreference[SystemDarkmodePreference["light"] = 1] = "light"; +})(SystemDarkmodePreference || (SystemDarkmodePreference = {})); ; +var modeMap = { + dark: SystemDarkmodePreference.dark, + light: SystemDarkmodePreference.light +}; +var invertDarkModeObj = { + 'dark': 'light', + 'light': 'dark' +}; +var enumModeToStringMode = function (i) { + var keysArray = Object.keys(modeMap); + var result = keysArray.filter(function (key) { return isValidKey(key, modeMap) && modeMap[key] === i; }); + return result ? result[0] : undefined; +}; var DarkmodeListener = /** @class */ (function () { function DarkmodeListener() { var darking = window.matchMedia('(prefers-color-scheme: dark)').matches; - this._mode = darking ? SystemDarkmodePrefrence.dark : SystemDarkmodePrefrence.light; + this._mode = darking ? SystemDarkmodePreference.dark : SystemDarkmodePreference.light; this._handlers = []; - this._listen(); } - DarkmodeListener.prototype._listen = function () { + 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; + var rootElement = document.documentElement; + var darkModeStorageKey = 'user-color-scheme'; + var rootElementDarkModeAttributeName = 'data-user-color-scheme'; + var darkModeTogglebuttonElement = document.getElementById('btn-toggle-dark'); + var resetRootDarkModeAttributeAndLS = function () { + rootElement.removeAttribute(rootElementDarkModeAttributeName); + removeLS(darkModeStorageKey); + }; + // Partially taken from https://blog.skk.moe/post/hello-darkmode-my-old-friend, CC BY-NC-SA 4.0 + var applyCustomDarkModeSettings = function (mode) { + // 接受从「开关」处传来的模式，或者从 localStorage 读取 + var LSSetting = getLS(darkModeStorageKey) == 'dark' ? SystemDarkmodePreference.dark : 'light' ? SystemDarkmodePreference.light : null; + var currentSetting = mode || LSSetting; + console.debug("applyCustomDarkModeSettings: ".concat(currentSetting)); + if (currentSetting === _this._mode) { + // 当用户自定义的显示模式和 prefers-color-scheme 相同时重置、恢复到自动模式 + resetRootDarkModeAttributeAndLS(); + console.debug('Resetting to auto mode...'); + } + else if (currentSetting == SystemDarkmodePreference.dark || currentSetting == SystemDarkmodePreference.light) { + // 否则设置为用户自定义的显示模式 + rootElement.setAttribute(rootElementDarkModeAttributeName, enumModeToStringMode(currentSetting)); + console.debug('Setting prop: "data-user-color-scheme" in HTML...'); + } + else { + // 首次访问或从未使用过开关、localStorage 中没有存储的值，currentSetting 是 null + // 或者 localStorage 被篡改，currentSetting 不是合法值 + // 默认显示浅色主题 + resetRootDarkModeAttributeAndLS(); + console.debug('Initial setup, setting theme to light as default...'); + currentSetting = SystemDarkmodePreference.light; + } + var lightCSS = document.getElementById("bulma-light"); + var darkCSS = document.getElementById("bulma-dark"); + if (currentSetting == SystemDarkmodePreference.dark) { + rootElement.setAttribute(rootElementDarkModeAttributeName, 'dark'); + lightCSS.setAttribute("media", "none"); + darkCSS.setAttribute("media", "all"); + _this._handlers.forEach(function (handler) { + handler(SystemDarkmodePreference.dark); + console.debug('Invoking dark theme handler...'); + }); + console.debug('Dark theme applied.'); + } + else if (currentSetting == SystemDarkmodePreference.light) { + rootElement.setAttribute(rootElementDarkModeAttributeName, 'light'); + lightCSS.setAttribute("media", "all"); + darkCSS.setAttribute("media", "none"); + _this._handlers.forEach(function (handler) { + handler(SystemDarkmodePreference.light); + console.debug('Invoking light theme handler...'); + }); + console.debug('Light theme applied.'); + } + }; + var toggleCustomDarkMode = function () { + var currentSetting = getLS(darkModeStorageKey); + if (currentSetting === null) { + var curMode = enumModeToStringMode(_this._mode); + currentSetting = isValidKey(curMode, invertDarkModeObj) ? invertDarkModeObj[curMode] : currentSetting; + } + else if (currentSetting == 'dark' || 'light') { + // 从 localStorage 中读取模式，并取相反的模式 + currentSetting = isValidKey(currentSetting, invertDarkModeObj) ? invertDarkModeObj[currentSetting] : currentSetting; + } + else { + // 不知道出了什么幺蛾子，比如 localStorage 被篡改成非法值 + return; // 直接 return; + } + // 将相反的模式写入 localStorage + setLS(darkModeStorageKey, currentSetting); + return isValidKey(currentSetting, invertDarkModeObj) ? modeMap[currentSetting] : null; }; - media.addEventListener("change", callback); + applyCustomDarkModeSettings(null); + darkModeTogglebuttonElement === null || darkModeTogglebuttonElement === void 0 ? void 0 : darkModeTogglebuttonElement.addEventListener('click', function () { + // 当用户点击「开关」时，获得新的显示模式、写入 localStorage、并在页面上生效 + console.debug('User clicked button. Doing black magic now...'); + applyCustomDarkModeSettings(toggleCustomDarkMode()); + }); }; DarkmodeListener.prototype.add = function (callback) { callback(this._mode); @@ -80,3 +173,27 @@ var DarkmodeListener = /** @class */ (function () { }()); ; var darklistener = new DarkmodeListener(); +function setLS(k, v) { + try { + localStorage.setItem(k, v); + } + catch (e) { } +} +function removeLS(k) { + try { + localStorage.removeItem(k); + } + catch (e) { } +} +function getLS(k) { + try { + return localStorage.getItem(k); + } + catch (e) { + return null; // 与 localStorage 中没有找到对应 key 的行为一致 + } +} +// 使用isValidKey判断key是否存在对象类型中 +function isValidKey(key, obj) { + return key in obj; +} |