(wip): Modal service with root element

src/app/common/components/overlay-modal/overlay-modal.component.scss

@@ -122,7 +122,7 @@
  }
 }
 
-body.m-overlay-modal--shown {
+.m-overlay-modal--shown {
  overflow: hidden;
 }
 

src/app/common/components/overlay-modal/overlay-modal.component.ts

@@ -26,6 +26,7 @@ export class OverlayModalComponent implements AfterViewInit {
 
  hidden: boolean = true;
  class: string = '';
+ root: HTMLElement;
 
  @ViewChild(DynamicHostDirective, { static: true })
  private host: DynamicHostDirective;
@@ -41,6 +42,10 @@ export class OverlayModalComponent implements AfterViewInit {
  ) { }
 
  ngAfterViewInit() {
+ if (!this.root && document && document.body) {
+ this.root = document.body;
+ }
+
  this.service.setContainer(this);
  }
 
@@ -67,6 +72,10 @@ export class OverlayModalComponent implements AfterViewInit {
  this.componentInstance.parent = this.modalElement.nativeElement;
  }
 
+ setRoot(root: HTMLElement) {
+ this.root = root;
+ }
+
  setData(data) {
  if (!this.componentInstance) {
  return;
@@ -91,16 +100,16 @@ export class OverlayModalComponent implements AfterViewInit {
 
  this.hidden = false;
 
- if (document && document.body) {
- document.body.classList.add('m-overlay-modal--shown');
+ if (this.root) {
+ this.root.classList.add('m-overlay-modal--shown');
  }
  }
 
  dismiss() {
  this.hidden = true;
 
- if (document && document.body) {
- document.body.classList.remove('m-overlay-modal--shown');
+ if (this.root) {
+ this.root.classList.remove('m-overlay-modal--shown');
  }
 
  if (!this.componentInstance) {

src/app/modules/pro/channel/channel.component.ts

@@ -94,7 +94,9 @@ export class ProChannelComponent implements OnInit, AfterViewInit, OnDestroy {
  }
 
  ngAfterViewInit() {
- this.modalService.setContainer(this.overlayModal);
+ this.modalService
+ .setContainer(this.overlayModal)
+ .setRoot(this.element.nativeElement);
  }
 
  listen() {

src/app/modules/pro/channel/list-modal/list-modal.component.ts

-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Injector, ViewChild } from '@angular/core';
 import { ProChannelService } from '../channel.service';
 import { FeedsService } from '../../../../common/services/feeds.service';
 import { ProContentModalComponent } from '../content-modal/modal.component';
@@ -35,13 +35,16 @@ export class ProChannelListModal {
  protected channelService: ProChannelService,
  protected feedsService: FeedsService,
  protected modalService: OverlayModalService,
+ protected element: ElementRef,
  protected cd: ChangeDetectorRef,
  protected injector: Injector,
  ) {
  }
 
  ngAfterViewInit() {
- this.modalService.setContainer(this.overlayModal);
+ this.modalService
+ .setContainer(this.overlayModal)
+ .setRoot(this.element.nativeElement);
 
  this.load(true);
  }

src/app/services/ux/overlay-modal.ts

@@ -18,6 +18,12 @@ export class OverlayModalService {
  return this;
  }
 
+ setRoot(root: HTMLElement) {
+ this.container.setRoot(root);
+
+ return this;
+ }
+
  create(component, data?, opts?, injector?: Injector) {
  if (!this.container) {
  throw new Error('Missing overlay container');