diff --git a/plugin-designs/regions-dashboard/region-dashboards.vue b/plugin-designs/regions-dashboard/region-dashboards.vue index f226393f7..55c9c5b42 100644 --- a/plugin-designs/regions-dashboard/region-dashboards.vue +++ b/plugin-designs/regions-dashboard/region-dashboards.vue @@ -31,7 +31,8 @@ import { applyPeopleGroupList } from '@map/lists/peopleGroupList.js' // house pattern (doxa-simple-map.vue:18, :246, :1346) — an EMBEDDED element must not reach for // document.documentElement.dir, which belongs to the host page. import { RTL_LOCALES, localeFromUrl } from '@map/i18n/index.js' -import { resolveAssetsBase } from '@map/utils/embedBase.js' +import { resolveAssetsBase, resolveEmbedBase } from '@map/utils/embedBase.js' +import { loadScriptOnce, whenTagDefined } from '@map/utils/embedScript.js' import { useDocumentFont, BEBAS_NEUE_FACES, POPPINS_FACES, FIGTREE_FACES, OSWALD_FACES } from '@map/composables/useDocumentFont.js' import FilterDropdown from '@map/components/search/FilterDropdown.vue' import UupgsList from './src/UupgsList.vue' @@ -243,6 +244,51 @@ const selectedCountry = computed(() => { return pool.find((c) => c.slug === sel.value.countrySlug) || null }) +// ★ THE COUNTRY'S POSTER, UNDER ITS MAP. The country view carries the Regions list's own disclosure, +// "View country posters". Opening it loads the Country Posters bundle ONCE, as its own element (so this +// bundle does not grow by a poster wall), and mounts that wall filtered to this one country: its +// profile-config `countries` filter, flat, one card with the Regions list's print row. A new country closes +// it, because the wall belongs to the country it was opened for. The asset pool goes over ABSOLUTE +// (resolveAssetsBase): a relative base would resolve against whichever page hosts this dashboard. +const POSTER_WALL_TAG = 'country-posters-map' +const POSTER_WALL_KEYS = ['apiBaseUrl', 'prayBaseUrl', 'tokenUrl', 'dataSource', 'locale', 'lang', 'languageCode', 'isDark', 'provider', 'embedBaseUrl'] +const postersOpen = ref(false) +const postersHost = ref(null) +function posterWallConfig(iso3) { + const c = cfg.value || {} + const out = { profile: 'country-poster-wall', countries: [iso3], instanceId: `rd-country-poster-${iso3.toLowerCase()}`, assetsBase: resolveAssetsBase(c) } + for (const k of POSTER_WALL_KEYS) if (c[k] != null && c[k] !== '') out[k] = c[k] + if (!out.languageCode && languageCode.value) out.languageCode = languageCode.value + return out +} +async function togglePosters() { + postersOpen.value = !postersOpen.value + const iso3 = selectedCountry.value?.code + const host = postersHost.value + if (!postersOpen.value || !iso3 || !host || host.firstElementChild) return + try { + if (!customElements.get(POSTER_WALL_TAG)) { + const base = resolveEmbedBase(cfg.value) + await loadScriptOnce(`${base ? base + '/' : ''}country-posters/country-posters.js`) + await whenTagDefined(POSTER_WALL_TAG, 15000) + } + // The reader may have moved on while the bundle loaded. + if (selectedCountry.value?.code !== iso3 || host.firstElementChild) return + const el = document.createElement(POSTER_WALL_TAG) + el.setAttribute('profile-config', JSON.stringify(posterWallConfig(iso3))) + host.appendChild(el) + } catch (e) { + // Offline or blocked: the disclosure closes again, and the next tap retries (loadScriptOnce forgets a + // failed load). No sentence of its own: one new catalogue key would change every bundle's locale data. + postersOpen.value = false + console.warn('[region-dashboards] the country poster wall did not load:', e && e.message) + } +} +watch(() => selectedCountry.value?.code, () => { + postersOpen.value = false + if (postersHost.value) postersHost.value.replaceChildren() +}) + // The subject line — a country if one was clicked, else the region, else everything. const subject = computed(() => { if (selectedCountry.value) { @@ -946,6 +992,15 @@ useShadowStyles( '.rd-mapnote{ margin:0; text-align:center; color:#92b195; font-weight:700; font-size:var(--font-size-md); }' + // .rounded-xlg on their ; the child takes border-radius:inherit from here. '.rd-mapframe{ border-radius:var(--dx-radius); overflow:hidden; }' + + // The poster disclosure: a 44px pill in their brand green, the Regions list's chevron (down closed, up open). + '.rd-posters{ display:flex; flex-direction:column; }' + + '.rd-posters__toggle{ align-self:center; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px;' + + ' border:1px solid #92b195; border-radius:100px; background:#fff; color:#3b463d; font:inherit; font-weight:700; cursor:pointer; }' + + '.rd-posters__toggle:hover{ background:#f3f6f3; }' + + '.rd-posters__toggle:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }' + + '.rd-posters__toggle svg{ width:12px; height:12px; fill:currentColor; transform:rotate(180deg); }' + + '.rd-posters__toggle[aria-expanded="true"] svg{ transform:none; }' + + '.rd-posters__wall{ margin-top:12px; }' + // ★ ON PHONES THE MAPS ARE HALF AGAIN AS TALL AS THEY ARE WIDE (height = 1.5 x width), all regions, a region // and a country. A square was asked for first, then proved too small to use a people-group popup in. // RegionCountryMap keeps DX Life's cloned 1/2 portrait under 768px for its other consumer (the country @@ -1208,6 +1263,15 @@ useShadowStyles( /> + +
+ +
+
+ - + - + - + \n\n\n", - "scriptMapbox": "\n\n\n\n\n\n" + "script": "\n\n\n\n\n\n", + "scriptMapbox": "\n\n\n\n\n\n" } }, { @@ -240,7 +240,7 @@ "scriptUrl": "./country-posters/country-posters.js", "embed": { "iframe": "", - "script": "\n\n\n" + "script": "\n\n\n" } }, { @@ -256,8 +256,8 @@ "scriptUrl": "./country-posters/country-posters.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n\n", - "scriptMapbox": "\n\n\n\n\n\n" + "script": "\n\n\n\n\n\n", + "scriptMapbox": "\n\n\n\n\n\n" } } ] @@ -1126,7 +1126,7 @@ "bundle": "regions-dashboard", "scriptUrl": "./regions-dashboard/regions-dashboard.js", "output": "dx-maps/regions-dashboard/regions-dashboard.js", - "integrity": "sha384-QrAcCbbRr9JoMJcdOguB/IyXjEmDxDhgfNETQvnPb4IsD9xqmfq+GH/ijsC7rX3E", + "integrity": "sha384-mycS9ngShQxZA4avXGlkjA4/s8NFBiFelrwFvrHu7sbiybLui4fy7i5+xIkF/lPx", "elements": [ "regions-dashboard" ], @@ -1149,8 +1149,8 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n\n", - "scriptMapbox": "\n\n\n\n\n\n" + "script": "\n\n\n\n\n\n", + "scriptMapbox": "\n\n\n\n\n\n" } }, { @@ -1166,7 +1166,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n" + "script": "\n\n\n" } }, { @@ -1182,8 +1182,8 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n\n", - "scriptMapbox": "\n\n\n\n\n\n" + "script": "\n\n\n\n\n\n", + "scriptMapbox": "\n\n\n\n\n\n" } } ] diff --git a/public/dx-maps/manifest.json b/public/dx-maps/manifest.json index 67110a882..93b17bd20 100644 --- a/public/dx-maps/manifest.json +++ b/public/dx-maps/manifest.json @@ -200,7 +200,7 @@ "bundle": "country-posters", "scriptUrl": "./country-posters/country-posters.js", "output": "dx-maps/country-posters/country-posters.js", - "integrity": "sha384-6KJjwdoWrGM2AOo29nuL8QGinCzoG5yzcogzIKVD7JsHu7Av50GS8QTCu6TC7ymF", + "integrity": "sha384-4S1/mKeD6mmon0CIvi68gbZwE21GNamvzGqlGU9d6Fti/icDbaDqh0LV/vFdVEZj", "elements": [ "country-posters-map" ], @@ -223,8 +223,8 @@ "scriptUrl": "./country-posters/country-posters.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n\n", - "scriptMapbox": "\n\n\n\n\n\n" + "script": "\n\n\n\n\n\n", + "scriptMapbox": "\n\n\n\n\n\n" } }, { @@ -240,7 +240,7 @@ "scriptUrl": "./country-posters/country-posters.js", "embed": { "iframe": "", - "script": "\n\n\n" + "script": "\n\n\n" } }, { @@ -256,8 +256,8 @@ "scriptUrl": "./country-posters/country-posters.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n\n", - "scriptMapbox": "\n\n\n\n\n\n" + "script": "\n\n\n\n\n\n", + "scriptMapbox": "\n\n\n\n\n\n" } } ] @@ -1126,7 +1126,7 @@ "bundle": "regions-dashboard", "scriptUrl": "./regions-dashboard/regions-dashboard.js", "output": "dx-maps/regions-dashboard/regions-dashboard.js", - "integrity": "sha384-QrAcCbbRr9JoMJcdOguB/IyXjEmDxDhgfNETQvnPb4IsD9xqmfq+GH/ijsC7rX3E", + "integrity": "sha384-mycS9ngShQxZA4avXGlkjA4/s8NFBiFelrwFvrHu7sbiybLui4fy7i5+xIkF/lPx", "elements": [ "regions-dashboard" ], @@ -1149,8 +1149,8 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n\n", - "scriptMapbox": "\n\n\n\n\n\n" + "script": "\n\n\n\n\n\n", + "scriptMapbox": "\n\n\n\n\n\n" } }, { @@ -1166,7 +1166,7 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n" + "script": "\n\n\n" } }, { @@ -1182,8 +1182,8 @@ "scriptUrl": "./regions-dashboard/regions-dashboard.js", "embed": { "iframe": "", - "script": "\n\n\n\n\n\n", - "scriptMapbox": "\n\n\n\n\n\n" + "script": "\n\n\n\n\n\n", + "scriptMapbox": "\n\n\n\n\n\n" } } ] diff --git a/public/dx-maps/regions-dashboard/region-dashboards/index.html b/public/dx-maps/regions-dashboard/region-dashboards/index.html index 4c929c058..1218fe86a 100644 --- a/public/dx-maps/regions-dashboard/region-dashboards/index.html +++ b/public/dx-maps/regions-dashboard/region-dashboards/index.html @@ -76,7 +76,7 @@ - + - + - +