Merge pull request #1347 from FZJ-INM1-BDA/maint_spotLightModule

maint: use angular cdk for spotlight

docs/releases/v2.12.0.md

@@ -3,3 +3,7 @@
 ## Feature
 
 - enable rat connectivity
+
+## Behind the scene
+
+- update spotlight mechanics from in-house to angular CDK

src/spotlight/const.ts

+import { InjectionToken, TemplateRef } from "@angular/core";
+
+export const TMPL_INJ_TOKEN = new InjectionToken<TemplateRef<any>>('TMPL_INJ_TOKEN')
\ No newline at end of file

src/spotlight/sl-service.service.ts

-import { Injectable, OnDestroy, ComponentFactoryResolver, Injector, ComponentRef, ApplicationRef, EmbeddedViewRef, TemplateRef, ComponentFactory } from '@angular/core';
-import './sl-style.css'
-import { SpotlightBackdropComponent } from './spotlight-backdrop/spotlight-backdrop.component';
+import { Injectable, Injector, OnDestroy, TemplateRef } from '@angular/core';
 import { Subject } from 'rxjs';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { SpotlightBackdropComponent } from './spotlight-backdrop/spotlight-backdrop.component';
+import { TMPL_INJ_TOKEN } from './const';
 
 @Injectable({
   providedIn: 'root'
 })
 export class SlServiceService implements OnDestroy{
 
-  private backdropRef: ComponentRef<SpotlightBackdropComponent>
-  private dom: HTMLElement
-  private cf: ComponentFactory<SpotlightBackdropComponent>
   onClick: Subject<MouseEvent> = new Subject()
-  
+  private overlayRef: OverlayRef
+
   constructor(
-    cfr: ComponentFactoryResolver,
+    private overlay: Overlay,
     private injector: Injector,
-    private appRef: ApplicationRef
   ) {
-    this.cf = cfr.resolveComponentFactory(SpotlightBackdropComponent)
   }
 
-  /**
-   * TODO use angular cdk overlay
-   */
-  public showBackdrop(tmp?: TemplateRef<any>){
+  public showBackdrop(tmp: TemplateRef<any>){
     this.hideBackdrop()
 
-    this.backdropRef = this.cf.create(this.injector)
-    this.backdropRef.instance.slService = this
-    this.backdropRef.instance.insert = tmp
+    const positionStrategy = this.overlay.position()
+      .global()
+      .centerHorizontally()
+      .centerVertically()
+    
+    this.overlayRef = this.overlay.create({
+      positionStrategy,
+      hasBackdrop: true,
+    })
 
-    this.appRef.attachView(this.backdropRef.hostView)
-    this.dom = (this.backdropRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement
-    document.body.appendChild(this.dom)
+    const injector = Injector.create({
+      parent: this.injector,
+      providers: [{
+        provide: SlServiceService,
+        useValue: this
+      }, {
+        provide: TMPL_INJ_TOKEN,
+        useValue: tmp
+      }]
+    })
+    const portal = new ComponentPortal(SpotlightBackdropComponent, null, injector)
+    this.overlayRef.attach(portal)
+    
   }
 
   public hideBackdrop(){
-    this.backdropRef && this.appRef.detachView(this.backdropRef.hostView)
-    this.backdropRef && this.backdropRef.destroy()
+    if (this.overlayRef) {
+      this.overlayRef.dispose()
+      this.overlayRef = null
+    }
   }
 
   ngOnDestroy(){

src/spotlight/spot-light.module.ts

@@ -4,16 +4,20 @@ import { SlSpotlightDirective } from './sl-spotlight.directive';
 import { SpotlightBackdropComponent } from './spotlight-backdrop/spotlight-backdrop.component';
 import { SpotLightOverlayDirective } from './spot-light-overlay.directive';
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { OverlayModule } from '@angular/cdk/overlay';
+import { PortalModule } from '@angular/cdk/portal';
 
 @NgModule({
   declarations: [
     SlSpotlightDirective,
     SpotlightBackdropComponent,
-    SpotLightOverlayDirective
+    SpotLightOverlayDirective,
   ],
   imports: [
     BrowserAnimationsModule,
-    CommonModule
+    CommonModule,
+    OverlayModule,
+    PortalModule,
   ],
   exports: [
     SlSpotlightDirective

src/spotlight/spotlight-backdrop/spotlight-backdrop.component.ts

-import { Component, HostListener, TemplateRef, HostBinding } from '@angular/core';
+import { Component, HostListener, TemplateRef, HostBinding, Inject } from '@angular/core';
 import { SlServiceService } from '../sl-service.service';
 import { transition, animate, state, style, trigger } from '@angular/animations';
+import { TMPL_INJ_TOKEN } from '../const';
 
 @Component({
   selector: 'sl-spotlight-backdrop',
@@ -25,9 +26,6 @@ import { transition, animate, state, style, trigger } from '@angular/animations'
 })
 export class SpotlightBackdropComponent {
 
-  // TODO use DI for service injection ?
-  public slService: SlServiceService
-
   @HostBinding('@onShownOnDismiss')
   animation: string = 'attach'
 
@@ -36,5 +34,9 @@ export class SpotlightBackdropComponent {
     this.slService && this.slService.onClick.next(ev)
   }
 
-  insert: TemplateRef<any>
+  constructor(
+    private slService: SlServiceService,
+    @Inject(TMPL_INJ_TOKEN) public insert: TemplateRef<any>,
+  ){
+  }
 }