fossilfranv/pigallery2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improving lightbox

Browse Source
This commit is contained in:
Braun Patrik 2017-07-10 22:41:30 +02:00
parent 8a1e63431c
commit cbfd0f32dc
3 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/app/gallery/lightbox/lightbox.gallery.component.css
View File

@ -90,7 +90,6 @@ info-panel {
position: fixed; position: fixed;
height: 100vh; height: 100vh;
right: 0; right: 0;
width: 0;
top: 0; top: 0;
transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
} }

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

@ -23,7 +23,7 @@
endLeft:photoDimension.left}}" endLeft:photoDimension.left}}"
--> -->
<div id="controllers-container" #controls <div id="controllers-container" #controls
[style.width.px]="contentWidth"> [style.width.px]="getScreenWidth()">
<div id="controls"> <div id="controls">
<a *ngIf="activePhoto" [href]="activePhoto.gridPhoto.getPhotoPath()" <a *ngIf="activePhoto" [href]="activePhoto.gridPhoto.getPhotoPath()"
[download]="activePhoto.gridPhoto.photo.name"><span class="glyphicon glyphicon-download-alt highlight" [download]="activePhoto.gridPhoto.photo.name"><span class="glyphicon glyphicon-download-alt highlight"

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

@ -41,13 +41,11 @@ export class GalleryLightboxComponent implements OnDestroy {
public infoPanelVisible = false; public infoPanelVisible = false;
public infoPanelWidth = 0; public infoPanelWidth = 0;
public contentWidth = 0;
constructor(public fullScreenService: FullScreenService, constructor(public fullScreenService: FullScreenService,
private changeDetector: ChangeDetectorRef, private overlayService: OverlayService, private changeDetector: ChangeDetectorRef, private overlayService: OverlayService,
private _builder: AnimationBuilder) { private _builder: AnimationBuilder) {
this.contentWidth = this.getScreenWidth();
} }
@ -148,11 +146,9 @@ export class GalleryLightboxComponent implements OnDestroy {
this.overlayService.showOverlay(); this.overlayService.showOverlay();
this.blackCanvasOpacity = 1.0; this.blackCanvasOpacity = 1.0;
this.showPhoto(this.gridPhotoQL.toArray().indexOf(selectedPhoto), false); this.showPhoto(this.gridPhotoQL.toArray().indexOf(selectedPhoto), false);
this.contentWidth = this.getScreenWidth();
} }
public hide() { public hide() {
this.hideInfoPanel();
this.fullScreenService.exitFullScreen(); this.fullScreenService.exitFullScreen();
const lightboxDimension = this.activePhoto.getDimension(); const lightboxDimension = this.activePhoto.getDimension();
@ -173,6 +169,8 @@ export class GalleryLightboxComponent implements OnDestroy {
this.overlayService.hideOverlay(); this.overlayService.hideOverlay();
}, 500); }, 500);
this.hideInfoPanel(false);
} }
animatePhoto(from: Dimension, to: Dimension = from) { animatePhoto(from: Dimension, to: Dimension = from) {
@ -267,7 +265,6 @@ export class GalleryLightboxComponent implements OnDestroy {
this.infoPanelWidth = 400; this.infoPanelWidth = 400;
const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo); const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
this.animatePhoto(starPhotoPos, endPhotoPos); this.animatePhoto(starPhotoPos, endPhotoPos);
this.contentWidth = this.getScreenWidth();
this.animateLightbox(<Dimension>{ this.animateLightbox(<Dimension>{
top: 0, top: 0,
left: 0, left: 0,
@ -285,7 +282,7 @@ export class GalleryLightboxComponent implements OnDestroy {
} }
} }
hideInfoPanel() { hideInfoPanel(animate: boolean = true) {
this.iPvisibilityTimer = setTimeout(() => { this.iPvisibilityTimer = setTimeout(() => {
this.iPvisibilityTimer = null; this.iPvisibilityTimer = null;
this.infoPanelVisible = false; this.infoPanelVisible = false;
@ -294,8 +291,10 @@ export class GalleryLightboxComponent implements OnDestroy {
const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo); const starPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
this.infoPanelWidth = 0; this.infoPanelWidth = 0;
const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo); const endPhotoPos = this.calcLightBoxPhotoDimension(this.activePhoto.gridPhoto.photo);
if (animate) {
this.animatePhoto(starPhotoPos, endPhotoPos); this.animatePhoto(starPhotoPos, endPhotoPos);
this.contentWidth = this.getScreenWidth(); }
if (animate) {
this.animateLightbox(<Dimension>{ this.animateLightbox(<Dimension>{
top: 0, top: 0,
left: 0, left: 0,
@ -309,6 +308,7 @@ export class GalleryLightboxComponent implements OnDestroy {
height: this.getScreenHeight() height: this.getScreenHeight()
}); });
} }
}
private getBodyScrollTop(): number { private getBodyScrollTop(): number {