self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2025-01-04 03:49:28 +02:00
Code Issues Releases Activity

improving lightbox

Browse Source
This commit is contained in:
Braun Patrik 2017-07-16 20:49:12 +02:00
parent 029dd68e5c
commit fca431799f
4 changed files with 54 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/app/gallery/lightbox/infopanel/info-panel.lightbox.gallery.component.html
View File

@ -1,30 +1,30 @@
<div class="content">
<div class="row">
<div class="col-sm-12">
<div class="col-xs-12">
<h1>Info</h1>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="col-xs-2">
<span class="details-icon glyphicon glyphicon-picture"></span>
</div>
<div class="col-sm-10">
<div class="col-xs-10">
<div class="details-main">
{{photo.name}}
</div>
<div class="details-sub">
<div class="col-sm-4">{{photo.metadata.size.width}} x {{photo.metadata.size.height}}</div>
<div class="col-sm-4">{{calcMpx()}}MP</div>
<div class="col-sm-4" *ngIf="photo.metadata.fileSize">{{calcFileSize()}}</div>
<div class="col-xs-4">{{photo.metadata.size.width}} x {{photo.metadata.size.height}}</div>
<div class="col-xs-4">{{calcMpx()}}MP</div>
<div class="col-xs-4" *ngIf="photo.metadata.fileSize">{{calcFileSize()}}</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="col-xs-2">
<span class="details-icon glyphicon glyphicon-calendar"></span>
</div>
<div class="col-sm-10">
<div class="col-xs-10">
<div class="details-main">
{{getDate()}}
<ng-container *ngIf="getYear() !== getCurrentYear()">
@ -32,43 +32,43 @@
</ng-container>
</div>
<div class="details-sub">
<div class="col-sm-12">{{getDay()}}, {{getTime()}}</div>
<div class="col-xs-12">{{getDay()}}, {{getTime()}}</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="col-xs-2">
<span class="details-icon glyphicon glyphicon-camera"></span>
</div>
<div class="col-sm-10">
<div class="col-xs-10">
<div class="details-main">
{{photo.metadata.cameraData.model || photo.metadata.cameraData.make || "Camera"}}
</div>
<div class="details-sub">
<div class="col-sm-3" *ngIf="photo.metadata.cameraData.ISO">ISO{{photo.metadata.cameraData.ISO}}</div>
<div class="col-sm-3" *ngIf="photo.metadata.cameraData.fStop">f/{{photo.metadata.cameraData.fStop}}</div>
<div class="col-sm-3" *ngIf="photo.metadata.cameraData.exposure">
<div class="col-xs-3" *ngIf="photo.metadata.cameraData.ISO">ISO{{photo.metadata.cameraData.ISO}}</div>
<div class="col-xs-3" *ngIf="photo.metadata.cameraData.fStop">f/{{photo.metadata.cameraData.fStop}}</div>
<div class="col-xs-3" *ngIf="photo.metadata.cameraData.exposure">
{{toFraction(photo.metadata.cameraData.exposure)}}s
</div>
<div class="col-sm-3" *ngIf="photo.metadata.cameraData.focalLength">
<div class="col-xs-3" *ngIf="photo.metadata.cameraData.focalLength">
{{photo.metadata.cameraData.focalLength}}mm
</div>
<div class="col-sm-12" *ngIf="photo.metadata.cameraData.lens">{{photo.metadata.cameraData.lens}}</div>
<div class="col-xs-12" *ngIf="photo.metadata.cameraData.lens">{{photo.metadata.cameraData.lens}}</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="col-xs-2">
<span class="details-icon glyphicon glyphicon-map-marker"></span>
</div>
<div class="col-sm-10">
<div class="col-xs-10">
<div class="details-main">
{{getPositionText() || "Position"}}
</div>
<div class="details-sub" *ngIf="hasGPS()">
<div class="col-sm-12">
<div class="col-xs-12">
{{photo.metadata.positionData.GPSData.latitude.toFixed(3)}},
{{photo.metadata.positionData.GPSData.longitude.toFixed(3)}}
</div>

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

