From 6f9ffd0b77da5bda8e8e8246a1076ec0d1b3360c Mon Sep 17 00:00:00 2001
From: Martin Rubli <martin@rubli.info>
Date: Sat, 30 Dec 2023 14:32:58 +0100
Subject: [PATCH] layouts: map: Make tracks downloadable

---
 layouts/shortcodes/leaflet-map.html   | 30 ++++++++++++++++++++++++++-
 layouts/shortcodes/leaflet-track.html |  7 ++++++-
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/layouts/shortcodes/leaflet-map.html b/layouts/shortcodes/leaflet-map.html
index b8e2829..e899246 100644
--- a/layouts/shortcodes/leaflet-map.html
+++ b/layouts/shortcodes/leaflet-map.html
@@ -8,7 +8,7 @@ Syntax summary:
 
 		{{< leaflet-marker lat=FLOAT lon=FLOAT >}}
 
-		{{< leaflet-track path="URL" >}}
+		{{< leaflet-track path="URL" title="STRING" downloadable=BOOL >}}
 
 		{{< leaflet-scale >}}
 
@@ -81,6 +81,11 @@ Track options:
 
 	path:
 		Absolute or relative path of the .gpx file to render as a track.
+	title:
+		Name of the track, used e.g. to render the 'Download GPX' button when multiple tracks are present.
+	downloadable:
+		Boolean value indicating whether there should be a 'Download GPX' button for this track.
+		Optional, defaults to true.
 
 Scale options:
 
@@ -126,6 +131,8 @@ Elevation profile options:
 	<div id="map_backdrop_{{ $uniqueId }}" class="map-backdrop"></div>
 	<div id="map_attribution_{{ $uniqueId }}" class="map-attribution"></div>
 </div>
+<div id="map_track_downloads_{{ $uniqueId }}">
+</div>
 
 <script>
 	var map_options_{{ $uniqueId }} = {
@@ -197,5 +204,26 @@ Elevation profile options:
 			const backdrop = L.DomUtil.get('map_backdrop_{{ $uniqueId }}');
 			backdrop.addEventListener('click', ev => { map.restore(); });
 		}
+
+		// Create a download button for every downloadable track
+		for (const track of map_options_{{ $uniqueId }}.tracks)
+		{
+			if (!track.downloadable)
+				continue;
+
+			const a = L.DomUtil.create(
+				'a',
+				'me-2 mb-2',
+				L.DomUtil.get('map_track_downloads_{{ $uniqueId }}')
+			);
+			a.setAttribute('href', track.source);
+			const button = L.DomUtil.create(
+				'button',
+				// Note that the following classes must be part of the safelist in hugo-theme-gallery-flex's tailwind.config.js:
+				'py-2.5 px-5 me-2 mb-2 text-sm font-medium rounded-lg border focus:outline-none focus:z-10 focus:ring-4 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700',
+				a
+			);
+			button.innerHTML = track.title ? `Download GPX (${track.title})` : 'Download GPX';
+		}
 	});
 </script>
diff --git a/layouts/shortcodes/leaflet-track.html b/layouts/shortcodes/leaflet-track.html
index 6fc8372..78634d6 100644
--- a/layouts/shortcodes/leaflet-track.html
+++ b/layouts/shortcodes/leaflet-track.html
@@ -9,5 +9,10 @@
 {{ $uniqueMapId := (printf "%s:%d" .Page.File.UniqueID .Parent.Ordinal) | md5 | safeJS }}
 
 <script>
-	map_options_{{ $uniqueMapId }}.tracks.push({{ .Get "path" }})
+	map_options_{{ $uniqueMapId }}.tracks.push({
+		source: {{ .Get "path" }},
+		title: {{ .Get "title" | default ("null" | safeJS) }},
+		// Internal use, ignored by quip-maps
+		downloadable: {{ .Get "downloadable" | default "true" | safeJS }},
+	})
 </script>