mirror of
https://github.com/xuthus83/pigallery2.git
synced 2024-11-03 21:04:03 +08:00
implementing lightbox move back to its place
This commit is contained in:
Braun Patrik
parent
542d0416fd
commit
29a45b2d98
@ -1,6 +1,6 @@
|
||||
<app-frame>
|
||||
<md-content flex id="content">
|
||||
<div *ngIf="currentDirectory" *ngFor="#directory of currentDirectory.directories">
|
||||
<div *ngIf="currentDirectory" *ngFor="let directory of currentDirectory.directories">
|
||||
<gallery-directory *ngIf="directory" [directory]="directory"></gallery-directory>
|
||||
</div>
|
||||
<gallery-grid [directory]="currentDirectory"></gallery-grid>
|
||||
|
||||
@ -1,19 +1,14 @@
|
||||
<div class="lightboxCss"
|
||||
#lightbox
|
||||
|
||||
(click)="hideLightBox($event)"
|
||||
[style.top.px]="lightboxModel.top"
|
||||
[style.left.px]="lightboxModel.left"
|
||||
[style.width.px]="lightboxModel.image.width"
|
||||
[style.height.px]="lightboxModel.image.height">
|
||||
(click)="hideLightBox()" >
|
||||
<img [src]="lightboxModel.image.src" width="100%" height="100%"/>
|
||||
</div>
|
||||
|
||||
<div #gridContainer *ngIf="directory" (window:resize)="onResize()" >
|
||||
<gallery-photo
|
||||
*ngFor="#gridPhoto of photosToRender"
|
||||
*ngFor="let gridPhoto of photosToRender"
|
||||
*ngIf="gridPhoto"
|
||||
(click)="showLightBox($event,gridPhoto)"
|
||||
(click)="showLightBox(gridPhoto)"
|
||||
[photo]="gridPhoto.photo"
|
||||
[directory]="directory"
|
||||
[style.width.px]="gridPhoto.renderWidth"
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
///<reference path="../../../browser.d.ts"/>
|
||||
|
||||
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<GalleryPhotoComponent>;
|
||||
@Input() directory:Directory;
|
||||
photosToRender:Array<GridPhoto> = [];
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
///<reference path="../../../browser.d.ts"/>
|
||||
|
||||
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(){
|
||||
|
||||
10
package.json
10
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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user