From 29a45b2d9859e6d1b7e7321a05c32aaf08e5053f Mon Sep 17 00:00:00 2001 From: Braun Patrik Date: Thu, 28 Apr 2016 23:25:25 +0200 Subject: [PATCH] implementing lightbox move back to its place --- frontend/app/gallery/gallery.component.html | 2 +- .../gallery/grid/grid.gallery.component.html | 11 +--- .../gallery/grid/grid.gallery.component.ts | 59 +++++++++++++------ .../gallery/photo/photo.gallery.component.ts | 4 +- package.json | 10 ++-- 5 files changed, 53 insertions(+), 33 deletions(-) diff --git a/frontend/app/gallery/gallery.component.html b/frontend/app/gallery/gallery.component.html index 3a1e1f45..e8ff287c 100644 --- a/frontend/app/gallery/gallery.component.html +++ b/frontend/app/gallery/gallery.component.html @@ -1,6 +1,6 @@ -
+
diff --git a/frontend/app/gallery/grid/grid.gallery.component.html b/frontend/app/gallery/grid/grid.gallery.component.html index 062d70e9..4c806e97 100644 --- a/frontend/app/gallery/grid/grid.gallery.component.html +++ b/frontend/app/gallery/grid/grid.gallery.component.html @@ -1,19 +1,14 @@
+ (click)="hideLightBox()" >
-import {Component, Input, ElementRef, OnChanges, ViewChild, ContentChild} from 'angular2/core'; +import { + Component, Input, ElementRef, OnChanges, ViewChild, ViewChildren, QueryList +} from 'angular2/core'; import {Directory} from "../../../../common/entities/Directory"; import {Photo} from "../../../../common/entities/Photo"; import {GalleryPhotoComponent} from "../photo/photo.gallery.component"; @@ -18,6 +20,7 @@ export class GalleryGridComponent implements OnChanges{ @ViewChild('lightbox') lightBoxDiv:ElementRef; @ViewChild('gridContainer') gridContainer:ElementRef; + @ViewChildren(GalleryPhotoComponent) photosRef:QueryList; @Input() directory:Directory; photosToRender:Array = []; private IMAGE_MARGIN = 2; @@ -66,35 +69,57 @@ export class GalleryGridComponent implements OnChanges{ } public lightboxModel = {top:0,left:0, image:{width:0, height:0,src:""}, visible: false}; - - public showLightBox(event,gridPhoto:GridPhoto){ - gridPhoto = Utils.clone(gridPhoto); - - this.lightboxModel.visible = true; - + private activePhoto:GalleryPhotoComponent = null; + public showLightBox(gridPhoto:GridPhoto){ + let galleryPhotoComponents = this.photosRef.toArray(); + let selectedPhoto:GalleryPhotoComponent = null; + for(let i= 0; i < galleryPhotoComponents.length; i++){ + if(galleryPhotoComponents[i].photo == gridPhoto.photo){ + selectedPhoto = galleryPhotoComponents[i]; + break; + } + } + if(selectedPhoto === null){ + throw new Error("Can't find Photo"); + } + this.activePhoto = selectedPhoto; + this.lightboxModel.image.src = Photo.getThumbnailPath(this.directory,gridPhoto.photo); - console.log( this.gridContainer); + let from = {"top":selectedPhoto.elementRef.nativeElement.firstChild.offsetTop+"px", + "left":selectedPhoto.elementRef.nativeElement.firstChild.offsetLeft+"px", + width:gridPhoto.renderWidth+"px", + height: gridPhoto.renderHeight+"px"}; + let animation0 = this.animBuilder.css(); animation0.setDuration(0); - animation0.setToStyles({height: gridPhoto.renderHeight+"px", width:gridPhoto.renderWidth+"px", - "top":event.target.offsetTop+"px", "left":event.target.offsetLeft+"px"}); + animation0.setToStyles(from); animation0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{ let animation = this.animBuilder.css(); animation.setDuration(1000); - animation.setFromStyles({height: gridPhoto.renderHeight+"px", width:gridPhoto.renderWidth+"px", - "top":event.target.offsetTop+"px", "left":event.target.offsetLeft+"px"}); - animation.setToStyles({height: "100%", width: "100%", - "top":"0px","left": "0px"}); + animation.setFromStyles(from); + animation.setToStyles({height: "100%", width: "100%", "top":"0px","left": "0px"}); animation.start(this.lightBoxDiv.nativeElement); }); } - public hideLightBox(event) { - this.lightBoxDiv.nativeElement.style.width = 0; + public hideLightBox() { + let to = {"top":this.activePhoto.elementRef.nativeElement.firstChild.offsetTop+"px", + "left":this.activePhoto.elementRef.nativeElement.firstChild.offsetLeft+"px", + width:this.activePhoto.elementRef.nativeElement.firstChild.width+"px", + height: this.activePhoto.elementRef.nativeElement.firstChild.height+"px"}; - this.lightBoxDiv.nativeElement.style.height = 0; + let animation = this.animBuilder.css(); + animation.setDuration(1000); + animation.setFromStyles({height: "100%", width: "100%", "top":"0px","left": "0px"}); + animation.setToStyles(to); + animation.start(this.lightBoxDiv.nativeElement).onComplete(()=>{ + let animation2 = this.animBuilder.css(); + animation2.setDuration(0); + animation2.setToStyles({height: "0px", width: "0px", "top":"0px","left": "0px"}); + animation2.start(this.lightBoxDiv.nativeElement); + }); } diff --git a/frontend/app/gallery/photo/photo.gallery.component.ts b/frontend/app/gallery/photo/photo.gallery.component.ts index 6f2a8faf..3b70af59 100644 --- a/frontend/app/gallery/photo/photo.gallery.component.ts +++ b/frontend/app/gallery/photo/photo.gallery.component.ts @@ -1,6 +1,6 @@ /// -import {Component, Input} from 'angular2/core'; +import {Component, Input, ElementRef} from 'angular2/core'; import {Photo} from "../../../../common/entities/Photo"; import {Directory} from "../../../../common/entities/Directory"; import {Utils} from "../../../../common/Utils"; @@ -13,7 +13,7 @@ export class GalleryPhotoComponent{ @Input() photo: Photo; @Input() directory: Directory; - constructor() { + constructor(public elementRef: ElementRef) { } getPhotoPath(){ diff --git a/package.json b/package.json index a4fa8742..ac65e090 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "url": "https://github.com/bpatrik/PiGallery2/issues" }, "dependencies": { - "angular2": "^2.0.0-beta.16", + "angular2": "^2.0.0-beta.17", "body-parser": "^1.15.0", "core-js": "^2.3.0", "debug": "^2.2.0", @@ -31,22 +31,22 @@ "express-session": "^1.13.0", "html-webpack-plugin": "^2.16.0", "image-size": "^0.5.0", - "jimp": "^0.2.22", + "jimp": "^0.2.24", "karma-mocha-reporter": "^2.0.2", "mime": "^1.3.4", - "mongoose": "^4.4.13", + "mongoose": "^4.4.14", "morgan": "^1.7.0", "ng2-cookies": "^0.1.5", "ng2-material": "^0.3.7", "optimist": "^0.6.1", "protractor": "^3.3.0", "remap-istanbul": "^0.6.3", - "rxjs": "5.0.0-beta.2", + "rxjs": "^5.0.0-beta.6", "style-loader": "^0.13.1", "ts-loader": "^0.8.2", "tslint": "^3.8.1", "tslint-loader": "^2.1.4", - "typescript": "^1.8.10", + "typescript": "^1.9.0", "typings": "^0.8.1", "webpack": "^1.13.0", "zone.js": "^0.6.12"