xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2025-01-14 14:43:17 +08:00
Code Actions Projects 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;
height: 100vh;
right: 0;
width: 0;
top: 0;
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}}"
-->
<div id="controllers-container" #controls
[style.width.px]="contentWidth">
[style.width.px]="getScreenWidth()">
<div id="controls">
<a *ngIf="activePhoto" [href]="activePhoto.gridPhoto.getPhotoPath()"
[download]="activePhoto.gridPhoto.photo.name"><span class="glyphicon glyphicon-download-alt highlight"

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

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