fix(gallery): replace anuglar morph animations with own implementatio…

…n to make everything work on ios

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

@@ -0,0 +1,13 @@
+import { animation, animate, style } from '@angular/animations';
+
+export const fade = animation([
+  style({
+    opacity: '{{ fromOpacity }}'
+  }),
+  animate(
+    '{{ time }}',
+    style({
+      opacity: '{{ toOpacity }}'
+    })
+  )
+]);

projects/core/src/lib/animations/easing-functions.ts

@@ -0,0 +1,50 @@
+export const linear = (t, from, to, duration) => {
+  const c = to - from;
+  return (c * t) / duration + from;
+};
+
+export const easeInQuad = (t, from, to, duration) => {
+  const c = to - from;
+  return c * (t /= duration) * t + from;
+};
+
+export const easeOutSine = (t, from, to, duration) => {
+  const c = to - from;
+  return c * Math.sin((t / duration) * (Math.PI / 2)) + from;
+};
+
+export const easeInOutQuad = (t, from, to, duration) => {
+  const c = to - from;
+  if ((t /= duration / 2) < 1) {
+    return (c / 2) * t * t + from;
+  } else {
+    return (-c / 2) * (--t * (t - 2) - 1) + from;
+  }
+};
+
+export const easeOutElastic = (t, b, _c, d) => {
+  let c = _c - b;
+  let a, p, s;
+  s = 1.20158;
+  p = 0;
+  a = c;
+  if (t === 0) {
+    return b;
+  } else if ((t /= d) === 1) {
+    return b + c;
+  }
+  if (!p) {
+    p = d * 0.54;
+  }
+  if (a < Math.abs(c)) {
+    a = c;
+    s = p / 4;
+  } else {
+    s = (p / (2 * Math.PI)) * Math.asin(c / a);
+  }
+  return (
+    a * Math.pow(2, -10 * t) * Math.sin(((t * d - s) * (2 * Math.PI)) / p) +
+    c +
+    b
+  );
+};

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

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import { ElementRef } from '@angular/core';
-import { tap } from 'rxjs/operators';
+import { tap, map } from 'rxjs/operators';
 
 export function tween(
   easingFunction: Function,
@@ -33,10 +33,14 @@ export const fromTo = (
   el: ElementRef,
   style: string,
   from: number,
-  to: number
+  to: number,
+  m?: (t: number) => string
 ) => <T>(source: Observable<number>) =>
   source.pipe(
-    tap(t => (el.nativeElement.style[style] = t * (to - from) + from + 'px'))
+    tap(t => {
+      const te = t * (to - from) + from;
+      el.nativeElement.style[style] = m ? m(te) : te + 'px';
+    })
   );
 
 export const morph = (fromEl: ElementRef, toEl: ElementRef) => <T>(
@@ -52,7 +56,7 @@ export const morph = (fromEl: ElementRef, toEl: ElementRef) => <T>(
   );
 };
 
-export function getPosition(el: ElementRef) {
+export function getPosition(el: ElementRef): RectPosition {
   const bounds = el.nativeElement.getBoundingClientRect();
   return {
     top: bounds.top,
@@ -61,3 +65,17 @@ export function getPosition(el: ElementRef) {
     width: el.nativeElement.clientWidth
   };
 }
+export function setPosition(el: ElementRef, r: RectPosition): ElementRef {
+  el.nativeElement.style.top = r.top + 'px';
+  el.nativeElement.style.left = r.left + 'px';
+  el.nativeElement.style.height = r.height + 'px';
+  el.nativeElement.style.width = r.width + 'px';
+  return el;
+}
+
+export interface RectPosition {
+  top: number;
+  left: number;
+  height: number;
+  width: number;
+}

projects/core/src/lib/fab/fab.component.ts

@@ -1,4 +1,3 @@
-import { AnimationParams } from './../gallery/gallery-image/gallery-image.component';
 import { FivFeatureDiscovery } from './../feature-discovery/feature-discovery.component';
 import { FivLoadingProgressBar } from './../loading-progress-bar/loading-progress-bar.component';
 import { FivIcon } from './../icon/icon.component';

projects/core/src/lib/gallery/gallery-image/gallery-image.component.html

@@ -1,15 +1,6 @@
-<ng-container *ngIf="!overlay.open && !src">
+<ng-container *ngIf="!src">
   <ng-content></ng-content>
 </ng-container>
-
-<img #thumbnail [ngClass]="{'hidden': (overlay.open || !src)}" class="thumbnail" [src]="src" (click)="open()">
-<fiv-overlay #overlay>
-
-  <div [style.backgroundColor]="backdropColor"
-    *ngIf="overlay.open && viewerState !== 'out' && viewerState !== 'slideout'" [@fade]="viewerState" class="backdrop">
-  </div>
-
-  <img *ngIf="overlay.open" class="viewer-image" (@image.done)="handleViewerAnimation($event)"
-    [@image]="{ value: viewerState, params : animationParams}" [src]="src">
-
-</fiv-overlay>
+<fiv-ripple (click)="open()">
+  <img #thumbnail class="thumbnail" [src]="src">
+</fiv-ripple>

projects/core/src/lib/gallery/gallery-image/gallery-image.component.scss

@@ -7,14 +7,6 @@
   background: var(--background);
 }
 
-.backdrop {
-  width: 100vw;
-  height: 100vh;
-  opacity: 0.97;
-  position: absolute;
-  transition: background-color 300ms;
-}
-
 .thumbnail {
   object-position: center;
   object-fit: cover;
@@ -25,20 +17,6 @@
   border-radius: var(--border-radius);
 }
 
-.hidden {
-  opacity: 0;
-}
-
-.viewer-image {
-  object-position: center;
-  object-fit: cover;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: auto;
-  max-height: 100%;
-  width: auto;
-  max-width: 100%;
-  border-radius: var(--border-radius);
+fiv-ripple {
+  --fiv-color-ripple: rgba(0, 0, 0, 0.5);
 }