From 3e4df9534f3f413a49bd7c91b59a6dbcd391886d Mon Sep 17 00:00:00 2001
From: jotaen4tinypilot <83721279+jotaen4tinypilot@users.noreply.github.com>
Date: Fri, 26 Jul 2024 18:06:12 +0200
Subject: [PATCH] Dispatch DialogClosed event when clicking X button (#1828)

Related https://github.com/tiny-pilot/tinypilot/issues/1814. Stacked on
https://github.com/tiny-pilot/tinypilot/pull/1827.

This PR changes the control flow when clicking the `X` button in the
`<overlay-panel>`: instead of hiding the panel directly, it now
dispatches a `dialog-closed` event into the slotted element, to give the
slotted element a chance to hook into this event and react to it.

We need this in [a subsequent PR (the network status
dialog)](https://github.com/tiny-pilot/tinypilot/pull/1829), which needs
to stop its internal update loop once the dialog terminates. This also
must work if the user clicks the `X` button, not just when using the
`Close` one.

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1828"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <jan@jotaen.net>
---
 .../custom-elements/overlay-panel.html        | 21 +++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/app/templates/custom-elements/overlay-panel.html b/app/templates/custom-elements/overlay-panel.html
index 115c63d12..d6f6a3d69 100644
--- a/app/templates/custom-elements/overlay-panel.html
+++ b/app/templates/custom-elements/overlay-panel.html
@@ -61,11 +61,13 @@
         />
       </svg>
     </button>
-    <slot></slot>
+    <slot id="dialog-slot"></slot>
   </dialog>
 </template>
 
 <script type="module">
+  import { DialogClosedEvent } from "/js/events.js";
+
   (function () {
     const template = document.querySelector("#overlay-panel-template");
 
@@ -99,10 +101,21 @@
               }
             }
           );
+          // Dispatch dialog-closed event into slotted element(s), to allow the
+          // dialog to react to it if need be (e.g., for performing clean-ups).
+          // In theory, there could be multiple elements in the slot, so they
+          // all need to receive the close event – hence the `forEach`. In
+          // reality, we usually only slot a single dialog element, though. It
+          // shouldn’t matter anyway, since the dialog-closed event handler is
+          // idempotent.
           this.shadowRoot
-            .getElementById("close-button")
-            .addEventListener("click", () => this.show(false));
-
+            .querySelector("#close-button")
+            .addEventListener("click", () =>
+              this.shadowRoot
+                .querySelector("#dialog-slot")
+                .assignedElements()
+                .forEach((el) => el.dispatchEvent(new DialogClosedEvent()))
+            );
           // Prevent auto-close behavior of native <dialog> if the user presses
           // the ESC key.
           this._elements.dialog.addEventListener("cancel", (evt) => {