feat: fade in content only after final position is updated

Author: lokesh-coder

projects/toppy/src/lib/host-container.ts

@@ -1,8 +1,18 @@
-import { ApplicationRef, ComponentFactory, ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, Injectable, Injector, TemplateRef, ViewRef } from "@angular/core";
-import { ComponentInstance } from "./component-ins";
-import { CurrentOverlay } from "./current-overlay";
-import { HostArgs, HostContentType } from "./models";
-import { ToppyRef } from "./toppy-ref";
+import {
+  ApplicationRef,
+  ComponentFactory,
+  ComponentFactoryResolver,
+  ComponentRef,
+  EmbeddedViewRef,
+  Injectable,
+  Injector,
+  TemplateRef,
+  ViewRef
+} from '@angular/core';
+import { ComponentInstance } from './component-ins';
+import { CurrentOverlay } from './current-overlay';
+import { HostArgs, HostContentType } from './models';
+import { ToppyRef } from './toppy-ref';
 
 @Injectable()
 export class HostContainer {
@@ -13,12 +23,16 @@ export class HostContainer {
   private _contentProps: { [key: string]: any };
   private _content: any;
   toppyRef: (id: string) => ToppyRef;
-  constructor(private appRef: ApplicationRef, private compFacResolver: ComponentFactoryResolver, private injector: Injector) {}
+  constructor(
+    private appRef: ApplicationRef,
+    private compFacResolver: ComponentFactoryResolver,
+    private injector: Injector
+  ) {}
 
   configure(
     { contentType, content, props }: HostArgs = {
-      content: "hello",
-      contentType: "STRING"
+      content: 'hello',
+      contentType: 'STRING'
     }
   ) {
     this._contentType = contentType;
@@ -53,18 +67,18 @@ export class HostContainer {
     let view: any = null;
     let viewEl = null;
     switch (this._contentType) {
-      case "COMPONENT":
+      case 'COMPONENT':
         view = this.createViewFromComponent(this._content, this._contentProps);
         this.appRef.attachView(view);
         viewEl = this.getComponentViewEl();
         break;
-      case "TEMPLATEREF":
+      case 'TEMPLATEREF':
         view = this.createViewFromTemplate(this._content);
         this.appRef.attachView(view);
         viewEl = view.rootNodes[0];
         break;
-      case "STRING":
-        const el = document.createElement("div");
+      case 'STRING':
+        const el = document.createElement('div');
         el.innerHTML = this._content;
         return el as any;
       default:

projects/toppy/src/lib/overlay-instance.ts

@@ -25,16 +25,26 @@ export class OverlayInstance implements OnDestroy {
     this._overlayID = overlayID;
   }
 
+  changePosition(newPosition) {
+    this._position = newPosition;
+  }
+
+  updatePositionConfig(positionConfig) {
+    this._position.updateConfig(positionConfig);
+  }
+
   create() {
     this._containerEl = this._dom.createElement('div', {
       'data-overlay-id': this._overlayID,
       class: this.config.containerClass + ' ' + this._position.getClassName(),
-      style: `left:0;position: fixed;top: 0;width: 100%;height: 100%;${!this.config.dismissOnDocumentClick ? 'pointer-events:none' : ''}`
+      style: `left:0;position: fixed;top: 0;width: 100%;height: 100%;${
+        !this.config.dismissOnDocumentClick ? 'pointer-events:none' : ''
+      }`
     });
 
     this._wrapperEl = this._dom.createElement('div', {
       class: this.config.wrapperClass,
-      style: 'position: absolute;transition:all 0.2s ease;'
+      style: 'position: absolute;visibility:hidden;opacity:0;transition:opacity 0.5s ease;'
     });
 
     if (this.config.backdrop) {
@@ -84,13 +94,20 @@ export class OverlayInstance implements OnDestroy {
     this._containerEl = this._wrapperEl = this._backdropEl = this._viewEl = null;
   }
 
-  private _setPosition(): void {
+  private _setPosition(show = false): void {
     const coords = this._position.getPositions(this._wrapperEl);
     this._dom.setPositions(this._wrapperEl, coords);
+
+    if (show) {
+      this._wrapperEl.style.visibility = 'visible';
+      this._wrapperEl.style.opacity = '1';
+    }
     this._eventBus.post({ name: 'POSITION_UPDATED', data: null });
   }
 
   private _watchPositionChange(): void {
-    this._positionSubscription = this.computePosition.subscribe(_ => this._setPosition());
+    this._positionSubscription = this.computePosition.subscribe(_ => {
+      this._setPosition(true);
+    });
   }
 }

projects/toppy/src/lib/position/default-position.ts

@@ -5,6 +5,9 @@ export class DefaultPosition extends Position {
   constructor() {
     super();
   }
+  updateConfig(newConfig) {
+    return null;
+  }
   getPositions(hostElement?: HTMLElement): PositionCoOrds {
     return {};
   }

projects/toppy/src/lib/position/fullscreen-position.ts

@@ -5,6 +5,9 @@ export class FullscreenPosition extends Position {
   constructor() {
     super();
   }
+  updateConfig(newConfig) {
+    return null;
+  }
   getPositions(): PositionCoOrds {
     return { top: 0, left: 0, width: '100%', height: '100%', position: 'fixed' };
   }

projects/toppy/src/lib/position/global-position.ts

@@ -9,16 +9,13 @@ export interface Config {
 }
 export class GlobalPosition extends Position {
   private size;
-  placement: InsidePlacement;
-  hostWidth: string | number;
-  hostHeight: string | number;
-  offset: number;
-  constructor({ placement = InsidePlacement.CENTER, hostWidth = 500, hostHeight = 500, offset = 0 }: Config) {
+  private _config: Config = { placement: InsidePlacement.CENTER, hostWidth: 500, hostHeight: 500, offset: 0 };
+  constructor(config: Config) {
     super();
-    this.placement = placement;
-    this.hostWidth = hostWidth;
-    this.hostHeight = hostHeight;
-    this.offset = offset;
+    this._config = { ...this._config, ...config };
+  }
+  updateConfig(newConfig) {
+    this._config = { ...this._config, ...newConfig };
   }
   getPositions(hostElement?: HTMLElement) {
     const host = hostElement.getBoundingClientRect();
@@ -27,7 +24,7 @@ export class GlobalPosition extends Position {
       width: (window as any).innerWidth,
       height: (window as any).innerHeight
     };
-    switch (this.placement) {
+    switch (this._config.placement) {
       case InsidePlacement.TOP:
         props = this.calculateTop(src, host);
         break;
@@ -58,27 +55,27 @@ export class GlobalPosition extends Position {
       default:
         break;
     }
-    return { ...props, width: this.hostWidth, height: this.hostHeight, position: 'fixed' };
+    return { ...props, width: this._config.hostWidth, height: this._config.hostHeight, position: 'fixed' };
   }
 
   private calculateTop(src, host) {
-    const top = this.offset;
+    const top = this._config.offset;
     const left = (src.width - host.width) / 2;
     return { left, top };
   }
   private calculateBottom(src, host) {
-    const bottom = this.offset;
+    const bottom = this._config.offset;
     const left = (src.width - host.width) / 2;
     return { left, bottom };
   }
   private calculateLeft(src, host) {
     const top = (src.height - host.height) / 2;
-    const left = this.offset;
+    const left = this._config.offset;
     return { left, top };
   }
   private calculateRight(src, host) {
     const top = (src.height - host.height) / 2;
-    const right = this.offset;
+    const right = this._config.offset;
     return { right, top };
   }
   private calculateCenter(src, host) {
@@ -87,23 +84,23 @@ export class GlobalPosition extends Position {
     return { left, top };
   }
   private calculateTopLeft(src, host) {
-    const top = this.offset;
-    const left = this.offset;
+    const top = this._config.offset;
+    const left = this._config.offset;
     return { left, top };
   }
   private calculateTopRight(src, host) {
-    const top = this.offset;
-    const right = this.offset;
+    const top = this._config.offset;
+    const right = this._config.offset;
     return { right, top };
   }
   private calculateBottomLeft(src, host) {
-    const bottom = this.offset;
-    const left = this.offset;
+    const bottom = this._config.offset;
+    const left = this._config.offset;
     return { left, bottom };
   }
   private calculateBottomRight(src, host) {
-    const bottom = this.offset;
-    const right = this.offset;
+    const bottom = this._config.offset;
+    const right = this._config.offset;
     return { right, bottom };
   }
 }

projects/toppy/src/lib/position/position.ts

@@ -2,6 +2,7 @@
 
 export abstract class Position {
   abstract getPositions(host: HTMLElement): any;
+  abstract updateConfig(config: object): any;
   getClassName(): string {
     return this.constructor.name.replace('Position', '-position').toLocaleLowerCase();
   }

projects/toppy/src/lib/position/relative-position.ts

@@ -10,38 +10,33 @@ export interface Config {
 }
 
 export class RelativePosition extends Position {
-  src: HTMLElement;
-  private placement: OutsidePlacement;
-  private autoUpdate: boolean;
-  private hostWidth: string | number;
-  private hostHeight: string | number;
-  constructor({
-    src,
-    placement = OutsidePlacement.TOP,
-    autoUpdate = false,
-    hostWidth = '100%',
-    hostHeight = '100%'
-  }: Config) {
+  private _config: Config = {
+    src: null,
+    placement: OutsidePlacement.TOP,
+    autoUpdate: false,
+    hostWidth: '100%',
+    hostHeight: '100%'
+  };
+  constructor(config: Config) {
     super();
-    this.src = src;
-    this.placement = placement;
-    this.hostWidth = hostWidth;
-    this.hostHeight = hostHeight;
-    this.autoUpdate = autoUpdate;
+    this._config = { ...this._config, ...config };
+  }
+  updateConfig(config) {
+    this._config = { ...this._config, ...config };
   }
   getPositions(hostElement: HTMLElement): PositionCoOrds {
-    const s = this.getCoords(this.src);
+    const s = this.getCoords(this._config.src);
     const h = this.getCoords(hostElement);
 
-    if (this.hostWidth === '100%') {
-      this.hostWidth = s.width;
+    if (this._config.hostWidth === '100%') {
+      this._config.hostWidth = s.width;
     }
 
-    if (this.hostHeight === '100%') {
-      this.hostHeight = 'auto';
+    if (this._config.hostHeight === '100%') {
+      this._config.hostHeight = 'auto';
     }
-    const props = this.calculatePos(this.placement, s, h);
-    return { ...this.round(props), width: this.hostWidth, height: this.hostHeight };
+    const props = this.calculatePos(this._config.placement, s, h);
+    return { ...this.round(props), width: this._config.hostWidth, height: this._config.hostHeight };
   }
 
   private getSize(el): { x: number; y: number } {
@@ -197,7 +192,7 @@ export class RelativePosition extends Position {
     if (!c) {
       return props;
     }
-    if (this.autoUpdate && this.isOverflowed({ ...props, width: h.width, height: h.height })) {
+    if (this._config.autoUpdate && this.isOverflowed({ ...props, width: h.width, height: h.height })) {
       return this.calculatePos(this.nextPosition(pos), s, h, false);
     }
 

projects/toppy/src/lib/position/slide-position.ts

@@ -2,15 +2,16 @@ import { PositionCoOrds, SlidePlacement } from '../models';
 import { Position } from './position';
 
 export class SlidePosition extends Position {
-  private placement: SlidePlacement;
-  private width: string;
-  constructor({ placement = SlidePlacement.LEFT, width = '30%' }: any) {
+  private _config: { placement: SlidePlacement; width: string } = { placement: SlidePlacement.LEFT, width: '30%' };
+  constructor(config) {
     super();
-    this.placement = placement;
-    this.width = width;
+    this._config = { ...this._config, ...config };
+  }
+  updateConfig(newConfig) {
+    this._config = { ...this._config, ...newConfig };
   }
   getPositions(): PositionCoOrds {
-    const props = this.placement === SlidePlacement.LEFT ? { left: 0 } : { right: 0 };
-    return { ...props, top: 0, width: this.width, height: '100%', position: 'fixed' };
+    const props = this._config.placement === SlidePlacement.LEFT ? { left: 0 } : { right: 0 };
+    return { ...props, top: 0, width: this._config.width, height: '100%', position: 'fixed' };
   }
 }

projects/toppy/src/lib/toppy-ref.ts

@@ -54,6 +54,7 @@ export class ToppyRef {
       map((e: any) => e.target),
       skipWhile(() => !this._config.dismissOnDocumentClick),
       filter(this._overlay.isHostElement.bind(this._overlay)),
+      tap(_ => this._config.docClickCallback.call(null)),
       tap(() => this.close())
     );
   }
@@ -73,6 +74,10 @@ export class ToppyRef {
     );
   }
 
+  updatePosition(positionConfig) {
+    this._overlay.updatePositionConfig(positionConfig);
+  }
+
   private _cleanup() {
     this._alive.next(true);
   }