User:PerfektesChaos/js/editToolStrIns/User Customization/Example/de
Auf dieser Seite werden einige Beispiele für fortgeschrittene Konfigurationen dargestellt.
mw.hook
Registrierung der Konfiguration
edit
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
editDie 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'><nowiki></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
editEin 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
editDer 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"
}
}
}
};