remove clickoff checker

MercuryWorkshop · Sep 14, 2024 · 7fda876 · 7fda876
1 parent ac5ee81
commit 7fda876
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 90 deletions.
diff --git a/src/Boot.tsx b/src/Boot.tsx
@@ -51,34 +51,6 @@ channel.addEventListener("message", (msg) => {
     }
 });
 
-const clickoffCheckerState = $state({
-    active: false,
-});
-
-const clickoffChecker = (
-    <div
-        class={[
-            use(clickoffCheckerState.active, (active) =>
-                active
-                    ? css`
-                          position: absolute;
-                          width: 100%;
-                          height: 100%;
-                          display: block;
-                          z-index: 9998;
-                      `
-                    : css`
-                          display: none;
-                      `,
-            ),
-        ]}
-    />
-);
-
-const updateClickoffChecker = (show: boolean) => {
-    clickoffCheckerState.active = show;
-};
-
 let taskbar: Taskbar;
 let launcher: Launcher;
 let oobeview: OobeView;
@@ -342,20 +314,9 @@ window.addEventListener("load", async () => {
     // console.log(await swProxy.test);
     // console.log(await swProxy.testfn());
 
-    launcher = new Launcher(
-        clickoffChecker as HTMLDivElement,
-        updateClickoffChecker,
-    );
-
-    quickSettings = new QuickSettings(
-        clickoffChecker as HTMLDivElement,
-        updateClickoffChecker,
-    );
-
-    calendar = new Calendar(
-        clickoffChecker as HTMLDivElement,
-        updateClickoffChecker,
-    );
+    launcher = new Launcher();
+    quickSettings = new QuickSettings();
+    calendar = new Calendar();
 
     taskbar = new Taskbar();
 
@@ -607,7 +568,6 @@ document.addEventListener("anura-login-completed", async () => {
     }
 
     document.body.appendChild(launcher.element);
-    document.body.appendChild(launcher.clickoffChecker);
     document.body.appendChild(quickSettings.quickSettingsElement);
     document.body.appendChild(calendar.element);
     document.body.appendChild(quickSettings.notificationCenterElement);
@@ -651,6 +611,7 @@ document.addEventListener("anura-login-completed", async () => {
             e.key.toLowerCase() === "meta" &&
             anura.settings.get("launcher-keybind")
         ) {
+            e.stopPropagation();
             quickSettings.close();
             calendar.close();
             launcher.toggleVisible();

diff --git a/src/Calendar.tsx b/src/Calendar.tsx
@@ -163,9 +163,6 @@ class Calendar {
         z-index: -1;
     `;
 
-    clickoffChecker: HTMLDivElement;
-    updateClickoffChecker: (show: boolean) => void;
-
     open() {
         this.state.show = true;
     }
@@ -182,15 +179,14 @@ class Calendar {
         }
     }
 
-    constructor(
-        clickoffChecker: HTMLDivElement,
-        updateClickoffChecker: (show: boolean) => void,
-    ) {
-        clickoffChecker.addEventListener("click", () => {
-            this.state.show = false;
-        });
-        this.clickoffChecker = clickoffChecker;
-        this.updateClickoffChecker = updateClickoffChecker;
+    constructor() {
+        document.addEventListener(
+            "click",
+            (e) =>
+                this.state.show &&
+                !this.element.contains(e.target as Node) &&
+                this.close(),
+        );
     }
 
     async init() {
@@ -326,9 +322,6 @@ class Calendar {
             day!.innerHTML = lit;
         };
 
-        useChange(use(this.state.show), (show: boolean) => {
-            this.updateClickoffChecker(show);
-        });
         setTimeout(() => {
             manipulate();
             const prenexIcons = document.querySelectorAll(

diff --git a/src/Launcher.tsx b/src/Launcher.tsx
@@ -129,9 +129,6 @@ class Launcher {
 
     element = (<div>Not Initialized</div>);
 
-    clickoffChecker: HTMLDivElement;
-    updateClickoffChecker: (show: boolean) => void;
-
     handleSearch(event: Event) {
         const searchQuery = (
             event.target as HTMLInputElement
@@ -185,18 +182,11 @@ class Launcher {
         this.state.apps = [...(this.state.apps || []), app];
     }
 
-    constructor(
-        clickoffChecker: HTMLDivElement,
-        updateClickoffChecker: (show: boolean) => void,
-    ) {
-        clickoffChecker.addEventListener("click", () => {
-            this.state.active = false;
-        });
-
-        this.clickoffChecker = clickoffChecker;
-        this.updateClickoffChecker = updateClickoffChecker;
-
-        useChange(use(this.state.active), updateClickoffChecker);
+    constructor() {
+        document.addEventListener(
+            "click",
+            (e) => !this.element.contains(e.target as Node) && this.hide(),
+        );
     }
 
     async init() {

diff --git a/src/QuickSettings.tsx b/src/QuickSettings.tsx
@@ -221,9 +221,6 @@ class QuickSettings {
 
     notificationCenterElement = (<div>Not Initialized</div>);
 
-    clickoffChecker: HTMLDivElement;
-    updateClickoffChecker: (show: boolean) => void;
-
     open() {
         // reason for this is otherwise dreamland doesn't run the use() dunno why
         const pinnedSettings = this.state.pinnedSettings;
@@ -249,20 +246,28 @@ class QuickSettings {
         }
     }
 
-    constructor(
-        clickoffChecker: HTMLDivElement,
-        updateClickoffChecker: (show: boolean) => void,
-    ) {
-        clickoffChecker.addEventListener("click", () => {
-            this.state.showQuickSettings = false;
+    constructor() {
+        document.addEventListener("click", (e) => {
+            const target = e.target as HTMLElement;
+            if (
+                this.state.showQuickSettings &&
+                // HACK HACK DUMB HACK
+                // Quick settings icons sometimes do not think that they are
+                // children of the DOM so they will also not pass the check
+                // that they are children of the menu.
+                document.contains(target) &&
+                !(
+                    this.quickSettingsElement.contains(target) ||
+                    this.notificationCenterElement.contains(target)
+                )
+            ) {
+                this.close();
+            }
         });
 
         setInterval(() => {
-            this.state.date = this.dateformat.format(new Date());
+            this.state.date = this.dateformat.format(Date.now());
         }, 1000);
-
-        this.clickoffChecker = clickoffChecker;
-        this.updateClickoffChecker = updateClickoffChecker;
     }
 
     async init() {
@@ -528,7 +533,6 @@ class QuickSettings {
         // });
 
         useChange(use(this.state.showQuickSettings), (show: boolean) => {
-            this.updateClickoffChecker(show);
             anura.notifications.setRender(!show);
         });
     }

diff --git a/src/Taskbar.tsx b/src/Taskbar.tsx
@@ -334,7 +334,8 @@ class Taskbar {
                 <div id="launcher-button-container">
                     <div
                         id="launcher-button"
-                        on:click={() => {
+                        on:click={(e: InputEvent) => {
+                            e.stopPropagation();
                             quickSettings.close();
                             calendar.close();
                             launcher.toggleVisible();
@@ -374,7 +375,8 @@ class Taskbar {
                     {/* TODO: Calendar */}
                     <span
                         id="date-container"
-                        on:click={() => {
+                        on:click={(e: InputEvent) => {
+                            e.stopPropagation();
                             launcher.hide();
                             quickSettings.close();
                             calendar.toggle();
@@ -384,7 +386,8 @@ class Taskbar {
                     </span>
                     <span
                         id="taskinfo-container"
-                        on:click={() => {
+                        on:click={(e: InputEvent) => {
+                            e.stopPropagation();
                             launcher.hide();
                             calendar.close();
                             quickSettings.toggle();