feat(Gallery): Slide out image when pulled image is not the initial i…

…mage
fivethree-team · Jul 10, 2019 · 25d95a3 · 25d95a3
1 parent 9faa726
commit 25d95a3
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 22 deletions.
diff --git a/projects/core/src/lib/gallery/gallery-image/gallery-image.component.html b/projects/core/src/lib/gallery/gallery-image/gallery-image.component.html
@@ -2,10 +2,11 @@
   <ng-content></ng-content>
 </ng-container>
 
-<img #thumbnail [ngClass]="{'hidden': overlay.open || !src}" class="thumbnail" [src]="src" (click)="open()">
+<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'" [@fade] class="backdrop">
+  <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)"

diff --git a/projects/core/src/lib/gallery/gallery-image/gallery-image.component.ts b/projects/core/src/lib/gallery/gallery-image/gallery-image.component.ts
@@ -102,10 +102,41 @@ import { ImageService } from '../image.service';
           }
         }
       ),
-      state('hidden', style({ opacity: 0 }))
+      state('hidden', style({ opacity: 0 })),
+      transition(
+        '* => slideout',
+        [
+          style({
+            position: 'absolute',
+            top: '{{translate}}px',
+            left: '50%',
+            transform: 'translate(-50%,-50%)',
+            opacity: 1,
+            borderRadius: '0'
+          }),
+          animate(
+            '{{timing}}',
+            style({
+              transform: 'translate(-50%,100%)',
+              opacity: 0.2,
+              borderRadius: '0'
+            })
+          )
+        ],
+        {
+          params: {
+            top: '0',
+            left: '0',
+            height: '*',
+            width: '*',
+            translate: '0',
+            timing: '340ms'
+          }
+        }
+      )
     ]),
     trigger('fade', [
-      transition(':enter', [
+      transition('void => *', [
         style({ opacity: 0 }),
         animate(
           '180ms',
@@ -132,6 +163,7 @@ import { ImageService } from '../image.service';
 })
 export class FivGalleryImage implements OnInit {
   @Input() src: string | SafeResourceUrl;
+  originalSrc: string | SafeResourceUrl;
   index: number;
 
   @ViewChild('thumbnail') image: ElementRef;
@@ -145,13 +177,14 @@ export class FivGalleryImage implements OnInit {
   closeTiming = '340ms';
 
   constructor(
-    @Optional() @Host() private gallery: FivGallery,
+    @Optional() @Host() public gallery: FivGallery,
     private imageService: ImageService
   ) {}
 
   ngOnInit() {}
 
   open() {
+    this.gallery.willOpen.emit(this);
     const p = this.getThumbnailPosition(this.image);
     this.animationParams = {
       translate: p.translate,
@@ -181,17 +214,35 @@ export class FivGalleryImage implements OnInit {
     this.viewerState = 'out';
   }
 
+  slideOut(position: Position, src) {
+    this.originalSrc = src;
+    const p = this.getThumbnailPosition(this.image);
+    this.animationParams = {
+      translate: position.translate,
+      timing: this.closeTiming,
+      height: p.height,
+      width: p.width,
+      top: p.top,
+      left: p.left
+    };
+    this.viewerState = 'slideout';
+  }
+
   handleViewerAnimation(event: AnimationEvent) {
     if (event.fromState === 'void' && event.toState === 'in') {
       this.gallery.open(this.index, this);
     }
     if (
       (event.fromState === 'in' || event.fromState === 'hidden') &&
-      event.toState === 'out'
+      (event.toState === 'out' || event.toState === 'slideout')
     ) {
       this.overlay.hide();
+      this.gallery.didClose.emit(this);
       this.viewerState = 'in';
     }
+    if (event.toState === 'slideout') {
+      this.src = this.originalSrc;
+    }
   }
 
   private getThumbnailPosition(

diff --git a/projects/core/src/lib/gallery/gallery.component.ts b/projects/core/src/lib/gallery/gallery.component.ts
@@ -53,21 +53,21 @@ import { DOCUMENT } from '@angular/common';
     trigger('slideUp', [
       transition('void => *', [
         style({ opacity: 0, transform: 'translateY(100%)' }),
-        animate('125ms', style({ opacity: 1, transform: 'translateY(0%)' }))
+        animate('75ms', style({ opacity: 1, transform: 'translateY(0%)' }))
       ]),
       transition('* => void', [
         style({ opacity: 1, transform: 'translateY(0%)' }),
-        animate('125ms', style({ opacity: 0, transform: 'translateY(100%)' }))
+        animate('75ms', style({ opacity: 0, transform: 'translateY(100%)' }))
       ])
     ]),
     trigger('slideDown', [
       transition('* => void', [
         style({ opacity: 0, transform: 'translateY(0%)' }),
-        animate('125ms', style({ opacity: 1, transform: 'translateY(-100%)' }))
+        animate('75ms', style({ opacity: 1, transform: 'translateY(-100%)' }))
       ]),
       transition('void => *', [
         style({ opacity: 1, transform: 'translateY(-100%)' }),
-        animate('125ms', style({ opacity: 0, transform: 'translateY(0%)' }))
+        animate('75ms', style({ opacity: 0, transform: 'translateY(0%)' }))
       ])
     ])
   ]
@@ -102,6 +102,8 @@ export class FivGallery implements OnInit, AfterContentInit {
   @Input() closeTiming = '340ms';
   @Output() willOpen = new EventEmitter<FivGalleryImage>();
   @Output() willClose = new EventEmitter<FivGalleryImage>();
+  @Output() didOpen = new EventEmitter<FivGalleryImage>();
+  @Output() didClose = new EventEmitter<FivGalleryImage>();
   @Output() backdropChange = new EventEmitter<FivGalleryImage>();
 
   @HostListener('window:keyup', ['$event'])
@@ -185,7 +187,6 @@ export class FivGallery implements OnInit, AfterContentInit {
   }
 
   open(index: number, initial: FivGalleryImage) {
-    this.willOpen.emit(initial);
     this.options.initialSlide = index;
     this.overlay.show(50000);
     this.initialImage = initial;
@@ -204,18 +205,27 @@ export class FivGallery implements OnInit, AfterContentInit {
   }
 
   closeFromPullDown(progress: number) {
+    this.willClose.emit(this.initialImage);
     this.transformSlides(0);
+
+    const sameAsInitial =
+      this.images.toArray()[this.activeIndex].index === this.initialImage.index;
     const position = this.getImagePosition(
       this.images.toArray()[this.activeIndex].image,
       progress
     );
-    this.initialImage.close(position);
+    if (sameAsInitial) {
+      this.initialImage.close(position);
+    } else {
+      const src = this.initialImage.src;
+      this.initialImage.src = this.images.toArray()[this.activeIndex].src;
+      this.initialImage.slideOut(position, src);
+    }
     if (this.inFullscreen) {
       this.closeFullscreen();
     }
     this.slidesLoaded = false;
     this.overlay.hide();
-    this.willClose.emit(this.initialImage);
   }
 
   resetPan(progress: number) {
@@ -287,6 +297,7 @@ export class FivGallery implements OnInit, AfterContentInit {
 
   onSlidesLoad() {
     this.slidesLoaded = true;
+    this.didOpen.emit(this.initialImage);
     this.activeIndex = this.swiper.nativeElement.swiper.activeIndex;
     this.initialImage.viewerState = 'hidden';
     this.swiper.nativeElement.swiper.on('click', () => {

diff --git a/src/app/test/test.page.html b/src/app/test/test.page.html
@@ -6,14 +6,16 @@
 
 <ion-content>
 
-  <ion-virtual-scroll [items]="picsum">
-    <div *virtualItem="let item" approxItemHeight="56px">
-      <ion-item>
-        <img slot="start" fivLazyImage (willShow)="setSource($event,item)">
-        <ion-label>{{item}}</ion-label>
-      </ion-item>
-    </div>
-  </ion-virtual-scroll>
+  <fiv-gallery (willOpen)="log('willOpen')" (willClose)="log('willClose')" (didOpen)="log('didOpen')"
+    (didClose)="log('didClose')">
+    <ion-grid fixed>
+      <ion-row>
+        <ion-col *ngFor="let pic of picsum" size="6" sizeMd="4">
+          <fiv-gallery-image [src]="pic"></fiv-gallery-image>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </fiv-gallery>
 
 
 </ion-content>
diff --git a/src/app/test/test.page.ts b/src/app/test/test.page.ts
@@ -7,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TestPage implements OnInit {
   picsum: string[] = Array.from(
-    new Array(500),
+    new Array(30),
     (x, i) => `https://picsum.photos/500/?${i + 10}`
   );
 
@@ -19,4 +19,8 @@ export class TestPage implements OnInit {
     console.log(img, src);
     img.src = src;
   }
+
+  log(s: string) {
+    console.log(s);
+  }
 }