Add window resize event

See #15
themyth92 · Jun 15, 2017 · d26b4f6 · d26b4f6
1 parent beefeee
commit d26b4f6
Showing 1 changed file with 15 additions and 4 deletions.
diff --git a/src/lightbox-overlay.component.ts b/src/lightbox-overlay.component.ts
@@ -2,6 +2,7 @@ import {
   AfterViewInit,
   Component,
   ElementRef,
+  HostListener,
   Inject,
   Input,
   OnDestroy,
@@ -35,27 +36,37 @@ export class LightboxOverlayComponent implements AfterViewInit, OnDestroy {
   }
 
   public ngAfterViewInit(): void {
-    const width = this._getOverlayWidth();
-    const height = this._getOverlayHeight();
     const fadeDuration = this.options.fadeDuration;
 
-    this._rendererRef.setElementStyle(this._elemRef.nativeElement, 'width', `${width}px`);
-    this._rendererRef.setElementStyle(this._elemRef.nativeElement, 'height', `${height}px`);
     this._rendererRef.setElementStyle(this._elemRef.nativeElement,
       '-webkit-animation-duration', `${fadeDuration}s`);
     this._rendererRef.setElementStyle(this._elemRef.nativeElement,
       '-animation-duration', `${fadeDuration}s`);
+    this._sizeOverlay();
   }
 
   public close(): void {
     // broadcast to itself and all others subscriber including the components
     this._lightboxEvent.broadcastLightboxEvent({ id: LIGHTBOX_EVENT.CLOSE, data: null });
   }
 
+  @HostListener('window:resize')
+  public onResize(): void {
+    this._sizeOverlay();
+  }
+
   public ngOnDestroy(): void {
     this._subscription.unsubscribe();
   }
 
+  private _sizeOverlay(): void {
+    const width = this._getOverlayWidth();
+    const height = this._getOverlayHeight();
+
+    this._rendererRef.setElementStyle(this._elemRef.nativeElement, 'width', `${width}px`);
+    this._rendererRef.setElementStyle(this._elemRef.nativeElement, 'height', `${height}px`);
+  }
+
   private _onReceivedEvent(event: IEvent): void {
     switch (event.id) {
       case LIGHTBOX_EVENT.CLOSE: