diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html index 9fc48ed1..0816a2c8 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html @@ -6,6 +6,7 @@ diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts index fd7c0324..1b2be908 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts @@ -15,7 +15,7 @@ import {Dimension} from "../../model/IRenderable"; import {FullScreenService} from "../fullscreen.service"; import {OverlayService} from "../overlay.service"; import {Subscription} from "rxjs"; -import {animate, AnimationBuilder, style} from "@angular/animations"; +import {animate, AnimationBuilder, AnimationPlayer, style} from "@angular/animations"; import {GalleryLightboxPhotoComponent} from "./photo/photo.lightbox.gallery.component"; import {Observable} from "rxjs/Observable"; @@ -46,6 +46,7 @@ export class GalleryLightboxComponent implements OnDestroy { public infoPanelVisible = false; public infoPanelWidth = 0; + public animating = false constructor(public fullScreenService: FullScreenService, @@ -132,7 +133,6 @@ export class GalleryLightboxComponent implements OnDestroy { public show(photo: PhotoDTO) { this.controllersVisible = true; this.showControls(); - console.log(this.photoElement); this.visible = true; let selectedPhoto = this.findPhotoComponent(photo); if (selectedPhoto === null) { @@ -141,7 +141,10 @@ export class GalleryLightboxComponent implements OnDestroy { const lightboxDimension = selectedPhoto.getDimension(); lightboxDimension.top -= this.getBodyScrollTop(); - this.animatePhoto(selectedPhoto.getDimension(), this.calcLightBoxPhotoDimension(selectedPhoto.gridPhoto.photo)); + this.animating = true; + this.animatePhoto(selectedPhoto.getDimension(), this.calcLightBoxPhotoDimension(selectedPhoto.gridPhoto.photo)).onDone(() => { + this.animating = false; + }); this.animateLightbox( lightboxDimension, { @@ -165,6 +168,7 @@ export class GalleryLightboxComponent implements OnDestroy { this.fullScreenService.exitFullScreen(); this.pause(); + this.animating = true; const lightboxDimension = this.activePhoto.getDimension(); lightboxDimension.top -= this.getBodyScrollTop(); this.blackCanvasOpacity = 0; @@ -175,26 +179,28 @@ export class GalleryLightboxComponent implements OnDestroy { left: 0, width: this.getScreenWidth(), height: this.getScreenHeight() - }, lightboxDimension); + }, lightboxDimension).onDone(() => { - setTimeout(() => { this.visible = false; this.activePhoto = null; this.overlayService.hideOverlay(); - }, 500); + }); + this.hideInfoPanel(false); } - animatePhoto(from: Dimension, to: Dimension = from) { - this._builder.build([ + + animatePhoto(from: Dimension, to: Dimension = from): AnimationPlayer { + const elem = this._builder.build([ style(Dimension.toString(from)), animate(300, style(Dimension.toString(to))) ]) - .create(this.photoElement.elementRef.nativeElement) - .play(); + .create(this.photoElement.elementRef.nativeElement); + elem.play(); + return elem; } animateLightbox(from: Dimension = { @@ -202,14 +208,15 @@ export class GalleryLightboxComponent implements OnDestroy { left: 0, width: this.getScreenWidth(), height: this.getScreenHeight() - }, to: Dimension = from) { - this._builder.build([ + }, to: Dimension = from): AnimationPlayer { + const elem = this._builder.build([ style(Dimension.toString(from)), animate(300, style(Dimension.toString(to))) ]) - .create(this.lightboxElement.nativeElement) - .play(); + .create(this.lightboxElement.nativeElement); + elem.play(); + return elem; } diff --git a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.html b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.html index 03355eee..7db9e062 100644 --- a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.html +++ b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.html @@ -4,12 +4,12 @@ [style.height.%]="imageSize.height" [src]="thumbnailPath()"/> - + diff --git a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts index 96e67348..f8439769 100644 --- a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts +++ b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, Input, OnChanges} from "@angular/core"; +import {Component, Input, OnChanges} from "@angular/core"; import {GridPhoto} from "../../grid/GridPhoto"; @Component({ @@ -9,12 +9,13 @@ import {GridPhoto} from "../../grid/GridPhoto"; export class GalleryLightboxPhotoComponent implements OnChanges { @Input() gridPhoto: GridPhoto; + @Input() loadImage: boolean = false; public imageSize = {width: "auto", height: "100"}; imageLoaded: boolean = false; - constructor(public elementRef: ElementRef) { + constructor() { } ngOnChanges() {