Merge pull request #13 from criar-art/portal-window

Implement Portal Logic for UpWindowAngularComponent
criar-art · Oct 17, 2024 · 0e66a3c · 0e66a3c
2 parents 18aa47e + a50c273
commit 0e66a3c
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 3 deletions.
diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.spec.ts b/projects/up-window-angular/src/lib/up-window-angular.component.spec.ts
@@ -41,6 +41,36 @@ describe('UpWindowAngularComponent', () => {
     expect(subtitleElement.textContent).toContain('Test Subtitle');
   });
 
+  it('should append modal to body when isOpen is true', fakeAsync(() => {
+    component.isOpen.set(false);
+    fixture.detectChanges();
+    expect(document.body.querySelector('.up-window')).toBeNull();
+
+    component.isOpen.set(true);
+    fixture.detectChanges();
+    tick(100);
+    expect(document.body.querySelector('.up-window')).toBeTruthy();
+
+    component.isOpen.set(false);
+    fixture.detectChanges();
+    tick(400);
+    expect(document.body.querySelector('.up-window')).toBeNull();
+  }));
+
+  it('should not reappend modal if it is already in the body', fakeAsync(() => {
+    component.isOpen.set(true);
+    fixture.detectChanges();
+    tick(600);
+
+    spyOn(component, 'addModalToBody').and.callThrough();
+
+    component.addModalToBody();
+    fixture.detectChanges();
+
+    expect(component.addModalToBody).toHaveBeenCalledTimes(1);
+    expect(document.body.querySelectorAll('.up-window').length).toBe(1);
+  }));
+
   it('should apply the correct animation class when opening and closing the window', fakeAsync(() => {
     component.animation = 'slide';
 

diff --git a/projects/up-window-angular/src/lib/up-window-angular.component.ts b/projects/up-window-angular/src/lib/up-window-angular.component.ts
@@ -55,9 +55,13 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
 
   constructor() {
     effect(() => {
-      this.isOpen()
-        ? this.startOpeningAnimation()
-        : this.startClosingAnimation();
+      if (this.isOpen()) {
+        this.addModalToBody();
+        this.startOpeningAnimation();
+      } else {
+        this.startClosingAnimation();
+        this.removeModalFromBody();
+      }
     });
   }
 
@@ -67,6 +71,8 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
 
   ngAfterViewInit(): void {
     if (this.modal) {
+      document.body.appendChild(this.modal.nativeElement);
+
       this.focusableElements = this.modal.nativeElement.querySelectorAll(
         'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
       );
@@ -78,6 +84,18 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
     }
   }
 
+  addModalToBody() {
+    if (this.modal && this.modal.nativeElement.parentNode !== document.body) {
+      document.body.appendChild(this.modal.nativeElement);
+    }
+  }
+
+  removeModalFromBody() {
+    if (this.modal && this.modal.nativeElement.parentNode === document.body) {
+      document.body.removeChild(this.modal.nativeElement);
+    }
+  }
+
   handleKeydown(event: KeyboardEvent) {
     if (event.key === 'Escape' && this.isOpen() && !this.restrictMode) {
       this.closeWindow();
@@ -111,6 +129,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this.removeModalFromBody();
     document.removeEventListener('keydown', this.handleKeydown.bind(this));
   }