138 lines
7.1 KiB
Vue
138 lines
7.1 KiB
Vue
<!--
|
|
MapControlMenu.vue — the ONE menu every map control opens.
|
|
|
|
A control (share, export, …) only toggles `open`; this component owns where the menu
|
|
lives and how it behaves, on phones and desktop alike:
|
|
|
|
• It renders INSIDE the map area (teleported out of the toolbar into the same shadow
|
|
root), so it never escapes the map's walls, never uses position:fixed, and scrolls
|
|
with the map when the host page scrolls.
|
|
• Its top edge is the toolbar's top edge and its max height is the toolbar column's
|
|
height — every menu of a map shares the same band, whichever button opened it.
|
|
• It opens on the toolbar's inner side: to the LEFT of right-hand controls, to the
|
|
RIGHT of left-hand controls. The side is measured, so a right-to-left page that
|
|
mirrors the toolbar mirrors the menu as well.
|
|
• Width: as wide as fits between the toolbar and the opposite edge, capped at `width`.
|
|
• One z tier for menus (--z-menu, default 3000); only one menu is open per map at a
|
|
time; closes on Escape or on a tap on the bare map canvas (never on legend/search).
|
|
|
|
Props: open (Boolean), title (String), isDark (Boolean),
|
|
width (Number, 340) — preferred width; shrinks to what fits (mobile friendly)
|
|
maxHeight (Number|null) — cap below the toolbar column's height (null = the column)
|
|
height (Number|null) — a fixed height instead of fitting the content
|
|
Emits: close
|
|
Slot: the menu content (tabs, buttons, text) — chrome (header, close) is provided here.
|
|
-->
|
|
<script setup>
|
|
import { ref, inject, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
|
|
import { useShadowStyles } from '../../composables/useShadowStyles.js'
|
|
|
|
useShadowStyles(`
|
|
.mcm{position:absolute;z-index:var(--z-menu,3000);display:flex;flex-direction:column;box-sizing:border-box;
|
|
background:#161b22;border:1px solid #30363d;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,0.45);
|
|
color:#e6edf3;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:13px;
|
|
overflow:hidden;opacity:0;transform:translateY(-4px) scale(0.98);animation:mcm-in 0.18s ease-out forwards;}
|
|
@keyframes mcm-in{to{opacity:1;transform:translateY(0) scale(1);}}
|
|
.mcm.light{background:#ffffff;border-color:#d8dee4;box-shadow:0 6px 24px rgba(0,0,0,0.16);color:#1f2328;}
|
|
.mcm-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;min-height:32px;flex:0 0 auto;border-bottom:1px solid #21262d;}
|
|
.mcm.light .mcm-header{border-bottom-color:#d8dee4;}
|
|
.mcm-title{font:600 10px ui-monospace,monospace;color:#73A17F;text-transform:uppercase;letter-spacing:0.07em;}
|
|
.mcm.light .mcm-title{color:#3b463d;}
|
|
.mcm-close{width:22px;height:20px;border:1px solid #30363d;background:rgba(110,118,129,0.12);border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#8b949e;padding:0;transition:color 0.1s,background 0.1s,border-color 0.1s;}
|
|
.mcm-close:hover{color:#c9d1d9;background:rgba(59,70,61,0.18);border-color:#73A17F;}
|
|
.mcm.light .mcm-close{background:rgba(208,215,222,0.4);border-color:#d0d7de;color:#57606a;}
|
|
.mcm.light .mcm-close:hover{color:#3b463d;background:rgba(59,70,61,0.12);border-color:#3b463d;}
|
|
.mcm-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
|
|
`, 'map-control-menu')
|
|
|
|
const props = defineProps({
|
|
open: { type: Boolean, default: false },
|
|
title: { type: String, default: '' },
|
|
width: { type: Number, default: 340 },
|
|
isDark: { type: Boolean, default: false },
|
|
maxHeight: { type: Number, default: null },
|
|
height: { type: Number, default: null },
|
|
})
|
|
const emit = defineEmits(['close'])
|
|
|
|
// The toolbar this menu belongs to (MapToolbar provides its element); the map area is the
|
|
// nearest positioned map container above it — where the menu is teleported to.
|
|
const toolbar = inject('mapToolbar', null)
|
|
const host = ref(null)
|
|
const el = ref(null)
|
|
const style = ref({})
|
|
|
|
const AREA = '.dsm-map-area, .rm-map-area, .dm-map-area, [data-map-area]'
|
|
|
|
function place() {
|
|
const tb = toolbar?.el?.value, area = host.value
|
|
if (!tb || !area) { style.value = {}; return }
|
|
const ar = area.getBoundingClientRect(), tr = tb.getBoundingClientRect()
|
|
const onRight = (tr.left + tr.right) / 2 > (ar.left + ar.right) / 2
|
|
const gap = 8, edge = 12
|
|
const offset = onRight ? (ar.right - tr.left + gap) : (tr.right - ar.left + gap)
|
|
const width = Math.max(200, Math.min(props.width, ar.width - offset - edge))
|
|
const top = Math.max(0, tr.top - ar.top)
|
|
let maxHeight = Math.max(120, Math.min(tr.height, ar.height - top - edge))
|
|
if (props.maxHeight) maxHeight = Math.min(maxHeight, props.maxHeight)
|
|
style.value = {
|
|
top: `${Math.round(top)}px`,
|
|
[onRight ? 'right' : 'left']: `${Math.round(offset)}px`,
|
|
width: `${Math.round(width)}px`,
|
|
maxHeight: `${Math.round(maxHeight)}px`,
|
|
...(props.height ? { height: `${Math.round(Math.min(props.height, maxHeight))}px` } : {}),
|
|
}
|
|
}
|
|
|
|
// Only one menu open per map: opening this one closes any other.
|
|
const OPEN_EVENT = 'doxa-map-menu-open'
|
|
function onOtherOpened(e) { if (props.open && e.detail !== el.value) emit('close') }
|
|
|
|
watch(() => props.open, async (open) => {
|
|
if (!open) return
|
|
await nextTick()
|
|
place()
|
|
try { host.value?.dispatchEvent(new CustomEvent(OPEN_EVENT, { detail: el.value })) } catch (_) {}
|
|
})
|
|
|
|
function onResize() { if (props.open) place() }
|
|
function onKeyDown(e) { if (e.key === 'Escape' && props.open) emit('close') }
|
|
// Close only on the bare map canvas — never while the user works the legend, search or toolbar.
|
|
function onClickOutside(e) {
|
|
if (!props.open) return
|
|
const path = e.composedPath ? e.composedPath() : [e.target]
|
|
if (el.value && path.includes(el.value)) return
|
|
if (toolbar?.el?.value && path.includes(toolbar.el.value)) return
|
|
if (path.some(n => n?.classList?.contains?.('mapboxgl-canvas') || n?.classList?.contains?.('maplibregl-canvas'))) emit('close')
|
|
}
|
|
|
|
onMounted(() => {
|
|
host.value = toolbar?.el?.value?.closest(AREA) || null
|
|
host.value?.addEventListener(OPEN_EVENT, onOtherOpened)
|
|
window.addEventListener('resize', onResize)
|
|
document.addEventListener('click', onClickOutside, true)
|
|
document.addEventListener('keydown', onKeyDown)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
host.value?.removeEventListener(OPEN_EVENT, onOtherOpened)
|
|
window.removeEventListener('resize', onResize)
|
|
document.removeEventListener('click', onClickOutside, true)
|
|
document.removeEventListener('keydown', onKeyDown)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport :to="host" :disabled="!host">
|
|
<div v-if="open" ref="el" class="mcm" :class="{ light: !isDark }" :style="style" role="dialog" :aria-label="title">
|
|
<div class="mcm-header">
|
|
<span class="mcm-title">{{ title }}</span>
|
|
<button class="mcm-close" type="button" aria-label="Close" @click="emit('close')">
|
|
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
|
<line x1="2" y1="2" x2="12" y2="12"/><line x1="12" y1="2" x2="2" y2="12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="mcm-body"><slot /></div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|