feat: seperate file to manage the 3 popups

src/interface/pages/settings.svelte

@@ -11,8 +11,8 @@
 
   import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup";
   import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage";
-  import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew";
+  import { OpenWhatsNewPopup } from "@/seqta/utils/Openers/OpenWhatsNewPopup";
-  import { OpenMinecraftServerPopup } from "@/seqta/utils/AboutMinecraftServer";
+  import { OpenMinecraftServerPopup } from "@/seqta/utils/Openers/OpenMinecraftServerPopup";
 
   import ColourPicker from "../components/ColourPicker.svelte";
   import { settingsPopup } from "../hooks/SettingsPopup";

src/plugins/monofile.ts

@@ -23,8 +23,8 @@ import { updateAllColors } from "@/seqta/ui/colors/Manager";
 import loading from "@/seqta/ui/Loading";
 import { SendNewsPage } from "@/seqta/utils/SendNewsPage";
 import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
-import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew";
+import { OpenWhatsNewPopup } from "@/seqta/utils/Openers/OpenWhatsNewPopup";
-//import { OpenMinecraftServerPopup } from "@/seqta/utils/AboutMinecraftServer";
+//import { OpenMinecraftServerPopup } from "@/seqta/utils/Openers/OpenMinecraftServerPopup";
 
 import {
   updateTimetableTimes,

src/seqta/utils/Openers/OpenAboutPage.ts

@@ -1,25 +1,17 @@
 import stringToHTML from "../stringToHTML";
 import { settingsState } from "../listeners/SettingsState";
-import { animate, stagger } from "motion";
+import { openPopup } from "./PopupManager";
-import { DeleteWhatsNew } from "../Whatsnew";
 
 export function OpenAboutPage() {
-  const background = document.createElement("div");
+  const header = stringToHTML(
-  background.id = "whatsnewbk";
-  background.classList.add("whatsnewBackground");
-
-  const container = document.createElement("div");
-  container.classList.add("whatsnewContainer");
-
-  var header: any = stringToHTML(
     /* html */
     `<div class="whatsnewHeader">
         <h1>About</h1>
         <p>About the extension</p>
       </div>`,
-  ).firstChild;
+  ).firstChild as HTMLElement;
 
-  let text = stringToHTML(/* html */ `
+  const text = stringToHTML(/* html */ `
       <div class="whatsnewTextContainer" style="overflow-y: hidden;">
         <img src="${settingsState.DarkMode ? "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/branding/dark.jpg" : "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/branding/light.jpg"}" class="aboutImg" />
         <p>BetterSEQTA+ is a fork of BetterSEQTA (originally developed by Nulkem), which was discontinued. BetterSEQTA+ continued development of BetterSEQTA, while incorporating a plethora of features. </p>
@@ -37,9 +29,9 @@ export function OpenAboutPage() {
     style="width: 100%; max-width: 500px; height: auto; object-fit: contain; display: block; margin: -110px auto 0;">
 </div>
       </div>
-    `).firstChild;
+    `).firstChild as HTMLElement;
 
-  let footer = stringToHTML(/* html */ `
+  const footer = stringToHTML(/* html */ `
       <div class="whatsnewFooter">
         <div>
         Resources and Feedback:
@@ -67,56 +59,10 @@ export function OpenAboutPage() {
           </a>
         </div>
       </div>
-    `).firstChild;
+    `).firstChild as HTMLElement;
 
-  let exitbutton = document.createElement("div");
+  openPopup({
-  exitbutton.id = "whatsnewclosebutton";
+    header,
-
+    content: [text, footer],
-  container.append(header);
-  container.append(text as ChildNode);
-  container.append(footer as ChildNode);
-  container.append(exitbutton);
-
-  background.append(container);
-
-  document.getElementById("container")!.append(background);
-
-  let bkelement = document.getElementById("whatsnewbk");
-  let popup = document.getElementsByClassName("whatsnewContainer")[0];
-
-  if (settingsState.animations) {
-    animate(
-      [popup, bkelement as HTMLElement],
-      { scale: [0, 1] },
-      {
-        type: "spring",
-        stiffness: 220,
-        damping: 18,
-      },
-    );
-
-    animate(
-      ".whatsnewTextContainer *",
-      { opacity: [0, 1], y: [10, 0] },
-      {
-        delay: stagger(0.05, { startDelay: 0.1 }),
-        duration: 0.5,
-        ease: [0.22, 0.03, 0.26, 1],
-      },
-    );
-  }
-
-  delete settingsState.justupdated;
-
-  bkelement!.addEventListener("click", function (event) {
-    // Check if the click event originated from the element itself and not any of its children
-    if (event.target === bkelement) {
-      DeleteWhatsNew();
-    }
-  });
-
-  var closeelement = document.getElementById("whatsnewclosebutton");
-  closeelement!.addEventListener("click", function () {
-    DeleteWhatsNew();
   });
 }

src/seqta/utils/Openers/OpenMinecraftServerPopup.ts

@@ -1,7 +1,5 @@
-import stringToHTML from "./stringToHTML";
+import stringToHTML from "../stringToHTML";
-import { settingsState } from "./listeners/SettingsState";
+import { openPopup } from "./PopupManager";
-import { animate, stagger } from "motion";
-import { DeleteWhatsNew } from "@/seqta/utils/Whatsnew";
 
 export function OpenMinecraftServerPopup() {
   if (!document.querySelector('link[href*="minecraftia"]')) {
@@ -11,44 +9,35 @@ export function OpenMinecraftServerPopup() {
     document.head.appendChild(fontLink);
   }
 
-  const background = document.createElement("div");
+  const header = stringToHTML(
-  background.id = "whatsnewbk";
-  background.classList.add("whatsnewBackground");
-
-  const container = document.createElement("div");
-  container.classList.add("whatsnewContainer");
-
-  var header: any = stringToHTML(
     /* html */
     `<div class="whatsnewHeader">
         <h1>Minecraft Server</h1>
         <p>The official BetterSEQTA+ Minecraft Server</p>
       </div>`,
-  ).firstChild;
+  ).firstChild as HTMLElement;
 
-  let imagecont = document.createElement("div");
+  const imageContainer = document.createElement("div");
-  imagecont.classList.add("whatsnewImgContainer");
+  imageContainer.classList.add("whatsnewImgContainer");
 
-  let video = document.createElement("video");
+  const video = document.createElement("video");
   video.style.aspectRatio = "16/9";
   video.style.background = "black";
-  let source = document.createElement("source");
 
+  const source = document.createElement("source");
   source.setAttribute(
     "src",
     "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/server-video.mp4",
   );
+
   video.autoplay = true;
   video.muted = true;
   video.loop = true;
   video.appendChild(source);
   video.classList.add("whatsnewImg");
-  imagecont.appendChild(video);
+  imageContainer.appendChild(video);
 
-  let textcontainer = document.createElement("div");
+  const text = stringToHTML(/* html */ `
-  textcontainer.classList.add("whatsnewTextContainer");
-
-  let text = stringToHTML(/* html */ `
   <div class="whatsnewTextContainer" style="height: 50%; overflow-y: hidden;">
     <h1>Join our community in Minecraft!</h1>
     <p style="margin-left: 0;">Join the official BetterSEQTA+ Minecraft Server community now!</p>
@@ -75,8 +64,7 @@ export function OpenMinecraftServerPopup() {
     -1px -1px 0 #000,
      1px -1px 0 #000,
     -1px  1px 0 #000,
-     1px  1px 0 #000;
+     1px  1px 0 #000;">
-">
   mc.betterseqta.org
 </p>
 <p style="
@@ -90,14 +78,13 @@ export function OpenMinecraftServerPopup() {
     -1px -1px 0 #000,
      1px -1px 0 #000,
     -1px  1px 0 #000,
-     1px  1px 0 #000;
+     1px  1px 0 #000;">
-">
   Version: 1.21.4
 </p>
   </div>
-`).firstChild;
+`).firstChild as HTMLElement;
 
-  let footer = stringToHTML(/* html */ `
+  const footer = stringToHTML(/* html */ `
       <div class="whatsnewFooter">
         <div>
          Resources and Feedback:
@@ -127,59 +114,10 @@ export function OpenMinecraftServerPopup() {
         <div>
         </div>
       </div>
-    `).firstChild;
+    `).firstChild as HTMLElement;
 
-  let exitbutton = document.createElement("div");
+  openPopup({
-  exitbutton.id = "whatsnewclosebutton";
-
-  container.append(
     header,
-    imagecont,
+    content: [imageContainer, text, footer],
-    text as HTMLElement,
-    footer as HTMLElement,
-    exitbutton,
-  );
-
-  background.append(container);
-
-  document.getElementById("container")!.append(background);
-
-  let bkelement = document.getElementById("whatsnewbk");
-  let popup = document.getElementsByClassName("whatsnewContainer")[0];
-
-  if (settingsState.animations) {
-    animate(
-      [popup, bkelement as HTMLElement],
-      { scale: [0, 1] },
-      {
-        type: "spring",
-        stiffness: 220,
-        damping: 18,
-      },
-    );
-
-    animate(
-      ".whatsnewTextContainer *",
-      { opacity: [0, 1], y: [10, 0] },
-      {
-        delay: stagger(0.05, { startDelay: 0.1 }),
-        duration: 0.5,
-        ease: [0.22, 0.03, 0.26, 1],
-      },
-    );
-  }
-
-  delete settingsState.justupdated;
-
-  bkelement!.addEventListener("click", function (event) {
-    // Check if the click event originated from the element itself and not any of its children
-    if (event.target === bkelement) {
-      DeleteWhatsNew();
-    }
-  });
-
-  var closeelement = document.getElementById("whatsnewclosebutton");
-  closeelement!.addEventListener("click", function () {
-    DeleteWhatsNew();
   });
 }

src/seqta/utils/Openers/OpenWhatsNewPopup.ts

@@ -1,62 +1,22 @@
-import { settingsState } from "./listeners/SettingsState";
+import stringToHTML from "../stringToHTML";
-import { animate, stagger } from "motion";
-import stringToHTML from "./stringToHTML";
 import browser from "webextension-polyfill";
 import kofi from "@/resources/kofi.png?base64";
-
+import { openPopup } from "./PopupManager";
-let isClosing = false;
-
-export async function DeleteWhatsNew() {
-  if (isClosing) return;
-  isClosing = true;
-
-  const bkelement = document.getElementById("whatsnewbk");
-  const popup = document.getElementsByClassName(
-    "whatsnewContainer",
-  )[0] as HTMLElement;
-
-  if (!bkelement || !popup) {
-    isClosing = false;
-    return;
-  }
-
-  if (!settingsState.animations) {
-    bkelement.remove();
-    isClosing = false;
-    return;
-  }
-
-  await animate(
-    [popup, bkelement as HTMLElement],
-    { opacity: [1, 0], scale: [1, 0.95] } as any,
-    { duration: 0.25, ease: [0.22, 0.03, 0.26, 1] },
-  );
-
-  bkelement.remove();
-  isClosing = false;
-}
 
 export function OpenWhatsNewPopup() {
-  const background = document.createElement("div");
+  const header = stringToHTML(
-  background.id = "whatsnewbk";
-  background.classList.add("whatsnewBackground");
-
-  const container = document.createElement("div");
-  container.classList.add("whatsnewContainer");
-
-  var header: any = stringToHTML(
     /* html */
     `<div class="whatsnewHeader">
         <h1>What's New</h1>
         <p>BetterSEQTA+ V${browser.runtime.getManifest().version}</p>
       </div>`,
-  ).firstChild;
+  ).firstChild as HTMLElement;
 
-  let imagecont = document.createElement("div");
+  const imageContainer = document.createElement("div");
-  imagecont.classList.add("whatsnewImgContainer");
+  imageContainer.classList.add("whatsnewImgContainer");
 
-  let video = document.createElement("video");
+  const video = document.createElement("video");
-  let source = document.createElement("source");
+  const source = document.createElement("source");
 
   source.setAttribute(
     "src",
@@ -67,19 +27,10 @@ export function OpenWhatsNewPopup() {
   video.loop = true;
   video.appendChild(source);
   video.classList.add("whatsnewImg");
-  imagecont.appendChild(video);
+  imageContainer.appendChild(video);
 
-  /* let whatsnewimg = document.createElement("img");
+  const text = stringToHTML(/* html */ `
-  //whatsnewimg.src = "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/update-image.webp";
+    <div class="whatsnewTextContainer" style="height: 50%;overflow-y: hidden;">
-  whatsnewimg.src = browser.runtime.getURL('../../resources/update-image.webp');
-  whatsnewimg.classList.add("whatsnewImg");
-  imagecont.appendChild(whatsnewimg); */
-
-  let textcontainer = document.createElement("div");
-  textcontainer.classList.add("whatsnewTextContainer");
-
-  let text = stringToHTML(/* html */ `
-    <div class="whatsnewTextContainer" style="height: 50%;overflow-y: scroll;">
 
       <h1>3.4.11 - New Features & Bug Fixes</h1>
       <li>Added Background Music plugin</li>
@@ -305,9 +256,9 @@ export function OpenWhatsNewPopup() {
       <h1>Create Custom Shortcuts</h1>
       <li>Found in the BetterSEQTA+ Settings menu, custom shortcuts can now be created with a name and URL of your choice.</li>
     </div>
-    `).firstChild;
+    `).firstChild as HTMLElement;
 
-  let footer = stringToHTML(/* html */ `
+  const footer = stringToHTML(/* html */ `
       <div class="whatsnewFooter">
         <div>
          Resources and Feedback:
@@ -340,58 +291,10 @@ export function OpenWhatsNewPopup() {
           </a>
         </div>
       </div>
-    `).firstChild;
+    `).firstChild as HTMLElement;
 
-  let exitbutton = document.createElement("div");
+  openPopup({
-  exitbutton.id = "whatsnewclosebutton";
+    header,
-
+    content: [imageContainer, text, footer],
-  container.append(header);
-  container.append(imagecont);
-  container.append(textcontainer);
-  container.append(text as ChildNode);
-  container.append(footer as ChildNode);
-  container.append(exitbutton);
-
-  background.append(container);
-
-  document.getElementById("container")!.append(background);
-
-  let bkelement = document.getElementById("whatsnewbk");
-  let popup = document.getElementsByClassName("whatsnewContainer")[0];
-
-  if (settingsState.animations) {
-    animate(
-      [popup, bkelement as HTMLElement],
-      { scale: [0, 1] },
-      {
-        type: "spring",
-        stiffness: 220,
-        damping: 18,
-      },
-    );
-
-    animate(
-      ".whatsnewTextContainer *",
-      { opacity: [0, 1], y: [10, 0] },
-      {
-        delay: stagger(0.05, { startDelay: 0.1 }),
-        duration: 0.5,
-        ease: [0.22, 0.03, 0.26, 1],
-      },
-    );
-  }
-
-  delete settingsState.justupdated;
-
-  bkelement!.addEventListener("click", function (event) {
-    // Check if the click event originated from the element itself and not any of its children
-    if (event.target === bkelement) {
-      DeleteWhatsNew();
-    }
-  });
-
-  var closeelement = document.getElementById("whatsnewclosebutton");
-  closeelement!.addEventListener("click", function () {
-    DeleteWhatsNew();
   });
 }

src/seqta/utils/Openers/PopupManager.ts

@@ -0,0 +1,98 @@
+import { settingsState } from "../listeners/SettingsState";
+import { animate as motionAnimate, stagger } from "motion";
+
+type AnimationTarget = string | Element | Element[] | NodeList | null;
+
+let isClosing = false;
+
+export async function closePopup() {
+  if (isClosing) return;
+  isClosing = true;
+
+  const background = document.getElementById("whatsnewbk");
+  const popup = document.getElementsByClassName("whatsnewContainer")[0] as
+    | HTMLElement
+    | undefined;
+
+  if (!background || !popup) {
+    isClosing = false;
+    return;
+  }
+
+  if (!settingsState.animations) {
+    background.remove();
+    isClosing = false;
+    return;
+  }
+
+  await (motionAnimate as any)(
+    [popup, background],
+    { opacity: [1, 0], scale: [1, 0.95] },
+    { duration: 0.25, easing: [0.22, 0.03, 0.26, 1] },
+  );
+
+  background.remove();
+  isClosing = false;
+}
+
+interface OpenPopupOptions {
+  header?: Node | null;
+  content?: (Node | null | undefined)[];
+  animateSelector?: AnimationTarget;
+}
+
+export function openPopup({
+  header,
+  content = [],
+  animateSelector = ".whatsnewTextContainer *",
+}: OpenPopupOptions = {}) {
+  const background = document.createElement("div");
+  background.id = "whatsnewbk";
+  background.classList.add("whatsnewBackground");
+
+  const container = document.createElement("div");
+  container.classList.add("whatsnewContainer");
+
+  if (header) container.append(header);
+  for (const node of content) if (node) container.append(node);
+
+  const closeButton = document.createElement("div");
+  closeButton.id = "whatsnewclosebutton";
+  container.append(closeButton);
+
+  background.append(container);
+  document.getElementById("container")!.append(background);
+
+  if (settingsState.animations) {
+    (motionAnimate as any)(
+      [container, background],
+      { scale: [0, 1] },
+      { type: "spring", stiffness: 220, damping: 18 },
+    );
+
+    if (animateSelector) {
+      const targets =
+        typeof animateSelector === "string"
+          ? document.querySelectorAll(animateSelector)
+          : animateSelector;
+
+      (motionAnimate as any)(
+        targets!,
+        { opacity: [0, 1], y: [10, 0] },
+        {
+          delay: stagger(0.05, { startDelay: 0.1 }),
+          duration: 0.5,
+          easing: [0.22, 0.03, 0.26, 1],
+        },
+      );
+    }
+  }
+
+  delete settingsState.justupdated;
+
+  background.addEventListener("click", (event) => {
+    if (event.target === background) void closePopup();
+  });
+
+  closeButton.addEventListener("click", () => void closePopup());
+}