User:PerfektesChaos/js/editToolStrIns/User Customization/Example/de

Auf dieser Seite werden einige Beispiele für fortgeschrittene Konfigurationen dargestellt.

mw.hook Registrierung der Konfiguration

Der nachstehende Code registriert eine benutzerdefinierte Konfigurationsfunktion meinETSI. Die Bibliothek mw.libs wird nicht mehr benötigt. Die Registrierung sollte möglichst noch erfolgen, bevor das Gadget geladen wird.

mw.hook( "editToolStrIns.ready" ).add( meinETSI );

Die benutzerdefinierte Konfigurationsfunktion meinETSI erhält ein Anwendungsobjekt app übermittelt und könnte wie folgt aussehen:

function meinETSI( app ) {
   app.set( "this", "that" );
   app.user = { custom: [ "0",    true,
                          "[[]]", true,
                          "TeX",  "TeX" ] };
   app.update();
}

Ersatz für Toolbar

Die nachstehende Spezifikation generiert sieben Links, wie sie in der Toolbar aus den ersten Jahren der Wikipedia verwendet wurden:

app.user = { defs: { "@Toolbar": [ [ [ "''", "''", "", "Kursivschrift",
                                       "<span class='toolbar-button' style='font-style:italic'>K</span>" ],
                                     [ "'''", "'''", "", "Fettschrift",
                                       "<span class='toolbar-button' style='font-weight:bold'>F</span>" ],
                                     [ "[[", "]]", "", "Wikilink",
                                       "<span class='toolbar-button' style='color:#0000FF'>[[XY]]</span>" ],
                                     [ "[", "]", "", "Weblink",
                                       "<span class='toolbar-button'>[www]</span>" ],
                                     [ "[[Datei:", "|mini]]", "", "Dateieinbindung",
                                       "<span class='toolbar-button'>Datei:mini</span>" ],
                                     [ "<nowiki>", "</nowiki>", "", "Syntaxfrei",
                                       "<span class='toolbar-button'>&lt;nowiki&gt;</span>" ],
                                     [ "--~~~~", "", "", "Signatur",
                                       "<span class='toolbar-button'>--~~~~</span>"  ]
                                   ]
                    } };

Das letzte Element in jeder Aufzählung spezifiziert die visuelle Erscheinung; das davor einen Tooltip.

Falls ein Button-artiges Erscheinungsbild bevorzugt wird, können die optischen Elemente mit einer CSS-class toolbar-button oder anders ausgerüstet werden, beispielsweise:

app.user = { defs: { "@Toolbar": [ [ [ "''", "''", "", "Kursivschrift",
                                       "<span class='toolbar-button' style='font-style:italic'>K</span>" ],
                                     [ "'''", "'''", "", "Fettschrift",
                                       "<span class='toolbar-button' style='font-weight:bold'>F</span>" ],
                                     [ "[", "]", "", "Weblink",
                                       "<span class='toolbar-button'>[www]</span>" ]
                                 ] ]
                   } };

Eine Klassendefinition für Buttons kann verschiedenen MediaWiki-Ressourcen entnommen werden oder einer benutzerdefinierte CSS-Spezifikation wie

.toolbar-button {
   background: #D0D0D0;
   border-color: #E0E0E0 #E0E0E0 #707070 #707070;
   border-style:solid;
   border-width: 2px;
   display: inline-block;
   min-width: 1.5em;
   text-align: center;
}

Das ergibt: K F [[XY]] [www] Datei:mini <nowiki> --~~~~

Sprachauswahl

Ein Orientalist möchte „seine“ Sprachen an den Anfang stellen (true). Offenbar stören einige andere Sprachen im oberen Bereich der Liste und werden entfernt (false). Für solche Sprachen, deren Name nicht mittels true von der projektweiten Liste übernommen werden kann, wird er explizit angegeben.

Definitionen werden betreffend Style-Eigenschaften (font-family) vorgegeben. Die eigentlichen Inhalte für Xsux und Phli werden dem globalen Vorrat entnommen, wie auch alle anderen Inhalte.

if ( /^(edit|submit)$/.test( mw.config.get("wgAction") ) ) {
   function meinETSIanpasser( app ) {
      app.user = {
          "custom": [ "0",        true,
                      "[[]]",     true,
                      "ar",       true,
                      "iw",       true,
                      "Xsux",     "Keilschrift",
                      "Phli",     "Pahlavi",
                      "DMG",      true,
                      "tr",       true,
                      "IPA",      true,
                      "AHD",      true,
                      "eo",       false,
                      "et",       false,
                      "fr",       false,
                      "gl",       false,
                      "haw",      false,
                      "is",       false,
                      "it",       false
                    ],
          "defs":   { "Xsux": [ { "font-family": "Akkadian, CuneiformComposite, Free Idg Serif" } ],
                      "Phli": [ { "font-family": "ZH Mono" } ]
                    }
      };
      app.update();
   }   // meinETSIanpasser()
   mw.hook( "editToolStrIns.ready" ).add( meinETSIanpasser );
}

Container für das Gadget

Der nachstehende Code entfernt alle Werkzeugfelder und generiert ein neues Werkzeugfeld grad oberhalb des Bearbeitungsfeldes. Das Werkzeugfeld kann mitttels CSS-Deklarationen weiter dekoriert und abgegrenzt werden; #textarea-before ist dessen selbst zugewiesener Selektor.

app.user = { config: { container: { "#textarea-before": { start: "#editform",
                                                          fiat:  "before"
                                                        }
                                  }
                     }
           };