Fix page scroll while dialog open

Author: christianezeani

projects/ngsuite/src/lib/dialog/services/Dialog.ts

@@ -1,24 +1,23 @@
-import { ApplicationRef, ComponentRef, createComponent, createEnvironmentInjector, Injectable } from "@angular/core";
+import { ApplicationRef, ComponentRef, createComponent, createEnvironmentInjector, inject, Injectable } from "@angular/core";
 import { Registry } from "../../Registry";
 import { NGSuiteComponent } from "../../core";
 import { NGSuiteDialogConfig, NGSuiteDialogPopupOptions, NGSuiteDialogRoot } from "../interfaces";
 import { NGSuiteDialogInstance } from "./DialogInstance";
 import { NGSuiteDialogAlertComponent } from "../popup/alert/alert.component";
 import { NGSuiteDialogConfirmComponent } from "../popup/confirm/confirm.component";
 import { Observable, throwError } from "rxjs";
+import { NGSuiteDialogRegistry } from "./DialogRegistry";
 
-const DialogInstances: NGSuiteDialogInstance[] = [];
 const DialogRootMap = new Map<NGSuiteDialog, NGSuiteDialogRoot>();
 
 @Injectable({
   providedIn: 'root',
 })
 export class NGSuiteDialog {
 
-  constructor() {
-    this.onEscape = this.onEscape.bind(this);
-    this.onDocumentClick = this.onDocumentClick.bind(this);
+  private readonly registry = inject(NGSuiteDialogRegistry);
 
+  constructor() {
     document.addEventListener('keydown', this.onEscape);
     document.addEventListener('click', this.onDocumentClick);
   }
@@ -32,26 +31,20 @@ export class NGSuiteDialog {
     DialogRootMap.delete(instance);
   }
 
-  private onEscape(e: KeyboardEvent) {
+  private onEscape = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       e.preventDefault();
 
-      if (!DialogInstances.length) return;
+      const instance = this.registry.active();
 
-      const instance = DialogInstances[DialogInstances.length - 1];
-
-      instance.send({
+      instance?.send({
         name: 'esc.close',
         value: false
       });
     }
   }
 
-  private onDocumentClick(e: MouseEvent) {
-    if (!DialogInstances.length) return;
-    const instance = DialogInstances[DialogInstances.length - 1];
-    instance.focus();
-  }
+  private onDocumentClick = (e: MouseEvent) => this.registry.focus();
 
   open(component: NGSuiteComponent<any>, config?: NGSuiteDialogConfig):  NGSuiteDialogInstance {
     if(!config) config = null as any;
@@ -71,25 +64,16 @@ export class NGSuiteDialog {
       config
     );
 
-    DialogInstances.push(instance);
+    this.registry.add(instance);
 
     instance.afterClosed.subscribe(() => {
-      const index = DialogInstances.indexOf(instance);
-      DialogInstances.splice(index, 1);
-
-      const hasInstances = DialogInstances.length > 0;
-      document.body.classList.toggle('ngs-dialog-open', hasInstances);
+      this.registry.remove(instance);
     });
 
     return instance;
   }
 
-  closeAll() {
-    while (DialogInstances.length) {
-      const instance = DialogInstances.pop();
-      instance?.close(false);
-    }
-  }
+  readonly closeAll = () => this.registry.closeAll();
 
   alert(title: string, message: string) {
     const data: NGSuiteDialogPopupOptions = { title, message };

projects/ngsuite/src/lib/dialog/services/DialogRegistry.ts

@@ -0,0 +1,78 @@
+import { computed, effect, Injectable, signal } from "@angular/core";
+import { Registry } from "../../Registry";
+import { NGSuiteDialogInstance } from "./DialogInstance";
+import { BehaviorSubject } from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NGSuiteDialogRegistry {
+
+  private readonly list = signal<NGSuiteDialogInstance[]>([]);
+
+  get count() { return this.xCount; }
+  private xCount = 0;
+
+  constructor() {
+    const body = document.querySelector('body');
+
+    effect(() => {
+      const entries = this.list();
+
+      this.xCount = entries.length;
+
+      // =================
+
+      const isOpen = entries.length > 0;
+      body?.classList.toggle('ngs-dialog-open', isOpen);
+    });
+  }
+
+  readonly active = () => {
+    const entries = this.list();
+    if (!entries.length) return null;
+
+    const lastIndex = entries.length - 1;
+    return entries[lastIndex];
+  }
+
+  readonly focus = () => {
+    const item = this.active();
+    item?.focus();
+  }
+
+  readonly add = (...items: NGSuiteDialogInstance[]) => {
+    const entries = this.list();
+
+    entries.push(...items);
+
+    this.list.set(entries);
+  }
+
+  readonly remove = (item: NGSuiteDialogInstance) => {
+    const entries = this.list();
+
+    const index = entries.indexOf(item);
+    entries.splice(index, 1);
+
+    this.list.set(entries);
+  }
+
+  readonly closeAll = () => {
+    const entries = this.list();
+
+    while (entries.length) {
+      const instance = entries.pop();
+      instance?.close(false);
+    }
+
+    this.list.set(entries);
+  }
+
+  readonly clear = () => {
+    this.list.set([]);
+  }
+
+}
+
+Registry.add(NGSuiteDialogRegistry);