Ziel
Diese Dokumentation beschreibt, wie der done-widget-builder als Web Component eingebunden wird und wie der integration-mode="events" genutzt wird, um Widgets über JavaScript-Events statt über das generierte Skript weiterzuverarbeiten.
Voraussetzungen
- Das Web-Components-Bundle ist eingebunden (web-components.js).
- Die Web Component <done-widget-builder> ist verfügbar.
Beispiel:
Web Component einbinden
- <done-widget-builder
- widget-list="done-result-list,done-detail-view,done-bookmark-list"
- router-mode="memory,hash"
- integration-mode="events"
- ></done-widget-builder>
Props
- Typ: string (kommagetrennt)
- Beispiel: done-result-list,done-detail-view
- Wirkung: Schränkt die auswählbaren Widgets ein.
- Hinweis: Unbekannte Keys werden ignoriert. Feature-Flags bleiben zusätzlich aktiv.
router-mode
- Typ: string (ein Wert oder kommagetrennt)
- Gültige Werte: memory, hash, history
- Beispiele:
- memory (ein Wert)
- memory,hash (mehrere Werte)
- Wirkung:
- Ein gültiger Wert: Router-Auswahl im Builder wird ausgeblendet und fix gesetzt.
- Mehrere gültige Werte: Router-Auswahl zeigt nur diese Optionen.
- Ungültige Werte werden ignoriert.
integration-mode
- Typ: string
- Unterstützter Event-Modus: events
- Wirkung in events:
- Schritt 3 zeigt keinen Skript-Block mehr.
- Stattdessen gibt es eine reine Speichern-Ansicht.
- Persistenz und Event-Dispatch bleiben identisch.
Events
Die Events werden auf dem <done-widget-builder>-Element dispatcht.
- widgetbuilder:created
- widgetbuilder:updated
- widgetbuilder:deleted
Wichtig
Events werden erst nach erfolgreichem Update des LocalStorage ausgelöst.
Event-Payload
Alle drei Events liefern denselben Payload in event.detail:
- {
- id: string;
- widget: {
- id: string;
- name: string;
- type: string;
- config: unknown;
- wcTag?: string;
- routerMode?: 'memory' | 'hash' | 'history';
- basePath?: string;
- createdAt: number;
- updatedAt: number;
- };
- }
Event-Handling Beispiel
- <done-widget-builder id="wb" integration-mode="events"></done-widget-builder>
- <script>
- const wb = document.getElementById('wb');
- const onWidgetEvent = (eventName) => (event) => {
- const { id, widget } = event.detail;
- console.log('[WidgetBuilder]', eventName, id, widget);
- // Beispiel: eigene Persistenz
- // saveWidgetToBackend({ eventName, id, widget });
- };
- wb.addEventListener('widgetbuilder:created', onWidgetEvent('created'));
- wb.addEventListener('widgetbuilder:updated', onWidgetEvent('updated'));
- wb.addEventListener('widgetbuilder:deleted', onWidgetEvent('deleted'));
- </script>
Lokale Persistenz im Builder
- Storage-Key: pages.widget-builder.v1
- Zusätzlich wird wcTag im gespeicherten Widget abgelegt (z. B. generierter Komponenten-Tag mit Attributen).