6c9b844b8e
profile-config gains two optional keys for the country-poster-wall profile: `countries` (ISO-3 codes, or
{code, name, count} records, in the host's order) and `region` (one WAGF region as the data names it).
With either, the wall is flat: one section, nothing collapsed, two columns unless `columns` says otherwise,
no heading unless `heading` is given, because it sits under the host's own region heading. A requested
country with no poster keeps its card and says so in the regions catalogue's words. With neither key,
every binding is what it was, so the plain wall is unchanged. PosterWall itself is untouched; only the
country-posters bundle rebuilds. The usage lines in index.js and the profile's meta note name the keys.
65 lines
3.3 KiB
JavaScript
65 lines
3.3 KiB
JavaScript
import { defineMapElement } from '@map/elements/defineMapElement.js'
|
|
/**
|
|
* plugin-designs/country-posters/index.js
|
|
*
|
|
* Bundle entry — registers the country-posters web component.
|
|
*
|
|
* Registers ONE custom-element tag:
|
|
* - <country-posters-map>
|
|
*
|
|
* Usage from a host page:
|
|
* <script src="/app/country-posters.js"></script>
|
|
* <country-posters-map profile-config='{"profile":"countries-map","tk":"pk.YOUR_MAPBOX_TOKEN"}'></country-posters-map>
|
|
* <country-posters-map profile-config='{"profile":"country-poster-wall"}'></country-posters-map>
|
|
* <country-posters-map profile-config='{"profile":"country-poster-wall","countries":"IND,PAK,BGD"}'></country-posters-map>
|
|
* only those countries (ISO-3, or {code,name,count} records), FLAT, for a host's own region section
|
|
* (DX Life's /regions, 2026-09-30); `region: "Asia"` asks for one WAGF region; `columns`, `heading` optional.
|
|
*
|
|
* TWO PROFILES, ONE BUNDLE — the same shape as my-upg-100-list:
|
|
* countries-map.vue the map; legend opens on the COUNTRY level
|
|
* country-poster-wall.vue the poster grid, grouped by region, collapsible
|
|
*
|
|
* WHY A SEPARATE BUNDLE rather than two more profiles in my-upg-100-list:
|
|
* > design note 2026-08-01: "I don't mind creating multiple application profiles, one
|
|
* > for each application. I do mind that we really need to make sure every
|
|
* > component that we're [re]usable is added to the library."
|
|
* PROFILES duplicate; COMPONENTS get promoted to library/ and parameterized. The
|
|
* wall here is @map/components/poster/PosterWall.vue — the same component the
|
|
* 100-list renders — differing only in data, taxonomy and copy.
|
|
*
|
|
* Profile registry — ProfileLoader lives inside @map and cannot use
|
|
* import.meta.glob to reach into a bundle's folder. The bundle MUST evaluate
|
|
* import.meta.glob('./*.vue') locally and hand the result to the loader via
|
|
* app.provide('profileModules', ...).
|
|
*/
|
|
|
|
// ─── Bundle-private profile registry ─────────────────────────────────────────
|
|
const profileModules = import.meta.glob('./*.vue')
|
|
|
|
// ★ THE LOCAL COLOUR GLOB IS GONE (C1b). This bundle registered its own src/colors/*.js over the
|
|
// shared set; all three modules (doxa-region, affinity-block, resource) now live in library/colors/
|
|
// where _registry.js discovers them for every bundle, and src/colors/ holds no .js at all. The glob
|
|
// matched nothing, so leaving it would be dead code that reads as a deliberate override.
|
|
|
|
// RTL text plugin (Arabic/Hebrew/Persian shaping): installed by useMapInstance through
|
|
// library/maps/rtl-text.js, on BOTH engines, before every map is constructed. Do not re-add a
|
|
// hand-rolled mapboxgl-only block here -- it was a strict subset of that call.
|
|
|
|
/**
|
|
* Each instance gets its own Pinia + i18n so multiple embeds on one page never
|
|
* bleed state into each other.
|
|
*/
|
|
function buildCountryPostersElement() {
|
|
return defineMapElement({ profileModules })
|
|
}
|
|
|
|
const CountryPostersElement = buildCountryPostersElement()
|
|
|
|
// Guard prevents "already registered" errors when this IIFE is loaded twice.
|
|
if (typeof customElements !== 'undefined') {
|
|
if (!customElements.get('country-posters-map')) {
|
|
customElements.define('country-posters-map', CountryPostersElement)
|
|
}
|
|
}
|
|
|
|
export default CountryPostersElement
|