Diffstat (limited to 'views/pages')
| -rw-r--r-- | views/pages/blog-page.html | 66 | ||||
| -rw-r--r-- | views/pages/global-map.html | 16 |
2 files changed, 60 insertions, 22 deletions
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html index 9704502..aadebac 100644 --- a/views/pages/blog-page.html +++ b/views/pages/blog-page.html @@ -1,3 +1,20 @@ +{{ define "top-embeds" }} +<script> + let galleryMap = new Map(); + let map; + + window.addEventListener('popout', (e) => { + map.remove(); + galleryMap.forEach((_, g, m) => { + g.destroy(); + }); + galleryMap.clear(); + map = null; + galleryMap = null; + }, {once: true}); +</script> +{{ end }} + {{ define "body" }} <div class="bg-background-light flex flex-col inset-shadow px-8 py-4 overflow-y-auto"> <p class="xs:hidden font-spectral text-2xl font-bold italic text-main-dark tracking-[.0125rem] mb-1">{{ .Title }}</p> @@ -35,17 +52,16 @@ .openPopup(); } - if (map) { - map.remove(); - map = null; - } - - setTimeout(() => initLocationMap( - 'map-container', - {{ .MapLocationX }}, - {{ .MapLocationY }}, - {{ .MapLocationAreaMeters }} - ), 1000); + document.addEventListener('htmx:afterRequest', (e) => { + if (e.detail.target.id == 'general-page-body') { + initLocationMap( + 'map-container', + {{ .MapLocationX }}, + {{ .MapLocationY }}, + {{ .MapLocationAreaMeters }} + ); + } + }, {once: true}); </script> {{- end }} </div> @@ -54,3 +70,31 @@ {{ define "footer" }} <div hx-get="/api/v1/like" hx-target="this" hx-swap="outerHTML" hx-trigger="load"></div> {{ end }} + +{{ define "bottom-embeds" }} +<script> + let galleryResizeTimeout; + + function resizeCb() { + clearTimeout(galleryResizeTimeout); + galleryResizeTimeout = setTimeout(() => { + if (map !== undefined) { + map.invalidateSize(); + } + var oldGalleryMap = new Map(galleryMap); + oldGalleryMap.forEach((createFunc, g, map) => { + galleryMap.delete(g); + g.destroy(); + createFunc(); + }); + }, 300); + } + + window.addEventListener('resize', resizeCb); + + document.addEventListener('popout', (e) => { + window.removeEventListener('resize', resizeCb); + galleryResizeTimeout = null; + }); +</script> +{{ end }} diff --git a/views/pages/global-map.html b/views/pages/global-map.html index 27c8a73..4c6fb5e 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -44,17 +44,11 @@ <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20"> saya.today </div> - <div class="text-[3dvw] ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20"> - <a href="/{{ .Lang }}" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]"> - <i class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> - </a> - <a href="/{{ .Lang }}/blog" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]"> - <i class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> - </a> - <a href="/{{ .Lang }}/map" class="w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh]"> - <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> - </a> - <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i> + <div class="text-[3dvw] sm:text-2xl ar-lt-0.8:text-[5dvh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20"> + <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> + <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> + <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> + <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5dvw] ar-lt-0.8:w-[8dvh] h-[5dvw] ar-lt-0.8:h-[8dvh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i> </div> <div class="theme-wheel" id="theme-wheel"> <div class="theme-icon" data-theme="olive"></div> |