feat: cleanup injected modal automatically when capture-eye is remove…

…d from DOM or click on close button Signed-off-by: James Chien <james@numbersprotocol.io>
numbersprotocol · Dec 4, 2024 · 45d121e · 45d121e
1 parent a0d66bd
commit 45d121e
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 47 deletions.
diff --git a/src/capture-eye.ts b/src/capture-eye.ts
@@ -89,6 +89,11 @@ export class CaptureEye extends LitElement {
     console.debug(CaptureEyeModal.name); // The line ensures CaptureEyeModal is included in compilation.
   }
 
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    ModalManager.getInstance().removeModal();
+  }
+
   get isOpened() {
     return !ModalManager.getInstance().modalHidden;
   }
@@ -99,7 +104,7 @@ export class CaptureEye extends LitElement {
   }
 
   close() {
-    ModalManager.getInstance().hideModal();
+    ModalManager.getInstance().removeModal();
   }
 
   private buttonTemplate() {
@@ -143,11 +148,6 @@ export class CaptureEye extends LitElement {
     `;
   }
 
-  override async connectedCallback() {
-    super.connectedCallback();
-    ModalManager.getInstance().initializeModal();
-  }
-
   openEye(event?: Event) {
     if (event) {
       event.stopPropagation();

diff --git a/src/modal/modal-manager.ts b/src/modal/modal-manager.ts
@@ -31,24 +31,19 @@ export class ModalManager {
     return ModalManager.instance;
   }
 
-  initializeModal(): void {
-    if (!this.modalElement) {
-      this.modalElement = document.createElement('capture-eye-modal');
-      document.body.appendChild(this.modalElement);
-    }
-  }
-
   async updateModal(options: ModalOptions, delay = 150): Promise<void> {
-    if (!this.modalElement) return;
-    this.modalElement.modalHidden = true;
+    let modal = this.getModal();
+    modal.modalHidden = true;
     await new Promise((resolve) => setTimeout(resolve, delay));
-    const nidChanged = this.modalElement.nid !== options.nid;
+    const nidChanged = modal.nid !== options.nid;
     if (nidChanged) {
-      this.modalElement.clearModalOptions();
+      modal.clearModalOptions();
+      this.removeModal();
+      modal = this.getModal();
     }
-    this.modalElement.modalHidden = false;
+    modal.modalHidden = false;
     this.registerRootClickListener();
-    this.modalElement.updateModalOptions(options);
+    modal.updateModalOptions(options);
 
     if (nidChanged) {
       fetchAsset(options.nid).then((assetData) => {
@@ -68,19 +63,33 @@ export class ModalManager {
     }
   }
 
-  hideModal(): void {
-    if (this.modalElement) {
-      this.modalElement.modalHidden = true;
-      this.unregisterRootClickListener();
+  removeModal(): void {
+    const modal = this.getModal();
+    modal.modalHidden = true;
+    this.unregisterRootClickListener();
+    modal.remove();
+    this.modalElement = null;
+  }
+
+  private getModal(): CaptureEyeModal {
+    if (!this.modalElement) {
+      this.modalElement = document.createElement('capture-eye-modal');
+      this.modalElement.addEventListener('remove-capture-eye-modal', () => {
+        this.removeModal();
+      });
+      document.body.appendChild(this.modalElement);
+      return this.modalElement;
     }
+    return this.modalElement;
   }
 
   private updateModalAsset(
     assetModel: AssetModel | undefined,
     setAsLoaded: boolean
   ) {
-    if (!this.modalElement || !assetModel) return;
-    this.modalElement.updateAsset(assetModel, setAsLoaded);
+    const modal = this.getModal();
+    if (!assetModel) return;
+    modal.updateAsset(assetModel, setAsLoaded);
   }
 
   private registerRootClickListener() {
@@ -92,11 +101,9 @@ export class ModalManager {
   }
 
   private handleRootClick = (event: MouseEvent) => {
-    if (
-      this.modalElement &&
-      !this.modalElement.contains(event.target as Node)
-    ) {
-      this.hideModal();
+    const modal = this.getModal();
+    if (!modal.contains(event.target as Node)) {
+      this.removeModal();
     }
   };
 }
diff --git a/src/modal/modal.ts b/src/modal/modal.ts
@@ -93,13 +93,12 @@ export class CaptureEyeModal extends LitElement {
     this.stopEngagementZoneRotation();
   }
 
-  override firstUpdated() {
-    this.updateModalVisibility();
-  }
-
   override updated(changedProperties: Map<string | number | symbol, unknown>) {
     if (changedProperties.has('modalHidden')) {
-      this.updateModalVisibility();
+      const closeButton = this.shadowRoot?.querySelector('.close-button');
+      if (this.modalElement && closeButton && !this.modalHidden) {
+        this.updateModelPosition(closeButton as HTMLElement);
+      }
     }
   }
 
@@ -148,15 +147,6 @@ export class CaptureEyeModal extends LitElement {
     this._position = undefined;
   }
 
-  private updateModalVisibility() {
-    const closeButton = this.shadowRoot?.querySelector('.close-button');
-    if (this.modalElement && closeButton) {
-      if (!this.modalHidden) {
-        this.updateModelPosition(closeButton as HTMLElement);
-      }
-    }
-  }
-
   private remToPixels(rem: number): number {
     return (
       rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
@@ -517,7 +507,7 @@ export class CaptureEyeModal extends LitElement {
             class="close-button ${this.modalHidden
               ? 'close-button-hidden'
               : 'close-button-visible'}"
-            @click=${this.hideModal}
+            @click=${this.emitRemoveEvent}
           >
             ${generateCaptureEyeCloseSvg(color, size)}
           </div>
@@ -537,8 +527,9 @@ export class CaptureEyeModal extends LitElement {
     }
   }
 
-  private hideModal() {
-    this.modalHidden = true;
+  private emitRemoveEvent() {
+    // Emit remove event to trigger ModalManager to remove the modal
+    this.dispatchEvent(new CustomEvent('remove-capture-eye-modal'));
   }
 
   private trackEngagement() {