monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-26 15:54:35 +08:00
Code Issues Projects Releases Packages Wiki Activity

refactor: settings groups (#5049)

Browse source 
* update function name

* update function name

* using data properties instead of classes

* using data property

* regex goes brrrrrrr

* button not .button

* fix sliders loading incorrectly and numbers missing

* regex missed this one

* and this one

* using button instead of .button

* use button element

* regex goes brrr once morrrrrr

* remove testing code
This commit is contained in:
Jack 2024-02-13 18:22:58 +01:00 committed by GitHub
parent 85fd0628cc
commit 381bdb826d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 664 additions and 1858 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/styles/settings.scss
View file

@ -64,7 +64,7 @@
}
}
&.autoSwitchThemeInputs {
&[data-config-name="autoSwitchThemeInputs"] {
grid-template-areas: unset;
grid-template-columns: 1fr 3fr 1fr 3fr;
gap: 2rem;
@ -82,7 +82,7 @@
}
}
&.customBackgroundFilter {
&[data-config-name="customBackgroundFilter"] {
.groups {
grid-area: buttons;
display: grid;

6
frontend/src/styles/z_media-queries.scss
View file

@ -309,7 +309,7 @@
.section {
grid-template-columns: 1.5fr 1fr;
}
.section.autoSwitchThemeInputs {
.section[data-config-name="autoSwitchThemeInputs"] {
grid-template-columns: 1fr 3fr;
}
}
@ -406,7 +406,7 @@
}
}
.pageSettings .section.customBackgroundFilter {
.pageSettings .section[data-config-name="customBackgroundFilter"] {
.groups {
grid-template-columns: 1fr;
}
@ -838,7 +838,7 @@
}
.pageSettings {
.section.customBackgroundFilter .groups .group {
.section[data-config-name="customBackgroundFilter"] .groups .group {
grid-template-columns: auto 1fr;
.title {
grid-column: 1/3;

2
frontend/src/ts/controllers/input-controller.ts
View file

@ -193,7 +193,7 @@ function handleSpace(): void {
f.functions.handleSpace();
}
}
Settings.groups["layout"]?.updateInput();
Settings.groups["layout"]?.updateUI();
dontInsertSpace = true;

121
frontend/src/ts/elements/custom-background-filter.ts
View file

@ -48,77 +48,106 @@ export function apply(): void {
}
function syncSliders(): void {
$(".section.customBackgroundFilter .blur input").val(filters.blur.value);
$(".section.customBackgroundFilter .brightness input").val(
filters.brightness.value
$(".section[data-config-name='customBackgroundFilter'] .blur input").val(
filters.blur.value
);
$(".section.customBackgroundFilter .saturate input").val(
$(
".section[data-config-name='customBackgroundFilter'] .brightness input"
).val(filters.brightness.value);
$(".section[data-config-name='customBackgroundFilter'] .saturate input").val(
filters.saturate.value
);
$(".section.customBackgroundFilter .opacity input").val(
$(".section[data-config-name='customBackgroundFilter'] .opacity input").val(
filters.opacity.value
);
}
function updateNumbers(): void {
$(".section.customBackgroundFilter .blur .value").html(
$(".section[data-config-name='customBackgroundFilter'] .blur .value").html(
filters.blur.value.toFixed(1)
);
$(".section.customBackgroundFilter .brightness .value").html(
filters.brightness.value.toFixed(1)
);
$(".section.customBackgroundFilter .saturate .value").html(
filters.saturate.value.toFixed(1)
);
$(".section.customBackgroundFilter .opacity .value").html(
$(
".section[data-config-name='customBackgroundFilter'] .brightness .value"
).html(filters.brightness.value.toFixed(1));
$(
".section[data-config-name='customBackgroundFilter'] .saturate .value"
).html(filters.saturate.value.toFixed(1));
$(".section[data-config-name='customBackgroundFilter'] .opacity .value").html(
filters.opacity.value.toFixed(1)
);
}
export function updateUI(): void {
syncSliders();
updateNumbers();
}
function loadConfig(config: SharedTypes.Config.CustomBackgroundFilter): void {
filters.blur.value = config[0];
filters.brightness.value = config[1];
filters.saturate.value = config[2];
filters.opacity.value = config[3];
updateNumbers();
syncSliders();
updateUI();
}
$(".section.customBackgroundFilter .blur input").on("input", () => {
filters.blur.value = parseFloat(
$(".section.customBackgroundFilter .blur input").val() as string
);
updateNumbers();
apply();
});
$(".section[data-config-name='customBackgroundFilter'] .blur input").on(
"input",
() => {
filters.blur.value = parseFloat(
$(
".section[data-config-name='customBackgroundFilter'] .blur input"
).val() as string
);
updateNumbers();
apply();
}
);
$(".section.customBackgroundFilter .brightness input").on("input", () => {
filters.brightness.value = parseFloat(
$(".section.customBackgroundFilter .brightness input").val() as string
);
updateNumbers();
apply();
});
$(".section[data-config-name='customBackgroundFilter'] .brightness input").on(
"input",
() => {
filters.brightness.value = parseFloat(
$(
".section[data-config-name='customBackgroundFilter'] .brightness input"
).val() as string
);
updateNumbers();
apply();
}
);
$(".section.customBackgroundFilter .saturate input").on("input", () => {
filters.saturate.value = parseFloat(
$(".section.customBackgroundFilter .saturate input").val() as string
);
updateNumbers();
apply();
});
$(".section[data-config-name='customBackgroundFilter'] .saturate input").on(
"input",
() => {
filters.saturate.value = parseFloat(
$(
".section[data-config-name='customBackgroundFilter'] .saturate input"
).val() as string
);
updateNumbers();
apply();
}
);
$(".section.customBackgroundFilter .opacity input").on("input", () => {
filters.opacity.value = parseFloat(
$(".section.customBackgroundFilter .opacity input").val() as string
);
updateNumbers();
apply();
});
$(".section[data-config-name='customBackgroundFilter'] .opacity input").on(
"input",
() => {
filters.opacity.value = parseFloat(
$(
".section[data-config-name='customBackgroundFilter'] .opacity input"
).val() as string
);
updateNumbers();
apply();
}
);
$(".section.customBackgroundFilter input").on("input", () => {
void debouncedSave();
});
$(".section[data-config-name='customBackgroundFilter'] input").on(
"input",
() => {
void debouncedSave();
}
);
const debouncedSave = debounce(2000, async () => {
const arr = Object.keys(filters).map(

422
frontend/src/ts/pages/settings.ts
View file

@ -20,6 +20,7 @@ import { areFunboxesCompatible } from "../test/funbox/funbox-validation";
import { get as getTypingSpeedUnit } from "../utils/typing-speed-units";
import * as Skeleton from "../popups/skeleton";
import * as CustomBackgroundFilter from "../elements/custom-background-filter";
type SettingsGroups<T extends SharedTypes.ConfigValue> = Record<
string,
@ -50,7 +51,7 @@ async function initGroups(): Promise<void> {
UpdateConfig.setShowLiveWpm,
"button",
() => {
groups["keymapMode"]?.updateInput();
groups["keymapMode"]?.updateUI();
}
) as SettingsGroup<SharedTypes.ConfigValue>;
groups["showLiveAcc"] = new SettingsGroup(
@ -78,19 +79,35 @@ async function initGroups(): Promise<void> {
UpdateConfig.setKeymapMode,
"button",
() => {
groups["showLiveWpm"]?.updateInput();
groups["showLiveWpm"]?.updateUI();
},
() => {
if (Config.keymapMode === "off") {
$(".pageSettings .section.keymapStyle").addClass("hidden");
$(".pageSettings .section.keymapLayout").addClass("hidden");
$(".pageSettings .section.keymapLegendStyle").addClass("hidden");
$(".pageSettings .section.keymapShowTopRow").addClass("hidden");
$(".pageSettings .section[data-config-name='keymapStyle']").addClass(
"hidden"
);
$(".pageSettings .section[data-config-name='keymapLayout']").addClass(
"hidden"
);
$(
".pageSettings .section[data-config-name='keymapLegendStyle']"
).addClass("hidden");
$(
".pageSettings .section[data-config-name='keymapShowTopRow']"
).addClass("hidden");
} else {
$(".pageSettings .section.keymapStyle").removeClass("hidden");
$(".pageSettings .section.keymapLayout").removeClass("hidden");
$(".pageSettings .section.keymapLegendStyle").removeClass("hidden");
$(".pageSettings .section.keymapShowTopRow").removeClass("hidden");
$(".pageSettings .section[data-config-name='keymapStyle']").removeClass(
"hidden"
);
$(
".pageSettings .section[data-config-name='keymapLayout']"
).removeClass("hidden");
$(
".pageSettings .section[data-config-name='keymapLegendStyle']"
).removeClass("hidden");
$(
".pageSettings .section[data-config-name='keymapShowTopRow']"
).removeClass("hidden");
}
}
) as SettingsGroup<SharedTypes.ConfigValue>;
@ -132,7 +149,7 @@ async function initGroups(): Promise<void> {
UpdateConfig.setFreedomMode,
"button",
() => {
groups["confidenceMode"]?.updateInput();
groups["confidenceMode"]?.updateUI();
}
) as SettingsGroup<SharedTypes.ConfigValue>;
groups["strictSpace"] = new SettingsGroup(
@ -150,8 +167,8 @@ async function initGroups(): Promise<void> {
UpdateConfig.setConfidenceMode,
"button",
() => {
groups["freedomMode"]?.updateInput();
groups["stopOnError"]?.updateInput();
groups["freedomMode"]?.updateUI();
groups["stopOnError"]?.updateUI();
}
) as SettingsGroup<SharedTypes.ConfigValue>;
groups["indicateTypos"] = new SettingsGroup(
@ -239,7 +256,7 @@ async function initGroups(): Promise<void> {
UpdateConfig.setStopOnError,
"button",
() => {
groups["confidenceMode"]?.updateInput();
groups["confidenceMode"]?.updateUI();
}
) as SettingsGroup<SharedTypes.ConfigValue>;
groups["soundVolume"] = new SettingsGroup(
@ -365,10 +382,12 @@ async function initGroups(): Promise<void> {
undefined,
() => {
const customButton = $(
".pageSettings .section.fontFamily .buttons .custom"
".pageSettings .section[data-config-name='fontFamily'] .buttons .custom"
);
if (
$(".pageSettings .section.fontFamily .buttons .active").length === 0
$(
".pageSettings .section[data-config-name='fontFamily'] .buttons .active"
).length === 0
) {
customButton.addClass("active");
customButton.text(`Custom (${Config.fontFamily.replace(/_/g, " ")})`);
@ -404,8 +423,8 @@ function reset(): void {
$(".pageSettings .section.themes .allCustomThemes.buttons").empty();
$(".pageSettings .section.languageGroups .buttons").empty();
$(".pageSettings select").empty().select2("destroy");
$(".pageSettings .section.funbox .buttons").empty();
$(".pageSettings .section.fontFamily .buttons").empty();
$(".pageSettings .section[data-config-name='funbox'] .buttons").empty();
$(".pageSettings .section[data-config-name='fontFamily'] .buttons").empty();
}
let groupsInitialized = false;
@ -418,7 +437,7 @@ async function fillSettingsPage(): Promise<void> {
// Language Selection Combobox
const languageEl = document.querySelector(
".pageSettings .section.language select"
".pageSettings .section[data-config-name='language'] select"
) as HTMLSelectElement;
languageEl.innerHTML = "";
let languageElHTML = "";
@ -455,13 +474,13 @@ async function fillSettingsPage(): Promise<void> {
await Misc.sleep(0);
const layoutEl = document.querySelector(
".pageSettings .section.layout select"
".pageSettings .section[data-config-name='layout'] select"
) as HTMLSelectElement;
layoutEl.innerHTML = `<option value='default'>off</option>`;
let layoutElHTML = "";
const keymapEl = document.querySelector(
".pageSettings .section.keymapLayout select"
".pageSettings .section[data-config-name='keymapLayout'] select"
) as HTMLSelectElement;
keymapEl.innerHTML = `<option value='overrideSync'>emulator sync</option>`;
let keymapElHTML = "";
@ -501,13 +520,13 @@ async function fillSettingsPage(): Promise<void> {
await Misc.sleep(0);
const themeEl1 = document.querySelector(
".pageSettings .section.autoSwitchThemeInputs select.light"
".pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.light"
) as HTMLSelectElement;
themeEl1.innerHTML = "";
let themeEl1HTML = "";
const themeEl2 = document.querySelector(
".pageSettings .section.autoSwitchThemeInputs select.dark"
".pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.dark"
) as HTMLSelectElement;
themeEl2.innerHTML = "";
let themeEl2HTML = "";
@ -544,17 +563,21 @@ async function fillSettingsPage(): Promise<void> {
await Misc.sleep(0);
$(`.pageSettings .section.autoSwitchThemeInputs select.light`)
$(
`.pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.light`
)
.val(Config.themeLight)
.trigger("change.select2");
$(`.pageSettings .section.autoSwitchThemeInputs select.dark`)
$(
`.pageSettings .section[data-config-name='autoSwitchThemeInputs'] select.dark`
)
.val(Config.themeDark)
.trigger("change.select2");
const funboxEl = document.querySelector(
".pageSettings .section.funbox .buttons"
".pageSettings .section[data-config-name='funbox'] .buttons"
) as HTMLDivElement;
funboxEl.innerHTML = `<div class="funbox button" funbox='none'>none</div>`;
funboxEl.innerHTML = `<div class="funbox button" data-config-value='none'>none</div>`;
let funboxElHTML = "";
let funboxList;
@ -567,7 +590,7 @@ async function fillSettingsPage(): Promise<void> {
if (funboxList) {
for (const funbox of funboxList) {
if (funbox.name === "mirror") {
funboxElHTML += `<div class="funbox button" funbox='${
funboxElHTML += `<div class="funbox button" data-config-value='${
funbox.name
}' aria-label="${
funbox.info
@ -576,7 +599,7 @@ async function fillSettingsPage(): Promise<void> {
" "
)}</div>`;
} else if (funbox.name === "upside_down") {
funboxElHTML += `<div class="funbox button" funbox='${
funboxElHTML += `<div class="funbox button" data-config-value='${
funbox.name
}' aria-label="${
funbox.info
@ -585,7 +608,7 @@ async function fillSettingsPage(): Promise<void> {
" "
)}</div>`;
} else {
funboxElHTML += `<div class="funbox button" funbox='${
funboxElHTML += `<div class="funbox button" data-config-value='${
funbox.name
}' aria-label="${
funbox.info
@ -602,7 +625,7 @@ async function fillSettingsPage(): Promise<void> {
let isCustomFont = true;
const fontsEl = document.querySelector(
".pageSettings .section.fontFamily .buttons"
".pageSettings .section[data-config-name='fontFamily'] .buttons"
) as HTMLDivElement;
fontsEl.innerHTML = "";
@ -624,7 +647,7 @@ async function fillSettingsPage(): Promise<void> {
Config.fontFamily === font.name ? " active" : ""
}" style="font-family:${
font.display !== undefined ? font.display : font.name
}" fontFamily="${font.name.replace(/ /g, "_")}" tabindex="0"
}" data-config-value="${font.name.replace(/ /g, "_")}" tabindex="0"
onclick="this.blur();">${
font.display !== undefined ? font.display : font.name
}</div>`;
@ -640,13 +663,15 @@ async function fillSettingsPage(): Promise<void> {
fontsEl.innerHTML = fontsElHTML;
}
$(".pageSettings .section.customBackgroundSize input").val(
Config.customBackground
$(
".pageSettings .section[data-config-name='customBackgroundSize'] input"
).val(Config.customBackground);
$(".pageSettings .section[data-config-name='fontSize'] input").val(
Config.fontSize
);
$(".pageSettings .section.fontSize input").val(Config.fontSize);
$(".pageSettings .section.customLayoutfluid input").val(
$(".pageSettings .section[data-config-name='customLayoutfluid'] input").val(
Config.customLayoutfluid.replace(/#/g, " ")
);
@ -657,7 +682,7 @@ async function fillSettingsPage(): Promise<void> {
groupsInitialized = true;
} else {
for (const groupKey of Object.keys(groups)) {
groups[groupKey]?.updateInput();
groups[groupKey]?.updateUI();
}
}
setEventDisabled(false);
@ -715,8 +740,8 @@ export function updateDiscordSection(): void {
}
export function updateAuthSections(): void {
$(".pageSettings .section.passwordAuthSettings .button").addClass("hidden");
$(".pageSettings .section.googleAuthSettings .button").addClass("hidden");
$(".pageSettings .section.passwordAuthSettings button").addClass("hidden");
$(".pageSettings .section.googleAuthSettings button").addClass("hidden");
const user = Auth?.currentUser;
if (!user) return;
@ -762,8 +787,12 @@ export function updateAuthSections(): void {
}
function setActiveFunboxButton(): void {
$(`.pageSettings .section.funbox .button`).removeClass("active");
$(`.pageSettings .section.funbox .button`).removeClass("disabled");
$(`.pageSettings .section[data-config-name='funbox'] .button`).removeClass(
"active"
);
$(`.pageSettings .section[data-config-name='funbox'] .button`).removeClass(
"disabled"
);
Misc.getFunboxList()
.then((funboxModes) => {
funboxModes.forEach((funbox) => {
@ -772,7 +801,7 @@ function setActiveFunboxButton(): void {
!Config.funbox.split("#").includes(funbox.name)
) {
$(
`.pageSettings .section.funbox .button[funbox='${funbox.name}']`
`.pageSettings .section[data-config-name='funbox'] .button[data-config-value='${funbox.name}']`
).addClass("disabled");
}
});
@ -781,9 +810,9 @@ function setActiveFunboxButton(): void {
Notifications.add(`Failed to update funbox buttons: ${e.message}`, -1);
});
Config.funbox.split("#").forEach((funbox) => {
$(`.pageSettings .section.funbox .button[funbox='${funbox}']`).addClass(
"active"
);
$(
`.pageSettings .section[data-config-name='funbox'] .button[data-config-value='${funbox}']`
).addClass("active");
});
}
@ -851,7 +880,7 @@ export async function update(groupUpdate = true): Promise<void> {
// Object.keys(groups).forEach((group) => {
if (groupUpdate) {
for (const group of Object.keys(groups)) {
groups[group]?.updateInput();
groups[group]?.updateUI();
}
}
@ -866,34 +895,48 @@ export async function update(groupUpdate = true): Promise<void> {
ThemePicker.setCustomInputs(true);
// ThemePicker.updateActiveButton();
$(".pageSettings .section.paceCaret input.customPaceCaretSpeed").val(
$(
".pageSettings .section[data-config-name='paceCaret'] input.customPaceCaretSpeed"
).val(
getTypingSpeedUnit(Config.typingSpeedUnit).fromWpm(
Config.paceCaretCustomSpeed
)
);
$(".pageSettings .section.minWpm input.customMinWpmSpeed").val(
$(
".pageSettings .section[data-config-name='minWpm'] input.customMinWpmSpeed"
).val(
getTypingSpeedUnit(Config.typingSpeedUnit).fromWpm(Config.minWpmCustomSpeed)
);
$(".pageSettings .section.minAcc input.customMinAcc").val(
$(".pageSettings .section[data-config-name='minAcc'] input.customMinAcc").val(
Config.minAccCustom
);
$(".pageSettings .section.minBurst input.customMinBurst").val(
$(
".pageSettings .section[data-config-name='minBurst'] input.customMinBurst"
).val(
getTypingSpeedUnit(Config.typingSpeedUnit).fromWpm(
Config.minBurstCustomSpeed
)
);
if (Config.autoSwitchTheme) {
$(".pageSettings .section.autoSwitchThemeInputs").removeClass("hidden");
$(
".pageSettings .section[data-config-name='autoSwitchThemeInputs']"
).removeClass("hidden");
} else {
$(".pageSettings .section.autoSwitchThemeInputs").addClass("hidden");
$(
".pageSettings .section[data-config-name='autoSwitchThemeInputs']"
).addClass("hidden");
}
if (Config.customBackground !== "") {
$(".pageSettings .section.customBackgroundFilter").removeClass("hidden");
$(
".pageSettings .section[data-config-name='customBackgroundFilter']"
).removeClass("hidden");
} else {
$(".pageSettings .section.customBackgroundFilter").addClass("hidden");
$(
".pageSettings .section[data-config-name='customBackgroundFilter']"
).addClass("hidden");
}
if (Auth?.currentUser) {
@ -902,6 +945,8 @@ export async function update(groupUpdate = true): Promise<void> {
hideAccountSection();
}
CustomBackgroundFilter.updateUI();
const modifierKey = window.navigator.userAgent.toLowerCase().includes("mac")
? "cmd"
: "ctrl";
@ -930,13 +975,13 @@ function toggleSettingsGroup(groupName: string): void {
}
}
$(".pageSettings .section.paceCaret").on(
$(".pageSettings .section[data-config-name='paceCaret']").on(
"focusout",
"input.customPaceCaretSpeed",
() => {
const inputValue = parseInt(
$(
".pageSettings .section.paceCaret input.customPaceCaretSpeed"
".pageSettings .section[data-config-name='paceCaret'] input.customPaceCaretSpeed"
).val() as string
);
const newConfigValue = getTypingSpeedUnit(Config.typingSpeedUnit).toWpm(
@ -946,24 +991,30 @@ $(".pageSettings .section.paceCaret").on(
}
);
$(".pageSettings .section.paceCaret").on("click", ".button.save", () => {
const inputValue = parseInt(
$(
".pageSettings .section.paceCaret input.customPaceCaretSpeed"
).val() as string
);
const newConfigValue = getTypingSpeedUnit(Config.typingSpeedUnit).toWpm(
inputValue
);
UpdateConfig.setPaceCaretCustomSpeed(newConfigValue);
});
$(".pageSettings .section[data-config-name='paceCaret']").on(
"click",
"button.save",
() => {
const inputValue = parseInt(
$(
".pageSettings .section[data-config-name='paceCaret'] input.customPaceCaretSpeed"
).val() as string
);
const newConfigValue = getTypingSpeedUnit(Config.typingSpeedUnit).toWpm(
inputValue
);
UpdateConfig.setPaceCaretCustomSpeed(newConfigValue);
}
);
$(".pageSettings .section.minWpm").on(
$(".pageSettings .section[data-config-name='minWpm']").on(
"focusout",
"input.customMinWpmSpeed",
() => {
const inputValue = parseInt(
$(".pageSettings .section.minWpm input.customMinWpmSpeed").val() as string
$(
".pageSettings .section[data-config-name='minWpm'] input.customMinWpmSpeed"
).val() as string
);
const newConfigValue = getTypingSpeedUnit(Config.typingSpeedUnit).toWpm(
inputValue
@ -972,38 +1023,58 @@ $(".pageSettings .section.minWpm").on(
}
);
$(".pageSettings .section.minWpm").on("click", ".button.save", () => {
const inputValue = parseInt(
$(".pageSettings .section.minWpm input.customMinWpmSpeed").val() as string
);
const newConfigValue = getTypingSpeedUnit(Config.typingSpeedUnit).toWpm(
inputValue
);
UpdateConfig.setMinWpmCustomSpeed(newConfigValue);
});
$(".pageSettings .section[data-config-name='minWpm']").on(
"click",
"button.save",
() => {
const inputValue = parseInt(
$(
".pageSettings .section[data-config-name='minWpm'] input.customMinWpmSpeed"
).val() as string
);
const newConfigValue = getTypingSpeedUnit(Config.typingSpeedUnit).toWpm(
inputValue
);
UpdateConfig.setMinWpmCustomSpeed(newConfigValue);
}
);
$(".pageSettings .section.minAcc").on("focusout", "input.customMinAcc", () => {
UpdateConfig.setMinAccCustom(
parseInt(
$(".pageSettings .section.minAcc input.customMinAcc").val() as string
)
);
});
$(".pageSettings .section[data-config-name='minAcc']").on(
"focusout",
"input.customMinAcc",
() => {
UpdateConfig.setMinAccCustom(
parseInt(
$(
".pageSettings .section[data-config-name='minAcc'] input.customMinAcc"
).val() as string
)
);
}
);
$(".pageSettings .section.minAcc").on("click", ".button.save", () => {
UpdateConfig.setMinAccCustom(
parseInt(
$(".pageSettings .section.minAcc input.customMinAcc").val() as string
)
);
});
$(".pageSettings .section[data-config-name='minAcc']").on(
"click",
"button.save",
() => {
UpdateConfig.setMinAccCustom(
parseInt(
$(
".pageSettings .section[data-config-name='minAcc'] input.customMinAcc"
).val() as string
)
);
}
);
$(".pageSettings .section.minBurst").on(
$(".pageSettings .section[data-config-name='minBurst']").on(
"focusout",
"input.customMinBurst",
() => {
const inputValue = parseInt(
$(".pageSettings .section.minBurst input.customMinBurst").val() as string
$(
".pageSettings .section[data-config-name='minBurst'] input.customMinBurst"
).val() as string
);
const newConfigValue = getTypingSpeedUnit(Config.typingSpeedUnit).toWpm(
inputValue
@ -1012,22 +1083,32 @@ $(".pageSettings .section.minBurst").on(
}
);
$(".pageSettings .section.minBurst").on("click", ".button.save", () => {
const inputValue = parseInt(
$(".pageSettings .section.minBurst input.customMinBurst").val() as string
);
const newConfigValue = getTypingSpeedUnit(Config.typingSpeedUnit).toWpm(
inputValue
);
UpdateConfig.setMinBurstCustomSpeed(newConfigValue);
});
$(".pageSettings .section[data-config-name='minBurst']").on(
"click",
"button.save",
() => {
const inputValue = parseInt(
$(
".pageSettings .section[data-config-name='minBurst'] input.customMinBurst"
).val() as string
);
const newConfigValue = getTypingSpeedUnit(Config.typingSpeedUnit).toWpm(
inputValue
);
UpdateConfig.setMinBurstCustomSpeed(newConfigValue);
}
);
//funbox
$(".pageSettings .section.funbox").on("click", ".button", (e) => {
const funbox = $(e.currentTarget).attr("funbox") as string;
toggleFunbox(funbox);
setActiveFunboxButton();
});
$(".pageSettings .section[data-config-name='funbox']").on(
"click",
".button",
(e) => {
const funbox = $(e.currentTarget).attr("data-config-value") as string;
toggleFunbox(funbox);
setActiveFunboxButton();
}
);
//tags
$(".pageSettings .section.tags").on(
@ -1076,34 +1157,36 @@ $(".pageSettings .section.apeKeys #showApeKeysPopup").on("click", () => {
void ApeKeysPopup.show();
});
$(".pageSettings .section.customBackgroundSize .inputAndButton .save").on(
"click",
() => {
$(
".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton button.save"
).on("click", () => {
UpdateConfig.setCustomBackground(
$(
".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
).val() as string
);
});
$(
".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
).on("keypress", (e) => {
if (e.key === "Enter") {
UpdateConfig.setCustomBackground(
$(
".pageSettings .section.customBackgroundSize .inputAndButton input"
".pageSettings .section[data-config-name='customBackgroundSize'] .inputAndButton input"
).val() as string
);
}
);
});
$(".pageSettings .section.customBackgroundSize .inputAndButton input").on(
"keypress",
(e) => {
if (e.key === "Enter") {
UpdateConfig.setCustomBackground(
$(
".pageSettings .section.customBackgroundSize .inputAndButton input"
).val() as string
);
}
}
);
$(".pageSettings .section.fontSize .inputAndButton .save").on("click", () => {
$(
".pageSettings .section[data-config-name='fontSize'] .inputAndButton button.save"
).on("click", () => {
const didConfigSave = UpdateConfig.setFontSize(
parseFloat(
$(".pageSettings .section.fontSize .inputAndButton input").val() as string
$(
".pageSettings .section[data-config-name='fontSize'] .inputAndButton input"
).val() as string
)
);
if (didConfigSave) {
@ -1113,32 +1196,46 @@ $(".pageSettings .section.fontSize .inputAndButton .save").on("click", () => {
}
});
$(".pageSettings .section.fontSize .inputAndButton input").on(
"keypress",
(e) => {
if (e.key === "Enter") {
const didConfigSave = UpdateConfig.setFontSize(
parseFloat(
$(
".pageSettings .section.fontSize .inputAndButton input"
).val() as string
)
);
if (didConfigSave) {
Notifications.add("Saved", 1, {
duration: 1,
});
}
$(
".pageSettings .section[data-config-name='fontSize'] .inputAndButton input"
).on("keypress", (e) => {
if (e.key === "Enter") {
const didConfigSave = UpdateConfig.setFontSize(
parseFloat(
$(
".pageSettings .section[data-config-name='fontSize'] .inputAndButton input"
).val() as string
)
);
if (didConfigSave) {
Notifications.add("Saved", 1, {
duration: 1,
});
}
}
);
});
$(".pageSettings .section.customLayoutfluid .inputAndButton .save").on(
"click",
() => {
$(
".pageSettings .section[data-config-name='customLayoutfluid'] .inputAndButton button.save"
).on("click", () => {
void UpdateConfig.setCustomLayoutfluid(
$(
".pageSettings .section[data-config-name='customLayoutfluid'] .inputAndButton input"
).val() as MonkeyTypes.CustomLayoutFluidSpaces
).then((bool) => {
if (bool) {
Notifications.add("Custom layoutfluid saved", 1);
}
});
});
$(
".pageSettings .section[data-config-name='customLayoutfluid'] .inputAndButton .input"
).on("keypress", (e) => {
if (e.key === "Enter") {
void UpdateConfig.setCustomLayoutfluid(
$(
".pageSettings .section.customLayoutfluid .inputAndButton input"
".pageSettings .section[data-config-name='customLayoutfluid'] .inputAndButton input"
).val() as MonkeyTypes.CustomLayoutFluidSpaces
).then((bool) => {
if (bool) {
@ -1146,24 +1243,7 @@ $(".pageSettings .section.customLayoutfluid .inputAndButton .save").on(
}
});
}
);
$(".pageSettings .section.customLayoutfluid .inputAndButton .input").on(
"keypress",
(e) => {
if (e.key === "Enter") {
void UpdateConfig.setCustomLayoutfluid(
$(
".pageSettings .section.customLayoutfluid .inputAndButton input"
).val() as MonkeyTypes.CustomLayoutFluidSpaces
).then((bool) => {
if (bool) {
Notifications.add("Custom layoutfluid saved", 1);
}
});
}
}
);
});
$(".pageSettings .quickNav .links a").on("click", (e) => {
const settingsGroup = e.target.innerText;
@ -1173,12 +1253,12 @@ $(".pageSettings .quickNav .links a").on("click", (e) => {
isOpen && toggleSettingsGroup(settingsGroup);
});
$(".pageSettings .section.updateCookiePreferences .button").on("click", () => {
$(".pageSettings .section.updateCookiePreferences button").on("click", () => {
CookiePopup.show();
CookiePopup.showSettings();
});
$(".pageSettings .section.autoSwitchThemeInputs").on(
$(".pageSettings .section[data-config-name='autoSwitchThemeInputs']").on(
"change",
`select.light`,
(e) => {
@ -1190,7 +1270,7 @@ $(".pageSettings .section.autoSwitchThemeInputs").on(
}
);
$(".pageSettings .section.autoSwitchThemeInputs").on(
$(".pageSettings .section[data-config-name='autoSwitchThemeInputs']").on(
"change",
`select.dark`,
(e) => {

10
frontend/src/ts/popups/simple-popups.ts
View file

@ -1877,9 +1877,13 @@ $("#popups").on("click", "#apeKeysPopup table tbody tr .button.edit", (e) => {
showPopup("editApeKey", [keyId]);
});
$(".pageSettings").on("click", ".section.fontFamily .button.custom", () => {
showPopup("applyCustomFont", []);
});
$(".pageSettings").on(
"click",
".section[data-config-name='fontFamily'] .button.custom",
() => {
showPopup("applyCustomFont", []);
}
);
$(document).on("keydown", (event) => {
if (event.key === "Escape" && isElementVisible("#simplePopupWrapper")) {

41
frontend/src/ts/settings/settings-group.ts
View file

@ -1,4 +1,5 @@
import Config from "../config";
import * as Notifications from "../elements/notifications";
export default class SettingsGroup<T extends SharedTypes.ConfigValue> {
public configName: string;
@ -21,12 +22,12 @@ export default class SettingsGroup<T extends SharedTypes.ConfigValue> {
this.setCallback = setCallback;
this.updateCallback = updateCallback;
this.updateInput();
this.updateUI();
if (this.mode === "select") {
$(".pageSettings").on(
"change",
`.section.${this.configName} select`,
`.section[data-config-name='${this.configName}'] select`,
(e) => {
const target = $(e.currentTarget);
if (
@ -41,7 +42,7 @@ export default class SettingsGroup<T extends SharedTypes.ConfigValue> {
} else if (this.mode === "button") {
$(".pageSettings").on(
"click",
`.section.${this.configName} .button`,
`.section[data-config-name='${this.configName}'] button`,
(e) => {
const target = $(e.currentTarget);
if (
@ -50,11 +51,21 @@ export default class SettingsGroup<T extends SharedTypes.ConfigValue> {
) {
return;
}
let value: string | boolean = target.attr(configName) as string;
if (!value) return;
if (value === "true") value = true;
if (value === "false") value = false;
this.setValue(value as T);
const value = target.attr(`data-config-value`);
if (value === undefined || value === "") {
console.error(
`Failed to handle settings button click for ${configName}: data-${configName} is missing or empty.`
);
Notifications.add(
"Button is missing data property. Please report this.",
-1
);
return;
}
let typed = value as T;
if (typed === "true") typed = true as T;
if (typed === "false") typed = false as T;
this.setValue(typed as T);
}
);
}
@ -62,24 +73,24 @@ export default class SettingsGroup<T extends SharedTypes.ConfigValue> {
setValue(value: T): void {
this.configFunction(value);
this.updateInput();
this.updateUI();
if (this.setCallback) this.setCallback();
}
updateInput(): void {
updateUI(): void {
this.configValue = Config[this.configName as keyof typeof Config] as T;
$(`.pageSettings .section.${this.configName} .button`).removeClass(
"active"
);
$(
`.pageSettings .section[data-config-name='${this.configName}'] button`
).removeClass("active");
if (this.mode === "select") {
$(`.pageSettings .section.${this.configName} select`)
$(`.pageSettings .section[data-config-name='${this.configName}'] select`)
.val(this.configValue as string)
.trigger("change.select2");
} else if (this.mode === "button") {
$(
// this cant be an object?
// eslint-disable-next-line @typescript-eslint/no-base-to-string
`.pageSettings .section.${this.configName} .button[${this.configName}='${this.configValue}']`
`.pageSettings .section[data-config-name='${this.configName}'] button[data-config-value='${this.configValue}']`
).addClass("active");
}
if (this.updateCallback) this.updateCallback();

16
frontend/src/ts/settings/theme-picker.ts
View file

@ -120,12 +120,12 @@ export async function refreshButtons(): Promise<void> {
if (!Auth?.currentUser) {
$(
".pageSettings .section.themes .customThemeEdit .saveCustomThemeButton"
".pageSettings .section.themes .customThemeEdit #saveCustomThemeButton"
).text("save");
return;
} else {
$(
".pageSettings .section.themes .customThemeEdit .saveCustomThemeButton"
".pageSettings .section.themes .customThemeEdit #saveCustomThemeButton"
).text("save as new");
}
@ -288,10 +288,10 @@ export function updateActiveTab(forced = false): void {
// Set force to true only when some change for the active tab has taken place
// Prevent theme buttons from being added twice by doing an update only when the state has changed
const $presetTabButton = $(
".pageSettings .section.themes .tabs .button[tab='preset']"
".pageSettings .section.themes .tabs button[data-tab='preset']"
);
const $customTabButton = $(
".pageSettings .section.themes .tabs .button[tab='custom']"
".pageSettings .section.themes .tabs button[data-tab='custom']"
);
if (Config.customTheme) {
@ -322,13 +322,13 @@ export function updateActiveTab(forced = false): void {
// Add events to the DOM
// Handle click on theme: preset or custom tab
$(".pageSettings .section.themes .tabs .button").on("click", (e) => {
$(".pageSettings .section.themes .tabs .button").removeClass("active");
$(".pageSettings .section.themes .tabs button").on("click", (e) => {
$(".pageSettings .section.themes .tabs button").removeClass("active");
const $target = $(e.currentTarget);
$target.addClass("active");
// setCustomInputs();
//test
if ($target.attr("tab") === "preset") {
if ($target.attr("data-tab") === "preset") {
UpdateConfig.setCustomTheme(false);
} else {
UpdateConfig.setCustomTheme(true);
@ -462,7 +462,7 @@ $("#shareCustomThemeButton").on("click", () => {
ShareCustomThemePopup.show();
});
$(".pageSettings .saveCustomThemeButton").on("click", async () => {
$(".pageSettings #saveCustomThemeButton").on("click", async () => {
saveCustomThemeColors();
if (Auth?.currentUser) {
const newCustomTheme = {

1900
frontend/static/html/pages/settings.html
View file

File diff suppressed because it is too large Load diff