Files
hnh-map/frontend-nuxt/components/map/MapCoordsDisplay.vue
Nikolay Tatarinov fc42d86ca0 Enhance map components and improve build processes
- Updated Makefile to include `--build` flag for `docker-compose.dev.yml` and `--no-cache` for `docker-compose.prod.yml` to ensure fresh builds.
- Added new CSS styles for Leaflet tooltips and popups to utilize theme colors, enhancing visual consistency.
- Enhanced MapView component with new props for markers and current zoom level, improving marker management and zoom functionality.
- Introduced new icons for copy and info actions to improve user interface clarity.
- Updated MapBookmarks and MapControls components to support new features and improve user experience with bookmarks and zoom controls.
- Refactored MapSearch to display coordinates and improve marker search functionality.
2026-03-04 12:49:31 +03:00

53 lines
1.9 KiB
Vue

<template>
<div
v-if="displayCoords"
class="absolute bottom-2 right-2 z-[501] rounded-lg px-3 py-2 font-mono text-base bg-base-100/95 backdrop-blur-sm border border-base-300/50 shadow cursor-pointer select-none transition-all hover:border-primary/50 hover:bg-base-100 flex items-center gap-2"
aria-label="Current grid position and zoom click to copy share link"
:title="copied ? 'Copied!' : 'Click to copy share link'"
role="button"
tabindex="0"
@click="copyShareUrl"
@keydown.enter="copyShareUrl"
@keydown.space.prevent="copyShareUrl"
>
<span class="relative">
{{ mapid }} · {{ displayCoords.x }}, {{ displayCoords.y }} · z{{ displayCoords.z }}
<span
v-if="copied"
class="absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-primary px-2 py-1 text-xs font-sans text-primary-content shadow"
>
Copied!
</span>
</span>
<icons-icon-copy class="size-4 shrink-0 opacity-70" aria-hidden="true" />
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
mapid: number
displayCoords: { x: number; y: number; z: number } | null
}>()
const { fullUrl } = useAppPaths()
const copied = ref(false)
let copyTimeout: ReturnType<typeof setTimeout> | null = null
function copyShareUrl() {
if (!props.displayCoords) return
const path = `grid/${props.mapid}/${props.displayCoords.x}/${props.displayCoords.y}/${props.displayCoords.z}`
const url = fullUrl(path)
if (import.meta.client && navigator.clipboard?.writeText) {
navigator.clipboard.writeText(url).then(() => {
copied.value = true
useToast().success('Link copied')
if (copyTimeout) clearTimeout(copyTimeout)
copyTimeout = setTimeout(() => {
copied.value = false
copyTimeout = null
}, 2000)
})
}
}
</script>