Widget-Builder Integration-Mode

Widget-Builder Integration-Mode

Widget Builder Integration Mode (Events)

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:
  1. <script
  2.   type="module"
  3.   src="https://newpages.destination.one/web-components.js"
  4.   data-language="de"
  5.   data-experience="YOUR_EXPERIENCE"
  6.   data-template="YOUR_TEMPLATE"
  7. ></script>

Web Component einbinden

  1. <done-widget-builder
  2.   widget-list="done-result-list,done-detail-view,done-bookmark-list"
  3.   router-mode="memory,hash"
  4.   integration-mode="events"
  5. ></done-widget-builder>

Props

widget-list

  1. Typ: string (kommagetrennt)
  2. Beispiel: done-result-list,done-detail-view
  3. Wirkung: Schränkt die auswählbaren Widgets ein.
  4. Hinweis: Unbekannte Keys werden ignoriert. Feature-Flags bleiben zusätzlich aktiv.

router-mode

  1. Typ: string (ein Wert oder kommagetrennt)
  2. Gültige Werte: memory, hash, history
  3. Beispiele:
    1. memory (ein Wert)
    2. memory,hash (mehrere Werte)
  4. Wirkung:
    1. Ein gültiger Wert: Router-Auswahl im Builder wird ausgeblendet und fix gesetzt.
    2. Mehrere gültige Werte: Router-Auswahl zeigt nur diese Optionen.
    3. Ungültige Werte werden ignoriert.

integration-mode

  1. Typ: string
  2. Unterstützter Event-Modus: events
  3. Wirkung in events:
    1. Schritt 3 zeigt keinen Skript-Block mehr.
    2. Stattdessen gibt es eine reine Speichern-Ansicht.
    3. Persistenz und Event-Dispatch bleiben identisch.

Events

Die Events werden auf dem <done-widget-builder>-Element dispatcht.
  1. widgetbuilder:created
  2. widgetbuilder:updated
  3. widgetbuilder:deleted

Wichtig

Events werden erst nach erfolgreichem Update des LocalStorage ausgelöst.

Event-Payload

Alle drei Events liefern denselben Payload in event.detail:
  1. {
  2.   id: string;
  3.   widget: {
  4.     id: string;
  5.     name: string;
  6.     type: string;
  7.     config: unknown;
  8.     wcTag?: string;
  9.     routerMode?: 'memory' | 'hash' | 'history';
  10.     basePath?: string;
  11.     createdAt: number;
  12.     updatedAt: number;
  13.   };
  14. }

Event-Handling Beispiel

  1. <done-widget-builder id="wb" integration-mode="events"></done-widget-builder>

  3. <script>
  4.   const wb = document.getElementById('wb');

  6.   const onWidgetEvent = (eventName) => (event) => {
  7.     const { id, widget } = event.detail;
  8.     console.log('[WidgetBuilder]', eventName, id, widget);

  10.     // Beispiel: eigene Persistenz
  11.     // saveWidgetToBackend({ eventName, id, widget });
  12.   };

  14.   wb.addEventListener('widgetbuilder:created', onWidgetEvent('created'));
  15.   wb.addEventListener('widgetbuilder:updated', onWidgetEvent('updated'));
  16.   wb.addEventListener('widgetbuilder:deleted', onWidgetEvent('deleted'));
  17. </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).