From a107faadaaed9e94d9249d2eb2c773a94a36e711 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Fri, 2 Oct 2026 06:48:41 +0000 Subject: [PATCH 1/7] PosterWall: each section is a PosterSection (lifted, not copied), drawn from the wall's own state A section of a poster wall (its head: the name, the count, the collapse toggle; and its cards: the preview, "show on map", the print options) is now its own component, library/components/poster/PosterSection.vue. The markup moved VERBATIM; PosterWall renders every group through it and PROVIDES what a section uses (its props, its collapse state, the print actions and their progress overlay) under POSTER_WALL_CTX. The section's CSS stays in PosterWall's one shadow-style string, which applies to this markup in the same root. Every wall renders the same DOM: measured in the shared browser, before (the pilot's built tree) vs after, at 1440 and 390, en and ar: Country Posters, UPG 100's poster wall, Poster Design's styles and the Regions list (with every region's posters open) are identical once the server port and the root's scope hash are normalised; the same cards, sections, intro text and scroll widths. The first step towards a reusable poster section. --- library/components/poster/PosterSection.vue | 183 ++++++++++++++++++ library/components/poster/PosterWall.vue | 166 +--------------- .../components/poster/posterWallContext.js | 3 + 3 files changed, 195 insertions(+), 157 deletions(-) create mode 100644 library/components/poster/PosterSection.vue create mode 100644 library/components/poster/posterWallContext.js diff --git a/library/components/poster/PosterSection.vue b/library/components/poster/PosterSection.vue new file mode 100644 index 000000000..53c123083 --- /dev/null +++ b/library/components/poster/PosterSection.vue @@ -0,0 +1,183 @@ + + + diff --git a/library/components/poster/PosterWall.vue b/library/components/poster/PosterWall.vue index 7734934dd..73465a0d7 100644 --- a/library/components/poster/PosterWall.vue +++ b/library/components/poster/PosterWall.vue @@ -36,7 +36,9 @@ * CROSS-PANE COMMS — this wall NEVER imports a map. It dispatches a window * CustomEvent scoped by instanceId, so several embeds on one page never cross-talk. */ -import { computed, ref, watch, onBeforeUnmount, onMounted, onUpdated } from 'vue' +import { computed, ref, watch, onBeforeUnmount, onMounted, onUpdated, provide, toRefs } from 'vue' +import PosterSection from './PosterSection.vue' +import { POSTER_WALL_CTX } from './posterWallContext.js' import { tStatic } from '../../i18n/index.js' // This component's chrome, read out of the catalogue. tStatic and not useI18n: these mount inside @@ -1331,6 +1333,11 @@ useShadowStyles( + '/* ★ REDUCED MOTION, OWNED BY THIS COMPONENT. A page-level rule cannot reach into a shadow root,\n and no generated leaf ships one anyway (measured: 0 across the whole tree). Additive only. */\n@media (prefers-reduced-motion: reduce) {\n .pw-card, .pw-grid, .pw-overlay, .pw-btn { transition: none !important; animation: none !important; }\n}\n' ) +// ★ EACH SECTION IS A PosterSection (the head + its cards), drawn from THIS wall's state and actions, provided here. +const { collapsible, columnsControl, headerAction, hidePrayerListWhenSoon, instanceId, previewSrc, sectionHeads, unit, unsupported } = toRefs(props) +provide(POSTER_WALL_CTX, { + collapsible, columnsControl, headerAction, hidePrayerListWhenSoon, instanceId, previewSrc, sectionHeads, unit, unsupported, PER_ROW_AUTO, T, canPrintRows, countOf, deckKey, deckOpenFor, emit, exportPoster, generated, gridStyle, hud, isCollapsed, lastShown, missing, onPreviewError, packetVariants, perRowChoices, perRowShown, pickedStock, previewIsControl, previewUrl, printDeckAt, printPacketAs, sectionCount, setPreviewEl, showOnMap, stockLabel, stockOptions, t, toggleDeck, toggleSection, +})