Popup-Menüpunkt in package.yml

Quell-ID: GitHub Discussion #1

Use Case

Ein AddOn soll einen Menüpunkt im REDAXO-Backend haben, der beim Klicken ein Popup-Fenster öffnet, anstatt die Seite normal zu laden.

Verwendete AddOns

  • REDAXO Core (Backend-Navigation)
  • project-AddOn (optional für JavaScript-Einbindung)

Zielbeschreibung

Es soll ein Menüpunkt im Backend erstellt werden, der beim Klick ein Popup öffnet. Die Einstellung popup: true in der package.yml reicht dafür nicht aus – sie definiert nur das reduzierte UI-Layout.

Lösung

Es gibt keinen zentralen Weg in REDAXO, ein Popup zu erzeugen. Stattdessen kann ein JavaScript übergeben werden:

Variante 1: JavaScript direkt im popup-Parameter

# package.yml
page:
  title: 'Mein AddOn'
  popup: 'openMyPopup(); return false;'

Das Script kann z.B. mit dem project-AddOn in das Backend geladen werden.

# package.yml
page:
  title: 'Mein AddOn'
  popup: true
  linkAttr:
    data-popup: true

Anschließend kann ein globaler JavaScript-Event-Handler alle Links mit data-popup="true" abfangen und als Popup öffnen.

Beispiel aus dem Medienpool

popup: 'openMediaPool(); return false;'

Besserer Ansatz

Für eine saubere und wiederverwendbare Lösung empfiehlt sich die zweite Variante mit linkAttr, da so ein einziges JavaScript für alle Popup-Menüpunkte genutzt werden kann:

// Im project-AddOn oder assets
document.addEventListener('click', function(e) {
    const link = e.target.closest('a[data-popup]');
    if (link) {
        e.preventDefault();
        window.open(link.href, '_blank', 'width=800,height=600');
    }
});

Diese Lösung ist wartbarer, da die Popup-Logik zentral definiert ist und nicht für jeden Menüpunkt individuell angepasst werden muss.