mirror of
https://github.com/Kornstalx/5etools-mirror-2.github.io.git
synced 2025-10-28 20:45:35 -05:00
v1.208.0
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user