mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-11-17 14:19:40 +08:00
Commenced shift from customThemeIndex to customThemeId
This commit is contained in:
Rizwan Mustafa
parent
874f5d0ffb
commit
93c17be227
9 changed files with 195 additions and 188 deletions
|
|
@ -16,7 +16,7 @@ const CONFIG_SCHEMA = joi.object({
|
|||
themeLight: joi.string(),
|
||||
themeDark: joi.string(),
|
||||
autoSwitchTheme: joi.boolean(),
|
||||
customThemeIndex: joi.number().min(-1).max(9),
|
||||
customThemeId: joi.string().min(0).max(24),
|
||||
customThemeColors: joi
|
||||
.array()
|
||||
.items(joi.string().pattern(/^#([\da-f]{3}){1,2}$/i))
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const defaultConfig: MonkeyTypes.Config = {
|
|||
themeLight: "serika",
|
||||
themeDark: "serika_dark",
|
||||
autoSwitchTheme: false,
|
||||
customThemeIndex: -1,
|
||||
customThemeId: "",
|
||||
customThemeColors: [
|
||||
"#323437",
|
||||
"#e2b714",
|
||||
|
|
@ -1319,21 +1319,21 @@ export function setAutoSwitchTheme(boolean: boolean, nosave?: boolean): void {
|
|||
ConfigEvent.dispatch("autoSwitchTheme", config.autoSwitchTheme);
|
||||
}
|
||||
|
||||
export function setCustomThemeIndex(index: number, nosave?: boolean): void {
|
||||
if (index !== -1) setRandomTheme("off");
|
||||
if (!isConfigValueValid(index, ["number"]))
|
||||
return invalid("custom theme", index);
|
||||
export function setCustomThemeId(customId: string, nosave?: boolean): void {
|
||||
if (customId !== "") setRandomTheme("off");
|
||||
if (!isConfigValueValid(customId, ["string"]))
|
||||
return invalid("custom theme", customId);
|
||||
|
||||
if (index !== undefined) config.customThemeIndex = index;
|
||||
if (customId !== undefined) config.customThemeId = customId;
|
||||
if (!nosave) saveToLocalStorage();
|
||||
ConfigEvent.dispatch("customThemeIndex", config.customThemeIndex);
|
||||
ConfigEvent.dispatch("customThemeId", config.customThemeId);
|
||||
}
|
||||
|
||||
export function setTheme(name: string, nosave?: boolean): void {
|
||||
if (!isConfigValueValid(name, ["string"])) return invalid("", name);
|
||||
|
||||
config.theme = name;
|
||||
setCustomThemeIndex(-1, true);
|
||||
setCustomThemeId("", true);
|
||||
if (!nosave) saveToLocalStorage();
|
||||
ConfigEvent.dispatch("theme", config.theme);
|
||||
}
|
||||
|
|
@ -1355,11 +1355,11 @@ export function setThemeDark(name: string, nosave?: boolean): void {
|
|||
ConfigEvent.dispatch("themeDark", config.themeDark, nosave);
|
||||
}
|
||||
|
||||
function setThemes(theme: string, customState: number, nosave?: boolean): void {
|
||||
function setThemes(theme: string, customState: string, nosave?: boolean): void {
|
||||
if (!isConfigValueValid(theme, ["string"])) return invalid("", theme);
|
||||
|
||||
config.theme = theme;
|
||||
config.customThemeIndex = customState;
|
||||
config.customThemeId = customState;
|
||||
if (!nosave) saveToLocalStorage();
|
||||
ConfigEvent.dispatch("setThemes", customState);
|
||||
}
|
||||
|
|
@ -1377,7 +1377,7 @@ export function setRandomTheme(
|
|||
val = "off";
|
||||
}
|
||||
|
||||
if (val !== "off") setCustomThemeIndex(-1);
|
||||
if (val !== "off") setCustomThemeId("");
|
||||
config.randomTheme = val;
|
||||
if (!nosave) saveToLocalStorage();
|
||||
ConfigEvent.dispatch("randomTheme", config.randomTheme);
|
||||
|
|
@ -1754,7 +1754,7 @@ export function apply(configObj: MonkeyTypes.Config | null | "null"): void {
|
|||
setThemeLight(configObj.themeLight, true);
|
||||
setThemeDark(configObj.themeDark, true);
|
||||
setAutoSwitchTheme(configObj.autoSwitchTheme, true);
|
||||
setThemes(configObj.theme, configObj.customThemeIndex, true);
|
||||
setThemes(configObj.theme, configObj.customThemeId, true);
|
||||
// setTheme(configObj.theme, true);
|
||||
// setCustomTheme(configObj.customTheme, true, true);
|
||||
setCustomLayoutfluid(configObj.customLayoutfluid, true);
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ export async function getDataAndInit() {
|
|||
}
|
||||
Loader.hide();
|
||||
}
|
||||
ThemeController.set(Config.customThemeIndex);
|
||||
ThemeController.set(Config.customThemeId);
|
||||
} catch (e) {
|
||||
AccountButton.loading(false);
|
||||
if (e?.response?.status === 429) {
|
||||
|
|
@ -304,7 +304,7 @@ const authListener = firebase.auth().onAuthStateChanged(async function (user) {
|
|||
}
|
||||
|
||||
let themeColors = Misc.findGetParameter("customTheme");
|
||||
const oldCustomThemeIndex = Config.customThemeIndex;
|
||||
const oldCustomThemeIndex = Config.customThemeId;
|
||||
if (themeColors !== null) {
|
||||
try {
|
||||
themeColors = themeColors.split(",");
|
||||
|
|
@ -331,7 +331,7 @@ const authListener = firebase.auth().onAuthStateChanged(async function (user) {
|
|||
_id: response.data.theme._id,
|
||||
});
|
||||
|
||||
UpdateConfig.setCustomThemeIndex(customThemesLength);
|
||||
UpdateConfig.setCustomThemeId(customThemesLength);
|
||||
Notifications.add(
|
||||
"Custom theme: 'custom' sucessfully created and applied.",
|
||||
1
|
||||
|
|
@ -346,7 +346,7 @@ const authListener = firebase.auth().onAuthStateChanged(async function (user) {
|
|||
"Something went wrong. Reverting to previous state.",
|
||||
0
|
||||
);
|
||||
UpdateConfig.setCustomThemeIndex(oldCustomThemeIndex);
|
||||
UpdateConfig.setCustomThemeId(oldCustomThemeIndex);
|
||||
}
|
||||
}
|
||||
if (/challenge_.+/g.test(window.location.pathname)) {
|
||||
|
|
|
|||
|
|
@ -85,118 +85,120 @@ const loadStyle = async function (name: string): Promise<void> {
|
|||
});
|
||||
};
|
||||
|
||||
export async function apply(
|
||||
themeNameOrIndex: string | number,
|
||||
export async function apply_custom(
|
||||
themeId: string,
|
||||
isPreview = false
|
||||
): Promise<void> {
|
||||
clearCustomTheme();
|
||||
|
||||
if (themeNameOrIndex === -1) themeNameOrIndex = Config.theme;
|
||||
|
||||
if (typeof themeNameOrIndex === "number") {
|
||||
// The user has not yet loaded
|
||||
if (DB.getSnapshot() === undefined) {
|
||||
return;
|
||||
}
|
||||
// We have been given the index of the custom theme
|
||||
const customThemes = DB.getSnapshot().customThemes;
|
||||
const customTheme = customThemes ? customThemes[themeNameOrIndex] : null;
|
||||
if (customTheme === undefined || customTheme === null) {
|
||||
Notifications.add(
|
||||
`No custom theme at index: ${themeNameOrIndex}\nReverting to presets`,
|
||||
0
|
||||
);
|
||||
UpdateConfig.setCustomThemeIndex(-1);
|
||||
return;
|
||||
}
|
||||
const themeName = customTheme.name;
|
||||
Misc.swapElements(
|
||||
$('.pageSettings [tabContent="preset"]'),
|
||||
$('.pageSettings [tabContent="custom"]'),
|
||||
250
|
||||
);
|
||||
|
||||
ThemeColors.reset();
|
||||
await loadStyle("serika_dark");
|
||||
colorVars.forEach((e, index) => {
|
||||
document.documentElement.style.setProperty(e, customTheme.colors[index]);
|
||||
});
|
||||
ThemeColors.update();
|
||||
|
||||
try {
|
||||
firebase.analytics().logEvent("changedCustomTheme", {
|
||||
theme: themeName,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("Analytics unavailable");
|
||||
}
|
||||
|
||||
if (!isPreview) {
|
||||
UpdateConfig.setCustomThemeColors([...customTheme.colors]);
|
||||
ThemeColors.getAll().then((colors) => {
|
||||
$(".current-theme .text").text(
|
||||
"custom: " + themeName.replace(/_/g, " ")
|
||||
);
|
||||
$(".keymap-key").attr("style", "");
|
||||
ChartController.updateAllChartColors();
|
||||
updateFavicon(128, 32);
|
||||
$("#metaThemeColor").attr("content", colors.bg);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const themeName = themeNameOrIndex;
|
||||
Misc.swapElements(
|
||||
$('.pageSettings [tabContent="custom"]'),
|
||||
$('.pageSettings [tabContent="preset"]'),
|
||||
250
|
||||
);
|
||||
ThemeColors.reset();
|
||||
|
||||
loadStyle(themeName).then(() => {
|
||||
ThemeColors.update();
|
||||
try {
|
||||
firebase.analytics().logEvent("changedTheme", {
|
||||
theme: themeNameOrIndex,
|
||||
});
|
||||
} catch (e) {
|
||||
console.log("Analytics unavailable");
|
||||
}
|
||||
if (!isPreview) {
|
||||
ThemeColors.getAll().then((colors) => {
|
||||
$(".current-theme .text").text(themeName.replace(/_/g, " "));
|
||||
$(".keymap-key").attr("style", "");
|
||||
ChartController.updateAllChartColors();
|
||||
updateFavicon(128, 32);
|
||||
$("#metaThemeColor").attr("content", colors.bg);
|
||||
});
|
||||
}
|
||||
});
|
||||
if (!DB.getSnapshot()) return; // The user has not yet loaded or is not signed in
|
||||
if (themeId.trim() === "") {
|
||||
// Rizwan TODO: Remove this if statement later
|
||||
Notifications.add("apply_custom got an empty value. This shouldn't happen");
|
||||
}
|
||||
|
||||
const customThemes = DB.getSnapshot().customThemes;
|
||||
const customTheme = customThemes
|
||||
? customThemes.filter((t) => t._id === themeId)[0]
|
||||
: undefined;
|
||||
if (!customTheme) {
|
||||
Notifications.add(`No custom theme with id: ${themeId}`, 0);
|
||||
if (customThemes && customThemes.length > 1)
|
||||
UpdateConfig.setCustomThemeId(customThemes[0]._id);
|
||||
else UpdateConfig.setCustomThemeId("");
|
||||
return;
|
||||
}
|
||||
const themeName = customTheme.name;
|
||||
Misc.swapElements(
|
||||
$('.pageSettings [tabContent="preset"]'),
|
||||
$('.pageSettings [tabContent="custom"]'),
|
||||
250
|
||||
);
|
||||
|
||||
ThemeColors.reset();
|
||||
await loadStyle("serika_dark");
|
||||
colorVars.forEach((e, index) => {
|
||||
document.documentElement.style.setProperty(e, customTheme.colors[index]);
|
||||
});
|
||||
ThemeColors.update();
|
||||
|
||||
try {
|
||||
firebase.analytics().logEvent("changedCustomTheme", { theme: themeName });
|
||||
} catch (e) {
|
||||
console.log("Analytics unavailable");
|
||||
}
|
||||
if (isPreview) return;
|
||||
|
||||
UpdateConfig.setCustomThemeColors([...customTheme.colors]);
|
||||
const colors = await ThemeColors.getAll();
|
||||
$(".current-theme .text").text("custom: " + themeName.replace(/_/g, " "));
|
||||
$(".keymap-key").attr("style", "");
|
||||
ChartController.updateAllChartColors();
|
||||
updateFavicon(128, 32);
|
||||
$("#metaThemeColor").attr("content", colors.bg);
|
||||
}
|
||||
|
||||
export async function apply_preset(
|
||||
themeName: string,
|
||||
isPreview = false
|
||||
): Promise<void> {
|
||||
clearCustomTheme();
|
||||
if (themeName.trim() === "") themeName = Config.theme;
|
||||
Misc.swapElements(
|
||||
$('.pageSettings [tabContent="custom"]'),
|
||||
$('.pageSettings [tabContent="preset"]'),
|
||||
250
|
||||
);
|
||||
ThemeColors.reset();
|
||||
await loadStyle(themeName);
|
||||
ThemeColors.update();
|
||||
|
||||
try {
|
||||
firebase.analytics().logEvent("changedTheme", { theme: themeName });
|
||||
} catch (e) {
|
||||
console.log("Analytics unavailable");
|
||||
}
|
||||
|
||||
if (isPreview) return;
|
||||
|
||||
const colors = await ThemeColors.getAll();
|
||||
$(".current-theme .text").text(themeName.replace(/_/g, " "));
|
||||
$(".keymap-key").attr("style", "");
|
||||
ChartController.updateAllChartColors();
|
||||
updateFavicon(128, 32);
|
||||
$("#metaThemeColor").attr("content", colors.bg);
|
||||
}
|
||||
|
||||
export const apply = async (
|
||||
custom: boolean,
|
||||
themeIdentifier: string,
|
||||
isPreview = false
|
||||
): Promise<void> => {
|
||||
if (custom === true) apply_custom(themeIdentifier, isPreview);
|
||||
else apply_preset(themeIdentifier, isPreview);
|
||||
};
|
||||
|
||||
export function preview(
|
||||
themeNameOrIndex: string | number,
|
||||
custom: boolean,
|
||||
themeIdentifier: string,
|
||||
randomTheme = false
|
||||
): void {
|
||||
apply(custom, themeIdentifier, !randomTheme);
|
||||
isPreviewingTheme = true;
|
||||
apply(themeNameOrIndex, true && !randomTheme);
|
||||
}
|
||||
|
||||
export function set(themeNameOrIndex: string | number): void {
|
||||
apply(themeNameOrIndex);
|
||||
}
|
||||
export const set = async (
|
||||
custom: boolean,
|
||||
themeIdentifier: string
|
||||
): Promise<void> => apply(custom, themeIdentifier);
|
||||
|
||||
export function clearPreview(): void {
|
||||
if (isPreviewingTheme) {
|
||||
isPreviewingTheme = false;
|
||||
randomTheme = null;
|
||||
if (Config.customThemeIndex !== -1) {
|
||||
apply(Config.customThemeIndex);
|
||||
} else {
|
||||
apply(Config.theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
export const clearPreview = (): void => {
|
||||
if (!isPreviewingTheme) return;
|
||||
|
||||
isPreviewingTheme = false;
|
||||
randomTheme = null;
|
||||
if (Config.customThemeId !== "") apply_custom(Config.customThemeId);
|
||||
else apply_preset(Config.theme);
|
||||
};
|
||||
|
||||
export function randomizeTheme(): void {
|
||||
let randomList;
|
||||
|
|
@ -217,14 +219,14 @@ export function randomizeTheme(): void {
|
|||
});
|
||||
}
|
||||
|
||||
const previousTheme = randomTheme;
|
||||
// const previousTheme = randomTheme;
|
||||
randomTheme = randomList[Math.floor(Math.random() * randomList.length)];
|
||||
|
||||
preview(randomTheme, true);
|
||||
preview(false, randomTheme, true);
|
||||
|
||||
if (previousTheme != randomTheme) {
|
||||
// Notifications.add(randomTheme.replace(/_/g, " "), 0);
|
||||
}
|
||||
// if (previousTheme != randomTheme) {
|
||||
// // Notifications.add(randomTheme.replace(/_/g, " "), 0);
|
||||
// }
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -267,38 +269,38 @@ export function applyCustomBackground(): void {
|
|||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
?.addEventListener("change", (event) => {
|
||||
if (!Config.autoSwitchTheme || Config.customThemeIndex !== -1) return;
|
||||
if (!Config.autoSwitchTheme || Config.customThemeId !== "") return;
|
||||
if (event.matches) {
|
||||
set(Config.themeDark);
|
||||
set(false, Config.themeDark);
|
||||
} else {
|
||||
set(Config.themeLight);
|
||||
set(false, Config.themeLight);
|
||||
}
|
||||
});
|
||||
|
||||
ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
|
||||
if (eventKey === "customThemeIndex") {
|
||||
set(eventValue);
|
||||
if (eventKey === "customThemeId") {
|
||||
set(true, eventValue);
|
||||
}
|
||||
if (eventKey === "theme") {
|
||||
clearPreview();
|
||||
set(eventValue);
|
||||
set(false, eventValue);
|
||||
}
|
||||
if (eventKey === "setThemes") {
|
||||
clearPreview();
|
||||
if (eventValue) {
|
||||
set(eventValue);
|
||||
set(true, eventValue);
|
||||
} else {
|
||||
if (Config.autoSwitchTheme) {
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
) {
|
||||
set(Config.themeDark);
|
||||
set(false, Config.themeDark);
|
||||
} else {
|
||||
set(Config.themeLight);
|
||||
set(false, Config.themeLight);
|
||||
}
|
||||
} else {
|
||||
set(Config.theme);
|
||||
set(false, Config.theme);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -311,12 +313,12 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
|
|||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
) {
|
||||
set(Config.themeDark);
|
||||
set(false, Config.themeDark);
|
||||
} else {
|
||||
set(Config.themeLight);
|
||||
set(false, Config.themeLight);
|
||||
}
|
||||
} else {
|
||||
set(Config.theme);
|
||||
set(false, Config.theme);
|
||||
}
|
||||
}
|
||||
if (
|
||||
|
|
@ -328,7 +330,7 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
|
|||
) &&
|
||||
!nosave
|
||||
) {
|
||||
set(Config.themeLight);
|
||||
set(false, Config.themeLight);
|
||||
}
|
||||
if (
|
||||
eventKey === "themeDark" &&
|
||||
|
|
@ -337,6 +339,6 @@ ConfigEvent.subscribe((eventKey, eventValue, nosave) => {
|
|||
window.matchMedia("(prefers-color-scheme: dark)").matches &&
|
||||
!nosave
|
||||
) {
|
||||
set(Config.themeDark);
|
||||
set(false, Config.themeDark);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1217,7 +1217,7 @@ export const commandsEnableAds: MonkeyTypes.CommandsGroup = {
|
|||
|
||||
const commandsCustomTheme: MonkeyTypes.CommandsGroup = {
|
||||
title: "Custom theme...",
|
||||
configKey: "customThemeIndex",
|
||||
configKey: "customThemeId",
|
||||
list: [],
|
||||
};
|
||||
|
||||
|
|
@ -1228,9 +1228,9 @@ export function updateCustomThemeCommands(): void {
|
|||
commandsCustomTheme.list.push({
|
||||
id: "setCustomThemeOff",
|
||||
display: "off",
|
||||
configValue: -1,
|
||||
configValue: "",
|
||||
exec: (): void => {
|
||||
UpdateConfig.setCustomThemeIndex(-1);
|
||||
UpdateConfig.setCustomThemeId("");
|
||||
},
|
||||
});
|
||||
if (customThemes !== undefined && customThemes.length > 0) {
|
||||
|
|
@ -1241,10 +1241,10 @@ export function updateCustomThemeCommands(): void {
|
|||
configValue: index,
|
||||
hover: (): void => {
|
||||
// previewTheme(theme.name);
|
||||
ThemeController.preview(index);
|
||||
ThemeController.preview(true, theme._id);
|
||||
},
|
||||
exec: (): void => {
|
||||
UpdateConfig.setCustomThemeIndex(index);
|
||||
UpdateConfig.setCustomThemeId(theme._id);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
|
@ -2373,7 +2373,7 @@ Misc.getThemesList().then((themes) => {
|
|||
configValue: theme.name,
|
||||
hover: (): void => {
|
||||
// previewTheme(theme.name);
|
||||
ThemeController.preview(theme.name);
|
||||
ThemeController.preview(false, theme.name);
|
||||
},
|
||||
exec: (): void => {
|
||||
UpdateConfig.setTheme(theme.name);
|
||||
|
|
@ -2412,7 +2412,7 @@ export function updateThemeCommands(): void {
|
|||
display: theme.replace(/_/g, " "),
|
||||
hover: (): void => {
|
||||
// previewTheme(theme);
|
||||
ThemeController.preview(theme);
|
||||
ThemeController.preview(false, theme);
|
||||
},
|
||||
exec: (): void => {
|
||||
UpdateConfig.setTheme(theme);
|
||||
|
|
@ -2427,7 +2427,7 @@ export function updateThemeCommands(): void {
|
|||
display: theme.name.replace(/_/g, " "),
|
||||
hover: (): void => {
|
||||
// previewTheme(theme.name);
|
||||
ThemeController.preview(theme.name);
|
||||
ThemeController.preview(false, theme.name);
|
||||
},
|
||||
exec: (): void => {
|
||||
UpdateConfig.setTheme(theme.name);
|
||||
|
|
|
|||
|
|
@ -675,13 +675,15 @@ $(document).on("click", "#bottom .leftright .right .current-theme", (e) => {
|
|||
if (e.shiftKey) {
|
||||
if (DB.getSnapshot().customThemes.length < 1) {
|
||||
Notifications.add("No custom themes!", 0);
|
||||
UpdateConfig.setCustomThemeIndex(-1);
|
||||
UpdateConfig.setCustomThemeId("");
|
||||
return;
|
||||
}
|
||||
|
||||
// Turn on the first custom theme
|
||||
if (Config.customThemeIndex === -1) UpdateConfig.setCustomThemeIndex(0);
|
||||
else UpdateConfig.setCustomThemeIndex(-1);
|
||||
const firstCustomThemeId = DB.getSnapshot().customThemes[0]._id;
|
||||
if (Config.customThemeId === "")
|
||||
UpdateConfig.setCustomThemeId(firstCustomThemeId);
|
||||
else UpdateConfig.setCustomThemeId("");
|
||||
} else {
|
||||
CommandlineLists.pushCurrent(CommandlineLists.themeCommands);
|
||||
show();
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ import * as DB from "../db";
|
|||
import Ape from "../ape";
|
||||
|
||||
export function updateActiveButton(): void {
|
||||
if (Config.customThemeIndex !== -1) {
|
||||
const activeThemeIndex = Config.customThemeIndex;
|
||||
if (Config.customThemeId !== "") {
|
||||
const activeThemeId = Config.customThemeId;
|
||||
$(`.pageSettings .section.themes .customTheme`).removeClass("active");
|
||||
$(
|
||||
`.pageSettings .section.themes .customTheme[customThemeIndex=${activeThemeIndex}]`
|
||||
`.pageSettings .section.themes .customTheme[customThemeId=${activeThemeId}]`
|
||||
).addClass("active");
|
||||
} else {
|
||||
let activeThemeName = Config.theme;
|
||||
|
|
@ -102,7 +102,7 @@ function updateColors(
|
|||
}
|
||||
|
||||
export async function refreshButtons(): Promise<void> {
|
||||
if (Config.customThemeIndex !== -1) {
|
||||
if (Config.customThemeId !== "") {
|
||||
// Update custom theme buttons
|
||||
const customThemesEl = $(
|
||||
".pageSettings .section.themes .allCustomThemes.buttons"
|
||||
|
|
@ -114,14 +114,16 @@ export async function refreshButtons(): Promise<void> {
|
|||
return;
|
||||
}
|
||||
|
||||
customThemes.forEach((customTheme, customThemeIndex) => {
|
||||
customThemes.forEach((customTheme) => {
|
||||
const activeTheme =
|
||||
Config.customThemeIndex === customThemeIndex ? "active" : "";
|
||||
Config.customThemeId === customTheme._id ? "active" : "";
|
||||
const bgColor = customTheme.colors[0];
|
||||
const mainColor = customTheme.colors[1];
|
||||
|
||||
customThemesEl.append(
|
||||
`<div class="customTheme button ${activeTheme}" customThemeIndex='${customThemeIndex}'
|
||||
`<div class="customTheme button ${activeTheme}" customThemeId='${
|
||||
customTheme._id
|
||||
}'
|
||||
style="color:${mainColor};background:${bgColor}">
|
||||
<div class="activeIndicator"><i class="fas fa-circle"></i></div>
|
||||
<div class="text">${customTheme.name.replace(/_/g, " ")}</div>
|
||||
|
|
@ -183,9 +185,10 @@ export async function refreshButtons(): Promise<void> {
|
|||
}
|
||||
|
||||
export function setCustomInputs(noThemeUpdate = false): void {
|
||||
const customTheme = (DB.getSnapshot().customThemes ?? [])[
|
||||
Config.customThemeIndex
|
||||
];
|
||||
if (!DB.getSnapshot() || !DB.getSnapshot().customThemes) return;
|
||||
const customTheme = DB.getSnapshot().customThemes.filter(
|
||||
(t) => t._id === Config.customThemeId
|
||||
)[0];
|
||||
$(".pageSettings .section.themes .tabContainer .customThemeEdit #name").val(
|
||||
customTheme !== undefined ? customTheme.name : "custom"
|
||||
);
|
||||
|
|
@ -225,7 +228,7 @@ export function updateActiveTab(forced = false): void {
|
|||
".pageSettings .section.themes .tabs .button[tab='custom']"
|
||||
);
|
||||
|
||||
if (Config.customThemeIndex === -1) {
|
||||
if (Config.customThemeId === "") {
|
||||
$customTab.removeClass("active");
|
||||
if (!$presetTab.hasClass("active") || forced) {
|
||||
$presetTab.addClass("active");
|
||||
|
|
@ -249,7 +252,7 @@ $(".pageSettings .section.themes .tabs .button").on("click", async (e) => {
|
|||
// $target.addClass("active"); Don't uncomment it. updateActiveTab() will add the active class itself
|
||||
setCustomInputs();
|
||||
if ($target.attr("tab") == "preset") {
|
||||
UpdateConfig.setCustomThemeIndex(-1);
|
||||
UpdateConfig.setCustomThemeId("");
|
||||
} else {
|
||||
const customThemes = DB.getSnapshot().customThemes;
|
||||
if (customThemes.length < 1) {
|
||||
|
|
@ -264,12 +267,12 @@ $(".pageSettings .section.themes .tabs .button").on("click", async (e) => {
|
|||
DB.getSnapshot().customThemes = [
|
||||
{ ...newCustomTheme, _id: response.data.theme._id },
|
||||
];
|
||||
UpdateConfig.setCustomThemeIndex(0);
|
||||
UpdateConfig.setCustomThemeId(response.data.theme._id);
|
||||
} else {
|
||||
Notifications.add("Could not create custom theme: custom", -1);
|
||||
}
|
||||
Loader.hide();
|
||||
} else UpdateConfig.setCustomThemeIndex(0);
|
||||
} else UpdateConfig.setCustomThemeId(customThemes[0]._id);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -305,19 +308,15 @@ $(document).on(
|
|||
(e) => {
|
||||
// Do not apply if user wanted to delete it
|
||||
if ($(e.target).hasClass("delButton")) return;
|
||||
const customThemeIndex = parseInt(
|
||||
$(e.currentTarget).attr("customThemeIndex") ?? ""
|
||||
);
|
||||
const customThemeId =
|
||||
$(e.currentTarget).attr("customThemeId") ?? ("" as string);
|
||||
const customThemes = DB.getSnapshot().customThemes ?? [];
|
||||
if (
|
||||
customThemeIndex !== undefined &&
|
||||
customThemes.length > customThemeIndex
|
||||
) {
|
||||
UpdateConfig.setCustomThemeIndex(customThemeIndex);
|
||||
if (customThemes.filter((t) => t._id === customThemeId)[0]) {
|
||||
UpdateConfig.setCustomThemeId(customThemeId);
|
||||
updateActiveButton();
|
||||
} else
|
||||
console.error(
|
||||
"Could not find the custom theme index attribute attached to the button clicked!"
|
||||
"Could not find the custom theme id attribute attached to the button clicked!"
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
@ -327,19 +326,19 @@ $(document).on(
|
|||
"click",
|
||||
".pageSettings .section.themes .customTheme .delButton",
|
||||
async (e) => {
|
||||
const customThemeIndex = parseInt(
|
||||
$(e.currentTarget)
|
||||
.parents(".customTheme.button")
|
||||
.attr("customThemeIndex") ?? "-1"
|
||||
);
|
||||
if (customThemeIndex !== -1) {
|
||||
const parentElement = $(e.currentTarget).parent(".customTheme.button");
|
||||
// const customThemeId = $(e.currentTarget).parents(".customTheme.button").attr("customThemeId") ?? "";
|
||||
const customThemeId = parentElement.attr("customThemeId") ?? "";
|
||||
const themeActive = parentElement.hasClass("active");
|
||||
|
||||
if (customThemeId !== "") {
|
||||
const customThemes = DB.getSnapshot().customThemes;
|
||||
if (customThemes.length < 1) {
|
||||
Notifications.add("No custom themes!", -1);
|
||||
return;
|
||||
}
|
||||
const customTheme = customThemes[customThemeIndex];
|
||||
if (customTheme === undefined) {
|
||||
const customTheme = customThemes.find((t) => t._id === customThemeId);
|
||||
if (!customTheme) {
|
||||
Notifications.add("Custom theme does not exist!");
|
||||
return;
|
||||
}
|
||||
|
|
@ -347,14 +346,16 @@ $(document).on(
|
|||
const response = await Ape.users.deleteCustomThemes(customTheme._id);
|
||||
|
||||
if (response.status === 200) {
|
||||
const filteredThemes = customThemes.filter((_customTheme, index) => {
|
||||
return index !== customThemeIndex;
|
||||
});
|
||||
const filteredThemes = customThemes.filter(
|
||||
(customTheme) => customTheme._id !== customThemeId
|
||||
);
|
||||
DB.getSnapshot().customThemes = filteredThemes;
|
||||
if (filteredThemes.length < 1) {
|
||||
UpdateConfig.setCustomThemeIndex(filteredThemes.length < 1 ? -1 : 0);
|
||||
UpdateConfig.setCustomThemeId("");
|
||||
} else {
|
||||
UpdateConfig.setCustomThemeIndex(0);
|
||||
if (themeActive)
|
||||
// If active theme was deleted set the first custom theme
|
||||
UpdateConfig.setCustomThemeId(filteredThemes[0]._id);
|
||||
updateActiveTab(true);
|
||||
}
|
||||
Notifications.add("Deleted custom theme sucessfully", 1);
|
||||
|
|
@ -512,7 +513,9 @@ $(".pageSettings .saveCustomThemeButton").on("click", async () => {
|
|||
return;
|
||||
}
|
||||
|
||||
const customTheme = snapshot.customThemes[Config.customThemeIndex];
|
||||
const customTheme = snapshot.customThemes.find(
|
||||
(t) => t._id === Config.customThemeId
|
||||
);
|
||||
if (customTheme === undefined) {
|
||||
Notifications.add("Custom theme does not exist!", -1);
|
||||
return;
|
||||
|
|
@ -524,7 +527,7 @@ $(".pageSettings .saveCustomThemeButton").on("click", async () => {
|
|||
Loader.show();
|
||||
const response = await Ape.users.editCustomThemes(customTheme._id, newTheme);
|
||||
if (response.status === 200) {
|
||||
snapshot.customThemes[Config.customThemeIndex] = {
|
||||
snapshot.customThemes[snapshot.customThemes.indexOf(customTheme)] = {
|
||||
...newTheme,
|
||||
_id: customTheme._id,
|
||||
};
|
||||
|
|
@ -532,6 +535,6 @@ $(".pageSettings .saveCustomThemeButton").on("click", async () => {
|
|||
} else Notifications.add(response.message, -1);
|
||||
Loader.hide();
|
||||
|
||||
ThemeController.set(Config.customThemeIndex);
|
||||
ThemeController.set(true, Config.customThemeId);
|
||||
updateActiveTab(true);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -397,7 +397,7 @@ export function restart(
|
|||
if (
|
||||
Config.randomTheme !== "off" &&
|
||||
!PageTransition.get() &&
|
||||
Config.customThemeIndex === -1
|
||||
Config.customThemeId === -1
|
||||
) {
|
||||
ThemeController.randomizeTheme();
|
||||
}
|
||||
|
|
|
|||
2
frontend/src/scripts/types/types.d.ts
vendored
2
frontend/src/scripts/types/types.d.ts
vendored
|
|
@ -238,7 +238,7 @@ declare namespace MonkeyTypes {
|
|||
themeLight: string;
|
||||
themeDark: string;
|
||||
autoSwitchTheme: boolean;
|
||||
customThemeIndex: number;
|
||||
customThemeId: string;
|
||||
customThemeColors: string[];
|
||||
favThemes: string[];
|
||||
showKeyTips: boolean;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue