wip

Author: fehmer

frontend/src/ts/commandline/lists.ts

@@ -146,8 +146,8 @@ export const commands: CommandsSubgroup = {
       id: "changeCustomModeText",
       display: "Change custom text",
       icon: "fa-align-left",
-      exec: (): void => {
-        CustomTextPopup.show();
+      exec: async (): Promise<void> => {
+        await CustomTextPopup.show();
       },
     },
     {

frontend/src/ts/event-handlers/test.ts

@@ -81,8 +81,8 @@ $(".pageTest").on("click", "#testConfig .quoteLength .textButton", (e) => {
   }
 });
 
-$(".pageTest").on("click", "#testConfig .customText .textButton", () => {
-  CustomTextModal.show();
+$(".pageTest").on("click", "#testConfig .customText .textButton", async () => {
+  await CustomTextModal.show();
 });
 
 $(".pageTest").on("click", "#practiseWordsButton", () => {

frontend/src/ts/modals/custom-text.ts

@@ -33,9 +33,7 @@ type State = {
 };
 
 const state: State = {
-  textarea: CustomText.getText().join(
-    CustomText.getPipeDelimiter() ? "|" : " "
-  ),
+  textarea: "",
   longCustomTextWarning: false,
   challengeWarning: false,
   customTextMode: "simple",
@@ -167,27 +165,29 @@ async function beforeAnimation(
   modalEl: HTMLElement,
   modalChainData?: IncomingData
 ): Promise<void> {
-  state.customTextMode = CustomText.getMode();
+  const customText = await CustomText.getData();
+  state.textarea = customText.text.join(customText.pipeDelimiter ? "|" : " ");
+  state.customTextMode = customText.mode;
 
   if (
     state.customTextMode === "repeat" &&
-    CustomText.getLimitMode() === "word" &&
-    CustomText.getLimitValue() === CustomText.getText().length
+    customText.limit.mode === "word" &&
+    customText.limit.value === customText.text.length
   ) {
     state.customTextMode = "simple";
   }
 
   state.customTextLimits.word = "";
   state.customTextLimits.time = "";
   state.customTextLimits.section = "";
-  if (CustomText.getLimitMode() === "word") {
-    state.customTextLimits.word = `${CustomText.getLimitValue()}`;
-  } else if (CustomText.getLimitMode() === "time") {
-    state.customTextLimits.time = `${CustomText.getLimitValue()}`;
-  } else if (CustomText.getLimitMode() === "section") {
-    state.customTextLimits.section = `${CustomText.getLimitValue()}`;
+  if (customText.limit.mode === "word") {
+    state.customTextLimits.word = `${customText.limit.value}`;
+  } else if (customText.limit.mode === "time") {
+    state.customTextLimits.time = `${customText.limit.value}`;
+  } else if (customText.limit.mode === "section") {
+    state.customTextLimits.section = `${customText.limit.value}`;
   }
-  state.customTextPipeDelimiter = CustomText.getPipeDelimiter();
+  state.customTextPipeDelimiter = customText.pipeDelimiter;
 
   state.longCustomTextWarning = CustomTextState.isCustomTextLong() ?? false;
 
@@ -220,9 +220,10 @@ async function afterAnimation(): Promise<void> {
   }
 }
 
-export function show(showOptions?: ShowOptions): void {
-  state.textarea = CustomText.getText()
-    .join(CustomText.getPipeDelimiter() ? "|" : " ")
+export async function show(showOptions?: ShowOptions): Promise<void> {
+  const customText = await CustomText.getData();
+  state.textarea = customText.text
+    .join(customText.pipeDelimiter ? "|" : " ")
     .replace(/^ +/gm, "");
   void modal.show({
     ...(showOptions as ShowOptions<IncomingData>),
@@ -310,7 +311,7 @@ function cleanUpText(): string[] {
   return words;
 }
 
-function apply(): void {
+async function apply(): Promise<void> {
   if (state.textarea === "") {
     Notifications.add("Text cannot be empty", 0);
     return;
@@ -363,29 +364,29 @@ function apply(): void {
   }
 
   if (state.customTextMode === "simple") {
-    CustomText.setMode("repeat");
+    await CustomText.setMode("repeat");
     state.customTextLimits.word = `${text.length}`;
     state.customTextLimits.time = "";
     state.customTextLimits.section = "";
   } else {
-    CustomText.setMode(state.customTextMode);
+    await CustomText.setMode(state.customTextMode);
   }
 
-  CustomText.setPipeDelimiter(state.customTextPipeDelimiter);
-  CustomText.setText(text);
+  await CustomText.setPipeDelimiter(state.customTextPipeDelimiter);
+  await CustomText.setText(text);
 
   if (state.customTextMode === "simple" && state.customTextPipeDelimiter) {
-    CustomText.setLimitMode("section");
-    CustomText.setLimitValue(text.length);
+    await CustomText.setLimitMode("section");
+    await CustomText.setLimitValue(text.length);
   } else if (state.customTextLimits.word !== "") {
-    CustomText.setLimitMode("word");
-    CustomText.setLimitValue(parseInt(state.customTextLimits.word));
+    await CustomText.setLimitMode("word");
+    await CustomText.setLimitValue(parseInt(state.customTextLimits.word));
   } else if (state.customTextLimits.time !== "") {
-    CustomText.setLimitMode("time");
-    CustomText.setLimitValue(parseInt(state.customTextLimits.time));
+    await CustomText.setLimitMode("time");
+    await CustomText.setLimitValue(parseInt(state.customTextLimits.time));
   } else if (state.customTextLimits.section !== "") {
-    CustomText.setLimitMode("section");
-    CustomText.setLimitValue(parseInt(state.customTextLimits.section));
+    await CustomText.setLimitMode("section");
+    await CustomText.setLimitValue(parseInt(state.customTextLimits.section));
   }
 
   ChallengeController.clearActive();
@@ -554,9 +555,11 @@ async function setup(modalEl: HTMLElement): Promise<void> {
       });
     }
   });
-  modalEl.querySelector(".button.apply")?.addEventListener("click", () => {
-    apply();
-  });
+  modalEl
+    .querySelector(".button.apply")
+    ?.addEventListener("click", async () => {
+      await apply();
+    });
   modalEl.querySelector(".button.wordfilter")?.addEventListener("click", () => {
     void WordFilterPopup.show({
       modalChain: modal as AnimatedModal<unknown, unknown>,

frontend/src/ts/modals/mobile-test-config.ts

@@ -148,11 +148,13 @@ async function setup(modalEl: HTMLElement): Promise<void> {
     });
   }
 
-  modalEl.querySelector(".customChange")?.addEventListener("click", () => {
-    CustomTextPopup.show({
-      modalChain: modal,
+  modalEl
+    .querySelector(".customChange")
+    ?.addEventListener("click", async () => {
+      await CustomTextPopup.show({
+        modalChain: modal,
+      });
     });
-  });
 
   modalEl.querySelector(".punctuation")?.addEventListener("click", () => {
     UpdateConfig.setPunctuation(!Config.punctuation);