xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects Activity

improving lightbox image rendering

Browse Source 
adding arrow lightbox navigation
This commit is contained in:
Braun Patrik 2016-07-05 12:55:47 +02:00
parent a3a5e91145
commit 0ae4f5c7c8
2 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/gallery/lightbox/lightbox.gallery.component.html
View File

@ -1,4 +1,4 @@
<div [hidden]="!activePhoto"> <div [hidden]="!visible">
<div class="blackCanvas"> <div class="blackCanvas">
</div> </div>

59
frontend/app/gallery/lightbox/lightbox.gallery.component.ts
View File

@ -1,6 +1,6 @@
///<reference path="../../../browser.d.ts"/> ///<reference path="../../../browser.d.ts"/>
import {Component, QueryList, Output, EventEmitter} from "@angular/core"; import {Component, QueryList, Output, EventEmitter, HostListener} from "@angular/core";
import {Photo} from "../../../../common/entities/Photo"; import {Photo} from "../../../../common/entities/Photo";
import {GalleryPhotoComponent} from "../grid/photo/photo.grid.gallery.component.ts"; import {GalleryPhotoComponent} from "../grid/photo/photo.grid.gallery.component.ts";
import {BrowserDomAdapter} from "@angular/platform-browser/src/browser/browser_adapter"; import {BrowserDomAdapter} from "@angular/platform-browser/src/browser/browser_adapter";
@ -23,6 +23,7 @@ export class GalleryLightboxComponent {
public gridPhotoQL:QueryList<GalleryPhotoComponent>; public gridPhotoQL:QueryList<GalleryPhotoComponent>;
private dom:BrowserDomAdapter; private dom:BrowserDomAdapter;
private visible = false;
constructor() { constructor() {
@ -35,13 +36,14 @@ export class GalleryLightboxComponent {
let pcList = this.gridPhotoQL.toArray(); let pcList = this.gridPhotoQL.toArray();
for (let i = 0; i < pcList.length; i++) { for (let i = 0; i < pcList.length; i++) {
if (pcList[i] === this.activePhoto && i + 1 < pcList.length) { if (pcList[i] === this.activePhoto) {
this.showPhoto(pcList[i + 1]); if (i + 1 < pcList.length) {
this.showPhoto(pcList[i + 1]);
if (i + 3 === pcList.length) {
this.onLastElement.emit({}); //trigger to render more photos if there are
}
if (i + 3 === pcList.length) {
this.onLastElement.emit({}); //trigger to render more photos if there are
}
}
return; return;
} }
} }
@ -50,8 +52,10 @@ export class GalleryLightboxComponent {
public prevImage() { public prevImage() {
let pcList = this.gridPhotoQL.toArray(); let pcList = this.gridPhotoQL.toArray();
for (let i = 0; i < pcList.length; i++) { for (let i = 0; i < pcList.length; i++) {
if (pcList[i] === this.activePhoto && i > 0) { if (pcList[i] === this.activePhoto) {
this.showPhoto(pcList[i - 1]); if (i > 0) {
this.showPhoto(pcList[i - 1]);
}
return; return;
} }
} }
@ -59,30 +63,37 @@ export class GalleryLightboxComponent {
private showPhoto(photoComponent:GalleryPhotoComponent) { private showPhoto(photoComponent:GalleryPhotoComponent) {
let pcList = this.gridPhotoQL.toArray(); this.activePhoto = null;
setImmediate(()=> {
let pcList = this.gridPhotoQL.toArray();
let index = pcList.indexOf(photoComponent); let index = pcList.indexOf(photoComponent);
if (index == -1) { if (index == -1) {
throw new Error("Can't find the photo"); throw new Error("Can't find the photo");
} }
this.navigation.hasPrev = index > 0; this.photoDimension = this.calcLightBoxPhotoDimension(photoComponent.gridPhoto.photo);
this.navigation.hasNext = index + 1 < pcList.length; this.navigation.hasPrev = index > 0;
this.activePhoto = photoComponent; this.navigation.hasNext = index + 1 < pcList.length;
this.photoDimension = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo); this.activePhoto = photoComponent;
});
} }
public show(photo:Photo) { public show(photo:Photo) {
this.visible = true;
let selectedPhoto = this.findPhotoComponent(photo); let selectedPhoto = this.findPhotoComponent(photo);
if (selectedPhoto === null) { if (selectedPhoto === null) {
throw new Error("Can't find Photo"); throw new Error("Can't find Photo");
} }
this.showPhoto(selectedPhoto); this.showPhoto(selectedPhoto);
this.dom.setStyle(this.dom.query('body'), 'overflow', 'hidden'); this.dom.setStyle(this.dom.query('body'), 'overflow', 'hidden');
} }
public hide() { public hide() {
this.visible = false;
let to = this.activePhoto.getDimension(); let to = this.activePhoto.getDimension();
//iff target image out of screen -> scroll to there //iff target image out of screen -> scroll to there
@ -106,6 +117,18 @@ export class GalleryLightboxComponent {
return null; return null;
} }
@HostListener('window:keydown')
onKeyPress(e) {
let event = window.event ? window.event : e;
switch (event.keyCode) {
case 37:
this.prevImage();
break;
case 39:
this.nextImage();
break;
}
}
private getBodyScrollTop():number { private getBodyScrollTop():number {
return window.scrollY; return window.scrollY;