feat(popover): animations, scroll and resize handling

Author: garygrossgarten

projects/core/src/lib/popover/popover-element.directive.ts

@@ -12,12 +12,13 @@ export class PopoverElementDirective implements AfterViewInit {
 
   @Input('fivPopover.show') set show(visible: boolean) {
     this._show = visible;
-
-    if (this.show) {
-      this.fivPopover.openElementRef(this.el);
-    } else if (this.fivPopover.overlay && this.fivPopover.overlay.open) {
-      this.fivPopover.close();
-    }
+    setTimeout(() => {
+      if (this.show) {
+        this.fivPopover.open(this.el);
+      } else if (this.fivPopover.overlay && this.fivPopover.overlay.open) {
+        this.fivPopover.close();
+      }
+    }, 0);
   }
   get show() {
     return this._show;
@@ -28,7 +29,7 @@ export class PopoverElementDirective implements AfterViewInit {
   open() {
     this.show = true;
   }
-  hide() {
+  close() {
     this.show = false;
   }
 

projects/core/src/lib/popover/popover.animations.ts

@@ -0,0 +1,37 @@
+import {
+  tween,
+  transform,
+  scale,
+  fadeIn,
+  easeOutSine,
+  beforeStyle,
+  fadeOut,
+  easeInSine
+} from '@fivethree/ngx-rxjs-animations';
+import { ElementRef } from '@angular/core';
+import { zip } from 'rxjs';
+import { PopoverPosition } from './popover.types';
+
+export const scaleIn = (target, easing, duration) =>
+  tween(easing, duration).pipe(transform(target, scale(0, 1)));
+
+export const animIn = (
+  element: ElementRef,
+  position: PopoverPosition,
+  duration: number
+) =>
+  zip(
+    fadeIn(element, easeOutSine, duration),
+    scaleIn(element, easeOutSine, duration).pipe(
+      beforeStyle(
+        element,
+        'transform-origin',
+        `${position.vertical === 'top' ? 'bottom' : 'top'} ${
+          position.horizontal === 'left' ? 'right' : 'left'
+        }`
+      )
+    )
+  );
+
+export const animOut = (element: ElementRef, duration: number) =>
+  fadeOut(element, easeInSine, duration);

projects/core/src/lib/popover/popover.component.html

@@ -1,12 +1,15 @@
 <fiv-overlay>
-  <div *ngIf="backdrop" class="fiv-popover-backdrop" (click)="close()">
+  <div *ngIf="backdrop && !hidden" [ngClass]="classes" class="fiv-popover-backdrop" (click)="close()">
   </div>
-  <div class="popover-container" [style]="containerStyles">
-    <ng-content>
-    </ng-content>
-    <svg *ngIf="arrow && !overlaysTarget" class="arrow" [style]="svgStyles">
-      <polygon [attr.points]="triangle" />
-    </svg>
+  <div *ngIf="!hidden" [ngClass]="classes" class="popover-container" [style]="containerStyles">
+    <div #animation *ngIf="overlay?.open" class="animation-container" anim [anim.in]="animationIn">
+      <ng-content>
+      </ng-content>
+      <svg *ngIf="arrow && !overlaysTarget" class="arrow" [style]="svgStyles">
+        <polygon [attr.points]="triangle" />
+      </svg>
+    </div>
+
   </div>
 
 </fiv-overlay>

projects/core/src/lib/popover/popover.component.scss

@@ -7,6 +7,11 @@
   display: block;
 }
 
+.animation-container {
+  height: 100%;
+  position: relative;
+}
+
 svg.arrow {
   position: absolute;
   fill: var(--ion-item-background);