From 6167506b89f6e7ea61902368947d8da5a8a906b3 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 24 Mar 2024 16:45:53 +0100
Subject: [PATCH] refactor(word filter modal): use new modal system

---
 frontend/src/html/popups.html                 |  24 +-
 frontend/src/styles/popups.scss               |  16 +-
 frontend/src/styles/z_media-queries.scss      |   2 +-
 .../word-filter.ts}                           | 279 +++++++++---------
 frontend/src/ts/popups/custom-text-popup.ts   |   7 +-
 5 files changed, 157 insertions(+), 171 deletions(-)
 rename frontend/src/ts/{popups/word-filter-popup.ts => modals/word-filter.ts} (53%)

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 540b09caa019..c648b1242d37 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -493,8 +493,12 @@
     <div class="button save">save</div>
   </div>
 </div>
-<div id="wordFilterPopupWrapper" class="popupWrapper hidden">
-  <div id="wordFilterPopup">
+<dialog id="wordFilterModal" class="modalWrapper hidden">
+  <div class="modal">
+    <!-- hidden for now, dunno where to place it -->
+    <!-- <div class="loadingIndicator">
+      <i class="fas fa-fw fa-spin fa-circle-notch"></i>
+    </div> -->
     <div class="top">
       <div class="group">
         <div class="title">language</div>
@@ -542,11 +546,6 @@
           title="exclude"
         />
       </div>
-      <!-- </div> -->
-      <!-- <div class="tip">
-        Use the above filters to include and exclude words or characters
-        (separated by spaces)
-      </div> -->
     </div>
     <div class="divider"></div>
 
@@ -560,20 +559,19 @@
         <select class="layoutInput"></select>
       </div>
       <!-- <div class="tip">Use the dropdowns above to generate presets</div> -->
-      <div class="button generateButton">generate</div>
+      <button class="generateButton">generate</button>
     </div>
 
     <div class="bottom">
       <div class="tip">
         "Set" replaces the current custom word list with the filter result,
-        "Add" appends the filter result to the current custom word list
+        "Add" appends the filter result to the current custom word list.
       </div>
-      <i class="fas fa-fw fa-spin fa-circle-notch hidden loadingIndicator"></i>
-      <div class="button setButton">set</div>
-      <div class="button addButton">add</div>
+      <button class="setButton">set</button>
+      <button class="addButton">add</button>
     </div>
   </div>
-</div>
+</dialog>
 <dialog id="googleSignUpModal" class="modalWrapper hidden">
   <form class="modal">
     <div class="title">Account name</div>
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 37c959b268df..7f0e880ba1b0 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -259,20 +259,12 @@
   }
 }
 
