doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

An opening map panel puts the "What can this map do?" pointer away

Browse source 
On a phone, at first load, the onboarding pointer could sit over the open Share panel and cover its ✕
(cities-with-internet). The pointer can be drawn by the host page, outside the map's shadow root, so no
z-index inside the map can lift a panel above it. Instead, MapControlMenu (Share, and every menu built on it)
announces that it opened with a composed 'dxmaps:panel-open' event, and MapInfo, hearing it on its own
container (so only that map's panels count), hides its pointer; a page-load pointer is then done for this
load, as if its popup had been opened.
This commit is contained in:
Doxa Maps 2026-10-02 06:08:51 +00:00
parent bb56908600
commit a143992d0e
2 changed files with 23 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
library/components/info/MapInfo.vue
View file

@ -342,6 +342,22 @@ onBeforeUnmount(() => {
window.removeEventListener('resize', onResize)
})
watch(open, (v) => { control.value?.setAttribute('aria-expanded', String(v)) })
// ★ A MAP PANEL OPENING ENDS THE POINTER (MapControlMenu's composed 'dxmaps:panel-open': Share, and every menu built
// on it). The pointer may be drawn over the map from outside its shadow root, where no z-index of the panel's can
// beat it, and on a phone it covered the Share panel's ✕. Heard on our container, so only THIS map's panels count.
// A page-load pointer is then done for this load, as if its popup had been opened.
let panelPane = null
function onPanelOpen() {
if (!pointing.value) return
pointing.value = false
if (pageLoad()) pointerDoneThisLoad.add(props.storageKey)
}
onMounted(() => {
panelPane = rootEl.value && rootEl.value.parentElement
if (panelPane) panelPane.addEventListener('dxmaps:panel-open', onPanelOpen)
})
onBeforeUnmount(() => { if (panelPane) panelPane.removeEventListener('dxmaps:panel-open', onPanelOpen); panelPane = null })
const floatingShown = () => !props.popupOnly && (props.trigger !== 'control' || (!awaitingControl.value && !controlShown.value))
// The pointer beside the control has been on screen: this page load has pointed once, so a remount (the
// gallery rebuilds a heavy tab on every switch back) does not point again. Marked on SCREEN, not on mount:

7
library/components/map-controls/MapControlMenu.vue
View file

@ -127,11 +127,18 @@ function place() {
const OPEN_EVENT = 'doxa-map-menu-open'
function onOtherOpened(e) { if (props.open && e.detail !== el.value) emit('close') }
// ★ AN OPEN PANEL ENDS THE ONBOARDING POINTER. MapInfo's "What can this map do?" pointer can be drawn by the HOST
// (the gallery), outside this map's shadow root, so no z-index in here can lift a panel above it, and on a phone
// it sat over the Share panel's ✕ (measured 2026-10-02, cities-with-internet). So every panel says it opened, as
// a composed event that leaves the shadow root, and MapInfo puts its pointer away (library/components/info/MapInfo.vue).
const PANEL_OPEN_EVENT = 'dxmaps:panel-open'
watch(() => props.open, async (open) => {
if (!open) return
await nextTick()
place()
try { host.value?.dispatchEvent(new CustomEvent(OPEN_EVENT, { detail: el.value })) } catch (_) {}
try { host.value?.dispatchEvent(new CustomEvent(PANEL_OPEN_EVENT, { bubbles: true, composed: true })) } catch (_) {}
})
function onResize() { if (props.open) place() }