Admin: Die Seite wurde neu angelegt: „Hauptseite > Schwarzatal.org Diese Seite dokumentiert das '''Eventform-Gadget''', mit dem eingeloggte Benutzer über ein Formular neue Veranstaltungsseiten anlegen können. Die Dokumentation ist so gehalten, dass das Gadget damit vollständig nachgebaut werden kann. == Überblick == Das Eventform-Gadget blendet auf der Seite Veranstaltungen einen Button „Neue Veranstaltung anlegen" ein. Ein Klick öffnet einen…“

2026-07-02T22:00:43Z

Die Seite wurde neu angelegt: „Hauptseite > Schwarzatal.org Diese Seite dokumentiert das '''Eventform-Gadget''', mit dem eingeloggte Benutzer über ein Formular neue Veranstaltungsseiten anlegen können. Die Dokumentation ist so gehalten, dass das Gadget damit vollständig nachgebaut werden kann. == Überblick == Das Eventform-Gadget blendet auf der Seite Veranstaltungen einen Button „Neue Veranstaltung anlegen" ein. Ein Klick öffnet einen…“

Neue Seite

[[Hauptseite]] > [[Hauptseite#Schwarzatal.org|Schwarzatal.org]]

Diese Seite dokumentiert das '''Eventform-Gadget''', mit dem eingeloggte Benutzer über ein Formular neue Veranstaltungsseiten anlegen können. Die Dokumentation ist so gehalten, dass das Gadget damit vollständig nachgebaut werden kann.

== Überblick ==

Das Eventform-Gadget blendet auf der Seite [[Veranstaltungen]] einen Button „Neue Veranstaltung anlegen" ein. Ein Klick öffnet einen Formular-Dialog. Nach dem Ausfüllen erzeugt das Gadget eine neue Wiki-Seite mit standardisierter Struktur (Abschnitte Zeit, Event, Location, Photos & Videos) und leitet den Benutzer direkt dorthin weiter.

'''Eigenschaften:'''
* Reines JavaScript-Gadget — keine Server-Extension, keine Änderung an <code>LocalSettings.php</code> nötig (außer der einmaligen Aktivierung der Gadgets-Extension)
* Läuft nur auf einer konfigurierbaren Trigger-Seite und nur für eingeloggte Benutzer
* Prüft vor dem Anlegen, ob der Seitentitel bereits existiert (kein Überschreiben möglich)
* Erkennt GPS-Koordinaten in mehreren Formaten und generiert daraus automatisch Kartenlinks (OpenStreetMap, CoMaps, Google Maps), sofern die jeweiligen URL-Felder leer sind

== Architektur ==

Das Gadget besteht aus drei Wiki-Seiten und einer normalen Inhaltsseite:

{| class="wikitable"
! Seite !! Zweck
|-
| <code>MediaWiki:Gadgets-definition</code> || Registriert das Gadget beim ResourceLoader
|-
| <code>MediaWiki:Gadget-eventform.js</code> || Gesamte Logik: Formular-Dialog, Koordinaten-Parser, Wikitext-Generator, API-Aufrufe
|-
| <code>MediaWiki:Gadget-eventform.css</code> || Styling des Button-Containers
|-
| [[Veranstaltungen]] (Trigger-Seite) || Enthält den Anker <code><div id="event-form-container"></div></code>, in den der Button gerendert wird
|}

'''Verwendete MediaWiki-Bausteine:'''
* [https://www.mediawiki.org/wiki/Extension:Gadgets Extension:Gadgets] — Auslieferung des Codes an die Browser
* [https://www.mediawiki.org/wiki/OOUI OOUI] (<code>oojs-ui-core</code>, <code>oojs-ui-windows</code>) — Formular-Dialog und Button, in MediaWiki eingebaut
* <code>mediawiki.api</code> (<code>mw.Api</code>) — Seitenexistenz-Prüfung und Seitenerstellung über die Action-API
* <code>mediawiki.util</code> — URL-Erzeugung für die Weiterleitung

== Installation ==

=== Schritt 1: Gadgets-Extension aktivieren ===

Die Gadgets-Extension liegt MediaWiki bei, muss aber ggf. aktiviert werden. In <code>LocalSettings.php</code> (per FTP):

<pre>
wfLoadExtension( 'Gadgets' );
</pre>

Kontrolle: Auf <code>Spezial:Version</code> muss unter „Installierte Erweiterungen" der Eintrag '''Gadgets''' erscheinen.

=== Schritt 2: Gadget registrieren ===

Auf der Seite <code>MediaWiki:Gadgets-definition</code> folgenden Block eintragen:

<pre>
== Werkzeuge ==
* eventform[ResourceLoader|default|rights=edit]|eventform.js|eventform.css
</pre>

Bedeutung der Flags:
* <code>ResourceLoader</code> — Auslieferung über den ResourceLoader (Caching, Minifizierung)
* <code>default</code> — für alle Benutzer standardmäßig aktiv (abwählbar unter Einstellungen → Gadgets)
* <code>rights=edit</code> — nur Benutzer mit Bearbeitungsrecht erhalten das Gadget

Kontrolle: Auf <code>Spezial:Gadgets</code> muss „eventform" gelistet sein.

=== Schritt 3: JavaScript anlegen ===

Die Seite <code>MediaWiki:Gadget-eventform.js</code> mit dem vollständigen Gadget-Code anlegen (siehe [[#Funktionsweise im Detail|Funktionsweise im Detail]] für die Logik; der aktuelle Code steht in der Versionsgeschichte der Seite selbst).

=== Schritt 4: CSS anlegen ===

Die Seite <code>MediaWiki:Gadget-eventform.css</code> anlegen:

<pre>
#event-form-container {
margin: 1.5em 0;
padding: 1em;
background: #f8f9fa;
border: 1px solid #c8ccd1;
border-radius: 4px;
text-align: center;
}
</pre>

=== Schritt 5: Trigger-Seite vorbereiten ===

Auf der Seite [[Veranstaltungen]] an gewünschter Stelle den Anker einfügen:

<pre>
<div id="event-form-container"></div>
</pre>

Fehlt der Anker, hängt das Gadget den Button automatisch ans Ende des Seiteninhalts.

=== Schritt 6: Testen ===

# Eingeloggt die Seite [[Veranstaltungen]] aufrufen
# Hard-Reload durchführen (Strg+Shift+R), da der ResourceLoader aggressiv cacht
# Button „Neue Veranstaltung anlegen" muss erscheinen

== Funktionsweise im Detail ==

Dieser Abschnitt beschreibt die Logik so, dass das Gadget nachprogrammiert werden kann.

=== Grundgerüst ===

Der gesamte Code liegt in einer IIFE (<code>( function () { ... }() );</code>) mit <code>'use strict'</code>. Am Anfang stehen zwei Guards, die das Skript sofort beenden, wenn es nicht greifen soll:

# <code>mw.config.get( 'wgPageName' ) !== TRIGGER_PAGE</code> — das Gadget wird zwar auf jeder Seite geladen (Gadgets sind global), rendert aber nur auf der konfigurierten Trigger-Seite. <code>TRIGGER_PAGE</code> ist eine Konstante am Dateianfang (aktuell <code>'Veranstaltungen'</code>). Achtung: <code>wgPageName</code> verwendet Unterstriche statt Leerzeichen.
# <code>!mw.config.get( 'wgUserName' )</code> — anonyme Benutzer (Wert <code>null</code>) werden ausgeschlossen.

Danach lädt <code>mw.loader.using( [...] )</code> asynchron die benötigten Module. Erst im <code>.then()</code>-Callback wird die UI aufgebaut — zu diesem Zeitpunkt ist das DOM garantiert bereit, ein zusätzlicher DOM-Ready-Wrapper ist nicht nötig (und führte in der Entwicklung zu Problemen, siehe [[#Bekannte Stolpersteine|Stolpersteine]]).

Benötigte Module:
<pre>
oojs-ui-core, oojs-ui-windows, oojs-ui.styles.icons-interactions,
mediawiki.api, mediawiki.util
</pre>

=== Formular-Dialog (OOUI) ===

Der Dialog ist eine Subklasse von <code>OO.ui.ProcessDialog</code>:

* <code>OO.inheritClass( EventDialog, OO.ui.ProcessDialog )</code>
* Statische Eigenschaften: <code>name</code>, <code>title</code>, <code>actions</code> (Aktion <code>save</code> mit Flags <code>primary, progressive</code> sowie eine Abbrechen-Aktion mit Flag <code>safe</code>)
* In <code>initialize()</code> werden die Eingabefelder als <code>OO.ui.TextInputWidget</code> erzeugt und über <code>OO.ui.FieldLayout</code> in drei <code>OO.ui.FieldsetLayout</code>-Gruppen gegliedert: ''Pflichtfelder'', ''Event'', ''Location''
* <code>getBodyHeight()</code> gibt eine feste Höhe (600px) zurück
* Der Dialog wird über einen <code>OO.ui.WindowManager</code> geöffnet, der an <code>document.body</code> hängt

Felder (alle <code>TextInputWidget</code>; Datum mit <code>type: 'date'</code>, Uhrzeit mit <code>type: 'time'</code> und Vorbelegung <code>17:00</code>):

{| class="wikitable"
! Feld !! Pflicht !! Verwendung im Wikitext
|-
| Seitentitel || ja || Name der neuen Wiki-Seite
|-
| Datum || ja || Zeile <code>🗓️ …</code> (wird unverändert als String übernommen)
|-
| Uhrzeit || nein || Zeile <code>⏰ …</code>; bei leerem Feld entfällt die Zeile komplett
|-
| Bild (Dateiname) || nein || <code>[[file:…|frameless|upright=3.0]]</code>; Rotlink erlaubt nachträglichen Upload per Klick
|-
| Website URL || nein || Zeile <code>🌐 …</code>
|-
| Adresse || nein || Zeile <code>📍 …</code>
|-
| OpenStreetMap URL || nein || Zeile mit OSM-Icon; wird ggf. automatisch generiert
|-
| GPS-Koordinaten || nein || Zeile <code>🧭 …</code> (Originaleingabe); Quelle der Auto-Generierung
|-
| CoMaps URL || nein || Zeile mit CoMaps-Icon; wird ggf. automatisch generiert
|-
| Google Maps URL || nein || Zeile mit Google-Maps-Icon; wird ggf. automatisch generiert
|}

=== Speicher-Ablauf ===

<code>getActionProcess( 'save' )</code> gibt einen <code>OO.ui.Process</code> zurück, dessen Callback:

# Alle Feldwerte ausliest und trimmt
# Pflichtfelder prüft (Titel, Datum); bei Fehlern wird ein <code>OO.ui.Error</code> mit <code>recoverable: true</code> zurückgegeben — der Dialog zeigt die Meldung an und bleibt offen
# Koordinaten parst (siehe unten) und leere Karten-URL-Felder automatisch befüllt
# Den Wikitext generiert (siehe unten)
# Per <code>api.get( { action: 'query', titles: titel } )</code> prüft, ob die Seite existiert (<code>page.missing</code> im Ergebnis); wenn ja → Fehler „existiert bereits"
# Per <code>api.postWithToken( 'csrf', { action: 'edit', title, text, createonly: true, summary } )</code> die Seite anlegt. <code>createonly</code> ist eine zweite Absicherung gegen Überschreiben (Race Condition zwischen Prüfung und Anlage)
# Bei Erfolg per <code>window.location.href = mw.util.getUrl( titel )</code> zur neuen Seite weiterleitet

=== Koordinaten-Parser ===

Die Funktion <code>parseCoordinates( input )</code> gibt <code>{ lat, lng }</code> oder <code>null</code> zurück. Sie probiert nacheinander mehrere reguläre Ausdrücke; der erste Treffer mit plausiblen Werten (|lat| ≤ 90, |lng| ≤ 180) gewinnt:

# '''Deutsches Dezimalformat''' (Komma als Dezimaltrenner): <code>47,7073132, 15,9934565</code> — auch mit Semikolon oder Leerzeichen als Koordinatentrenner. Wichtig, weil die Google-Maps-App auf deutschsprachigen Geräten dieses Format in die Zwischenablage kopiert. Erkennungslogik: zwei Zahlen mit Dezimal-Komma, getrennt durch <code>", "</code> (Komma+Leerzeichen), Semikolon oder Leerzeichen. Vor <code>parseFloat</code> wird das Komma durch einen Punkt ersetzt.
# '''Internationales Dezimalformat''': <code>48.0542, 15.4276</code>, auch ohne Leerzeichen, mit Semikolon oder nur Leerzeichen, negative Werte erlaubt
# '''Dezimal mit Himmelsrichtungen''': <code>47.75N 15.68E</code> oder <code>47,75°N, 15,68°E</code> — S und W negieren den Wert
# '''Grad-Minuten-Sekunden (DMS)''': <code>47°45'00.0"N 15°40'48.0"E</code> — Umrechnung: Grad + Minuten/60 + Sekunden/3600. Akzeptiert sowohl gerade (<code>'</code> <code>"</code>) als auch typografische Zeichen (<code>’</code> <code>”</code> <code>′</code> <code>″</code>), da mobile Betriebssysteme beim Kopieren oft typografische Zeichen erzeugen
# '''Grad-Dezimalminuten (DM)''': <code>47°45.000'N 15°40.800'E</code> — Umrechnung: Grad + Minuten/60

=== Automatische Kartenlink-Generierung ===

Wenn <code>parseCoordinates</code> erfolgreich war, werden für '''leere''' URL-Felder Links generiert (vom Benutzer ausgefüllte Felder haben immer Vorrang). Die Koordinaten werden mit <code>toFixed( 7 )</code> formatiert:

{| class="wikitable"
! Dienst !! URL-Schema
|-
| OpenStreetMap || <code><nowiki>https://www.openstreetmap.org/?mlat=LAT&mlon=LNG#map=17/LAT/LNG</nowiki></code> (Pin + Zoomstufe 17)
|-
| CoMaps || <code><nowiki>https://comaps.at/LAT,LNG</nowiki></code> (CoMaps ist ein Fork von Organic Maps und nutzt dessen URL-Schema)
|-
| Google Maps || <code><nowiki>https://www.google.com/maps?q=LAT,LNG</nowiki></code>
|}

=== Wikitext-Generator ===

Die Funktion <code>buildWikitext( fields )</code> baut die Seite als Array von Zeilen auf und verbindet sie mit <code>\n</code>. Regeln:

* Erste Zeile ist die Breadcrumb-Navigation: <code><nowiki>[[Hauptseite]] > [[Hauptseite#Kultur & Events|Kultur & Events]] > [[Veranstaltungen]]</nowiki></code>
* Abschnitte in fester Reihenfolge: <code>==Zeit==</code>, <code>==Event==</code>, <code>==Location==</code>, <code>==Photos & Videos==</code>
* Optionale Zeilen (Uhrzeit, Bild, Website, alle Location-Zeilen) werden bei leerem Feld '''komplett weggelassen''' — es entstehen keine leeren Zeilen oder verwaisten Symbole
* Im Location-Abschnitt wird zwischen den vorhandenen Zeilen jeweils eine Leerzeile eingefügt (jede Zeile wird ein eigener Absatz); Hilfskonstruktion: eine Funktion <code>addLocLine</code> mit einem <code>locFirst</code>-Flag, das vor jeder Zeile außer der ersten eine Leerzeile einschiebt
* URLs werden als Klartext eingefügt — MediaWiki wandelt <code>https://…</code> automatisch in klickbare Links um
* Jeder Abschnitt endet mit vier <code><br></code>-Zeilen (Layout-Vorgabe der Event-Seiten)
* Karten-Zeilen mit Icons: <code><nowiki>[[file:osm.png|24px|link=]] URL</nowiki></code> (analog <code>CoMaps.png</code>, <code>GoogleMaps.png</code>) — die Icon-Dateien müssen im Wiki hochgeladen sein

== Manual: Benutzung ==

# Auf der Seite [[Veranstaltungen]] den Button '''Neue Veranstaltung anlegen''' klicken (nur sichtbar, wenn eingeloggt)
# Pflichtfelder ausfüllen: '''Seitentitel''' (wird der Name der Wiki-Seite, muss eindeutig sein) und '''Datum'''
# Optional: Uhrzeit (Vorbelegung 17:00, kann geleert werden), Bild-Dateiname, Website, Adresse, Kartenlinks, GPS-Koordinaten
# '''Tipp Bild:''' Einen sinnvollen Dateinamen mit Endung vergeben (z.B. <code>Sommerfest2026.jpg</code>). Auf der fertigen Seite erscheint ein Rotlink, über den das Bild direkt hochgeladen werden kann. Alternativ vorher unter [[Spezial:Hochladen]] hochladen.
# '''Tipp Koordinaten:''' Aus einer Karten-App kopieren und einfügen — deutsche Schreibweise mit Komma (<code>47,7073132, 15,9934565</code>) wird erkannt. Bei eingetragenen Koordinaten werden fehlende Links zu OpenStreetMap, CoMaps und Google Maps automatisch ergänzt.
# '''Seite anlegen''' klicken. Bei Erfolg erfolgt die Weiterleitung auf die neue Seite. Existiert der Titel bereits, erscheint eine Fehlermeldung und das Formular bleibt offen.

== Konfiguration und Anpassung ==

* '''Trigger-Seite ändern:''' Konstante <code>TRIGGER_PAGE</code> am Anfang von <code>MediaWiki:Gadget-eventform.js</code> anpassen. Leerzeichen im Seitennamen als Unterstrich schreiben.
* '''Felder hinzufügen:''' (1) <code>TextInputWidget</code> in <code>initialize()</code> anlegen, (2) <code>FieldLayout</code> im passenden Fieldset ergänzen, (3) Wert in <code>getActionProcess</code> ins <code>fields</code>-Objekt aufnehmen, (4) Ausgabe in <code>buildWikitext</code> ergänzen.
* '''Seitenstruktur ändern:''' Nur <code>buildWikitext</code> anpassen.
* '''Berechtigungen:''' Über das Flag <code>rights=…</code> in <code>MediaWiki:Gadgets-definition</code> steuerbar (z.B. <code>rights=edit</code>).

== Bekannte Stolpersteine ==

* '''ResourceLoader-Cache:''' Nach jeder Änderung an Gadget-JS/CSS ist im Browser ein Hard-Reload nötig (Strg+Shift+R), teils dauert es zusätzlich bis zu ~5 Minuten, bis der ResourceLoader serverseitig neu ausliefert. Bei „Änderung wirkt nicht"-Symptomen zuerst immer an den Cache denken — auch am Handy.
* '''Kein DOM-Ready-Wrapper im <code>then()</code>:''' Ein <code>$( function () { … } )</code> innerhalb des <code>mw.loader.using().then()</code>-Callbacks kann dazu führen, dass der Handler nie feuert. Der UI-Code gehört direkt in den <code>then()</code>-Callback.
* '''<code>wgPageName</code> exakt treffen:''' Groß-/Kleinschreibung und Unterstriche müssen exakt stimmen, sonst beendet sich das Gadget kommentarlos.
* '''Icon-Dateien:''' <code>osm.png</code>, <code>CoMaps.png</code>, <code>GoogleMaps.png</code> müssen im Wiki existieren, sonst erscheinen Rotlinks in den Location-Zeilen.
* '''Debugging:''' In der Browser-Konsole prüfen: <code>mw.loader.getState('ext.gadget.eventform')</code> muss <code>"ready"</code> liefern; <code>mw.config.get('wgPageName')</code> muss der Trigger-Seite entsprechen. Für Debugging über Seitenwechsel hinweg in den DevTools „Persistente Logs" aktivieren.

== Grenzen der Lösung ==

* Keine serverseitige Validierung — das Gadget läuft vollständig im Browser. Die Rechte-Durchsetzung übernimmt die MediaWiki-API (ein Benutzer kann nur anlegen, was er auch manuell anlegen dürfte).
* Das Datum wird als freier String übernommen, ohne Plausibilitätsprüfung.
* Keine Vorschau vor dem Anlegen (Erweiterung möglich).
* Für strukturierte Abfragen über Events (z.B. „alle Veranstaltungen im Mai") wäre langfristig eine Lösung mit [https://www.mediawiki.org/wiki/Extension:Page_Forms Page Forms] und [https://www.mediawiki.org/wiki/Extension:Cargo Cargo] geeigneter.

Eventform - Versionsgeschichte