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

Give the regions map the shared scroll-past edge strips

Browse source 
The Driver asked for the affordance every other map here already has. The
flag alone was not enough: useEdgeScrollAffordance does not create the strips,
it scans the wrapper for them and returns a no-op when it finds none, so
flipping showEdgeBorders left the page with zero strips. The markup and its
CSS are per-consumer in all five existing users; only the behaviour is
shared. Both are ported from upg-100-list rather than written fresh —
including touch-action:pan-y, which is the mechanism that lets a vertical
drag scroll the page while Mapbox keeps the centre.

The reason the flag was originally false is kept in the file rather than
deleted, because it is the thing to re-examine if the result looks wrong:
this map sits inside a scrolling dashboard, where the gutters can read as
page chrome rather than map chrome. The reference maps own their viewport.
This commit is contained in:
doxa-maps-88655c70 2026-09-24 16:23:11 +00:00
parent ca8a501942
commit 487e3c9aa2
7 changed files with 47 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
plugin-designs/regions-dashboard/src/RegionCountryMap.vue
View file

@ -117,9 +117,16 @@ const { map, isMapReady, initializeMap, destroy } = useMapInstance({
center: props.center,
zoom: props.zoom,
maxZoom: 12,
// The map sits inside a scrolling dashboard, so the gray "scroll past me" strips would read as
// part of the page rather than as map chrome.
showEdgeBorders: false,
// THE SHARED EDGE-SCROLL STRIPS, on by Driver decision (2026-09-24, via shepherd card
// BUILD-REGIONS-MAP-RESTORE-EDGE-SCROLL-STRIPS). This was deliberately false, and the reason is
// kept here rather than deleted because it is the thing to re-examine if the result looks wrong:
// the map sits inside a SCROLLING dashboard, so the gray "you can scroll past me" gutters read
// as part of the page rather than as map chrome — unlike the reference maps
// (my-upg-100-list, doxa-research-map), where the map owns its viewport.
// Every other regions map already takes the library default (true); this was the one opt-out.
// useMapInstance.js:290 defaults it true and wires useEdgeScrollAffordance at :551, so this is
// the shared composable, not a hand-rolled strip.
showEdgeBorders: true,
})
const SRC_PINS = 'rcm-people-groups'
@ -397,6 +404,14 @@ watch(() => [props.countryCodes, props.bounds, props.center, props.zoom, props.p
// 1/2 and no floor under 768px. Ported as an aspect-ratio pair; radius:inherit so the card that
// contains it supplies the corner, exactly as theirs does.
useShadowStyles(
// The shared scroll-past strips, ported verbatim from my-upg-100-list/upg-100-list.vue:378.
// touch-action:pan-y IS the mechanism: it lets a vertical drag scroll the PAGE while Mapbox
// keeps the centre, which is the whole point of the affordance on a map inside a scrolling
// dashboard. .rcm is already position:relative, so these anchor to it.
'.map-scroll-edge{position:absolute;top:0;bottom:0;width:40px;z-index:2;' +
'touch-action:pan-y;pointer-events:auto;background:transparent}' +
'.map-scroll-edge--left{left:0}' +
'.map-scroll-edge--right{right:0}' +
'.rcm{ display:block; position:relative; width:100%; min-height:780px; aspect-ratio:16/9;' +
' overflow:hidden; border-radius:inherit; }' +
'@media (max-width:768px){ .rcm{ min-height:0; aspect-ratio:1/2; } }' +
@ -419,6 +434,14 @@ useShadowStyles(
<template>
<div class="rcm">
<div ref="mapContainer" class="rcm__canvas" />
<!-- THE SHARED EDGE-SCROLL STRIPS. useEdgeScrollAffordance does NOT create these — it scans
the wrapper for them (useEdgeScrollAffordance.js:57, `if (!edges.length) return NOOP`),
so flipping showEdgeBorders alone was a no-op and the probe measured 0 strips. The markup
and CSS are per-consumer in all five existing users (upg-100-list, doxa-simple-map,
countries-map, research-map, DashboardMapPanel); only the BEHAVIOUR is shared. Ported
from my-upg-100-list/upg-100-list.vue:1889 rather than invented. -->
<div class="map-scroll-edge map-scroll-edge--left" />
<div class="map-scroll-edge map-scroll-edge--right" />
<p v-if="mapFailed" class="rcm__note" role="status">
The map could not start. This is a map-token or connection problem, not a filter — the
figures above are unaffected.

2
public/doxa-maps/index.html generated
View file

File diff suppressed because one or more lines are too long

8
public/doxa-maps/manifest.json generated
View file

@ -874,7 +874,7 @@
"bundle": "regions-dashboard",
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"output": "doxa-maps/regions-dashboard/regions-dashboard.js",
"integrity": "sha384-oXKY7GNXVKcivqGSmhcCZeEPtmSfjR+UNiGyvnqBrJ/gZtJD61rOA8T+SA0SlHQj",
"integrity": "sha384-V6UcPxx9/C30jhjP3qxO1v/Ib4nMhu+uPJL0dd0geMrA236NuP9HZchD58RT3DL3",
"elements": [
"regions-dashboard"
],
@ -894,7 +894,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "<iframe src=\"./regions-dashboard/region-dashboards/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-oXKY7GNXVKcivqGSmhcCZeEPtmSfjR+UNiGyvnqBrJ/gZtJD61rOA8T+SA0SlHQj\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"region-dashboards\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-V6UcPxx9/C30jhjP3qxO1v/Ib4nMhu+uPJL0dd0geMrA236NuP9HZchD58RT3DL3\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"region-dashboards\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
}
},
{
@ -908,7 +908,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "<iframe src=\"./regions-dashboard/regions-list/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-oXKY7GNXVKcivqGSmhcCZeEPtmSfjR+UNiGyvnqBrJ/gZtJD61rOA8T+SA0SlHQj\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-V6UcPxx9/C30jhjP3qxO1v/Ib4nMhu+uPJL0dd0geMrA236NuP9HZchD58RT3DL3\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-list\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
}
},
{
@ -922,7 +922,7 @@
"scriptUrl": "./regions-dashboard/regions-dashboard.js",
"embed": {
"iframe": "<iframe src=\"./regions-dashboard/regions-mfe/index.html?utm_source=YOUR_SOURCE\" width=\"100%\" height=\"600\" style=\"border:none;border-radius:12px;\" allowfullscreen></iframe>",
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-oXKY7GNXVKcivqGSmhcCZeEPtmSfjR+UNiGyvnqBrJ/gZtJD61rOA8T+SA0SlHQj\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
"script": "<script>window.MAP_APP_API_URL=\"https://pray.doxa.life\";</script>\n<script src=\"./regions-dashboard/regions-dashboard.js\" integrity=\"sha384-V6UcPxx9/C30jhjP3qxO1v/Ib4nMhu+uPJL0dd0geMrA236NuP9HZchD58RT3DL3\" crossorigin=\"anonymous\"></script>\n<regions-dashboard profile-config='{\"profile\":\"regions-mfe\",\"tk\":\"YOUR_MAPBOX_TOKEN\",\"utmSource\":\"YOUR_SOURCE\",\"assetsBase\":\"YOUR_TREE_URL/assets\"}'></regions-dashboard>"
}
}
]

