Diffstat (limited to 'views/partials')
| -rw-r--r-- | views/partials/catalogue-blog-cards.html | 2 | ||||
| -rw-r--r-- | views/partials/global-map-widget.html | 109 |
2 files changed, 1 insertions, 110 deletions
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html index b066a9e..799955f 100644 --- a/views/partials/catalogue-blog-cards.html +++ b/views/partials/catalogue-blog-cards.html @@ -2,7 +2,7 @@ <hr class="first-of-type:hidden border-t-2 border-dotted border-main-hard"> <div {{ if .ToHighlight }}id="blog-page-highlighted"{{ end }} class="w-full flex flex-row items-stretch {{ if .ToHighlight }}bg-accent-light bg-paper{{ end }}"> <div class="relative min-h-24 flex flex-col w-28 overflow-hidden shrink-0 mask-r-from-70% mask-r-to-100%"> - <img onclick="return changeUrl('{{ .ArticleLink }}');" class="h-full min-h-24 w-full cursor-pointer select-none object-cover block absolute" src="{{ printf $.PhotoStorage.Thumbnail320p.BaseUrl .Thumbnail }}"> + <img onclick="return changeUrl('{{ .ArticleLink }}');" class="h-full min-h-24 w-full cursor-pointer select-none object-cover block absolute" src="{{ printf $.ThumbnailBaseUrl .Thumbnail }}"> <div class="w-full h-6 flex flex-row mt-auto relative"> <div class="flex-1/2 flex flex-row justify-center select-none bg-linear-180 {{ if .Liked }}from-accent-deep/40 to-accent-deep/80 text-background-dark{{ else }}from-accent-light/40 to-accent-light/80 text-main-hard{{ end }}"> <svg viewBox="0 0 24 24"><use href="#icon-like"/></svg> diff --git a/views/partials/global-map-widget.html b/views/partials/global-map-widget.html deleted file mode 100644 index f50020f..0000000 --- a/views/partials/global-map-widget.html +++ /dev/null @@ -1,109 +0,0 @@ -<div - id="map-container" - class="bg-paper bg-background-dark flex z-10 w-full h-full" -></div> - -<script> -(function() { - var map; - var markers = L.markerClusterGroup(); - const THUMB_BASE = "{{ .PhotoStorage.Thumbnail320p.BaseUrl }}"; - - function createCustomIcon(color, borderColor = "var(--color-main-soft)") { - const svgIcon = ` - <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> - <path d="M12 1C7.5 1 4 4.5 4 9c0 6.5 8 14 8 14s8-7.5 8-14c0-4.5-3.5-8-8-8zm0 11c-1.5 0-3-1.5-3-3s1.5-3 3-3 3 1.5 3 3-1.5 3-3 3z" - fill="${color}" - stroke="${borderColor}" - stroke-width="1" - stroke-linejoin="round"/> - </svg> - `; - - return L.divIcon({ - html: svgIcon, - className: 'custom-svg-marker', - iconSize: [32, 32], - iconAnchor: [16, 32], - popupAnchor: [0, -32] - }); - } - - function initLocationMap() { - map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], {{ .MapLocationZoom }}); - - protomapsL.leafletLayer({ - url: '{{ .StaticStorage.Map.BaseUrl }}/{{ .StaticStorage.Map.PMTiles }}', - maxZoom: 15, - flavor: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light', - lang: '{{ .Lang }}' - }).addTo(map); - - {{- with .ZoomPosition }} - L.control.zoom({ - position: '{{ . }}' - }).addTo(map); - {{- end }} - - map.addLayer(markers); - } - - function markerToHsl(str, newCoef) { - let hash = 0; - for (let i = 0; i < str.length / 2; i++) { - hash = str.charCodeAt(i) + ((hash << 5) - hash); - hash = str.charCodeAt(str.length - i - 1) + ((hash << 5) - hash); - hash %= 360; - } - - return [hash, (20 + newCoef * 80).toFixed(0), (20 + newCoef * 75).toFixed(0)]; - } - - function mapAddMarker(x, y, relativeErrorMeters = 0, title = "", link = "", thumbnail = "", newCoef = 1, toHighlight = false) { - const [h, s, l] = markerToHsl(title, newCoef); - const color = `hsl(${h} ${s}% ${l}%)`; - - if (relativeErrorMeters != 0) { - var circle = L.circle([x, y], { - color: color, - fillColor: color, - fillOpacity: 0.15, - radius: relativeErrorMeters - }).addTo(map); - } - - var marker = L.marker([x, y], { - icon: createCustomIcon(color), - title: title, - }).bindPopup(` - <div class="flex flex-row justify-center justify-items-center"> - <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-12 h-12 mr-1" src="${THUMB_BASE.replace('%s', thumbnail)}"> - <span><b><a href="${link}">${title}</a></b><br><a href="https://www.openstreetmap.org/#map=13/${x}/${y}">${x}, ${y}</a></span> - </div>`); - - markers.addLayer(marker); - - if (toHighlight) { - markers.zoomToShowLayer(marker, () => marker.openPopup()); - } - } - - initLocationMap(); - {{- range .MapMarkers }} - mapAddMarker({{ .Lat }}, {{ .Long }}, {{ .AccuracyMeters }}, {{ .Title }}, {{ .PageLink }}, {{ .Thumbnail }}, {{ fdiv .Index (len $.MapMarkers) }}, {{ .ToHighlight }}); - {{- end }} - - function onResize() { - setTimeout(() => { - if (map) map.invalidateSize(); - }, 300); - } - window.addEventListener('resize', onResize); - new MutationObserver((muts, obs) => { - if (!document.getElementById('map-container')) { - window.removeEventListener('resize', onResize); - obs.disconnect(); - } - }).observe(document.body, { childList: true, subtree: true }); -})(); -</script> |