refactor(edit presets): use new modal system

frontend/src/html/popups.html

@@ -825,19 +825,18 @@
     <div class="button confirmButton"><i class="fas fa-check"></i></div>
   </div>
 </div>
-<div id="presetWrapper" class="popupWrapper hidden" tabindex="-1">
-  <div id="presetEdit" action="" presetid="">
-    <form>
-      <div class="title"></div>
-      <input type="text" class="text" title="presets" />
-      <label class="checkbox">
-        <input type="checkbox" />
-        Change preset to current settings
-      </label>
-      <button type="submit">add</button>
-    </form>
-  </div>
-</div>
+<dialog id="editPresetModal" class="modalWrapper hidden">
+  <form class="modal">
+    <div class="title"></div>
+    <input type="text" title="presets" />
+    <label class="checkbox">
+      <input type="checkbox" />
+      Change preset to current settings
+    </label>
+    <div class="text"></div>
+    <button type="submit">add</button>
+  </form>
+</dialog>
 <dialog id="shareCustomThemeModal" class="modalWrapper hidden">
   <div class="modal">
     <div class="title">Share custom theme</div>

frontend/src/styles/popups.scss

@@ -1488,18 +1488,13 @@
   }
 }
 
-#presetWrapper {
-  #presetEdit {
+#editPresetModal {
+  .modal {
+    max-width: 450px;
     .title {
       font-size: 1.5rem;
       color: var(--sub-color);
     }
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
-    gap: 1rem;
-    overflow-y: scroll;
   }
 }
 

frontend/src/ts/commandline/lists/presets.ts

@@ -2,7 +2,7 @@ import * as DB from "../../db";
 import * as ModesNotice from "../../elements/modes-notice";
 import * as Settings from "../../pages/settings";
 import * as PresetController from "../../controllers/preset-controller";
