refactor: custom text modal rework (#5278)

* start work on saved texts popup * passing options through, async fill to not block animation * handle apply * custom text modal start * full save custom text modal refactor * remove import * full finish on saved texts modal * fill when chain re-shows it * fix issues where opening chains within chains would show two modals * extract type * add support for passing data between modals * dont leave the popup if no words were found * use modalchaindata instead of setting popup state directly * handling set and append modes in chain data * move tab insertion code into the custom text modal file * use chain data instead of state module * move event handlers to a different file / to the setup function * move file * rename file * rename id * remove unused line * add generics to incoming and outgoing modal chain data * rework the way custom text textarea is handled * update long custom text warning * remove variable * remember to update the state
monkeytypegame · Apr 5, 2024 · ff7816a · ff7816a
1 parent 3cbf0bd
commit ff7816a
Show file tree

Hide file tree

Showing 21 changed files with 826 additions and 885 deletions.
diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
@@ -367,8 +367,8 @@
     <div class="button">ok</div>
   </div>
 </dialog>
-<div id="customTextPopupWrapper" class="popupWrapper hidden">
-  <div id="customTextPopup" action="">
+<dialog id="customTextModal" class="modalWrapper hidden">
+  <div class="modal" action="">
     <div class="buttonsTop">
       <div class="button saveCustomText">
         <i class="fas fa-save"></i>
@@ -394,10 +394,15 @@
     </div>
     <div class="textAreaWrapper" style="position: relative">
       <div class="longCustomTextWarning">
-        <div class="textAndButton">
-          A long custom text is currently loaded. Editing the text will disable
-          progress tracking.
-          <div class="button">Got it</div>
+        <div>
+          <p>
+            A long custom text is currently loaded.
+            <br />
+            Editing the text will disable progress tracking.
+            <br />
+            <br />
+          </p>
+          <p class="small">Click anywhere to start editing the text.</p>
         </div>
       </div>
       <textarea class="textarea"></textarea>
@@ -466,17 +471,17 @@
     </div>
     <div class="button apply">ok</div>
   </div>
-</div>
-<div id="savedTextsPopupWrapper" class="popupWrapper hidden">
-  <div id="savedTextsPopup">
+</dialog>
+<dialog id="savedTextsModal" class="modalWrapper hidden">
+  <div class="modal">
     <div class="title">Saved texts</div>
     <div class="list"></div>
     <div class="title">Saved long texts</div>
     <div class="listLong"></div>
   </div>
-</div>
-<div id="saveCustomTextPopupWrapper" class="popupWrapper hidden">
-  <div id="saveCustomTextPopup">
+</dialog>
+<dialog id="saveCustomTextModal" class="modalWrapper hidden">
+  <form class="modal">
     <div class="title">Save custom text</div>
     <input class="textName" type="text" placeholder="name" />
     <div>
@@ -490,9 +495,9 @@
         </div>
       </label>
     </div>
-    <div class="button save">save</div>
-  </div>
-</div>
+    <button class="save">save</button>
+  </form>
+</dialog>
 <dialog id="wordFilterModal" class="modalWrapper hidden">
   <div class="modal">
     <!-- hidden for now, dunno where to place it -->

diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
@@ -50,16 +50,9 @@
   }
 }
 
-#customTextPopupWrapper {
-  #customTextPopup {
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
-    gap: 1rem;
+#customTextModal {
+  .modal {
     max-width: 1200px;
-    max-height: 100%;
-    overflow-y: auto;
     grid-template-areas:
       "topButtons topButtons topButtons"
       "textArea textArea checkboxes"
@@ -108,7 +101,8 @@
     }
 
     .longCustomTextWarning {
-      background: rgba(0, 0, 0, 0.9);
+      // background: rgba(0, 0, 0, 0.5);
+      background: var(--sub-alt-color);
       position: absolute;
       left: 0;
       right: 0;
@@ -117,12 +111,16 @@
       display: grid;
       place-items: center center;
       border-radius: var(--roundness);
-      .textAndButton {
-        width: 80%;
-        max-width: 20rem;
-        text-align: center;
-        display: grid;
-        gap: 1rem;
+      text-align: center;
+      height: 100%;
+      align-items: center;
+      p {
+        font-size: 1.25em;
+        margin: 0;
+      }
+      p.small {
+        font-size: 0.75em;
+        color: var(--sub-color);
       }
     }
 
@@ -196,23 +194,9 @@
   }
 }
 
