From 7fda87656b79c85a9f4550d721c08a36fdc0287f Mon Sep 17 00:00:00 2001 From: endercass <46408156+Endercass@users.noreply.github.com> Date: Sat, 14 Sep 2024 00:28:19 -0400 Subject: [PATCH] remove clickoff checker --- src/Boot.tsx | 47 ++++--------------------------------------- src/Calendar.tsx | 23 ++++++++------------- src/Launcher.tsx | 20 +++++------------- src/QuickSettings.tsx | 32 ++++++++++++++++------------- src/Taskbar.tsx | 9 ++++++--- 5 files changed, 41 insertions(+), 90 deletions(-) diff --git a/src/Boot.tsx b/src/Boot.tsx index 69644890..e16292ff 100644 --- a/src/Boot.tsx +++ b/src/Boot.tsx @@ -51,34 +51,6 @@ channel.addEventListener("message", (msg) => { } }); -const clickoffCheckerState = $state({ - active: false, -}); - -const clickoffChecker = ( -
- 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 index da8b2133..590579e7 100644 --- 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 index a8000fe1..a0a82590 100644 --- a/src/Launcher.tsx +++ b/src/Launcher.tsx @@ -129,9 +129,6 @@ class Launcher { element = (
Not Initialized
); - 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 index 4cca2dcf..9ebd21f8 100644 --- a/src/QuickSettings.tsx +++ b/src/QuickSettings.tsx @@ -221,9 +221,6 @@ class QuickSettings { notificationCenterElement = (
Not Initialized
); - 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 index 2b4d3562..b878bc78 100644 --- a/src/Taskbar.tsx +++ b/src/Taskbar.tsx @@ -334,7 +334,8 @@ class Taskbar {
{ + on:click={(e: InputEvent) => { + e.stopPropagation(); quickSettings.close(); calendar.close(); launcher.toggleVisible(); @@ -374,7 +375,8 @@ class Taskbar { {/* TODO: Calendar */} { + on:click={(e: InputEvent) => { + e.stopPropagation(); launcher.hide(); quickSettings.close(); calendar.toggle(); @@ -384,7 +386,8 @@ class Taskbar { { + on:click={(e: InputEvent) => { + e.stopPropagation(); launcher.hide(); calendar.close(); quickSettings.toggle();