From 8e14c613ea846a18be7d85fc50fb79a5b7bbe7e4 Mon Sep 17 00:00:00 2001 From: Braun Patrik Date: Mon, 4 Jul 2016 16:58:10 +0200 Subject: [PATCH] removing animation from lightbox + improving thumbnail rendering at lightbox --- frontend/app/gallery/gallery.component.html | 4 +- frontend/app/gallery/gallery.component.ts | 5 + frontend/app/gallery/gallery.service.spec.ts | 26 ++-- .../gallery/grid/grid.gallery.component.ts | 52 ++++--- .../lightbox/lightbox.gallery.component.css | 6 +- .../lightbox/lightbox.gallery.component.html | 10 +- .../lightbox/lightbox.gallery.component.ts | 141 ++---------------- .../photo.lightbox.gallery.component.html | 8 +- .../photo/photo.lightbox.gallery.component.ts | 27 ++++ 9 files changed, 109 insertions(+), 170 deletions(-) diff --git a/frontend/app/gallery/gallery.component.html b/frontend/app/gallery/gallery.component.html index 20b47469..4f4e5ff8 100644 --- a/frontend/app/gallery/gallery.component.html +++ b/frontend/app/gallery/gallery.component.html @@ -1,8 +1,10 @@ - + +
+
{ + beforeEach(() => { + addProviders([ + MockBackend, + BaseRequestOptions, + provide(Http, { + useFactory: (backend, options) => { + return new Http(backend, options); + }, deps: [MockBackend, BaseRequestOptions] + }), + NetworkService, + GalleryService + ]); + }); - beforeEachProviders(() => [ - MockBackend, - BaseRequestOptions, - provide(Http, { - useFactory: (backend, options) => { - return new Http(backend, options); - }, deps: [MockBackend, BaseRequestOptions] - }), - NetworkService, - GalleryService - ]); it('placeholder test', inject([], () => { diff --git a/frontend/app/gallery/grid/grid.gallery.component.ts b/frontend/app/gallery/grid/grid.gallery.component.ts index 57f7dba0..dcf62e75 100644 --- a/frontend/app/gallery/grid/grid.gallery.component.ts +++ b/frontend/app/gallery/grid/grid.gallery.component.ts @@ -33,6 +33,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit { @Input() lightbox:GalleryLightboxComponent; photosToRender:Array = []; + containerWidth:number = 0; private IMAGE_MARGIN = 2; private TARGET_COL_COUNT = 5; @@ -58,6 +59,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit { if (this.isAfterViewInit === false) { return; } + this.updateContainerWidth(); this.sortPhotos(); this.clearRenderedPhotos(); setImmediate(() => { @@ -73,7 +75,7 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit { //TODO: implement scroll detection - this.sortPhotos(); + this.updateContainerWidth(); this.clearRenderedPhotos(); setImmediate(() => { this.renderPhotos(); @@ -130,31 +132,15 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit { private renderedPhotoIndex:number = 0; private renderPhotos() { - if (this.getContainerWidth() == 0 || this.renderedPhotoIndex >= this.photos.length || !this.shouldRenderMore()) { + if (this.containerWidth == 0 || this.renderedPhotoIndex >= this.photos.length || !this.shouldRenderMore()) { return; } - let maxRowHeight = window.innerHeight / this.MIN_ROW_COUNT; - let minRowHeight = window.innerHeight / this.MAX_ROW_COUNT; let renderedContentHeight = 0; while (this.renderedPhotoIndex < this.photos.length && this.shouldRenderMore(renderedContentHeight) === true) { - - let photoRowBuilder = new GridRowBuilder(this.photos, this.renderedPhotoIndex, this.IMAGE_MARGIN, this.getContainerWidth()); - photoRowBuilder.addPhotos(this.TARGET_COL_COUNT); - photoRowBuilder.adjustRowHeightBetween(minRowHeight, maxRowHeight); - - let rowHeight = photoRowBuilder.calcRowHeight(); - let imageHeight = rowHeight - (this.IMAGE_MARGIN * 2); - - photoRowBuilder.getPhotoRow().forEach((photo) => { - let imageWidth = imageHeight * (photo.metadata.size.width / photo.metadata.size.height); - this.photosToRender.push(new GridPhoto(photo, imageWidth, imageHeight, this.renderedPhotoIndex)); - }); - - renderedContentHeight += rowHeight; - this.renderedPhotoIndex += photoRowBuilder.getPhotoRow().length; + renderedContentHeight += this.renderARow(); } } @@ -184,11 +170,33 @@ export class GalleryGridComponent implements OnChanges,AfterViewInit { } } - private getContainerWidth():number { + public renderARow():number { + + let maxRowHeight = window.innerHeight / this.MIN_ROW_COUNT; + let minRowHeight = window.innerHeight / this.MAX_ROW_COUNT; + + let photoRowBuilder = new GridRowBuilder(this.photos, this.renderedPhotoIndex, this.IMAGE_MARGIN, this.containerWidth); + photoRowBuilder.addPhotos(this.TARGET_COL_COUNT); + photoRowBuilder.adjustRowHeightBetween(minRowHeight, maxRowHeight); + + let rowHeight = photoRowBuilder.calcRowHeight(); + let imageHeight = rowHeight - (this.IMAGE_MARGIN * 2); + + photoRowBuilder.getPhotoRow().forEach((photo) => { + let imageWidth = imageHeight * (photo.metadata.size.width / photo.metadata.size.height); + this.photosToRender.push(new GridPhoto(photo, imageWidth, imageHeight, this.renderedPhotoIndex)); + }); + + this.renderedPhotoIndex += photoRowBuilder.getPhotoRow().length; + console.log(this.photosToRender.length); + return rowHeight; + } + + private updateContainerWidth():number { if (!this.gridContainer) { - return 0; + return; } - return this.gridContainer.nativeElement.clientWidth; + this.containerWidth = this.gridContainer.nativeElement.clientWidth; } diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css index 3dea54d9..5effa5de 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css @@ -3,16 +3,16 @@ z-index: 1100; /* Sit on top */ left: 0; top: 0; - width: 0; /* Full width */ - height: 0; /* Full height */ + width: 100%; /* Full width */ + height: 100%; /* Full height */ overflow: hidden; display: flex; /* add */ justify-content: center; /* add to align horizontal */ align-items: center; /* add to align vertical */ cursor: pointer; } + .blackCanvas{ - display: none; position: fixed; /* Stay in place */ z-index: 1099; /* Sit on top */ left: 0; diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html index 1cd9d660..d4fef322 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html @@ -1,10 +1,14 @@
-
+
-
- +
+
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts index dfaa64a1..e0aafd96 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts @@ -1,6 +1,6 @@ /// -import {Component, ElementRef, ViewChild, QueryList} from "@angular/core"; +import {Component, QueryList, Output, EventEmitter} from "@angular/core"; import {Photo} from "../../../../common/entities/Photo"; import {GalleryPhotoComponent} from "../grid/photo/photo.grid.gallery.component.ts"; import {BrowserDomAdapter} from "@angular/platform-browser/src/browser/browser_adapter"; @@ -14,15 +14,11 @@ import {GalleryLightboxPhotoComponent} from "./photo/photo.lightbox.gallery.comp directives: [GalleryLightboxPhotoComponent] }) export class GalleryLightboxComponent { + @Output('onLastElement') onLastElement = new EventEmitter(); - @ViewChild('lightbox') lightBoxDiv:ElementRef; - @ViewChild('blackCanvas') blackCanvasDiv:ElementRef; - @ViewChild('controls') controlsDiv:ElementRef; - @ViewChild('imgContainer') imgContainer:GalleryLightboxPhotoComponent; - - - public imageSize = {width: "auto", height: "100"}; public navigation = {hasPrev: true, hasNext: true}; + public photoDimension:Dimension = new Dimension(0, 0, 0, 0); + private activePhoto:GalleryPhotoComponent; public gridPhotoQL:QueryList; @@ -42,20 +38,16 @@ export class GalleryLightboxComponent { if (pcList[i] === this.activePhoto && i + 1 < pcList.length) { this.activePhoto = pcList[i + 1]; this.navigation.hasPrev = true; - if (i + 2 < pcList.length) { - this.navigation.hasNext = true; - } else { - this.navigation.hasNext = false; + + this.navigation.hasNext = i + 2 < pcList.length; + + if (i + 3 === pcList.length) { + this.onLastElement.emit({}); //trigger to render more photos if there are } - let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle(); - - this.forceAnimateFrom(toImage, - {}, - this.imgContainer.nativeElement.nativeElement); + this.photoDimension = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo); - this.setImageSize(); return; } } @@ -67,33 +59,16 @@ export class GalleryLightboxComponent { if (pcList[i] === this.activePhoto && i > 0) { this.activePhoto = pcList[i - 1]; this.navigation.hasNext = true; - if (i - 1 > 0) { - this.navigation.hasPrev = true; - } else { - this.navigation.hasPrev = false; - } + this.navigation.hasPrev = i - 1 > 0; - let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle(); + this.photoDimension = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo); - this.forceAnimateFrom(toImage, - {}, - this.imgContainer.nativeElement.nativeElement); - this.setImageSize(); return; } } } - private setImageSize() { - if (this.activePhoto.gridPhoto.photo.metadata.size.height > this.activePhoto.gridPhoto.photo.metadata.size.width) { - this.imageSize.height = "100"; - this.imageSize.width = null; - } else { - this.imageSize.height = null; - this.imageSize.width = "100"; - } - } public show(photo:Photo) { let selectedPhoto = this.findPhotoComponent(photo); @@ -103,73 +78,20 @@ export class GalleryLightboxComponent { this.dom.setStyle(this.dom.query('body'), 'overflow', 'hidden'); this.activePhoto = selectedPhoto; - this.setImageSize(); - - - let from = this.activePhoto.getDimension(); - from.top -= this.getBodyScrollTop(); - - - let fromImage = {width: from.width + "px", height: from.height + "px", top: "0px", left: "0px"}; - let toImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle(); - - this.forceAnimateFrom(fromImage, - toImage, - this.imgContainer.nativeElement.nativeElement); - - this.forceAnimateFrom(from.toStyle(), - {height: "100%", width: "100%", "top": "0px", "left": "0px"}, - this.lightBoxDiv.nativeElement); - - - this.forceAnimateFrom({opacity: "0", display: "block"}, - {opacity: "1"}, - this.blackCanvasDiv.nativeElement); - - this.forceAnimateFrom({opacity: "0", display: "block"}, - {opacity: "1"}, - this.controlsDiv.nativeElement); + this.photoDimension = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo); } public hide() { - console.log("hiding"); let to = this.activePhoto.getDimension(); + //iff target image out of screen -> scroll to there if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getScreenHeight() < to.top) { this.setBodyScrollTop(to.top); } - to.top -= this.getBodyScrollTop(); - - - this.forceAnimateTo({height: "100%", width: "100%", "top": "0px", "left": "0px"}, - to.toStyle(), - this.lightBoxDiv.nativeElement, - {height: "0px", width: "0px", "top": "0px", "left": "0px"}, - ()=> { - this.activePhoto = null; - }); this.dom.setStyle(this.dom.query('body'), 'overflow', 'auto'); - - this.forceAnimateTo({opacity: "1.0", display: "block"}, - {opacity: "0.0", display: "block"}, - this.blackCanvasDiv.nativeElement, - {display: "none"}); - - this.forceAnimateTo({opacity: "1.0", display: "block"}, - {opacity: "0.0", display: "block"}, - this.controlsDiv.nativeElement, - {display: "none"}); - - - let fromImage = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo).toStyle(); - let toImage = {width: to.width + "px", height: to.height + "px", top: "0px", left: "0px"}; - - - this.forceAnimateTo(fromImage, - toImage, - this.imgContainer.nativeElement.nativeElement); + this.activePhoto = null; } @@ -186,39 +108,6 @@ export class GalleryLightboxComponent { return selectedPhoto; } - private forceAnimateFrom(from, to, elemnet) { - /* let anim0 = this.animBuilder.css(); - anim0.setDuration(0); - anim0.setToStyles(from); - anim0.start(elemnet).onComplete(()=> { - - let anim1 = this.animBuilder.css(); - anim1.setDuration(500); - anim1.setFromStyles(from); - anim1.setToStyles(to); - anim1.start(elemnet); - });*/ - } - - private forceAnimateTo(from, to, elemnet, innerTo = null, onComplete = ()=> { - }) { - /* if (innerTo == null) { - innerTo = to; - } - - let anim0 = this.animBuilder.css(); - anim0.setDuration(500); - anim0.setFromStyles(from); - anim0.setToStyles(to); - anim0.start(elemnet).onComplete(()=> { - let anim1 = this.animBuilder.css(); - anim1.setDuration(0); - anim1.setToStyles(innerTo); - anim1.start(elemnet).onComplete(onComplete); - });*/ - onComplete(); - } - private getBodyScrollTop() { return this.dom.getProperty(this.dom.query('body'), 'scrollTop'); 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 2f8a89f5..274e31cb 100644 --- a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.html +++ b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.html @@ -1,13 +1,15 @@
- + [src]="thumbnailPath()"/> + [src]="gridPhoto.getPhotoPath()" + (load)="onImageLoad()" + (error)="onImageError()"/>
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 d467484c..f50cb183 100644 --- a/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts +++ b/frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts @@ -15,11 +15,14 @@ export class GalleryLightboxPhotoComponent implements OnChanges { public imageSize = {width: "auto", height: "100"}; @ViewChild('imgContainer') nativeElement:ElementRef; + imageLoaded:boolean = false; constructor() { } ngOnChanges() { + + this.imageLoaded = false; this.setImageSize(); } @@ -37,5 +40,29 @@ export class GalleryLightboxPhotoComponent implements OnChanges { } } + + onImageLoad() { + this.imageLoaded = true; + } + + onImageError() { + //TODO:handle error + console.error("cant load image"); + } + + public showThumbnail():boolean { + return this.gridPhoto && !this.imageLoaded && + (this.gridPhoto.isThumbnailAvailable() || this.gridPhoto.isReplacementThumbnailAvailable()); + } + + public thumbnailPath():string { + if (this.gridPhoto.isThumbnailAvailable() === true) + return this.gridPhoto.getThumbnailPath(); + + if (this.gridPhoto.isReplacementThumbnailAvailable() === true) + return this.gridPhoto.getReplacementThumbnailPath(); + return null + } + }