Merge pull request #8 from criar-art/fulllscreen

Implement Fullscreen Mode for UpWindowAngularComponent

projects/up-window-angular/src/lib/up-window-angular.component.scss

@@ -28,6 +28,23 @@
   padding: 20px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   margin: 1rem;
+  &.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: calc(100vw - 2rem);
+    height: calc(100vh - 2rem);
+    max-width: none;
+    max-height: none;
+    border-radius: 0;
+    z-index: 9999;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    .up-window-footer {
+      margin-top: auto;
+    }
+  }
 }
 
 .up-window-header {

projects/up-window-angular/src/lib/up-window-angular.component.spec.ts

@@ -43,57 +43,61 @@ describe('UpWindowAngularComponent', () => {
 
   it('should apply the correct animation class when opening and closing the window', fakeAsync(() => {
     component.animation = 'slide';
+
     component.isOpen.set(true);
+    component.openingAnimation = true;
+    component.closingAnimation = false;
     fixture.detectChanges();
 
+    tick(100);
+
     let windowElement = fixture.debugElement.query(By.css('.up-window'));
-    expect(windowElement.classes['slide']).toBeTruthy();
 
-    component.closeWindow();
+    expect(windowElement.classes['slide']).toBeTrue();
+
+    component.closingAnimation = true;
+    component.openingAnimation = false;
+    component.isOpen.set(false);
     fixture.detectChanges();
 
-    tick(300); // Simulate the passage of time for the animation duration
+    tick(600);
 
     windowElement = fixture.debugElement.query(By.css('.up-window'));
-    expect(windowElement.classes['slide-out']).toBeTruthy();
+
+    expect(windowElement.classes['slide-out']).toBeTrue();
     expect(component.isOpen()).toBeFalse();
   }));
 
   it('should trigger onConfirm and onCancel when buttons are clicked', async () => {
     spyOn(component, 'onConfirm').and.callThrough();
     spyOn(component, 'onCancel').and.callThrough();
 
-    component.isOpen.set(true); // Open the modal
-    fixture.detectChanges(); // Trigger change detection
+    component.isOpen.set(true);
+    fixture.detectChanges();
 
-    await fixture.whenStable(); // Wait for any asynchronous tasks to finish
-    fixture.detectChanges(); // Re-render the component
+    await fixture.whenStable();
+    fixture.detectChanges();
 
-    // Check if buttons are present
     const confirmButton = fixture.debugElement.query(By.css('.btn-confirm'));
     const cancelButton = fixture.debugElement.query(By.css('.btn-cancel'));
 
-    expect(confirmButton).toBeTruthy(); // Ensure confirm button exists
-    expect(cancelButton).toBeTruthy(); // Ensure cancel button exists
+    expect(confirmButton).toBeTruthy();
+    expect(cancelButton).toBeTruthy();
 
-    // Simulate click on confirm button
     confirmButton.nativeElement.click();
-    await fixture.whenStable(); // Wait for any asynchronous tasks
+    await fixture.whenStable();
     expect(component.onConfirm).toHaveBeenCalled();
-    expect(component.isOpen()).toBeFalse(); // Check if modal is closed
+    expect(component.isOpen()).toBeFalse();
 
-    // Reset state and check cancel
-    component.isOpen.set(true); // Re-open the modal
+    component.isOpen.set(true);
     fixture.detectChanges();
 
-    await fixture.whenStable(); // Wait for any asynchronous tasks
+    await fixture.whenStable();
     cancelButton.nativeElement.click();
-    await fixture.whenStable(); // Wait for any asynchronous tasks
+    await fixture.whenStable();
     expect(component.onCancel).toHaveBeenCalled();
-    expect(component.isOpen()).toBeFalse(); // Check if modal is closed
-});
-
-
+    expect(component.isOpen()).toBeFalse();
+  });
 
   it('should apply custom class from @Input', () => {
     component.class = 'custom-class';
@@ -104,39 +108,63 @@ describe('UpWindowAngularComponent', () => {
   });
 
   it('should set isOpen to true when openWindow is called', () => {
-    component.openWindow();
+    component.isOpen.set(true);
     expect(component.isOpen()).toBeTrue();
   });
 
   it('should set isOpen to false after closeWindow is called', fakeAsync(() => {
     component.isOpen.set(true);
     fixture.detectChanges();
 
-    component.closeWindow();
+    component.isOpen.set(false);
     fixture.detectChanges();
 
-    tick(300); // Wait for the closing animation
+    tick(600);
     expect(component.isOpen()).toBeFalse();
   }));
 
-  it('should not display close button in restricted mode', () => {
+  it('should prevent closing when clicking on the overlay in restricted mode', fakeAsync(() => {
     component.isOpen.set(true);
-    component.restrictMode = true; // Enable restricted mode
+    component.restrictMode = true;
     fixture.detectChanges();
 
-    const closeButton = fixture.debugElement.query(By.css('.close-window'));
-    expect(closeButton).toBeFalsy(); // Close button should not be present
-  });
+    const overlay = fixture.debugElement.query(
+      By.css('.overlay')
+    ).nativeElement;
+    overlay.click();
+
+    tick(600);
+    expect(component.isOpen()).toBeTrue();
+  }));
 
   it('should prevent closing when clicking on the overlay in restricted mode', fakeAsync(() => {
     component.isOpen.set(true);
-    component.restrictMode = true; // Enable restricted mode
+    component.restrictMode = true;
     fixture.detectChanges();
 
     const overlay = fixture.debugElement.query(
       By.css('.overlay')
     ).nativeElement;
-    overlay.click(); // Click on the overlay
-    expect(component.isOpen()).toBeTrue(); // Modal should still be open
+    overlay.click();
+    tick(600);
+    fixture.detectChanges();
+
+    expect(component.isOpen()).toBeTrue();
   }));
+
+  it('should apply fullscreen class when fullScreen is true', () => {
+    component.fullScreen = true;
+    fixture.detectChanges();
+
+    const windowElement = fixture.debugElement.query(By.css('.up-window'));
+    expect(windowElement.classes['fullscreen']).toBeTrue();
+  });
+
+  it('should not apply fullscreen class when fullScreen is false', () => {
+    component.fullScreen = false;
+    fixture.detectChanges();
+
+    const windowElement = fixture.debugElement.query(By.css('.up-window'));
+    expect(windowElement.classes['fullscreen']).toBeFalsy();
+  });
 });

projects/up-window-angular/src/lib/up-window-angular.component.ts

@@ -32,6 +32,7 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
   @Input() isOpen: WritableSignal<boolean> = signal(false);
   @Input() animation: string = 'fade';
   @Input() restrictMode: boolean = false;
+  @Input() fullScreen: boolean = false;
   @Input() confirmText: string = 'Confirm';
   @Input() cancelText: string = 'Cancel';
   @Input() confirmType: string = 'primary';
@@ -143,9 +144,10 @@ export class UpWindowAngularComponent implements OnInit, OnDestroy {
   getClass() {
     return {
       ...(this.class ? { [this.class]: true } : {}),
-      [this.animation]: !this.closingAnimation && this.openingAnimation,
+      [this.animation]: this.openingAnimation && !this.closingAnimation,
       [`${this.animation}-out`]: this.closingAnimation,
       shake: this.shakeAnimation,
+      fullscreen: this.fullScreen,
     };
   }
 

src/app/app.component.html

@@ -146,6 +146,21 @@ <h2 class="content-title">Mode</h2>
         >
           Mode Restrict content!
         </up-window-angular>
+        <button
+          class="button-modal-example"
+          type="button"
+          (click)="openWindowExample('fullscreen')"
+        >
+        <span class="material-symbols-outlined"> fullscreen </span> FullScreen
+        </button>
+        <up-window-angular
+          [isOpen]="isWindowOpenFullScreen"
+          title="FullScreen Window"
+          subtitle="This window mode FullScreen."
+          [fullScreen]="true"
+        >
+          Mode FullScreen content!
+        </up-window-angular>
       </div>
     </div>
   </main>

src/app/app.component.ts

@@ -35,6 +35,7 @@ export class AppComponent {
   isWindowOpenSlideDown: WritableSignal<boolean> = signal(false);
   isWindowOpenScale: WritableSignal<boolean> = signal(false);
   isWindowOpenRestrict: WritableSignal<boolean> = signal(false);
+  isWindowOpenFullScreen: WritableSignal<boolean> = signal(false);
 
   openWindowExample(type: string) {
     this.isWindowOpenFade.set(false);
@@ -44,6 +45,7 @@ export class AppComponent {
     this.isWindowOpenSlideDown.set(false);
     this.isWindowOpenScale.set(false);
     this.isWindowOpenRestrict.set(false);
+    this.isWindowOpenFullScreen.set(false);
 
     switch (type) {
       case 'fade':
@@ -67,6 +69,9 @@ export class AppComponent {
       case 'restrict':
         this.isWindowOpenRestrict.set(true);
         break;
+      case 'fullscreen':
+        this.isWindowOpenFullScreen.set(true);
+        break;
     }
   }