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

Fix map open and hide animation #587

Browse Source
This commit is contained in:
Patrik J. Braun 2023-03-14 23:00:29 +01:00
parent 44978f8b53
commit b090bd5b24
4 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -199,7 +199,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
this.visible = true; this.visible = true;
this.opacity = 1.0; this.opacity = 1.0;
this.startPosition = position; this.startPosition = position;
this.lightboxDimension = position; this.lightboxDimension = Utils.clone(position);
this.lightboxDimension.top -= PageHelper.ScrollY; this.lightboxDimension.top -= PageHelper.ScrollY;
this.mapDimension = { this.mapDimension = {
top: 0, top: 0,
@ -228,7 +228,7 @@ export class GalleryMapLightboxComponent implements OnChanges {
this.controllersVisible = false; this.controllersVisible = false;
const to = this.startPosition; const to = this.startPosition;
// iff target image out of screen -> scroll to there // if target image out of screen -> scroll to there
if ( if (
PageHelper.ScrollY > to.top || PageHelper.ScrollY > to.top ||
PageHelper.ScrollY + GalleryMapLightboxComponent.getScreenHeight() < PageHelper.ScrollY + GalleryMapLightboxComponent.getScreenHeight() <

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

@ -24,4 +24,6 @@
background-color: transparent; background-color: transparent;
opacity: 0.8; opacity: 0.8;
cursor: pointer; cursor: pointer;
position: absolute;
transform: translateY(-100%);
} }

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

@ -1,5 +1,5 @@
<app-gallery-map-lightbox [photos]="photos" [gpxFiles]="gpxFiles"></app-gallery-map-lightbox> <app-gallery-map-lightbox [photos]="photos" [gpxFiles]="gpxFiles"></app-gallery-map-lightbox>
<div class="clickable" id="map" #map (click)="click()"> <div class="clickable" id="map" #map>
<div <div
class="leaflet-map" class="leaflet-map"
leaflet leaflet
@ -7,5 +7,6 @@
[leafletLayers]="markerLayer" [leafletLayers]="markerLayer"
(leafletMapReady)="onMapReady($event)"> (leafletMapReady)="onMapReady($event)">
</div> </div>
<div class="overlay" (click)="click()">
</div>
</div> </div>

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

@ -129,8 +129,8 @@ export class GalleryMapComponent implements OnChanges, IRenderable {
public getDimension(): Dimension { public getDimension(): Dimension {
return { return {
top: this.mapElement.nativeElement.offsetTop, top: this.mapElement.nativeElement.parentElement.offsetParent.offsetTop,
left: this.mapElement.nativeElement.offsetLeft, left: this.mapElement.nativeElement.parentElement.offsetLeft,
width: this.mapElement.nativeElement.offsetWidth, width: this.mapElement.nativeElement.offsetWidth,
height: this.mapElement.nativeElement.offsetHeight, height: this.mapElement.nativeElement.offsetHeight,
} as Dimension; } as Dimension;