From 5c8fe8f82b266adaadc657e16da9622b74bba622 Mon Sep 17 00:00:00 2001 From: Braun Patrik Date: Sat, 30 Apr 2016 18:33:07 +0200 Subject: [PATCH] implementing zoom-in lightbox --- .../lightbox/lightbox.gallery.component.css | 21 +++- .../lightbox/lightbox.gallery.component.html | 14 ++- .../lightbox/lightbox.gallery.component.ts | 96 ++++++++++++++----- 3 files changed, 101 insertions(+), 30 deletions(-) diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.css b/frontend/app/gallery/lightbox/lightbox.gallery.component.css index 75c5a142..385a7c0e 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.css +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.css @@ -1,10 +1,23 @@ -.lightboxCss{ +.lightbox { position: fixed; /* Stay in place */ z-index: 1100; /* Sit on top */ left: 0; top: 0; width: 0px; /* Full width */ height: 0px; /* Full height */ - background-color: #000066; - overflow:hidden; -} \ No newline at end of file + 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; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + background-color: black; +} diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.html b/frontend/app/gallery/lightbox/lightbox.gallery.component.html index e5e58bb9..8f170195 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.html +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.html @@ -1,5 +1,11 @@ -
- +
+
+ +
+
+ +
diff --git a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts index e2afe994..852f0937 100644 --- a/frontend/app/gallery/lightbox/lightbox.gallery.component.ts +++ b/frontend/app/gallery/lightbox/lightbox.gallery.component.ts @@ -6,7 +6,7 @@ import {Directory} from "../../../../common/entities/Directory"; import {Utils} from "../../../../common/Utils"; import {IRenderable, Dimension} from "../../model/IRenderable"; import {GalleryPhotoComponent} from "../photo/photo.gallery.component"; -import {AnimationBuilder} from "angular2/animate"; +import {AnimationBuilder, CssAnimationBuilder} from "angular2/animate"; import {BrowserDomAdapter} from "angular2/src/platform/browser/browser_adapter"; @Component({ @@ -17,15 +17,19 @@ import {BrowserDomAdapter} from "angular2/src/platform/browser/browser_adapter"; export class GalleryLightboxComponent{ @ViewChild('lightbox') lightBoxDiv:ElementRef; + @ViewChild('blackCanvas') blackCanvasDiv:ElementRef; private activePhoto:GalleryPhotoComponent = null; public gridPhotoQL:QueryList; - - dom:BrowserDomAdapter; + private dom:BrowserDomAdapter; + private photoStyle = {width:"100%",height:"100%"}; + constructor(private animBuilder: AnimationBuilder) { this.dom = new BrowserDomAdapter(); + + } public show(photo:Photo){ @@ -47,17 +51,38 @@ export class GalleryLightboxComponent{ let from = this.activePhoto.getDimension(); from.top -= this.getBodyScrollTop(); - console.log(from); - let animation0 = this.animBuilder.css(); - animation0.setDuration(0); - animation0.setToStyles(from.toStyle()); - animation0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{ - let animation = this.animBuilder.css(); - animation.setDuration(800); - animation.setFromStyles(from.toStyle()); - animation.setToStyles({height: "100%", width: "100%", "top":"0px","left": "0px"}); - animation.start(this.lightBoxDiv.nativeElement); + + if(from.height > from.width){ + this.photoStyle.height = "100%"; + this.photoStyle.width = "auto"; + }else{ + this.photoStyle.height = "auto"; + this.photoStyle.width = "100%"; + } + + let anim0 = this.animBuilder.css(); + anim0.setDuration(0); + anim0.setToStyles(from.toStyle()); + anim0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{ + + let anim1 = this.animBuilder.css(); + anim1.setDuration(800); + anim1.setFromStyles(from.toStyle()); + anim1.setToStyles({height: "100%", width: "100%", "top":"0px","left": "0px"}); + anim1.start(this.lightBoxDiv.nativeElement); + }); + + let anim2 = this.animBuilder.css(); + anim2.setDuration(0); + anim2.setToStyles({opacity:"0", display:"block"}); + anim2.start(this.blackCanvasDiv.nativeElement).onComplete(()=>{ + + let anim3 = this.animBuilder.css(); + anim3.setDuration(800); + anim3.setFromStyles({opacity:"0"}); + anim3.setToStyles({opacity:"1"}); + anim3.start(this.blackCanvasDiv.nativeElement); }); } @@ -66,17 +91,44 @@ export class GalleryLightboxComponent{ let to = this.activePhoto.getDimension(); to.top -= this.getBodyScrollTop(); - let animation = this.animBuilder.css(); - animation.setDuration(800); - animation.setFromStyles({height: "100%", width: "100%", "top":"0px","left": "0px"}); - animation.setToStyles(to.toStyle()); - 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); + let anim0 = this.animBuilder.css(); + anim0.setDuration(800); + anim0.setFromStyles({height: "100%", width: "100%", "top":"0px","left": "0px"}); + anim0.setToStyles(to.toStyle()); + anim0.start(this.lightBoxDiv.nativeElement).onComplete(()=>{ + let anim1 = this.animBuilder.css(); + anim1.setDuration(0); + anim1.setToStyles({height: "0px", width: "0px", "top":"0px","left": "0px"}); + anim1.start(this.lightBoxDiv.nativeElement); this.dom.setStyle(this.dom.query('body'), 'overflow', 'auto'); }); + + + let anim2 = this.animBuilder.css(); + anim2.setDuration(800); + anim2.setFromStyles({opacity:"1"}); + anim2.setToStyles({opacity:"0"}); + anim2.start(this.blackCanvasDiv.nativeElement).onComplete(()=>{ + let anim4 = this.animBuilder.css(); + anim4.setDuration(0); + anim4.setToStyles({opacity:"0", display:"none"}); + anim4.start(this.blackCanvasDiv.nativeElement); + }); + } + + + getPhotoPath(){ + if(!this.activePhoto){ + return ""; + } + return Photo.getPhotoPath(this.activePhoto.directory,this.activePhoto.photo); + } + + getThumbnailPath(){ + if(!this.activePhoto){ + return ""; + } + return Photo.getThumbnailPath(this.activePhoto.directory,this.activePhoto.photo); } private getBodyScrollTop(){