fix(window): create new window container when overlay container change (

#1867)
akveo · Aug 26, 2019 · edb6b16 · edb6b16
1 parent 0b969cb
commit edb6b16
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 12 deletions.
diff --git a/src/framework/theme/components/window/window.service.spec.ts b/src/framework/theme/components/window/window.service.spec.ts
@@ -1,12 +1,14 @@
-import { Component, ElementRef, NgModule, ViewChild, TemplateRef } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { NB_DOCUMENT } from '../../theme.options';
-import { NbThemeModule } from '../../theme.module';
-import { NbOverlayContainerAdapter } from '../cdk/adapter/overlay-container-adapter';
-import { NbViewportRulerAdapter } from '../cdk/adapter/viewport-ruler-adapter';
-import { NbWindowModule } from './window.module';
-import { NbWindowService } from './window.service';
 import createSpy = jasmine.createSpy;
+import { Component, ElementRef, NgModule, ViewChild, TemplateRef } from '@angular/core';
+import { TestBed, fakeAsync, flush } from '@angular/core/testing';
+import {
+  NbWindowService,
+  NbWindowModule,
+  NbViewportRulerAdapter,
+  NbOverlayContainerAdapter,
+  NB_DOCUMENT,
+  NbThemeModule,
+} from '@nebular/theme';
 
 const WINDOW_CONTENT = 'window content';
 @Component({
@@ -38,7 +40,7 @@ class NbTestWindowWithTemplateComponent {
 
 @Component({
   selector: 'nb-test-window-with-component',
-  template: `<p>window content {{ componentInput }}<p>`,
+  template: `<p id="window-content">window content {{ componentInput }}<p>`,
 })
 export class TestWindowComponent {}
 
@@ -259,4 +261,32 @@ describe('window-service', () => {
     const windowElement: ElementRef<HTMLElement> = windowRef.componentRef.injector.get(ElementRef);
     expect(windowElement.nativeElement.innerText).toEqual('window content hello world');
   });
+
+  it('should create new window container when overlay container changed', fakeAsync(() => {
+    const fixture = TestBed.createComponent(NbTestWindowWithTemplateComponent);
+    fixture.detectChanges();
+
+    // Show window to force windows container creation
+    const windowRef = fixture.componentInstance.openWindow();
+    fixture.detectChanges();
+    flush();
+
+    windowRef.close();
+    fixture.detectChanges();
+    flush();
+
+    // Change overlay container
+    overlayContainerService.ngOnDestroy();
+    overlayContainerService.clearContainer();
+    overlayContainer = document.createElement('div');
+    overlayContainerService.setContainer(overlayContainer);
+    document.body.appendChild(overlayContainer);
+
+    windowService.open(TestWindowComponent);
+    fixture.detectChanges();
+    flush();
+
+    const windowContent = document.getElementById('window-content');
+    expect(document.body.contains(windowContent)).toEqual(true);
+  }));
 });
diff --git a/src/framework/theme/components/window/window.service.ts b/src/framework/theme/components/window/window.service.ts
@@ -26,6 +26,7 @@ import {
 import { NbWindowRef } from './window-ref';
 import { NbWindowsContainerComponent } from './windows-container.component';
 import { NbWindowComponent } from './window.component';
+import { NB_DOCUMENT } from '../../theme.options';
 
 /**
  * The `NbWindowService` can be used to open windows.
@@ -38,7 +39,7 @@ import { NbWindowComponent } from './window.component';
  * ```ts
  * @NgModule({
  *   imports: [
- *   	// ...
+ *     // ...
  *     NbWindowModule.forRoot(config),
  *   ],
  * })
@@ -49,7 +50,7 @@ import { NbWindowComponent } from './window.component';
  * ```ts
  * @NgModule({
  *   imports: [
- *   	// ...
+ *     // ...
  *     NbWindowModule.forChild(config),
  *   ],
  * })
@@ -101,6 +102,7 @@ import { NbWindowComponent } from './window.component';
 @Injectable()
 export class NbWindowService {
 
+  protected document: Document;
   protected overlayRef: NbOverlayRef;
   protected windowsContainerViewRef: ViewContainerRef;
   protected openWindows: NbWindowRef[] = [];
@@ -112,7 +114,9 @@ export class NbWindowService {
     protected blockScrollStrategy: NbBlockScrollStrategyAdapter,
     @Inject(NB_WINDOW_CONFIG) protected readonly defaultWindowsConfig: NbWindowConfig,
     protected cfr: ComponentFactoryResolver,
+    @Inject(NB_DOCUMENT) document,
   ) {
+    this.document = document;
   }
 
   /**
@@ -124,7 +128,7 @@ export class NbWindowService {
     windowContent: TemplateRef<any> | NbComponentType,
     windowConfig: Partial<NbWindowConfig> = {},
   ): NbWindowRef {
-    if (this.windowsContainerViewRef == null) {
+    if (this.shouldCreateWindowsContainer()) {
       this.createWindowsContainer();
     }
 
@@ -138,7 +142,20 @@ export class NbWindowService {
     return windowRef;
   }
 
+  protected shouldCreateWindowsContainer(): boolean {
+    if (this.windowsContainerViewRef) {
+      const containerEl = this.windowsContainerViewRef.element.nativeElement;
+      return !this.document.body.contains(containerEl);
+    }
+
+    return true;
+  }
+
   protected createWindowsContainer() {
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+    }
+
     this.overlayRef = this.overlayService.create({
       scrollStrategy: this.overlayService.scrollStrategies.noop(),
       positionStrategy: this.overlayPositionBuilder.global().bottom().right(),