mirror of
https://github.com/bpatrik/pigallery2.git
synced 2025-01-12 04:23:09 +02:00
implementing map lightbox
This commit is contained in:
Braun Patrik
parent
8e40923cdf
commit
c86fbf3509
@ -28,6 +28,7 @@ import {GalleryComponent} from "./gallery/gallery.component";
|
||||
import {StringifyRole} from "./pipes/StringifyRolePipe";
|
||||
import {Config} from "./config/Config";
|
||||
import {GalleryMapComponent} from "./gallery/map/map.gallery.component";
|
||||
import {GalleryMapLightboxComponent} from "./gallery/map/lightbox/lightbox.map.gallery.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
@ -51,6 +52,7 @@ import {GalleryMapComponent} from "./gallery/map/map.gallery.component";
|
||||
GalleryDirectoryComponent,
|
||||
GalleryLightboxComponent,
|
||||
GalleryMapComponent,
|
||||
GalleryMapLightboxComponent,
|
||||
FrameComponent,
|
||||
GallerySearchComponent,
|
||||
GalleryNavigatorComponent,
|
||||
|
||||
@ -0,0 +1,65 @@
|
||||
.lightbox {
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1100; /* Sit on top */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: hidden;
|
||||
display: flex; /* add */
|
||||
justify-content: center; /* add to align horizontal */
|
||||
align-items: center; /* add to align vertical */
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.sebm-google-map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.blackCanvas {
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1099; /* Sit on top */
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
background-color: black;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
#controllers-container {
|
||||
z-index: 1100;
|
||||
right: 0;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#controls {
|
||||
top: 0;
|
||||
height: initial;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
#controls span {
|
||||
margin-left: 6px;
|
||||
margin-right: 6px;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
opacity: 0.4;
|
||||
transition: opacity .2s ease-out;
|
||||
-moz-transition: opacity .2s ease-out;
|
||||
-webkit-transition: opacity .2s ease-out;
|
||||
-o-transition: opacity .2s ease-out;
|
||||
}
|
||||
|
||||
.highlight:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
<div [hidden]="!visible" #root>
|
||||
|
||||
|
||||
<div class="lightbox"
|
||||
[style.width.px]="lightboxDimension.width"
|
||||
[style.height.px]="lightboxDimension.height"
|
||||
[style.top.px]="lightboxDimension.top"
|
||||
[style.left.px]="lightboxDimension.left"
|
||||
[style.opacity]="opacity">
|
||||
<sebm-google-map
|
||||
[style.width.px]="mapDimension.width"
|
||||
[style.height.px]="mapDimension.height"
|
||||
[zoom]="5"
|
||||
[latitude]="mapCenter.latitude"
|
||||
[longitude]="mapCenter.longitude">
|
||||
<sebm-google-map-marker
|
||||
*ngFor="let photo of mapPhotos"
|
||||
[latitude]="photo.latitude"
|
||||
[longitude]="photo.longitude"
|
||||
[iconUrl]="photo.iconUrl">
|
||||
</sebm-google-map-marker>
|
||||
</sebm-google-map>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="controllers-container" #controls>
|
||||
<div id="controls">
|
||||
<span>
|
||||
<span class=" glyphicon glyphicon-resize-small highlight"
|
||||
*ngIf="fullScreenService.isFullScreenEnabled()"
|
||||
(click)="fullScreenService.exitFullScreen()" title="toggle fullscreen"></span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="glyphicon glyphicon-fullscreen highlight"
|
||||
*ngIf="!fullScreenService.isFullScreenEnabled()"
|
||||
(click)="fullScreenService.showFullScreen(root)" title="toggle fullscreen"></span>
|
||||
</span>
|
||||
<span>
|
||||
<span class="glyphicon glyphicon-remove highlight" (click)="hide()" title="close"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,118 @@
|
||||
import {Component, Input, OnChanges, ElementRef, ViewChild} from "@angular/core";
|
||||
import {PhotoDTO} from "../../../../../common/entities/PhotoDTO";
|
||||
import {Dimension} from "../../../model/IRenderable";
|
||||
import {FullScreenService} from "../../fullscreen.service";
|
||||
import {Utils} from "../../../../../common/Utils";
|
||||
import {SebmGoogleMap} from "angular2-google-maps/core";
|
||||
|
||||
@Component({
|
||||
selector: 'gallery-map-lightbox',
|
||||
styleUrls: ['app/gallery/map/lightbox/lightbox.map.gallery.component.css'],
|
||||
templateUrl: 'app/gallery/map/lightbox/lightbox.map.gallery.component.html',
|
||||
})
|
||||
export class GalleryMapLightboxComponent implements OnChanges {
|
||||
|
||||
@Input() photos: Array<PhotoDTO>;
|
||||
private startPosition = null;
|
||||
public lightboxDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
|
||||
public mapDimension: Dimension = <Dimension>{top: 0, left: 0, width: 0, height: 0};
|
||||
private visible = false;
|
||||
private opacity = 1.0;
|
||||
mapPhotos: Array<{latitude: string, longitude: string, iconUrl}> = [];
|
||||
mapCenter = {latitude: "0", longitude: "0"};
|
||||
|
||||
@ViewChild("root") elementRef: ElementRef;
|
||||
|
||||
@ViewChild(SebmGoogleMap) map: SebmGoogleMap;
|
||||
|
||||
|
||||
constructor(private fullScreenService: FullScreenService) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
//TODO: fix zooming
|
||||
ngOnChanges() {
|
||||
this.mapPhotos = this.photos.filter(p => {
|
||||
return p.metadata && p.metadata.positionData && p.metadata.positionData.GPSData;
|
||||
}).map(p => {
|
||||
return {
|
||||
latitude: p.metadata.positionData.GPSData.latitude,
|
||||
longitude: p.metadata.positionData.GPSData.longitude,
|
||||
iconUrl: Utils.concatUrls("/api/gallery/content/", p.directory.path, p.directory.name, p.name, "icon")
|
||||
};
|
||||
});
|
||||
|
||||
if (this.mapPhotos.length > 0) {
|
||||
this.mapCenter = this.mapPhotos[0];
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
public show(position: Dimension) {
|
||||
this.visible = true;
|
||||
this.opacity = 1.0;
|
||||
this.startPosition = position;
|
||||
this.lightboxDimension = position;
|
||||
this.lightboxDimension.top -= this.getBodyScrollTop();
|
||||
this.mapDimension = <Dimension>{
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: this.getScreenWidth(),
|
||||
height: this.getScreenHeight()
|
||||
};
|
||||
this.map.triggerResize();
|
||||
|
||||
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
|
||||
|
||||
setImmediate(() => {
|
||||
this.lightboxDimension = <Dimension>{
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: this.getScreenWidth(),
|
||||
height: this.getScreenHeight()
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
public hide() {
|
||||
this.fullScreenService.exitFullScreen();
|
||||
let to = this.startPosition;
|
||||
|
||||
//iff target image out of screen -> scroll to there
|
||||
if (this.getBodyScrollTop() > to.top || this.getBodyScrollTop() + this.getScreenHeight() < to.top) {
|
||||
this.setBodyScrollTop(to.top);
|
||||
}
|
||||
|
||||
this.lightboxDimension = this.startPosition;
|
||||
this.lightboxDimension.top -= this.getBodyScrollTop();
|
||||
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
|
||||
this.opacity = 0.0;
|
||||
setTimeout(() => {
|
||||
this.visible = false;
|
||||
}, 500);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
private getBodyScrollTop(): number {
|
||||
return window.scrollY;
|
||||
}
|
||||
|
||||
private setBodyScrollTop(value: number) {
|
||||
window.scrollTo(window.scrollX, value);
|
||||
}
|
||||
|
||||
private getScreenWidth() {
|
||||
return window.innerWidth;
|
||||
}
|
||||
|
||||
private getScreenHeight() {
|
||||
return window.innerHeight;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
.sebm-google-map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#map {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@ -1,15 +1,19 @@
|
||||
<gallery-map-lightbox [photos]="photos"></gallery-map-lightbox>
|
||||
<div id="map" #map>
|
||||
<sebm-google-map
|
||||
(click)="click()"
|
||||
[disableDefaultUI]="true"
|
||||
[zoomControl]="false"
|
||||
[streetViewControl]="false"
|
||||
[usePanning]="false"
|
||||
[draggable]="false"
|
||||
[zoom]="0"
|
||||
[latitude]="mapCenter.latitude"
|
||||
[longitude]="mapCenter.longitude">
|
||||
<sebm-google-map-marker
|
||||
|
||||
*ngFor="let photo of mapPhotos"
|
||||
[latitude]="photo.latitude"
|
||||
[longitude]="photo.longitude"
|
||||
[iconUrl]="photo.iconUrl">
|
||||
[longitude]="photo.longitude">
|
||||
</sebm-google-map-marker>
|
||||
</sebm-google-map>
|
||||
</sebm-google-map>
|
||||
</div>
|
||||
@ -1,17 +1,21 @@
|
||||
import {Component, OnChanges, Input} from "@angular/core";
|
||||
import {Component, OnChanges, Input, ViewChild, ElementRef} from "@angular/core";
|
||||
import {PhotoDTO} from "../../../../common/entities/PhotoDTO";
|
||||
import {Utils} from "../../../../common/Utils";
|
||||
import {IRenderable, Dimension} from "../../model/IRenderable";
|
||||
import {GalleryMapLightboxComponent} from "./lightbox/lightbox.map.gallery.component";
|
||||
@Component({
|
||||
selector: 'gallery-map',
|
||||
templateUrl: 'app/gallery/map/map.gallery.component.html',
|
||||
styleUrls: ['app/gallery/map/map.gallery.component.css']
|
||||
})
|
||||
export class GalleryMapComponent implements OnChanges {
|
||||
export class GalleryMapComponent implements OnChanges, IRenderable {
|
||||
|
||||
@Input() photos: Array<PhotoDTO>;
|
||||
@ViewChild(GalleryMapLightboxComponent) mapLightbox: GalleryMapLightboxComponent;
|
||||
|
||||
mapPhotos: Array<{latitude: string, longitude: string, iconUrl}> = [];
|
||||
mapCenter = {latitude: "0", longitude: "0"};
|
||||
@ViewChild("map") map: ElementRef;
|
||||
|
||||
//TODO: fix zooming
|
||||
ngOnChanges() {
|
||||
@ -31,5 +35,18 @@ export class GalleryMapComponent implements OnChanges {
|
||||
|
||||
|
||||
}
|
||||
|
||||
click() {
|
||||
this.mapLightbox.show(this.getDimension());
|
||||
}
|
||||
|
||||
public getDimension(): Dimension {
|
||||
return <Dimension>{
|
||||
top: this.map.nativeElement.offsetTop,
|
||||
left: this.map.nativeElement.offsetLeft,
|
||||
width: this.map.nativeElement.offsetWidth,
|
||||
height: this.map.nativeElement.offsetHeight
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user