-import * as EditPresetPopup from "../../popups/edit-preset-popup";
+import * as EditPresetPopup from "../../modals/edit-preset";
 import { isAuthenticated } from "../../firebase";
 
 const subgroup: MonkeyTypes.CommandsSubgroup = {

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

@@ -1,6 +1,9 @@
 import * as ShareCustomThemeModal from "../modals/share-custom-theme";
 import * as CookiesModal from "../modals/cookies";
 import * as StreakHourOffsetModal from "../modals/streak-hour-offset";
+import * as EditPresetPopup from "../modals/edit-preset";
+
+import * as Notifications from "../elements/notifications";
 
 const settingsPage = document.querySelector("#pageSettings");
 
@@ -21,3 +24,48 @@ settingsPage
   ?.addEventListener("click", () => {
     StreakHourOffsetModal.show();
   });
+
+settingsPage
+  ?.querySelector(".section.presets")
+  ?.addEventListener("click", (e) => {
+    const target = e.target as HTMLElement;
+    if (target.classList.contains("addPresetButton")) {
+      EditPresetPopup.show("add");
+    } else if (target.classList.contains("editButton")) {
+      const presetid = target.parentElement?.getAttribute("data-id");
+      const name = target.parentElement?.getAttribute("data-name");
+      if (
+        presetid === undefined ||
+        name === undefined ||
+        presetid === "" ||
+        name === "" ||
+        presetid === null ||
+        name === null
+      ) {
+        Notifications.add(
+          "Failed to edit preset: Could not find preset id or name",
+          -1
+        );
+        return;
+      }
+      EditPresetPopup.show("edit", presetid, name);
+    } else if (target.classList.contains("removeButton")) {
+      const presetid = target.parentElement?.getAttribute("data-id");
+      const name = target.parentElement?.getAttribute("data-name");
+      if (
+        presetid === undefined ||
+        name === undefined ||
+        presetid === "" ||
+        name === "" ||
+        presetid === null ||
+        name === null
+      ) {
+        Notifications.add(
+          "Failed to remove preset: Could not find preset id or name",
+          -1
+        );
+        return;
+      }
+      EditPresetPopup.show("remove", presetid, name);
+    }
+  });

frontend/src/ts/index.ts

@@ -23,7 +23,6 @@ import * as Result from "./test/result";
 import "./controllers/account-controller";
 import { enable } from "./states/glarses-mode";
 import "./test/caps-warning";
-import "./popups/edit-preset-popup";
 import "./popups/simple-popups";
 import "./controllers/input-controller";
 import "./ready";

frontend/src/ts/modals/edit-preset.ts

@@ -0,0 +1,162 @@
+import Ape from "../ape";
+import * as DB from "../db";
+import * as Config from "../config";
+import * as Loader from "../elements/loader";
+import * as Settings from "../pages/settings";
+import * as Notifications from "../elements/notifications";
+import * as ConnectionState from "../states/connection";
+import AnimatedModal from "../utils/animated-modal";
+
+export function show(action: string, id?: string, name?: string): void {
+  if (!ConnectionState.get()) {
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
+    return;
+  }
+
+  void modal.show({
+    focusFirstInput: true,
+    beforeAnimation: async () => {
+      $("#editPresetModal .modal .text").addClass("hidden");
+      if (action === "add") {
+        $("#editPresetModal .modal").attr("data-action", "add");
+        $("#editPresetModal .modal .title").html("Add new preset");
+        $("#editPresetModal .modal button").html(`add`);
+        $("#editPresetModal .modal input").val("");
+        $("#editPresetModal .modal input").removeClass("hidden");
+        $("#editPresetModal .modal label").addClass("hidden");
+      } else if (action === "edit" && id !== undefined && name !== undefined) {
+        $("#editPresetModal .modal").attr("data-action", "edit");
+        $("#editPresetModal .modal").attr("data-preset-id", id);
+        $("#editPresetModal .modal .title").html("Edit preset");
+        $("#editPresetModal .modal button").html(`save`);
+        $("#editPresetModal .modal input").val(name);
+        $("#editPresetModal .modal input").removeClass("hidden");
+        $("#editPresetModal .modal label input").prop("checked", false);
+        $("#editPresetModal .modal label").removeClass("hidden");
+      } else if (
+        action === "remove" &&
+        id !== undefined &&
+        name !== undefined
+      ) {
+        $("#editPresetModal .modal").attr("data-action", "remove");
+        $("#editPresetModal .modal").attr("data-preset-id", id);
+        $("#editPresetModal .modal .title").html("Delete preset");
+        $("#editPresetModal .modal button").html("delete");
+        $("#editPresetModal .modal input").addClass("hidden");
+        $("#editPresetModal .modal label").addClass("hidden");
+        $("#editPresetModal .modal .text").removeClass("hidden");
+        $("#editPresetModal .modal .text").text(
+          `Are you sure you want to delete the preset ${name}?`
+        );
+      }
+    },
+  });
+}
+
+function hide(): void {
+  void modal.hide();
+}
+
+async function apply(): Promise<void> {
+  const action = $("#editPresetModal .modal").attr("data-action");
+  const propPresetName = $("#editPresetModal .modal input").val() as string;
+  const presetName = propPresetName.replaceAll(" ", "_");
+  const presetId = $("#editPresetModal .modal").attr(
+    "data-preset-id"
+  ) as string;
+
+  const updateConfig: boolean = $("#editPresetModal .modal label input").prop(
+    "checked"
+  );
+
+  let configChanges: MonkeyTypes.ConfigChanges = {};
+
+  if ((updateConfig && action === "edit") || action === "add") {
+    configChanges = Config.getConfigChanges();
+
+    const tags = DB.getSnapshot()?.tags ?? [];
+
+    const activeTagIds: string[] = tags
+      .filter((tag: MonkeyTypes.UserTag) => tag.active)
+      .map((tag: MonkeyTypes.UserTag) => tag._id);
+    configChanges.tags = activeTagIds;
+  }
+
+  const snapshotPresets = DB.getSnapshot()?.presets ?? [];
+
+  hide();
+
+  Loader.show();
+
+  if (action === "add") {
+    const response = await Ape.presets.add(presetName, configChanges);
+
+    if (response.status !== 200 || response.data === null) {
+      Notifications.add(
+        "Failed to add preset: " +
+          response.message.replace(presetName, propPresetName),
+        -1
+      );
+    } else {
+      Notifications.add("Preset added", 1, {
+        duration: 2,
+      });
+      snapshotPresets.push({
+        name: presetName,
+        config: configChanges,
+        display: propPresetName,
+        _id: response.data.presetId,
+      } as MonkeyTypes.SnapshotPreset);
+    }
+  } else if (action === "edit") {
+    const response = await Ape.presets.edit(
+      presetId,
+      presetName,
+      configChanges
+    );
+
+    if (response.status !== 200) {
+      Notifications.add("Failed to edit preset: " + response.message, -1);
+    } else {
+      Notifications.add("Preset updated", 1);
+      const preset = snapshotPresets.filter(
+        (preset: MonkeyTypes.SnapshotPreset) => preset._id === presetId
+      )[0] as MonkeyTypes.SnapshotPreset;
+      preset.name = presetName;
+      preset.display = presetName.replace(/_/g, " ");
+      if (updateConfig) {
+        preset.config = configChanges;
+      }
+    }
+  } else if (action === "remove") {
+    const response = await Ape.presets.delete(presetId);
+
+    if (response.status !== 200) {
+      Notifications.add("Failed to remove preset: " + response.message, -1);
+    } else {
+      Notifications.add("Preset removed", 1);
+      snapshotPresets.forEach(
+        (preset: MonkeyTypes.SnapshotPreset, index: number) => {
+          if (preset._id === presetId) {
+            snapshotPresets.splice(index, 1);
+          }
+        }
+      );
+    }
+  }
+
+  void Settings.update();
+  Loader.hide();
+}
+
+const modal = new AnimatedModal({
+  dialogId: "editPresetModal",
+  setup: (modalEl): void => {
+    modalEl.addEventListener("submit", (e) => {
+      e.preventDefault();
+      void apply();
+    });
+  },
+});

frontend/src/ts/popups/edit-preset-popup.ts

@@ -1,207 +0,0 @@
-import Ape from "../ape";
-import * as DB from "../db";
-import * as Config from "../config";
-import * as Loader from "../elements/loader";
-import * as Settings from "../pages/settings";
-import * as Notifications from "../elements/notifications";
-import * as ConnectionState from "../states/connection";
-import * as Skeleton from "../utils/skeleton";
-import { isPopupVisible } from "../utils/misc";
-
-const wrapperId = "presetWrapper";
-
-export function show(action: string, id?: string, name?: string): void {
-  if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, {
-      duration: 2,
-    });
-    return;
-  }
-  Skeleton.append(wrapperId, "popups");
-
-  if (action === "add") {
-    $("#presetWrapper #presetEdit").attr("action", "add");
-    $("#presetWrapper #presetEdit .title").html("Add new preset");
-    $("#presetWrapper #presetEdit button").html(`add`);
-    $("#presetWrapper #presetEdit input.text").val("");
-    $("#presetWrapper #presetEdit input.text").removeClass("hidden");
-    $("#presetWrapper #presetEdit label").addClass("hidden");
-  } else if (action === "edit" && id !== undefined && name !== undefined) {
-    $("#presetWrapper #presetEdit").attr("action", "edit");
-    $("#presetWrapper #presetEdit").attr("presetid", id);
-    $("#presetWrapper #presetEdit .title").html("Edit preset");
-    $("#presetWrapper #presetEdit button").html(`save`);
-    $("#presetWrapper #presetEdit input.text").val(name);
-    $("#presetWrapper #presetEdit input.text").removeClass("hidden");
-    $("#presetWrapper #presetEdit label input").prop("checked", false);
-    $("#presetWrapper #presetEdit label").removeClass("hidden");
-  } else if (action === "remove" && id !== undefined && name !== undefined) {
-    $("#presetWrapper #presetEdit").attr("action", "remove");
-    $("#presetWrapper #presetEdit").attr("presetid", id);
-    $("#presetWrapper #presetEdit .title").html("Delete preset " + name);
-    $("#presetWrapper #presetEdit button").html("Delete");
-    $("#presetWrapper #presetEdit input.text").addClass("hidden");
-    $("#presetWrapper #presetEdit label").addClass("hidden");
-  }
-
-  if (!isPopupVisible(wrapperId)) {
-    $("#presetWrapper")
-      .stop(true, true)
-      .css("opacity", 0)
-      .removeClass("hidden")
-      .animate({ opacity: 1 }, 125, () => {
-        const input = $("#presetWrapper #presetEdit input");
-        if (!input.hasClass("hidden")) {
-          $("#presetWrapper #presetEdit input").trigger("focus");
-        } else {
-          $("#presetWrapper").trigger("focus");
-        }
-      });
-  }
-}
-
-function hide(): void {
-  if (isPopupVisible(wrapperId)) {
-    $("#presetWrapper #presetEdit").attr("action", "");
-    $("#presetWrapper #presetEdit").attr("tagid", "");
-    $("#presetWrapper")
-      .stop(true, true)
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        125,
-        () => {
-          $("#presetWrapper").addClass("hidden");
-          Skeleton.remove(wrapperId);
-        }
-      );
-  }
-}
-
-async function apply(): Promise<void> {
-  const action = $("#presetWrapper #presetEdit").attr("action");
-  const propPresetName = $("#presetWrapper #presetEdit input").val() as string;
-  const presetName = propPresetName.replaceAll(" ", "_");
-  const presetId = $("#presetWrapper #presetEdit").attr("presetId") as string;
-
-  const updateConfig: boolean = $(
-    "#presetWrapper #presetEdit label input"
-  ).prop("checked");
-
-  let configChanges: MonkeyTypes.ConfigChanges = {};
-
-  if ((updateConfig && action === "edit") || action === "add") {
-    configChanges = Config.getConfigChanges();
-
-    const tags = DB.getSnapshot()?.tags ?? [];
-
-    const activeTagIds: string[] = tags
-      .filter((tag: MonkeyTypes.UserTag) => tag.active)
-      .map((tag: MonkeyTypes.UserTag) => tag._id);
-    configChanges.tags = activeTagIds;
-  }
-
-  const snapshotPresets = DB.getSnapshot()?.presets ?? [];
-
-  hide();
-
-  Loader.show();
-
-  if (action === "add") {
-    const response = await Ape.presets.add(presetName, configChanges);
-
-    if (response.status !== 200 || response.data === null) {
-      Notifications.add(
-        "Failed to add preset: " +
-          response.message.replace(presetName, propPresetName),
-        -1
-      );
-    } else {
-      Notifications.add("Preset added", 1, {
-        duration: 2,
-      });
-      snapshotPresets.push({
-        name: presetName,
-        config: configChanges,
-        display: propPresetName,
-        _id: response.data.presetId,
-      } as MonkeyTypes.SnapshotPreset);
-    }
-  } else if (action === "edit") {
-    const response = await Ape.presets.edit(
-      presetId,
-      presetName,
-      configChanges
-    );
-
-    if (response.status !== 200) {
-      Notifications.add("Failed to edit preset: " + response.message, -1);
-    } else {
-      Notifications.add("Preset updated", 1);
-      const preset = snapshotPresets.filter(
-        (preset: MonkeyTypes.SnapshotPreset) => preset._id === presetId
-      )[0] as MonkeyTypes.SnapshotPreset;
-      preset.name = presetName;
-      preset.display = presetName.replace(/_/g, " ");
-      if (updateConfig) {
-        preset.config = configChanges;
-      }
-    }
-  } else if (action === "remove") {
-    const response = await Ape.presets.delete(presetId);
-
-    if (response.status !== 200) {
-      Notifications.add("Failed to remove preset: " + response.message, -1);
-    } else {
-      Notifications.add("Preset removed", 1);
-      snapshotPresets.forEach(
-        (preset: MonkeyTypes.SnapshotPreset, index: number) => {
-          if (preset._id === presetId) {
-            snapshotPresets.splice(index, 1);
-          }
-        }
-      );
-    }
-  }
-
-  void Settings.update();
-  Loader.hide();
-}
-
-$("#presetWrapper").on("click", (e) => {
-  if ($(e.target).attr("id") === "presetWrapper") {
-    hide();
-  }
-});
-
-$("#presetWrapper #presetEdit form").on("submit", (e) => {
-  e.preventDefault();
-  void apply();
-});
-
-$(".pageSettings .section.presets").on("click", ".addPresetButton", () => {
-  show("add");
-});
-
-$(".pageSettings .section.presets").on("click", ".editButton", (e) => {
-  const presetid = $(e.currentTarget).parent(".preset").attr("data-id");
-  const name = $(e.currentTarget).parent(".preset").attr("data-display");
-  show("edit", presetid, name);
-});
-
-$(".pageSettings .section.presets").on("click", ".removeButton", (e) => {
-  const presetid = $(e.currentTarget).parent(".preset").attr("data-id");
-  const name = $(e.currentTarget).parent(".preset").attr("data-display");
-  show("remove", presetid, name);
-});
-
-$(document).on("keydown", (event) => {
-  if (event.key === "Escape" && isPopupVisible(wrapperId)) {
-    hide();
-    event.preventDefault();
-  }
-});
-
-Skeleton.save(wrapperId);