Merge pull request #5 from Shemesh/renderer2

Renderer2
Shemesh · Jan 4, 2021 · fe9b97a · fe9b97a
2 parents 3699148 + 6ed4107
commit fe9b97a
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -9,9 +9,7 @@ try the [online demo](https://shemesh.github.io/angular-popout-window/) to see s
 
 supports opening several child windows.
 
-thriving for a minimal footprint, ease of use, clean and compatible code. 
-
-...stay tuned.
+thriving for a minimal footprint, ease of use, clean and compatible code.
 
 ## Installation
 Install through npm:
@@ -53,10 +51,16 @@ you can override this by explicitly setting each of those properties for the new
 - `windowWidth` - width of window in pixels.
 - `windowHeight`  - height of window in pixels.
 
+use `windowStyle` property to apply styles on the child window, or `windowStyleUrl` to add a css file.
+
+`suppressCloneStyles` will skip the style cloning from parent to popped out window.
+
 when the popped out child window is closed, by pressing its X button for example, it will run `popIn()` to bring the content back inside.
 
 when the main page unload the popped window is closed.
 
+starting in version 3.0.0 the package depends on Angular/core only (removed the cdk dependency on).
+
 ## License
 
 MIT
diff --git a/docs/index.html b/docs/index.html
@@ -9,5 +9,5 @@
 </head>
 <body>
   <app-main></app-main>
-<script src="runtime.e7df24b5d39b2102df5c.js" defer></script><script src="polyfills.629fabf0194644aa8ddc.js" defer></script><script src="styles.bbef5938f377e347677f.js" defer></script><script src="main.34f830e3d3a951d0a45c.js" defer></script></body>
+<script src="runtime.e7df24b5d39b2102df5c.js" defer></script><script src="polyfills.629fabf0194644aa8ddc.js" defer></script><script src="styles.bbef5938f377e347677f.js" defer></script><script src="main.7ae65ca0c682848b0545.js" defer></script></body>
 </html>
diff --git a/docs/main.34f830e3d3a951d0a45c.js b/docs/main.34f830e3d3a951d0a45c.js
diff --git a/docs/main.7ae65ca0c682848b0545.js b/docs/main.7ae65ca0c682848b0545.js
diff --git a/package.json b/package.json
@@ -20,7 +20,6 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~10.2.0",
-    "@angular/cdk": "~10.2.0",
     "@angular/common": "~10.2.0",
     "@angular/compiler": "~10.2.0",
     "@angular/core": "~10.2.0",
@@ -33,6 +32,7 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
+    "@angular/cdk": "~10.2.0",
     "@angular-devkit/build-angular": "~0.1002.0",
     "@angular/cli": "~10.2.0",
     "@angular/compiler-cli": "~10.2.0",

diff --git a/projects/popout-window/README.md b/projects/popout-window/README.md
@@ -9,9 +9,7 @@ try the [online demo](https://shemesh.github.io/angular-popout-window/) to see s
 
 supports opening several child windows.
 
-thriving for a minimal footprint, ease of use, clean and compatible code. 
-
-...stay tuned.
+thriving for a minimal footprint, ease of use, clean and compatible code.
 
 ## Installation
 Install through npm:
@@ -53,10 +51,16 @@ you can override this by explicitly setting each of those properties for the new
 - `windowWidth` - width of window in pixels.
 - `windowHeight`  - height of window in pixels.
 
+use `windowStyle` property to apply styles on the child window, or `windowStyleUrl` to add a css file.
+
+`suppressCloneStyles` will skip the style cloning from parent to popped out window.
+
 when the popped out child window is closed, by pressing its X button for example, it will run `popIn()` to bring the content back inside.
 
 when the main page unload the popped window is closed.
 
+starting in version 3.0.0 the package depends on Angular/core only (removed the cdk dependency on).
+
 ## License
 
 MIT
diff --git a/projects/popout-window/package.json b/projects/popout-window/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-popout-window",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "Angular library to popout part of your application to a new un-docked browser child window.",
   "license": "MIT",
   "homepage": "https://github.com/Shemesh/angular-popout-window",
@@ -12,8 +12,7 @@
     "url": "https://github.com/Shemesh/angular-popout-window/issues"
   },
   "peerDependencies": {
-    "@angular/core": "^10.0.0",
-    "@angular/cdk": "^10.0.0"
+    "@angular/core": "^10.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"

diff --git a/projects/popout-window/src/lib/popout-window.component.ts b/projects/popout-window/src/lib/popout-window.component.ts
@@ -1,32 +1,23 @@
 import {
-  AfterViewInit,
-  ApplicationRef,
   Component,
-  ComponentFactoryResolver,
   ElementRef,
   HostListener,
-  Injector,
-  Input, OnDestroy,
+  Input, OnDestroy, Renderer2,
   ViewChild
 } from '@angular/core';
-import {CdkPortal, CdkPortalOutlet, DomPortalOutlet} from '@angular/cdk/portal';
 
 @Component({
-  // tslint:disable-next-line:component-selector
   selector: 'popout-window',
   template: `
-    <ng-content *cdkPortal></ng-content>
-    <div #innerOutletWrapper style="width: 100%; height: 100%; overflow: auto;">
-      <ng-container *cdkPortalOutlet></ng-container>
+    <div #innerWrapper style="width: 100%; height: 100%; overflow: auto;">
+      <ng-content></ng-content>
     </div>
   `
 })
 
-export class PopoutWindowComponent implements AfterViewInit, OnDestroy  {
+export class PopoutWindowComponent implements OnDestroy  {
 
-  @ViewChild(CdkPortal) private portal: CdkPortal;
-  @ViewChild(CdkPortalOutlet) private portalOutlet: CdkPortalOutlet;
-  @ViewChild('innerOutletWrapper') private innerOutletWrapper: ElementRef;
+  @ViewChild('innerWrapper') private innerWrapper: ElementRef;
 
   @Input() windowWidth: number;
   @Input() windowHeight: number;
@@ -49,15 +40,10 @@ export class PopoutWindowComponent implements AfterViewInit, OnDestroy  {
   }
 
   constructor(
-    private componentFactoryResolver: ComponentFactoryResolver,
-    private applicationRef: ApplicationRef,
-    private injector: Injector
+    private renderer2: Renderer2,
+    private elementRef: ElementRef
   ) {}
 
-  ngAfterViewInit(): void {
-    this.popIn();
-  }
-
   ngOnDestroy(): void {
     this.close();
   }
@@ -71,22 +57,19 @@ export class PopoutWindowComponent implements AfterViewInit, OnDestroy  {
   }
 
   public popIn(): void {
-    if (!this.portalOutlet.hasAttached()) {
-      this.portalOutlet.attach(this.portal);
-    }
-
+    this.renderer2.appendChild(this.elementRef.nativeElement, this.innerWrapper.nativeElement);
     this.close();
   }
 
   public popOut(): void {
     if (!this.popoutWindow) {
-      const elmRect = this.innerOutletWrapper.nativeElement.getBoundingClientRect();
+      const elmRect = this.innerWrapper.nativeElement.getBoundingClientRect();
 
       const navHeight = window.outerHeight - window.innerHeight;
       const navWidth = window.outerWidth - window.innerWidth;
 
       const winLeft = this.windowLeft || window.screenX + navWidth + elmRect.left;
-      const winTop = this.windowTop || window.screenY + navHeight + elmRect.top;
+      const winTop = this.windowTop || window.screenY + navHeight + elmRect.top - 60;
 
       this.popoutWindow = window.open(
         '',
@@ -124,23 +107,7 @@ export class PopoutWindowComponent implements AfterViewInit, OnDestroy  {
         this.popoutWindow.document.head.insertAdjacentHTML('beforeend', `<style>${this.windowStyle}</style>`);
       }
 
-      // if (!this.windowTop) {
-      //   setTimeout(() => {
-      //     this.popoutWindow.moveBy(this.popoutWindow.innerWidth - this.popoutWindow.outerWidth,
-      //       this.popoutWindow.innerHeight - this.popoutWindow.outerHeight);
-      //   }, 50);
-      // }
-
-      const host = new DomPortalOutlet(
-        this.popoutWindow.document.body,
-        this.componentFactoryResolver,
-        this.applicationRef,
-        this.injector
-      );
-      if (this.portalOutlet.hasAttached()) {
-        this.portalOutlet.detach();
-      }
-      host.attach(this.portal);
+      this.renderer2.appendChild(this.popoutWindow.document.body, this.innerWrapper.nativeElement);
       this.isOut = true;
 
       this.popoutWindow.addEventListener('unload', () => {

diff --git a/projects/popout-window/src/lib/popout-window.module.ts b/projects/popout-window/src/lib/popout-window.module.ts
@@ -1,12 +1,8 @@
 import { NgModule } from '@angular/core';
 import { PopoutWindowComponent } from './popout-window.component';
-import {PortalModule} from '@angular/cdk/portal';
 
 @NgModule({
   declarations: [PopoutWindowComponent],
-    imports: [
-        PortalModule
-    ],
   exports: [PopoutWindowComponent]
 })
 export class PopoutWindowModule { }
diff --git a/projects/popout-window/tslint.json b/projects/popout-window/tslint.json
@@ -10,7 +10,6 @@
     "component-selector": [
       true,
       "element",
-      "lib",
       "kebab-case"
     ]
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,6 @@ @@
         "component-selector": [
           true,
           "element",
-          "lib",
           "kebab-case"
         ]
       }
@@ Expand Down @@