Handboek MediaWiki/Monobook.js

De MediaWiki kan met verschillende skins (uiterlijk) worden bekeken. De volgende skins zijn er:

• Monobook (de standaard)
• Keuls blauw
• Nostalgie
• Simple
• MySkin
• Standaard
• Chick

Het grootste gedeelte van de MediaWiki-softwaregebruikers werkt met monobook, daarom wordt hier de monobook.js behandeld. Het hier vertelde kan ook op de andere skins worden toegepast, maar het is mogelijk dat het dan iets anders werkt.

js

js staat voor javascript. Javascript is een scripttaal die wordt gebruikt om browsers te vertellen hoe ze zaken moeten weergeven.

De gebruikte javascript bestaat uit meerdere lagen:

1. de in de MediaWiki gedefinieerde code
2. De in de common.js gedefineerde code. Deze geldt voor alle gebruikers en kan alleen gewijzigd worden door een moderator/sysop.
3. de in de MediaWiki:Monobook.js gedefinieerde code, die geldt voor alle monobookskin-gebruikers (de overgrote meerderheid). Deze code kan alleen gewijzigd worden door een moderator/sysop.
4. de in de monobook.js gedefineerde code. Dit is de code die door de gebruiker zelf kan worden gemaakt. Geeft daarvoor in het zoekvenster in "Gebruiker:JouwNaam/monobook.js", of klik hier. Deze pagina kan alleen worden gewijzigd door Gebruiker:JouwNaam en een moderator/sysop.

De programmering die hieronder wordt gegeven is toepasbaar in de MediaWiki:Monobook.js en in de Gebruiker:JouwNaam/monobook.js

Eerste stap, een knopje onder het bewerkingsscherm

Laten we eerst eens een functie definiëren die een extra button onder het bewerkingsscherm plakt, die automatisch een waarschuwing geeft aan een vandaliserende anonieme gebruiker. Hiervoor moet het overleg van de anonieme gebruiker in het bewerkingsscherm open staan.

Eerst wordt er een functie aangemaakt met de naam ws (voor waarschuwing), die de acties die de knop bij aanklikken moet uitvoeren:

function ws() {
        document.editform.wpTextbox1.value = "{{ws}}\n";
        document.editform.wpSummary.value = "ws";
        document.editform.wpMinoredit.checked = false;
}

• document.editform.wpTextbox1.value is het bewerkingsscherm; {{ws}} zet het waarschuwingssjabloon in het scherm (let op de gehele inhoud van het bewerkingsscherm wordt gewist).
• document.editform.wpSummary.value is het samenvattingsboxje onder het bewerkingsscherm. Hier wordt de samenvatting gevuld met de letters ws (afkorting voor waarschuwing).
• document.editform.wpMinoredit.checked is het checkboxje onder de samenvatting. Hier wordt false meegegeven, dus niet als een kleine wijziging.

Nu moeten we nog een functie definiëren die de knop ook op het scherm zet:

function addButtons() {

str = "<input type=button value=ws onclick=\"ws()\" class=subbutt>" 
}

if(location.href.match(/action=(edit)|(submit)/)) {
  if (window.addEventListener) {
    window.addEventListener("load", addButtons, false);
  } else if (window.attachEvent) {
    window.attachEvent("onload", addButtons);
  }
}

• met str = wordt de regel gedefinieerd met het type button, met de opschrift ws (value), met het verbinden van het uitvoeren van de functie ws bij het klikken en de klasse is subbutt, hetgeen wil zeggen dat het direct onder het bewerkingsscherm wordt neergezet ????
• De tweede if-regel wordt uitgevoerd, wanneer de actie edit is gegeven (dus als op bewerk wordt gedrukt), daarna wordt de functie addButtons aangeroepen.
• addEventListener is een functie uit de MediaWiki-software.

Een tabje boven het artikelscherm

Het is soms wel handig om de pagina opnieuw te kunnen laden, dat wil zeggen om de cache te legen. Dit kan je doen door boven het artikelscherm te plaatsen (dus naast module, overleg, bewerk, geschiedenis etcetera).

Eerst maken we een procedure addPurge aan:

function addPurge()
{
    ta['ca-purge'] = ['g', 'Maak de interne cache voor deze pagina leeg'];
    if(!document.getElementById) return;
    var x = document.getElementById('ca-history');
    var tabs = document.getElementById('p-cactions').getElementsByTagName('ul')[0];
    if(!x) { return; }
    if(x.children) { x = x.children[0]; }
    else { x = x.childNodes[0]; }
    addlilink(tabs, x.href.replace(/=history/, "=purge"), 'purge', 'ca-purge');
}

• addlilink is de procedure die de tab toevoegt

function addlilink(tabs, url, name, id)
{
    var na = document.createElement('a');
    na.href = url;
    na.appendChild(document.createTextNode(name));
    var li = document.createElement('li');
    li.id = id;
    li.appendChild(na);
    tabs.appendChild(li);
    return li;
}

Dan moet de functie addPurge nog worden geladen. Dat gaat met myLoadFuncs:

 
function myLoadFuncs()
{
    addPurge();
}

Een link in de linkerkantlijn

Met de bovenstaande functie addlilink kan ook de linkerkantlijn worden bewerkt. Men kan bijvoorbeeld directe links naar handige pagina's opnemen:

function addToolBoxLinks()
{
    var tb = document.getElementById('p-tb').getElementsByTagName('ul')[0];
    addlilink(tb, '/wiki/Speciaal:Newpages', 'Nieuwe lemmas', '');
    addlilink(tb, '/wiki/Speciaal:Shortpages', 'Korte lemmas', '');
    addlilink(tb, '/wiki/Speciaal:Log', 'Logboek', '');
    addlilink(tb, '/wiki/Gebruiker:JouwNaam/monobook.js', 'monobook.js', '');
    addlilink(tb, '/wiki/Gebruiker:JouwNaam/monobook.css', 'monobook.css', '');
}

Voeg de functie addToolBoxLinks toe aan bovenstaande functie myLoadFuncs.

• De linkerkantlijn wordt gedefinieerd met tb
• De kop boven het artikel wordt gedefinieerd met tabs
• Het persoonlijke deel wordt gedefineerd met ta

Andere teksten bij het persoonlijk deel rechtsboven

Normaliter staat er boven aan mijn voorkeuren en mijn bijdragen, etcetera. Deze tekst kan best korter en die zou je dus kunnen vervangen bijvoorbeeld door voorkeuren en bijdragen, etcetera. Daarvoor kan men volgende functie gebruiken:

function changeLinks()
{
    if(!document.getElementById) return;
    // verwijder de "mijn" delen
    document.getElementById('pt-mytalk').firstChild.innerHTML = 'overleg';
    document.getElementById('pt-preferences').firstChild.innerHTML = 'voorkeuren';
    document.getElementById('pt-watchlist').firstChild.innerHTML = 'volglijst';
    document.getElementById('pt-mycontris').firstChild.innerHTML = 'bijdragen';
}

Voeg de functie changeLinks toe aan bovenstaande functie myLoadFuncs.