diff --git a/src/lib/components/ContentModal.svelte b/src/lib/components/ContentModal.svelte new file mode 100644 index 0000000..53fbc6a --- /dev/null +++ b/src/lib/components/ContentModal.svelte @@ -0,0 +1,198 @@ + + + + +{#if open && active} + +{/if} diff --git a/src/lib/modal-match.test.ts b/src/lib/modal-match.test.ts new file mode 100644 index 0000000..421226f --- /dev/null +++ b/src/lib/modal-match.test.ts @@ -0,0 +1,108 @@ +import { describe, it, expect } from 'vitest'; +import { matchUrlPattern, inTimeWindow, selectModal } from './modal-match'; + +describe('matchUrlPattern — glob', () => { + it('exact path', () => { + expect(matchUrlPattern('/aktion', '/aktion')).toBe(true); + expect(matchUrlPattern('/aktion', '/aktion/x')).toBe(false); + expect(matchUrlPattern('/aktion', '/aktionismus')).toBe(false); + }); + + it('trailing slash is irrelevant', () => { + expect(matchUrlPattern('/aktion', '/aktion/')).toBe(true); + expect(matchUrlPattern('/aktion/', '/aktion')).toBe(true); + }); + + it('root', () => { + expect(matchUrlPattern('/', '/')).toBe(true); + expect(matchUrlPattern('/', '/x')).toBe(false); + }); + + it('single segment *', () => { + expect(matchUrlPattern('/aktion/*', '/aktion/x')).toBe(true); + expect(matchUrlPattern('/aktion/*', '/aktion/x/y')).toBe(false); + // '/aktion/*' matcht nicht /aktion selbst + expect(matchUrlPattern('/aktion/*', '/aktion')).toBe(false); + }); + + it('recursive ** includes the prefix itself', () => { + expect(matchUrlPattern('/aktion/**', '/aktion')).toBe(true); + expect(matchUrlPattern('/aktion/**', '/aktion/')).toBe(true); + expect(matchUrlPattern('/aktion/**', '/aktion/x')).toBe(true); + expect(matchUrlPattern('/aktion/**', '/aktion/x/y')).toBe(true); + expect(matchUrlPattern('/aktion/**', '/andere')).toBe(false); + }); + + it('post section', () => { + expect(matchUrlPattern('/post/**', '/post/mein-beitrag')).toBe(true); + expect(matchUrlPattern('/post/**', '/')).toBe(false); + }); + + it('global patterns', () => { + expect(matchUrlPattern('**', '/irgendwas/tief')).toBe(true); + expect(matchUrlPattern('**', '/')).toBe(true); + }); + + it('case-insensitive', () => { + expect(matchUrlPattern('/Aktion', '/aktion')).toBe(true); + }); + + it('ignores query/hash on pathname', () => { + expect(matchUrlPattern('/aktion', '/aktion?x=1')).toBe(true); + }); +}); + +describe('matchUrlPattern — regex (~ prefix)', () => { + it('applies regex', () => { + expect(matchUrlPattern('~^/download-\\d+$', '/download-42')).toBe(true); + expect(matchUrlPattern('~^/download-\\d+$', '/download-abc')).toBe(false); + }); + it('broken regex → no match, no throw', () => { + expect(matchUrlPattern('~(', '/x')).toBe(false); + }); +}); + +describe('inTimeWindow', () => { + const now = Date.parse('2026-07-06T12:00:00Z'); + it('open window', () => { + expect(inTimeWindow({}, now)).toBe(true); + }); + it('before from', () => { + expect(inTimeWindow({ timeFrom: '2026-07-10T00:00:00Z' }, now)).toBe(false); + }); + it('after until', () => { + expect(inTimeWindow({ timeUntil: '2026-07-01T00:00:00Z' }, now)).toBe(false); + }); + it('within', () => { + expect( + inTimeWindow( + { timeFrom: '2026-07-01T00:00:00Z', timeUntil: '2026-07-10T00:00:00Z' }, + now, + ), + ).toBe(true); + }); +}); + +describe('selectModal', () => { + const now = Date.parse('2026-07-06T12:00:00Z'); + const never = () => false; + it('picks first matching, in-window, not dismissed', () => { + const modals = [ + { slug: 'a', urlPattern: '/other' }, + { slug: 'b', urlPattern: '/aktion/**' }, + { slug: 'c', urlPattern: '**' }, + ]; + expect(selectModal(modals, '/aktion/x', now, never)?.slug).toBe('b'); + }); + it('skips dismissed', () => { + const modals = [ + { slug: 'b', urlPattern: '**' }, + { slug: 'c', urlPattern: '**' }, + ]; + const dismissed = (m: { slug?: string }) => m.slug === 'b'; + expect(selectModal(modals, '/x', now, dismissed)?.slug).toBe('c'); + }); + it('returns null when nothing matches', () => { + expect(selectModal([{ slug: 'a', urlPattern: '/x' }], '/y', now, never)).toBe(null); + }); +}); diff --git a/src/lib/modal-match.ts b/src/lib/modal-match.ts new file mode 100644 index 0000000..6cd0034 Binary files /dev/null and b/src/lib/modal-match.ts differ diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts index 60e08a9..28bdb0c 100644 --- a/src/routes/+layout.server.ts +++ b/src/routes/+layout.server.ts @@ -19,7 +19,8 @@ import type { TopBannerEntry, } from '$lib/cms'; import type { DeadlineBannerBlockData } from '$lib/block-types'; -import { ensureTransformedImage } from '$lib/rusty-image'; +import { ensureTransformedImage, resolveContentImages } from '$lib/rusty-image'; +import { sanitizeBlocks } from '$lib/sanitize-blocks.server'; import { DEFAULT_SOCIAL_IMAGE_URL, ROW_RESOLVE, @@ -42,6 +43,28 @@ interface SocialLink { label?: string; } +/** Ein aufgelöstes Modal (config-Collection `modal`). Content = Block-Liste. */ +export interface ModalEntry { + _slug?: string; + slug?: string; + urlPattern?: string; + trigger?: 'immediate' | 'delay' | 'scroll' | 'exit_intent'; + delaySeconds?: number; + scrollPercent?: number; + content?: unknown[]; + dismissible?: boolean; + version?: string; + size?: 'sm' | 'md' | 'lg'; + timeFrom?: string | null; + timeUntil?: string | null; +} + +/** Der `modals`-Config-Eintrag: enable-Flag + Liste aufgelöster Modals. */ +interface ModalsConfigEntry { + enable?: boolean; + modals?: ModalEntry[]; +} + /** Führenden Slash ignorieren (CMS liefert z. B. "slug": "/about"). */ function normalizeSlug(s: string | undefined): string { return (s ?? '').replace(/^\//, '').trim(); @@ -77,6 +100,7 @@ export const load: LayoutServerLoad = async ({ locals, route }) => { seoTitleTemplate: null, seoDescriptionTemplate: null, analyticsPm86SiteId: null, + modals: [] as ModalEntry[], }; } @@ -91,13 +115,14 @@ export const load: LayoutServerLoad = async ({ locals, route }) => { let bootstrapConfig: PageConfigEntry | null = null; let bootstrapTopBanner: TopBannerEntry | null = null; let bootstrapDeadlineBanner: DeadlineBannerBlockData | null = null; + let activeModals: ModalEntry[] = []; try { // TTL-Cache über den ganzen Batch — lief vorher ungecacht bei jedem // SSR-Request. CSV-Key-Head: Webhook-Purge jeder beteiligten Collection // invalidiert den Eintrag (siehe invalidateCollection in cms.ts). const batch = await cached( 'navigation', - 'navigation,footer,page_config,top_banner,deadline_banner:layout-bootstrap:de', + 'navigation,footer,page_config,top_banner,deadline_banner,modals:layout-bootstrap:de', () => batchFetch([ { id: 'navHeader', @@ -141,6 +166,15 @@ export const load: LayoutServerLoad = async ({ locals, route }) => { locale: 'de', resolve: 'all', }, + { + // Globale Modal-Liste (config-Collection `modals`, ein Eintrag). Enthält + // die aktiven Modals als aufgelöste Referenzen inkl. content-Blocks. + id: 'modals', + collection: 'modals', + slug: 'modals-global', + locale: 'de', + resolve: 'all', + }, ])); bootstrapNavHeader = batchData(batch.results.navHeader); bootstrapNavSocial = batchData(batch.results.navSocial); @@ -148,11 +182,30 @@ export const load: LayoutServerLoad = async ({ locals, route }) => { bootstrapConfig = batchData(batch.results.config); bootstrapTopBanner = batchData(batch.results.topBanner); bootstrapDeadlineBanner = batchData(batch.results.deadlineBanner); + const modalsConfig = batchData(batch.results.modals); + if (modalsConfig?.enable !== false) { + activeModals = (modalsConfig?.modals ?? []).filter( + (m): m is ModalEntry => typeof m === 'object' && m !== null, + ); + } } catch (err) { /* CMS nicht erreichbar — alle Felder bleiben null, Page rendert ohne. */ logWarn('layout.bootstrap', err); } + // Bilder/Markdown in den Modal-Content-Blocks server-seitig auflösen — gleiche + // Pipeline wie Page-Rows (resolveContentImages erwartet rowNContent-Shape, + // darum content als row1Content wrappen; Blocks werden in-place mutiert). + try { + for (const m of activeModals) { + if (!Array.isArray(m.content) || m.content.length === 0) continue; + await resolveContentImages({ row1Content: m.content }); + sanitizeBlocks(m); + } + } catch (err) { + logWarn('layout.modals', err); + } + // Fallback für config: Slug "default" probieren (legacy), wenn die kanonische // Variante fehlt. Selten genug für einen weiteren Single-Call. if (!bootstrapConfig) { @@ -416,5 +469,6 @@ export const load: LayoutServerLoad = async ({ locals, route }) => { (pageConfig as { analyticsPm86SiteId?: string } | null)?.analyticsPm86SiteId ?? null, announcementBanner: bootstrapTopBanner, deadlineBanner: bootstrapDeadlineBanner, + modals: activeModals, }; }; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 90d673b..c1a0b19 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -9,6 +9,7 @@ import AnnouncementBanner from '$lib/components/AnnouncementBanner.svelte'; import DeadlineBannerBlock from '$lib/components/blocks/DeadlineBannerBlock.svelte'; import TranslationProvider from '$lib/components/TranslationProvider.svelte'; + import ContentModal from '$lib/components/ContentModal.svelte'; import Breadcrumbs from '$lib/ui/Breadcrumbs.svelte'; import type { LayoutData } from './$types'; import { ensureTransformedImage } from '$lib/rusty-image'; @@ -406,5 +407,11 @@