feat: WIP Engage progress

src/seqta/utils/Adders/AddExtensionSettings.ts

@@ -9,21 +9,8 @@ import Settings from "@/interface/pages/settings.svelte";
 
 let isSettingsRendered = false;
 
-export function addExtensionSettings() {
-  const extensionPopup = document.createElement("div");
-  extensionPopup.classList.add("outside-container", "hide");
-  extensionPopup.id = "ExtensionPopup";
-
-  const extensionContainer = document.querySelector(
-    "#container",
-  ) as HTMLDivElement;
-  if (extensionContainer) extensionContainer.appendChild(extensionPopup);
-
-  const container = document.getElementById("container");
-
-  new SettingsResizer();
-
-  container!.onclick = (event) => {
+function extensionOutsideClickHandler(extensionPopup: HTMLElement) {
+  return (event: MouseEvent) => {
     if (!SettingsClicked) return;
 
     if (!(event.target as HTMLElement).closest("#AddedSettings")) {
@@ -33,6 +20,24 @@ export function addExtensionSettings() {
   };
 }
 
+export function addExtensionSettings() {
+  if (document.getElementById("ExtensionPopup")) return;
+
+  const extensionPopup = document.createElement("div");
+  extensionPopup.classList.add("outside-container", "hide");
+  extensionPopup.id = "ExtensionPopup";
+
+  const extensionContainer =
+    document.querySelector("#container") ?? document.getElementById("container");
+  const mountParent = extensionContainer ?? document.body;
+  mountParent.appendChild(extensionPopup);
+
+  new SettingsResizer();
+
+  const handler = extensionOutsideClickHandler(extensionPopup);
+  (extensionContainer ?? document.body).addEventListener("click", handler, false);
+}
+
 export function renderSettingsIfNeeded() {
   if (isSettingsRendered) return;
   

src/seqta/utils/isSeqtaEngage.ts

@@ -0,0 +1,4 @@
+/** SEQTA Engage (React) uses a different shell from classic SEQTA Learn. */
+export function isSeqtaEngageExperience(): boolean {
+  return document.title.includes("SEQTA Engage");
+}

src/seqta/utils/setupSettingsButton.ts

@@ -9,10 +9,11 @@ import { renderSettingsIfNeeded } from "./Adders/AddExtensionSettings";
 import { delay } from "./delay";
 
 export function setupSettingsButton() {
-  var AddedSettings = document.getElementById("AddedSettings");
-  var extensionPopup = document.getElementById("ExtensionPopup");
+  const AddedSettings = document.getElementById("AddedSettings");
+  const extensionPopup = document.getElementById("ExtensionPopup");
+  if (!AddedSettings || !extensionPopup) return;
 
-  AddedSettings!.addEventListener("click", async () => {
+  AddedSettings.addEventListener("click", async () => {
     if (SettingsClicked) {
       closeExtensionPopup(extensionPopup as HTMLElement);
     } else {
@@ -23,20 +24,20 @@ export function setupSettingsButton() {
       if (settingsState.animations) {
         animate(0, 1, {
           onUpdate: (progress) => {
-            extensionPopup!.style.opacity = progress.toString();
-            extensionPopup!.style.transform = `scale(${progress})`;
+            extensionPopup.style.opacity = progress.toString();
+            extensionPopup.style.transform = `scale(${progress})`;
           },
           type: "spring",
           stiffness: 280,
           damping: 20,
         });
       } else {
-        extensionPopup!.style.opacity = "1";
-        extensionPopup!.style.transform = "scale(1)";
-        extensionPopup!.style.transition =
+        extensionPopup.style.opacity = "1";
+        extensionPopup.style.transform = "scale(1)";
+        extensionPopup.style.transition =
           "opacity 0s linear, transform 0s linear";
       }
-      extensionPopup!.classList.remove("hide");
+      extensionPopup.classList.remove("hide");
       changeSettingsClicked(true);
     }
   });