doxa-maps/plugin-designs/poster-sections/src/embed.js
Doxa Maps 790d7d2400 Poster Sections: a plugin page that sets up <dxm-poster-section> and hands out the tag to embed it
A new bundle, plugin-designs/poster-sections, with one profile, Poster Sections.
A panel of choices (poster type from the registry at runtime, region or All
regions, language, posters per row, start collapsed) drives the library's
<dxm-poster-section> elements shown live below it, and Copy embed gives the
bundle script plus the exact tags for those choices, with absolute URLs so they
work on another site. The bundle also registers <dxm-poster-section>, so a site
that loads only poster-sections.js can place the tags.

Library: the element takes a columns attribute (posters per row, 1-5), passed
to the wall's existing columns prop; absent keeps today's default, so existing
importers are unchanged. New catalogue area posterSections in all 11 locales.

check:poster-sections (in gates:pre) reads every panel choice back through the
element's own attribute reader; its self-test proves a builder that drops
columns, drops collapsed, or repeats a region under All regions fails.
2026-10-02 08:16:40 +00:00

31 lines
1.4 KiB
JavaScript

/**
* embed.js — the Poster Sections panel's choices → the <dxm-poster-section> tags that show them. Pure (no Vue, no
* DOM), so the page and scripts/check-poster-sections.mjs use the SAME function: what the live sections render is
* exactly what "Copy embed" hands a website.
*
* choices = { type, scope, scopes, locale, collapsed, columns, assetsBase }
* scope '' = "All regions": one section per scope in `scopes`, in that order
* columns 0 = leave it to the wall (no attribute)
*/
export const TAG = 'dxm-poster-section'
export function sectionAttrs(choices) {
const { type = 'country', scope = '', scopes = [], locale = '', collapsed = false, columns = 0, assetsBase = '' } = choices || {}
const list = scope ? [scope] : scopes
return list.map((s) => {
const a = { type, scope: s }
if (locale) a.locale = locale
if (collapsed) a.collapsed = ''
if (columns) a.columns = String(columns)
if (assetsBase) a['assets-base'] = assetsBase
return a
})
}
const esc = (v) => String(v).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;')
/** The text a website pastes: the bundle's script once, then one tag per section. */
export function embedSnippet(choices, scriptUrl) {
const tags = sectionAttrs(choices).map((a) => `<${TAG}${Object.entries(a).map(([k, v]) => (v === '' ? ` ${k}` : ` ${k}="${esc(v)}"`)).join('')}></${TAG}>`)
return [`<script src="${esc(scriptUrl)}"></script>`, ...tags].join('\n')
}