-#wordFilterPopupWrapper {
-  padding: 2rem;
-  #wordFilterPopup {
-    color: var(--sub-color);
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
+#wordFilterModal {
+  .modal {
     grid-template-areas: "top top top" "left divider right" "bottom bottom bottom";
     grid-template-columns: 1fr auto 1fr;
     gap: 2rem;
     max-width: 800px;
-    overflow-y: scroll;
-    max-height: 100%;
 
     .top {
       grid-area: top;
@@ -313,6 +305,9 @@
     .group {
       display: grid;
       gap: 0.5rem;
+      .title {
+        color: var(--sub-color);
+      }
     }
 
     .lengthgrid {
@@ -329,6 +324,7 @@
 
     .loadingIndicator {
       justify-self: center;
+      color: var(--main-color);
     }
 
     .divider {
diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
index dcca25d6a1dc..2862f4ac06d7 100644
--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@@ -427,7 +427,7 @@
 
 //700px
 @media only screen and (max-width: 43.75rem) {
-  #wordFilterPopupWrapper #wordFilterPopup {
+  #wordFilterModal .modal {
     .divider {
       width: 100%;
       height: 0.25rem;
diff --git a/frontend/src/ts/popups/word-filter-popup.ts b/frontend/src/ts/modals/word-filter.ts
similarity index 53%
rename from frontend/src/ts/popups/word-filter-popup.ts
rename to frontend/src/ts/modals/word-filter.ts
index 629ee985c7d5..738d662ee59a 100644
--- a/frontend/src/ts/popups/word-filter-popup.ts
+++ b/frontend/src/ts/modals/word-filter.ts
@@ -1,12 +1,8 @@
 import * as Misc from "../utils/misc";
 import * as CustomText from "../test/custom-text";
 import * as Notifications from "../elements/notifications";
-import * as Skeleton from "../utils/skeleton";
 import SlimSelect from "slim-select";
-
-const wrapperId = "wordFilterPopupWrapper";
-
-let initialised = false;
+import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
 
 type FilterPreset = {
   display: string;
@@ -95,62 +91,58 @@ const presets: Record<string, FilterPreset> = {
   },
 };
 
-async function init(): Promise<void> {
-  if (!initialised) {
-    $("#wordFilterPopup .languageInput").empty();
+async function initSelectOptions(): Promise<void> {
+  $("#wordFilterModal .languageInput").empty();
 
-    $("#wordFilterPopup .layoutInput").empty();
+  $("#wordFilterModal .layoutInput").empty();
 
-    $("wordFilterPopup .presetInput").empty();
+  $("wordFilterModal .presetInput").empty();
 
-    let LanguageList;
-    let LayoutList;
+  let LanguageList;
+  let LayoutList;
 
-    try {
-      LanguageList = await Misc.getLanguageList();
-    } catch (e) {
-      console.error(
-        Misc.createErrorMessage(
-          e,
-          "Failed to initialise word filter popup language list"
-        )
-      );
-      return;
-    }
+  try {
+    LanguageList = await Misc.getLanguageList();
+  } catch (e) {
+    console.error(
+      Misc.createErrorMessage(
+        e,
+        "Failed to initialise word filter popup language list"
+      )
+    );
+    return;
+  }
 
-    try {
-      LayoutList = await Misc.getLayoutsList();
-    } catch (e) {
-      console.error(
-        Misc.createErrorMessage(
-          e,
-          "Failed to initialise word filter popup preset list"
-        )
-      );
-      return;
-    }
+  try {
+    LayoutList = await Misc.getLayoutsList();
+  } catch (e) {
+    console.error(
+      Misc.createErrorMessage(
+        e,
+        "Failed to initialise word filter popup preset list"
+      )
+    );
+    return;
+  }
 
-    LanguageList.forEach((language) => {
-      const prettyLang = language.replace(/_/gi, " ");
-      $("#wordFilterPopup .languageInput").append(`
+  LanguageList.forEach((language) => {
+    const prettyLang = language.replace(/_/gi, " ");
+    $("#wordFilterModal .languageInput").append(`
         <option value=${language}>${prettyLang}</option>
       `);
-    });
+  });
 
-    for (const layout in LayoutList) {
-      const prettyLayout = layout.replace(/_/gi, " ");
-      $("#wordFilterPopup .layoutInput").append(`
+  for (const layout in LayoutList) {
+    const prettyLayout = layout.replace(/_/gi, " ");
+    $("#wordFilterModal .layoutInput").append(`
       <option value=${layout}>${prettyLayout}</option>
     `);
-    }
-
-    for (const [presetId, preset] of Object.entries(presets)) {
-      $("#wordFilterPopup .presetInput").append(
-        `<option value=${presetId}>${preset.display}</option>`
-      );
-    }
+  }
 
-    initialised = true;
+  for (const [presetId, preset] of Object.entries(presets)) {
+    $("#wordFilterModal .presetInput").append(
+      `<option value=${presetId}>${preset.display}</option>`
+    );
   }
 }
 
@@ -158,69 +150,54 @@ let languageSelect: SlimSelect | undefined = undefined;
 let layoutSelect: SlimSelect | undefined = undefined;
 let presetSelect: SlimSelect | undefined = undefined;
 
-let callbackFuncOnHide: (() => void) | undefined = undefined;
-
-export async function show(
-  noAnim = false,
-  callbackOnHide: () => void | undefined
-): Promise<void> {
-  Skeleton.append(wrapperId, "popups");
-  if (!Misc.isPopupVisible(wrapperId)) {
-    await init();
-    callbackFuncOnHide = callbackOnHide;
-    languageSelect = new SlimSelect({
-      select: "#wordFilterPopup .languageInput",
-    });
-    layoutSelect = new SlimSelect({
-      select: "#wordFilterPopup .layoutInput",
-    });
-    presetSelect = new SlimSelect({
-      select: "#wordFilterPopup .presetInput",
-    });
-    $("#wordFilterPopupWrapper .loadingIndicator").addClass("hidden");
-    $("#wordFilterPopupWrapper .button").removeClass("hidden");
-
-    $("#wordFilterPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 0)
-      .removeClass("hidden")
-      .animate({ opacity: 1 }, noAnim ? 0 : 125, () => {
-        //
+export async function show(showOptions?: ShowOptions): Promise<void> {
+  void modal.show({
+    ...showOptions,
+    beforeAnimation: async (modalEl) => {
+      languageSelect = new SlimSelect({
+        select: "#wordFilterModal .languageInput",
+        settings: {
+          contentLocation: modalEl,
+        },
       });
-  }
+      layoutSelect = new SlimSelect({
+        select: "#wordFilterModal .layoutInput",
+        settings: {
+          contentLocation: modal.getModal(),
+        },
+      });
+      presetSelect = new SlimSelect({
+        select: "#wordFilterModal .presetInput",
+        settings: {
+          contentLocation: modal.getModal(),
+        },
+      });
+      $("#wordFilterModal .loadingIndicator").removeClass("hidden");
+      enableButtons();
+    },
+  });
 }
 
-function hide(noAnim = false): void {
-  if (Misc.isPopupVisible(wrapperId)) {
-    $("#wordFilterPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        noAnim ? 0 : 125,
-        () => {
-          languageSelect?.destroy();
-          layoutSelect?.destroy();
-          presetSelect?.destroy();
-          languageSelect = undefined;
-          layoutSelect = undefined;
-          presetSelect = undefined;
-          $("#wordFilterPopupWrapper").addClass("hidden");
-          Skeleton.remove(wrapperId);
-          if (callbackFuncOnHide) callbackFuncOnHide();
-        }
-      );
-  }
+function hide(clearModalChain?: boolean): void {
+  void modal.hide({
+    clearModalChain,
+    afterAnimation: async () => {
+      languageSelect?.destroy();
+      layoutSelect?.destroy();
+      presetSelect?.destroy();
+      languageSelect = undefined;
+      layoutSelect = undefined;
+      presetSelect = undefined;
+    },
+  });
 }
 
 async function filter(language: string): Promise<string[]> {
-  let filterin = $("#wordFilterPopup .wordIncludeInput").val() as string;
+  let filterin = $("#wordFilterModal .wordIncludeInput").val() as string;
   filterin = Misc.escapeRegExp(filterin?.trim());
   filterin = filterin.replace(/\s+/gi, "|");
   const regincl = new RegExp(filterin, "i");
-  let filterout = $("#wordFilterPopup .wordExcludeInput").val() as string;
+  let filterout = $("#wordFilterModal .wordExcludeInput").val() as string;
   filterout = Misc.escapeRegExp(filterout.trim());
   filterout = filterout.replace(/\s+/gi, "|");
   const regexcl = new RegExp(filterout, "i");
@@ -237,8 +214,8 @@ async function filter(language: string): Promise<string[]> {
     return [];
   }
 
-  const maxLengthInput = $("#wordFilterPopup .wordMaxInput").val() as string;
-  const minLengthInput = $("#wordFilterPopup .wordMinInput").val() as string;
+  const maxLengthInput = $("#wordFilterModal .wordMaxInput").val() as string;
+  const minLengthInput = $("#wordFilterModal .wordMinInput").val() as string;
   let maxLength;
   let minLength;
   if (maxLengthInput === "") {
@@ -266,7 +243,7 @@ async function filter(language: string): Promise<string[]> {
 }
 
 async function apply(set: boolean): Promise<void> {
-  const language = $("#wordFilterPopup .languageInput").val() as string;
+  const language = $("#wordFilterModal .languageInput").val() as string;
   const filteredWords = await filter(language);
 
   if (filteredWords.length === 0) {
@@ -283,49 +260,65 @@ async function apply(set: boolean): Promise<void> {
   hide(true);
 }
 
-$("#wordFilterPopupWrapper").on("mousedown", (e) => {
-  if ($(e.target).attr("id") === "wordFilterPopupWrapper") {
-    hide(true);
+function disableButtons(): void {
+  for (const button of modal.getModal().querySelectorAll("button")) {
+    button.setAttribute("disabled", "true");
   }
-});
+}
 
-$("#wordFilterPopupWrapper .button.addButton").on("mousedown", () => {
-  $("#wordFilterPopupWrapper .loadingIndicator").removeClass("hidden");
-  $("#wordFilterPopupWrapper .button").addClass("hidden");
-  void apply(false);
-});
+function enableButtons(): void {
+  for (const button of modal.getModal().querySelectorAll("button")) {
+    button.removeAttribute("disabled");
+  }
+}
 
-$("#wordFilterPopupWrapper .button.setButton").on("mousedown", () => {
-  $("#wordFilterPopupWrapper .loadingIndicator").removeClass("hidden");
-  $("#wordFilterPopupWrapper .button").addClass("hidden");
-  void apply(true);
-});
+async function setup(): Promise<void> {
+  await initSelectOptions();
 
-$("#wordFilterPopup .button.generateButton").on("click", async () => {
-  const presetName = $("#wordFilterPopup .presetInput").val() as string;
-  const layoutName = $("#wordFilterPopup .layoutInput").val() as string;
+  $("#wordFilterModal button.generateButton").on("click", async () => {
+    const presetName = $("#wordFilterModal .presetInput").val() as string;
+    const layoutName = $("#wordFilterModal .layoutInput").val() as string;
 
-  const presetToApply = presets[presetName];
+    const presetToApply = presets[presetName];
 
-  if (presetToApply === undefined) {
-    Notifications.add(`Preset ${presetName} not found`, -1);
-    return;
-  }
+    if (presetToApply === undefined) {
+      Notifications.add(`Preset ${presetName} not found`, -1);
+      return;
+    }
 
-  const layout = await Misc.getLayout(layoutName);
+    const layout = await Misc.getLayout(layoutName);
 
-  $("#wordIncludeInput").val(
-    presetToApply
-      .getIncludeString(layout)
-      .map((x) => x[0])
-      .join(" ")
-  );
-  $("#wordExcludeInput").val(
-    presetToApply
-      .getExcludeString(layout)
-      .map((x) => x[0])
-      .join(" ")
-  );
-});
+    $("#wordIncludeInput").val(
+      presetToApply
+        .getIncludeString(layout)
+        .map((x) => x[0])
+        .join(" ")
+    );
+    $("#wordExcludeInput").val(
+      presetToApply
+        .getExcludeString(layout)
+        .map((x) => x[0])
+        .join(" ")
+    );
+  });
+  $("#wordFilterModal button.addButton").on("click", () => {
+    $("#wordFilterModal .loadingIndicator").removeClass("hidden");
+    disableButtons();
+    setTimeout(() => {
+      void apply(false);
+    }, 0);
+  });
+
+  $("#wordFilterModal button.setButton").on("click", () => {
+    $("#wordFilterModal .loadingIndicator").removeClass("hidden");
+    disableButtons();
+    setTimeout(() => {
+      void apply(true);
+    }, 0);
+  });
+}
 
-Skeleton.save(wrapperId);
+const modal = new AnimatedModal({
+  dialogId: "wordFilterModal",
+  setup,
+});
diff --git a/frontend/src/ts/popups/custom-text-popup.ts b/frontend/src/ts/popups/custom-text-popup.ts
index 8993556125ae..f795ff3e4bf8 100644
--- a/frontend/src/ts/popups/custom-text-popup.ts
+++ b/frontend/src/ts/popups/custom-text-popup.ts
@@ -5,7 +5,7 @@ import * as TestLogic from "../test/test-logic";
 import * as ChallengeController from "../controllers/challenge-controller";
 import Config, * as UpdateConfig from "../config";
 import * as Misc from "../utils/misc";
-import * as WordFilterPopup from "./word-filter-popup";
+import * as WordFilterPopup from "../modals/word-filter";
 import * as Notifications from "../elements/notifications";
 import * as SavedTextsPopup from "./saved-texts-popup";
 import * as SaveCustomTextPopup from "./save-custom-text-popup";
@@ -375,9 +375,8 @@ $(document).on("keydown", (event) => {
 
 $("#popups").on("click", `${popup} .wordfilter`, () => {
   hide({ noAnim: true, resetState: false });
-  void WordFilterPopup.show(true, () => {
-    show(true);
-  });
+  //todo use modal chain
+  void WordFilterPopup.show();
 });
 
 $(`${popup} .buttonsTop .showSavedTexts`).on("click", () => {