refactor(modal): prevent body scroll when the modal is visible

Author: xidedix

projects/coreui-angular/src/lib/modal/modal/modal.component.ts

@@ -37,7 +37,7 @@ import { ModalContentComponent } from '../modal-content/modal-content.component'
           display: 'none'
         })
       ),
-      transition('visible <=> *', [animate('300ms')],)
+      transition('visible <=> *', [animate('300ms')])
     ])
   ],
   templateUrl: './modal.component.html',
@@ -50,7 +50,7 @@ export class ModalComponent implements OnInit, OnDestroy {
   static ngAcceptInputType_visible: BooleanInput;
 
   constructor(
-    @Inject(DOCUMENT) private document: any,
+    @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
     private hostElement: ElementRef,
     private modalService: ModalService,
@@ -111,9 +111,11 @@ export class ModalComponent implements OnInit, OnDestroy {
   set scrollable(value: boolean) {
     this._scrollable = coerceBooleanProperty(value);
   }
+
   get scrollable(): boolean {
     return this._scrollable;
   }
+
   private _scrollable = false;
 
   /**
@@ -123,35 +125,36 @@ export class ModalComponent implements OnInit, OnDestroy {
   @Input()
   set visible(value: boolean) {
     const newValue = coerceBooleanProperty(value);
-    if(this._visible !== newValue) {
+    if (this._visible !== newValue) {
       this._visible = newValue;
       this.setBackdrop(this.backdrop !== false && newValue);
       this.setBodyStyles(newValue);
       this.visibleChange.emit(newValue);
     }
   }
+
   get visible(): boolean {
     return this._visible;
   }
+
   private _visible!: boolean;
 
   /**
    * Event triggered on modal dismiss.
    */
   @Output() visibleChange = new EventEmitter<boolean>();
 
-  @ViewChild(ModalContentComponent, {read: ElementRef}) modalContent!: ElementRef;
+  @ViewChild(ModalContentComponent, { read: ElementRef }) modalContent!: ElementRef;
   private activeBackdrop!: any;
   private stateToggleSubscription!: Subscription;
   private inBoundingClientRect!: boolean;
 
-
   @HostBinding('class')
   get hostClasses(): any {
     return {
       modal: true,
       fade: this.transition,
-      show: this.show,
+      show: this.show
     };
   }
 
@@ -170,14 +173,16 @@ export class ModalComponent implements OnInit, OnDestroy {
     return this.visible ? 'visible' : 'hidden';
   }
 
-  private _show = true;
   get show(): boolean {
     return this.visible && this._show;
   }
+
   set show(value: boolean) {
     this._show = value;
   }
 
+  private _show = true;
+
   private get scrollbarWidth() {
     // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
     const documentWidth = this.document.documentElement.clientWidth;
@@ -187,28 +192,21 @@ export class ModalComponent implements OnInit, OnDestroy {
 
   @HostListener('@showHide.start', ['$event'])
   animateStart(event: AnimationEvent) {
-    this.renderer.setStyle(this.hostElement.nativeElement, 'overflow-y', 'hidden');
-    this.show = this.visible;
+    const scrollbarWidth = this.scrollbarWidth;
+    if (event.toState === 'visible') {
+      this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
+      this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
+    }
   }
 
   @HostListener('@showHide.done', ['$event'])
   animateDone(event: AnimationEvent) {
-    const scrollbarWidth = this.scrollbarWidth;
     setTimeout(() => {
-      if (event.toState === 'visible') {
-        this.inBoundingClientRect = this.modalContent?.nativeElement?.getBoundingClientRect().height <= this.document?.documentElement.clientHeight;
-        if (!this.inBoundingClientRect) {
-          this.renderer.setStyle(this.document.body, 'overflow-y', 'hidden');
-          this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);
-        } else {
-          this.renderer.removeStyle(this.document.body, 'overflow-y');
-          this.renderer.removeStyle(this.document.body, 'padding-right');
-        }
-        if (this.fullscreen === true) {
-          this.renderer.setStyle(this.document.body, 'overflow-y', 'hidden');
-        }
-        this.renderer.removeStyle(this.hostElement.nativeElement, 'overflow-y');
+      if (event.toState === 'hidden') {
+        this.renderer.removeStyle(this.document.body, 'overflow');
+        this.renderer.removeStyle(this.document.body, 'padding-right');
       }
+      this.show = this.visible;
     });
   }
 
@@ -218,7 +216,7 @@ export class ModalComponent implements OnInit, OnDestroy {
       if (this.backdrop === 'static') {
         this.setStaticBackdrop();
       } else {
-        this.modalService.toggle({show: false, modal: this});
+        this.modalService.toggle({ show: false, modal: this });
       }
     }
   }
@@ -241,15 +239,15 @@ export class ModalComponent implements OnInit, OnDestroy {
       this.setStaticBackdrop();
       return;
     }
-    this.modalService.toggle({show: false, modal: this});
+    this.modalService.toggle({ show: false, modal: this });
   }
 
   ngOnInit(): void {
     this.stateToggleSubscribe();
   }
 
   ngOnDestroy(): void {
-    this.modalService.toggle({show: false, modal: this});
+    this.modalService.toggle({ show: false, modal: this });
     this.stateToggleSubscribe(false);
   }
 
@@ -283,16 +281,11 @@ export class ModalComponent implements OnInit, OnDestroy {
 
   private setBodyStyles(open: boolean): void {
     if (open) {
-      if (this.fullscreen === true) {
-        this.renderer.setStyle(this.document.body, 'overflow-y', 'hidden');
-      }
       if (this.backdrop === true) {
         this.renderer.addClass(this.document.body, 'modal-open');
       }
     } else {
       this.renderer.removeClass(this.document.body, 'modal-open');
-      this.renderer.removeStyle(this.document.body, 'overflow-y');
-      this.renderer.removeStyle(this.document.body, 'padding-right');
     }
   }
 
@@ -303,7 +296,7 @@ export class ModalComponent implements OnInit, OnDestroy {
       setTimeout(() => {
         this.renderer.removeClass(this.hostElement.nativeElement, 'modal-static');
         this.renderer.removeStyle(this.hostElement.nativeElement, 'overflow-y');
-      }, 400);
+      }, 300);
     }
   }
 }