This commit is contained in:
TheGiddyLimit
2024-06-23 22:13:57 +01:00
parent ed9833eefc
commit e5844f8a3f
279 changed files with 38254 additions and 7675 deletions

View File

@@ -1,6 +1,77 @@
"use strict";
class StyleSwitcher {
static _STORAGE_DAY_NIGHT = "StyleSwitcher_style";
static _STORAGE_IS_MANUAL_MODE = "StyleSwitcher_style-is-manual-mode";
static _STORAGE_WIDE = "StyleSwitcher_style-wide";
static _STYLE_DAY = "day";
static _STYLE_NIGHT = "night";
static _STYLE_NIGHT_ALT = "nightAlt";
static _STYLE_NIGHT_CLEAN = "nightClean";
static _NIGHT_CLASS = "ve-night-mode";
static _NIGHT_CLASS_STANDARD = "ve-night-mode--standard";
static _NIGHT_CLASS_ALT = "ve-night-mode--classic";
static _NIGHT_CLASS_CLEAN = "ve-night-mode--clean";
static _WIDE_ID = "style-switch__wide";
static _STYLES = [
this._STYLE_DAY,
this._STYLE_NIGHT,
this._STYLE_NIGHT_ALT,
this._STYLE_NIGHT_CLEAN,
];
static _STYLE_TO_DISPLAY_NAME = {
[this._STYLE_DAY]: "Day Mode",
[this._STYLE_NIGHT]: "Night Mode",
[this._STYLE_NIGHT_ALT]: "Night Mode (Classic)",
[this._STYLE_NIGHT_CLEAN]: "Night Mode (Clean)",
};
static _STYLE_CLASSES = [
this._NIGHT_CLASS,
this._NIGHT_CLASS_STANDARD,
this._NIGHT_CLASS_ALT,
this._NIGHT_CLASS_CLEAN,
];
/* -------------------------------------------- */
static getSelStyle () {
const selStyle = e_({
tag: "select",
clazz: "form-control input-xs",
children: Object.entries(this._STYLE_TO_DISPLAY_NAME)
.map(([id, name]) => ee`<option value="${id}">${name}</option>`),
change: () => {
styleSwitcher._setActiveDayNight(selStyle.val());
StyleSwitcher.storage.setItem(StyleSwitcher._STORAGE_IS_MANUAL_MODE, true);
},
})
.val(styleSwitcher.currentStylesheet);
return selStyle;
}
/* -------------------------------------------- */
static getCbWide () {
const cbWide = e_({
tag: "input",
type: "checkbox",
change: () => {
styleSwitcher._setActiveWide(cbWide.checked);
},
});
return cbWide;
}
/* -------------------------------------------- */
constructor () {
this.currentStylesheet = StyleSwitcher._STYLE_DAY;
@@ -30,15 +101,16 @@ class StyleSwitcher {
_setActiveDayNight (style) {
this.currentStylesheet = style;
this.constructor._STYLE_CLASSES
.forEach(clazzName => document.documentElement.classList.remove(clazzName));
switch (style) {
case StyleSwitcher._STYLE_DAY: {
document.documentElement.classList.remove(StyleSwitcher._NIGHT_CLASS);
document.documentElement.classList.remove(StyleSwitcher._NIGHT_CLASS_ALT);
break;
}
case StyleSwitcher._STYLE_NIGHT: {
document.documentElement.classList.add(StyleSwitcher._NIGHT_CLASS);
document.documentElement.classList.remove(StyleSwitcher._NIGHT_CLASS_ALT);
document.documentElement.classList.add(StyleSwitcher._NIGHT_CLASS_STANDARD);
break;
}
case StyleSwitcher._STYLE_NIGHT_ALT: {
@@ -46,10 +118,13 @@ class StyleSwitcher {
document.documentElement.classList.add(StyleSwitcher._NIGHT_CLASS_ALT);
break;
}
case StyleSwitcher._STYLE_NIGHT_CLEAN: {
document.documentElement.classList.add(StyleSwitcher._NIGHT_CLASS);
document.documentElement.classList.add(StyleSwitcher._NIGHT_CLASS_CLEAN);
break;
}
}
StyleSwitcher._setButtonText("nightModeToggle", this.getDayNightButtonText(style));
StyleSwitcher.storage.setItem(StyleSwitcher._STORAGE_DAY_NIGHT, this.currentStylesheet);
this._fnsOnChange.forEach(fn => fn());
@@ -58,16 +133,9 @@ class StyleSwitcher {
getDayNightClassNames () {
switch (this.currentStylesheet) {
case StyleSwitcher._STYLE_DAY: return "";
case StyleSwitcher._STYLE_NIGHT: return StyleSwitcher._NIGHT_CLASS;
case StyleSwitcher._STYLE_NIGHT: return [StyleSwitcher._NIGHT_CLASS, StyleSwitcher._NIGHT_CLASS_STANDARD].join(" ");
case StyleSwitcher._STYLE_NIGHT_ALT: return [StyleSwitcher._NIGHT_CLASS, StyleSwitcher._NIGHT_CLASS_ALT].join(" ");
}
}
getDayNightButtonText () {
switch (this.currentStylesheet) {
case StyleSwitcher._STYLE_NIGHT_ALT: return "Day Mode";
case StyleSwitcher._STYLE_DAY: return "Night Mode";
case StyleSwitcher._STYLE_NIGHT: return "Night Mode (Alt)";
case StyleSwitcher._STYLE_NIGHT_CLEAN: return [StyleSwitcher._NIGHT_CLASS, StyleSwitcher._NIGHT_CLASS_CLEAN].join(" ");
}
}
@@ -77,9 +145,14 @@ class StyleSwitcher {
}
cycleDayNightMode (direction) {
const newStyle = direction === -1
? this.currentStylesheet === StyleSwitcher._STYLE_DAY ? StyleSwitcher._STYLE_NIGHT_ALT : this.currentStylesheet === StyleSwitcher._STYLE_NIGHT ? StyleSwitcher._STYLE_DAY : StyleSwitcher._STYLE_NIGHT
: this.currentStylesheet === StyleSwitcher._STYLE_DAY ? StyleSwitcher._STYLE_NIGHT : this.currentStylesheet === StyleSwitcher._STYLE_NIGHT ? StyleSwitcher._STYLE_NIGHT_ALT : StyleSwitcher._STYLE_DAY;
const ixCur = this.constructor._STYLES.indexOf(this.currentStylesheet);
const ixNxt = ixCur === 0
? this.constructor._STYLES.length - 1
: ixCur === this.constructor._STYLES.length - 1
? 0
: ixCur + direction;
const newStyle = this.constructor._STYLES[ixNxt];
this._setActiveDayNight(newStyle);
StyleSwitcher.storage.setItem(StyleSwitcher._STORAGE_IS_MANUAL_MODE, true);
}
@@ -143,15 +216,6 @@ class StyleSwitcher {
getActiveWide () { return document.getElementById(StyleSwitcher._WIDE_ID) != null; }
// endregion
}
StyleSwitcher._STORAGE_DAY_NIGHT = "StyleSwitcher_style";
StyleSwitcher._STORAGE_IS_MANUAL_MODE = "StyleSwitcher_style-is-manual-mode";
StyleSwitcher._STORAGE_WIDE = "StyleSwitcher_style-wide";
StyleSwitcher._STYLE_DAY = "day";
StyleSwitcher._STYLE_NIGHT = "night";
StyleSwitcher._STYLE_NIGHT_ALT = "nightAlt";
StyleSwitcher._NIGHT_CLASS = "ve-night-mode";
StyleSwitcher._NIGHT_CLASS_ALT = "ve-night-mode--alt";
StyleSwitcher._WIDE_ID = "style-switch__wide";
try {
StyleSwitcher.storage = window.localStorage;