Benutzer:Schnark/js/dialog

Dieses Skript wird nicht mehr gepflegt. Wenn du es verwenden willst, musst du es entweder selbst weiterpflegen oder einen anderen dafür finden.

Das Skript dialog.js stellt eine einfache Möglichkeit dar, ein komplexes Dialogfenster zu erstellen, um damit Informationen vom Benutzer zu erfragen. Diese Dokumentation wendet sich an Programmierer, die dieses Skript für ihre Zwecke verwenden wollen.

Verwendung

Neben Benutzer:Schnark/js/dialog.js muss zusätzlich jQuery UI geladen werden, etwa mit mw.loader.load('jquery.ui');. Das Skript stellt seine Funktionen über das Objekt mw.libs.schnark_dialog zur Verfügung, wobei nur die Funktion schnark_dialog.show verwendet werden sollte.

show

Diese Funktion erwartet folgende Parameter:

1. der Titel des Dialogs, ein String, der in der Titelzeile angezeigt wird
2. der Inhalt des Dialogs, ein Array aus Objekten, die die einzelnen Elemente des Dialogs festlegen, siehe unten
3. die Funktion, die im Erfolgsfall aufgerufen wird
4. optional eine Funktion, die im Fehlerfall aufgerufen wird

Callback-Funktionen

Die Funktion für den Erfolgsfall wird mit einem Parameter aufgerufen, nämlich einem Objekt, das zu jedem Element des Dialogs unter dessem Namen den vom Benutzer eingegebenen Wert speichert. Die Funktion für den Fehlerfall wird mit einem booleschen Parameter aufgerufen, true, wenn der Benutzer Abbrechen wählte, false, wenn Pflichtfelder nicht ausgefüllt wurden.

Elemente des Dialogs

Jedes Element wird durch ein Objekt beschrieben, dessen Eigenschaften das Element beschreiben.

Eigenschaft	Bedeutung
name	interner Name des Elements, wird auch beim Objekt verwendet, das der Erfolgsfunktion übergeben wird, sollte nur alphanummerische Zeichen beinhalten
type	Typ des Elements, siehe unten
text	Beschriftung
html	boolesch, bei true wird die Beschriftung als HTML interpretiert
optional	boolesch, bei true muss keine Eingabe erfolgen
focus	boolesch, bei true wird dieses Element fokussiert (offensichtlich nur bei höchstens einem Element mit Textfeld sinnvoll)
enter	boolesch, bei true hat die Enter-Taste bei diesem Element die gleiche Wirkung wie ein Klick auf OK
standard	Vorbelegung des Elements

Typ

Der Typ wird als String angegeben und kann folgende Werte annehmen:

Typ	Bedeutung	Anmerkungen
input	einzeiliges Eingabefeld	mit multiline wird ein mehrzeiliges Eingabefeld erzeugt
inputbox	mehrzeiliges Eingabefeld	enter ist offensichtlich kontraproduktiv
label	Beschriftung	gibt keinen Wert zurück
select	Auswahlliste für einen Wert	Die Liste wird in der Eigenschaft list übergeben, das ein Array mit Werten der Form ['Anzeige in Liste', 'Rückgabewert', 'Hilfetext'] ist, standard ist der Index des Standardwerts, html gilt auch für den Hilfetext.
select_multi	Auswahlliste für mehrere Werte	Die Liste wird in der Eigenschaft list übergeben, das ein Array mit Werten der Form ['Anzeige in der Liste', 'Rückgabewert'] ist, standard ist ein Array aus Indizes, html gilt auch für die Auswahlpunkte, die Erfolgsfunktion erhält ein Array aus den gewählten Rückgabewerten.
select_other	Auswahlliste für einen Wert mit alternativer freier Eingabe	siehe select, mit der Eigenschaft other kann bestimmt werden, wie die letzte Auswahlmöglichkeit, die die freie Eingabe erlaubt, heißen soll, ist standard ein String, so wird diese letzte Möglichkeit vorausgewählt, in diesem Fall ist auch focus sinnvoll. Mit multiline kann ein mehrzeiliges Eingabefeld für die freie Eingabe erzeugt werden.
toggle	Schalter (auch um andere Elemente zu aktivieren/deaktivieren)	standard und die Rückgabe sind boolesch, list ist ein Array aus Indizes von Elementen, die ein- bzw. ausgeschlatet werden sollen, ausgeschlatete Elemente übergeben keinen Wert und ergeben damit auch keinen Fehler, wenn sie leer sind

Beispiel

mw.loader.using('jquery.ui', function () {
  mw.libs.schnark_dialog.show(
    'Titel',
    [
     {type: 'label', name: 'lab1', text: '<u>Label</u>'},
     {type: 'toggle', name: 'tog1', text: '<u>Schalter</u>', list: [2], html: true, standard: false, enter: true},
     {type: 'inputbox', name: 'inp1', text: 'Eingabe'},
     {type: 'input', name: 'inp2', text: 'Eingabe', optional: true, focus: true, standard: 'Text', enter: true},
     {type: 'select_other', name: 'sel1', text: 'Wahl', list: [['a', 'a', '<b>A</b>'], ['b', 'b', 'B']], standard: 'c', html: true, enter: true},
     {type: 'select_multi', name: 'sel2', text: 'Aussuchen', list: [['a', 'a'], ['b', 'b']], standard: [1], enter: true}
    ],
    function (a) {
      var t='';
      for (var i in a)
          t += i + ': ' + a[i] + '\n';
      alert(t);
    },
    function(a) {
      alert(a);
    }
  );
}

Code

Der Code befindet sich unter Benutzer:Schnark/js/dialog.js.