-#savedTextsPopupWrapper {
-  #savedTextsPopup {
-    color: var(--sub-color);
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
-    gap: 1rem;
-    width: 400px;
-    max-height: 80vh;
-    overflow: auto;
-
-    .title {
-      font-size: 1.5rem;
-      color: var(--sub-color);
-    }
-
+#savedTextsModal {
+  .modal {
+    max-width: 500px;
     .list {
       display: grid;
       gap: 1rem;
@@ -229,10 +213,10 @@
     .listLong {
       display: grid;
       gap: 1rem;
-      .savedText {
+      .savedLongText {
         display: grid;
         gap: 0.5rem;
-        grid-template-columns: 2fr 1fr 3rem;
+        grid-template-columns: 2fr auto auto;
         .button .fas {
           pointer-events: none;
         }
@@ -241,21 +225,9 @@
   }
 }
 
-#saveCustomTextPopupWrapper {
-  #saveCustomTextPopup {
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
-    gap: 1rem;
-    width: 400px;
-    max-height: 80vh;
-    overflow: auto;
-
-    .title {
-      font-size: 1.5rem;
-      color: var(--sub-color);
-    }
+#saveCustomTextModal {
+  .modal {
+    max-width: 400px;
   }
 }
 

diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
@@ -39,9 +39,9 @@
   #app {
     grid-template-columns: auto;
   }
-  #customTextPopupWrapper {
+  #customTextModal {
     padding: 2rem;
-    #customTextPopup {
+    .modal {
       grid-template-columns: 1fr 1fr 2fr;
       width: 100%;
     }
@@ -57,7 +57,7 @@
       }
     }
   }
-  #customTextPopupWrapper #customTextPopup .buttonsTop {
+  #customTextModal .modal .buttonsTop {
     grid-template-columns: 1fr 1fr;
   }
 }
@@ -153,7 +153,7 @@
 
 //900px
 @media only screen and (max-width: 56.25rem) {
-  #customTextPopupWrapper #customTextPopup {
+  #customTextModal .modal {
     grid-template-areas:
       "topButtons topButtons topButtons"
       "textArea textArea textArea"
@@ -390,7 +390,7 @@
     }
   }
 
-  #customTextPopupWrapper #customTextPopup {
+  #customTextModal .modal {
     .buttonsTop {
       grid-template-columns: 1fr;
     }

diff --git a/frontend/src/ts/commandline/lists.ts b/frontend/src/ts/commandline/lists.ts
@@ -94,7 +94,7 @@ import Config, * as UpdateConfig from "../config";
 import * as Misc from "../utils/misc";
 import * as JSONData from "../utils/json-data";
 import { randomizeTheme } from "../controllers/theme-controller";
-import * as CustomTextPopup from "../popups/custom-text-popup";
+import * as CustomTextPopup from "../modals/custom-text";
 import * as Settings from "../pages/settings";
 import * as Notifications from "../elements/notifications";
 import * as VideoAdPopup from "../popups/video-ad-popup";

diff --git a/frontend/src/ts/controllers/challenge-controller.ts b/frontend/src/ts/controllers/challenge-controller.ts
@@ -249,7 +249,6 @@ export async function setup(challengeName: string): Promise<boolean> {
       UpdateConfig.setDifficulty("normal", true);
     } else if (challenge.type === "customText") {
       CustomText.setDelimiter(" ");
-      CustomText.setPopupTextareaState(challenge.parameters[0] as string, true);
       CustomText.setText((challenge.parameters[0] as string).split(" "));
       CustomText.setIsTimeRandom(false);
       CustomText.setIsSectionRandom(false);
@@ -270,7 +269,6 @@ export async function setup(challengeName: string): Promise<boolean> {
       text = text.replace(/[\n\r\t ]/gm, " ");
       text = text.replace(/ +/gm, " ");
       CustomText.setDelimiter(" ");
-      CustomText.setPopupTextareaState(text, true);
       CustomText.setText(text.split(" "));
       CustomText.setIsWordRandom(false);
       CustomText.setIsSectionRandom(false);

diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts
@@ -770,27 +770,6 @@ function handleTab(event: JQuery.KeyDownEvent, popupVisible: boolean): void {
     return;
   }
 
-  //special case for inserting tab characters into the textarea
-  if ($("#customTextPopup .textarea").is(":focus")) {
-    event.preventDefault();
-
-    const area = $("#customTextPopup .textarea")[0] as HTMLTextAreaElement;
-
-    const start: number = area.selectionStart;
-    const end: number = area.selectionEnd;
-
-    // set textarea value to: text before caret + tab + text after caret
-    area.value =
-      area.value.substring(0, start) + "\t" + area.value.substring(end);
-
-    // put caret at right position again
-    area.selectionStart = area.selectionEnd = start + 1;
-
-    CustomText.setPopupTextareaState(area.value);
-
-    return;
-  }
-
   let shouldInsertTabCharacter = false;
 
   if (

diff --git a/frontend/src/ts/event-handlers/test.ts b/frontend/src/ts/event-handlers/test.ts
@@ -9,6 +9,7 @@ import * as Notifications from "../elements/notifications";
 import * as QuoteRateModal from "../modals/quote-rate";
 import * as QuoteReportModal from "../modals/quote-report";
 import * as QuoteSearchModal from "../modals/quote-search";
+import * as CustomTextModal from "../modals/custom-text";
 
 $(".pageTest").on("click", "#testModesNotice .textButton", async (event) => {
   const attr = $(event.currentTarget).attr("commands");
@@ -69,3 +70,7 @@ $(".pageTest").on("click", "#testConfig .quoteLength .textButton", (e) => {
     void QuoteSearchModal.show();
   }
 });
+
+$(".pageTest").on("click", "#testConfig .customText .textButton", () => {
+  CustomTextModal.show();
+});