refactor(pb modal): use new modal system

frontend/src/html/popups.html

@@ -232,9 +232,8 @@
   </div>
 </div>
 
-<div id="pbTablesPopupWrapper" class="popupWrapper hidden">
-  <div id="pbTablesPopup">
-    <!-- <div class="title">All words personal bests</div> -->
+<dialog id="pbTablesModal" class="modalWrapper hidden">
+  <div class="modal">
     <table>
       <thead>
         <tr>
@@ -260,7 +259,7 @@
       <tbody></tbody>
     </table>
   </div>
-</div>
+</dialog>
 
 <div id="practiseWordsPopupWrapper" class="popupWrapper hidden" tabindex="-1">
   <div id="practiseWordsPopup" action="">

frontend/src/styles/popups.scss

@@ -514,11 +514,9 @@
 }
 
 #customTestDurationPopupWrapper,
-#practiseWordsPopupWrapper,
-#pbTablesPopupWrapper {
+#practiseWordsPopupWrapper {
   #customTestDurationPopup,
-  #practiseWordsPopup,
-  #pbTablesPopup {
+  #practiseWordsPopup {
     background: var(--bg-color);
     border-radius: var(--roundness);
     padding: 2rem;
@@ -724,54 +722,52 @@
   }
 }
 
-#pbTablesPopupWrapper #pbTablesPopup {
-  .title {
-    color: var(--text-color);
-  }
-  width: 100%;
-  max-height: calc(100vh - 10rem);
-  overflow-y: scroll;
-  table {
-    border-spacing: 0;
-    border-collapse: collapse;
-    color: var(--text-color);
+#pbTablesModal {
+  .modal {
+    max-width: 100%;
+    overflow-y: scroll;
+    table {
+      border-spacing: 0;
+      border-collapse: collapse;
+      color: var(--text-color);
 
-    td {
-      padding: 0.5rem 0.5rem;
-    }
-
-    thead {
-      color: var(--sub-color);
-      font-size: 0.75rem;
-    }
-
-    tbody tr:nth-child(odd) td {
-      background: var(--sub-alt-color);
-    }
-
-    td.infoIcons span {
-      margin: 0 0.1rem;
-    }
-    .miniResultChartButton {
-      opacity: 0.25;
-      transition: 0.25s;
-      cursor: pointer;
-      &:hover {
-        opacity: 1;
+      td {
+        padding: 0.5rem 0.5rem;
+      }
+
+      thead {
+        color: var(--sub-color);
+        font-size: 0.75rem;
+      }
+
+      tbody tr:nth-child(odd) td {
+        background: var(--sub-alt-color);
+      }
+
+      td.infoIcons span {
+        margin: 0 0.1rem;
+      }
+      .miniResultChartButton {
+        opacity: 0.25;
+        transition: 0.25s;
+        cursor: pointer;
+        &:hover {
+          opacity: 1;
+        }
+      }
+      .sub {
+        opacity: 0.5;
+      }
+      td {
+        text-align: right;
+      }
+      td:nth-child(6),
+      td:nth-child(7) {
+        text-align: center;
+      }
+      tbody td:nth-child(1) {
+        font-size: 1.5rem;
       }
-    }
-    .sub {
-      opacity: 0.5;
-    }
-    td {
-      text-align: right;
-    }
-    td:nth-child(6),
-    td:nth-child(7) {
-      text-align: center;
-    }
-    tbody td:nth-child(1) {
-      font-size: 1.5rem;
     }
   }
 }

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

@@ -0,0 +1,11 @@
+import * as PbTablesModal from "../modals/pb-tables";
+
+const accountPage = document.querySelector("#pageAccount") as HTMLElement;
+
+$(accountPage).on("click", ".pbsTime .showAllButton", () => {
+  PbTablesModal.show("time");
+});
+
+$(accountPage).on("click", ".pbsWords .showAllButton", () => {
+  PbTablesModal.show("words");
+});

frontend/src/ts/index.ts

@@ -8,6 +8,7 @@ import "./event-handlers/keymap";
 import "./event-handlers/test";
 import "./event-handlers/about";
 import "./event-handlers/settings";
+import "./event-handlers/account";
 
 import "./firebase";
 import * as Logger from "./utils/logger";
@@ -23,13 +24,11 @@ import "./controllers/account-controller";
 import { enable } from "./states/glarses-mode";
 import "./test/caps-warning";
 import "./popups/edit-preset-popup";
-import "./modals/streak-hour-offset";
 import "./popups/simple-popups";
 import "./controllers/input-controller";
 import "./ready";
 import "./controllers/route-controller";
 import "./pages/about";
-import "./popups/pb-tables-popup";
 import "./elements/scroll-to-top";
 import "./popups/mobile-test-config-popup";
 import "./popups/edit-tags-popup";

frontend/src/ts/modals/pb-tables.ts

@@ -1,22 +1,23 @@
 import * as DB from "../db";
 import format from "date-fns/format";
-import * as Skeleton from "../utils/skeleton";
-import { getLanguageDisplayString, isPopupVisible } from "../utils/misc";
+import { getLanguageDisplayString } from "../utils/misc";
 import Config from "../config";
 import Format from "../utils/format";
+import AnimatedModal from "../utils/animated-modal";
 
 type PersonalBest = {
   mode2: SharedTypes.Config.Mode2<SharedTypes.Config.Mode>;
 } & SharedTypes.PersonalBest;
 
-const wrapperId = "pbTablesPopupWrapper";
-
 function update(mode: SharedTypes.Config.Mode): void {
-  $("#pbTablesPopup table tbody").empty();
-  $($("#pbTablesPopup table thead tr td")[0] as HTMLElement).text(mode);
-  $($("#pbTablesPopup table thead tr td span.unit")[0] as HTMLElement).text(
-    Config.typingSpeedUnit
-  );
+  const modalEl = modal.getModal();
+
+  (modalEl.querySelector("table tbody") as HTMLElement).innerHTML = "";
+  (modalEl.querySelector("table thead tr td") as HTMLElement).textContent =
+    mode;
+  (
+    modalEl.querySelector("table thead tr td span.unit") as HTMLElement
+  ).textContent = Config.typingSpeedUnit;
 
   const snapshot = DB.getSnapshot();
   if (!snapshot) return;
@@ -34,10 +35,6 @@ function update(mode: SharedTypes.Config.Mode): void {
     let pbs = allmode2[key] ?? [];
     pbs = pbs.sort(function (a, b) {
       return b.wpm - a.wpm;
-      // if (a.difficulty === b.difficulty) {
-      //   return (a.language < b.language ? -1 : 1);
-      // }
-      // return (a.difficulty < b.difficulty ? -1 : 1)
     });
     pbs.forEach(function (pb) {
       pb.mode2 = key;
@@ -57,7 +54,9 @@ function update(mode: SharedTypes.Config.Mode): void {
         format(date, "HH:mm") +
         "</div>";
     }
-    $("#pbTablesPopup table tbody").append(`
+    modalEl.querySelector("table tbody")?.insertAdjacentHTML(
+      `beforeend`,
+      `
       <tr>
         <td>${mode2memory === pb.mode2 ? "" : pb.mode2}</td>
         <td>
@@ -77,64 +76,18 @@ function update(mode: SharedTypes.Config.Mode): void {
         <td>${pb.lazyMode ? '<i class="fas fa-check"></i>' : ""}</td>
         <td>${dateText}</td>
       </tr>
-    `);
+    `
+    );
     mode2memory = pb.mode2;
   });
 }
 
-function show(mode: SharedTypes.Config.Mode): void {
-  Skeleton.append(wrapperId, "popups");
-  if (!isPopupVisible(wrapperId)) {
-    update(mode);
-
-    $("#pbTablesPopup .title").text(`All ${mode} personal bests`);
-
-    $("#pbTablesPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 0)
-      .removeClass("hidden")
-      .animate({ opacity: 1 }, 125);
-  }
+export function show(mode: SharedTypes.Config.Mode): void {
+  void modal.show({
+    beforeAnimation: async () => {
+      update(mode);
+    },
+  });
 }
 
-function hide(): void {
-  if (isPopupVisible(wrapperId)) {
-    $("#pbTablesPopupWrapper")
-      .stop(true, true)
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        125,
-        () => {
-          $("#pbTablesPopupWrapper").addClass("hidden");
-          $("#pbTablesPopup table tbody").empty();
-          Skeleton.remove(wrapperId);
-        }
-      );
-  }
-}
-
-$("#pbTablesPopupWrapper").on("click", (e) => {
-  if ($(e.target).attr("id") === "pbTablesPopupWrapper") {
-    hide();
-  }
-});
-
-$(".pageAccount .profile").on("click", ".pbsTime .showAllButton", () => {
-  show("time");
-});
-
-$(".pageAccount .profile").on("click", ".pbsWords .showAllButton", () => {
-  show("words");
-});
-
-$(document).on("keydown", (event) => {
-  if (event.key === "Escape" && isPopupVisible(wrapperId)) {
-    hide();
-    event.preventDefault();
-  }
-});
-
-Skeleton.save(wrapperId);
+const modal = new AnimatedModal("pbTablesModal", "popups", undefined);