@ -7,13 +7,13 @@
<div class="lightbox" #lightbox>
<gallery-lightbox-photo [gridPhoto]="activePhoto ? activePhoto.gridPhoto : null"
[loadImage]="!animating"
[windowAspect]="getPhotoFrameWidth()/getPhotoFrameHeight()"
#photo>
</gallery-lightbox-photo>
</div>
<div
*ngIf="controllersVisible"
id="controllers-container" #controls [style.width.px]="getScreenWidth()"
id="controllers-container" #controls [style.width.px]="getPhotoFrameWidth()"
[ngClass]="!controllersDimmed ? 'dim-controls': ''">
<div class="controls controls-top">
<a *ngIf="activePhoto" [href]="activePhoto.gridPhoto.getPhotoPath()"

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

@ -26,7 +26,6 @@ import {Observable} from "rxjs/Observable";
})
export class GalleryLightboxComponent implements OnDestroy {
@Output('onLastElement') onLastElement = new EventEmitter();
@ViewChild("root") elementRef: ElementRef;
@ViewChild("photo") photoElement: GalleryLightboxPhotoComponent;
@ViewChild("lightbox") lightboxElement: ElementRef;
@ -46,7 +45,7 @@ export class GalleryLightboxComponent implements OnDestroy {
public infoPanelVisible = false;
public infoPanelWidth = 0;
public animating = false
public animating = false;
constructor(public fullScreenService: FullScreenService,
@ -122,7 +121,7 @@ export class GalleryLightboxComponent implements OnDestroy {
let to = this.activePhoto.getDimension();
//if target image out of screen -> scroll to there
if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getScreenHeight() < to.top) {
if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getPhotoFrameHeight() < to.top) {
this.setBodyScrollTop(to.top);
}
@ -150,8 +149,8 @@ export class GalleryLightboxComponent implements OnDestroy {
<Dimension>{
top: 0,
left: 0,
width: this.getScreenWidth(),
height: this.getScreenHeight()
width: this.getPhotoFrameWidth(),
height: this.getPhotoFrameHeight()
});
@ -177,8 +176,8 @@ export class GalleryLightboxComponent implements OnDestroy {
this.animateLightbox(<Dimension>{
top: 0,
left: 0,
width: this.getScreenWidth(),
height: this.getScreenHeight()
width: this.getPhotoFrameWidth(),
height: this.getPhotoFrameHeight()
}, lightboxDimension).onDone(() => {
this.visible = false;
@ -206,8 +205,8 @@ export class GalleryLightboxComponent implements OnDestroy {
animateLightbox(from: Dimension = <Dimension>{
top: 0,
left: 0,
width: this.getScreenWidth(),
height: this.getScreenHeight()
width: this.getPhotoFrameWidth(),
height: this.getPhotoFrameHeight()
}, to: Dimension = from): AnimationPlayer {
const elem = this._builder.build([
style(<any>Dimension.toString(from)),
@ -289,14 +288,14 @@ export class GalleryLightboxComponent implements OnDestroy {
this.animateLightbox(<Dimension>{
top: 0,
left: 0,
width: this.getScreenWidth() + 400,
height: this.getScreenHeight()
width: this.getPhotoFrameWidth() + 400,
height: this.getPhotoFrameHeight()
},
<Dimension>{
top: 0,
left: 0,
width: this.getScreenWidth(),
height: this.getScreenHeight()
width: this.getPhotoFrameWidth(),
height: this.getPhotoFrameHeight()
});
if (this.iPvisibilityTimer != null) {
clearTimeout(this.iPvisibilityTimer);
@ -319,14 +318,14 @@ export class GalleryLightboxComponent implements OnDestroy {
this.animateLightbox(<Dimension>{
top: 0,
left: 0,
width: this.getScreenWidth() - 400,
height: this.getScreenHeight()
width: this.getPhotoFrameWidth() - 400,
height: this.getPhotoFrameHeight()
},
<Dimension>{
top: 0,
left: 0,
width: this.getScreenWidth(),
height: this.getScreenHeight()
width: this.getPhotoFrameWidth(),
height: this.getPhotoFrameHeight()
});
}
}
@ -340,11 +339,11 @@ export class GalleryLightboxComponent implements OnDestroy {
window.scrollTo(window.scrollX, value);
}
private getScreenWidth() {
private getPhotoFrameWidth() {
return Math.max(window.innerWidth - this.infoPanelWidth, 0);
}
private getScreenHeight() {
private getPhotoFrameHeight() {
return window.innerHeight;
}
@ -352,15 +351,17 @@ export class GalleryLightboxComponent implements OnDestroy {
private calcLightBoxPhotoDimension(photo: PhotoDTO): Dimension {
let width = 0;
let height = 0;
if (photo.metadata.size.height > photo.metadata.size.width) {
width = Math.round(photo.metadata.size.width * (this.getScreenHeight() / photo.metadata.size.height));
height = this.getScreenHeight();
const photoAspect = photo.metadata.size.width / photo.metadata.size.height;
const windowAspect = this.getPhotoFrameWidth() / this.getPhotoFrameHeight();
if (photoAspect < windowAspect) {
width = Math.round(photo.metadata.size.width * (this.getPhotoFrameHeight() / photo.metadata.size.height));
height = this.getPhotoFrameHeight();
} else {
width = this.getScreenWidth();
height = Math.round(photo.metadata.size.height * (this.getScreenWidth() / photo.metadata.size.width));
width = this.getPhotoFrameWidth();
height = Math.round(photo.metadata.size.height * (this.getPhotoFrameWidth() / photo.metadata.size.width));
}
let top = (this.getScreenHeight() / 2 - height / 2);
let left = (this.getScreenWidth() / 2 - width / 2);
let top = (this.getPhotoFrameHeight() / 2 - height / 2);
let left = (this.getPhotoFrameWidth() / 2 - width / 2);
return <Dimension>{top: top, left: left, width: width, height: height};
}
@ -385,6 +386,7 @@ export class GalleryLightboxComponent implements OnDestroy {
this.controllersDimmed = false;
};
public pause() {
if (this.timerSub != null) {
this.timerSub.unsubscribe();
@ -393,7 +395,6 @@ export class GalleryLightboxComponent implements OnDestroy {
}
public play() {
console.log("play");
this.pause();
this.timerSub = this.timer.filter(t => t % 2 == 0).subscribe(() => {
if (this.navigation.hasNext) {
@ -406,7 +407,6 @@ export class GalleryLightboxComponent implements OnDestroy {
}
public fastForward() {
console.log("fastForward");
this.pause();
this.timerSub = this.timer.subscribe(() => {
if (this.navigation.hasNext) {

6
frontend/app/gallery/lightbox/photo/photo.lightbox.gallery.component.ts
View File

@ -10,6 +10,7 @@ export class GalleryLightboxPhotoComponent implements OnChanges {
@Input() gridPhoto: GridPhoto;
@Input() loadImage: boolean = false;
@Input() windowAspect: number = 1;
public imageSize = {width: "auto", height: "100"};
@ -29,7 +30,10 @@ export class GalleryLightboxPhotoComponent implements OnChanges {
return;
}
if (this.gridPhoto.photo.metadata.size.height > this.gridPhoto.photo.metadata.size.width) {
const photoAspect = this.gridPhoto.photo.metadata.size.width / this.gridPhoto.photo.metadata.size.height;
if (photoAspect < this.windowAspect) {
this.imageSize.height = "100";
this.imageSize.width = null;
} else {