self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-10 11:10:35 +02:00
Code Issues Releases Activity

Disabling Map preview on IOS #155.

Browse Source 
leaflet (yaga-map) uses z-index that confuses safari on IOS and prevents click propagation for photo preview (lightbox)
This commit is contained in:
Patrik J. Braun 2021-04-04 09:39:10 +02:00
parent 867fd3c070
commit 66bb7abf83
3 changed files with 44 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/frontend/app/ui/gallery/map/map.gallery.component.css
View File

@ -1,9 +1,17 @@
.yaga-map{
z-index: 0;
/*z-index: 0;*/
width: 100%;
height: 100%;
}
.clickable{
cursor: pointer;
}
.oi{
font-size: 59pt;
}
#map {
width: 100%;
height: 100%;

23
src/frontend/app/ui/gallery/map/map.gallery.component.html
View File

@ -1,13 +1,15 @@
<ng-template [ngIf]="mapPhotos.length>0">
<app-gallery-map-lightbox [photos]="photos" [gpxFiles]="gpxFiles"></app-gallery-map-lightbox>
<div id="map" #map>
<yaga-map #yagaMap
[draggingEnabled]="false"
[keyboardEnabled]="false"
[tapEnabled]="false"
[boxZoomEnabled]="false"
[doubleClickZoomEnabled]="false">
<div class="clickable" id="map" #map (click)="click()">
<span *ngIf="!EnableMapPreview" class="oi-map oi"></span>
<yaga-map
*ngIf="EnableMapPreview"
#yagaMap
[draggingEnabled]="false"
[keyboardEnabled]="false"
[tapEnabled]="false"
[boxZoomEnabled]="false"
[doubleClickZoomEnabled]="false">
<yaga-marker
*ngFor="let photo of mapPhotos"
[lat]="photo.lat"
@ -19,9 +21,6 @@
</yaga-attribution-control>
<yaga-tile-layer [url]="mapService.MapLayer"></yaga-tile-layer>
</yaga-map>
<div class="overlay" (click)="click()"
[style.margin-top.px]="-height"
[style.height.px]="height">
</div>
</div>
</ng-template>

27
src/frontend/app/ui/gallery/map/map.gallery.component.ts
View File

@ -1,4 +1,4 @@
import {Component, ElementRef, Input, OnChanges, ViewChild, AfterViewInit} from '@angular/core';
import {AfterViewInit, Component, ElementRef, Input, OnChanges, ViewChild} from '@angular/core';
import {PhotoDTO} from '../../../../../common/entities/PhotoDTO';
import {Dimension, IRenderable} from '../../../model/IRenderable';
import {GalleryMapLightboxComponent} from './lightbox/lightbox.map.gallery.component';
@ -20,12 +20,33 @@ export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewIni
mapPhotos: Array<{ lat: number, lng: number }> = [];
@ViewChild('map', {static: false}) mapElement: ElementRef;
@ViewChild('yagaMap', {static: false}) yagaMap: MapComponent;
height: number = null;
// height: number = null;
constructor(public mapService: MapService) {
}
get EnableMapPreview(): boolean {
/**
* Disabling map preview on IOS as safari has issues handling z-index of leaflet (yaga-maps)
* Details https://github.com/bpatrik/pigallery2/issues/155
* TODO: re enable it once yaga-maps is fixed
*/
const isIOS = [
'iPad Simulator',
'iPhone Simulator',
'iPod Simulator',
'iPad',
'iPhone',
'iPod'
].includes(navigator.platform)
// iPad on iOS 13 detection
|| (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
return !isIOS;
}
ngOnChanges() {
this.mapPhotos = this.photos.filter(p => {
return p.metadata && p.metadata.positionData && p.metadata.positionData.GPSData &&
@ -47,7 +68,7 @@ export class GalleryMapComponent implements OnChanges, IRenderable, AfterViewIni
ngAfterViewInit() {
setTimeout(() => {
this.height = this.mapElement.nativeElement.clientHeight;
// this.height = this.mapElement.nativeElement.clientHeight;
this.yagaMap.setView(this.mapPhotos[0], 99);
this.yagaMap.fitBounds(this.mapPhotos.map(mp => <[number, number]>[mp.lat, mp.lng]));
this.yagaMap.zoom = 0;