2
public/doxa-maps/regions-dashboard/region-dashboards/index.html generated
View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
<script src="../regions-dashboard.js" integrity="sha384-oXKY7GNXVKcivqGSmhcCZeEPtmSfjR+UNiGyvnqBrJ/gZtJD61rOA8T+SA0SlHQj" crossorigin="anonymous"></script>
<script src="../regions-dashboard.js" integrity="sha384-V6UcPxx9/C30jhjP3qxO1v/Ib4nMhu+uPJL0dd0geMrA236NuP9HZchD58RT3DL3" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

26
public/doxa-maps/regions-dashboard/regions-dashboard.js generated
View file

File diff suppressed because one or more lines are too long

2
public/doxa-maps/regions-dashboard/regions-list/index.html generated
View file

@ -29,7 +29,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
<script src="../regions-dashboard.js" integrity="sha384-oXKY7GNXVKcivqGSmhcCZeEPtmSfjR+UNiGyvnqBrJ/gZtJD61rOA8T+SA0SlHQj" crossorigin="anonymous"></script>
<script src="../regions-dashboard.js" integrity="sha384-V6UcPxx9/C30jhjP3qxO1v/Ib4nMhu+uPJL0dd0geMrA236NuP9HZchD58RT3DL3" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order:

2
public/doxa-maps/regions-dashboard/regions-mfe/index.html generated
View file

@ -40,7 +40,7 @@
<script>window.MAP_APP_API_URL = "https://pray.doxa.life";</script>
<!-- Bundle IIFE — registers the <regions-dashboard> custom element. -->
<script src="../regions-dashboard.js" integrity="sha384-oXKY7GNXVKcivqGSmhcCZeEPtmSfjR+UNiGyvnqBrJ/gZtJD61rOA8T+SA0SlHQj" crossorigin="anonymous"></script>
<script src="../regions-dashboard.js" integrity="sha384-V6UcPxx9/C30jhjP3qxO1v/Ib4nMhu+uPJL0dd0geMrA236NuP9HZchD58RT3DL3" crossorigin="anonymous"></script>
<script>
// Mapbox token resolution — the A3 ladder, in precedence order: