MediaWiki/Hacking interfaccia: differenze tra le versioni

=== Un semplice esempio: inserire delle iconcine alle tab ===

Premendo ''Ctrl+U'' e cercando con lo strumento apposito di FireFox (''Ctrl+F'') il titolo della pagina, veniamo rimandati ad una porzione di codice, per riconoscere i tab, basta cercare delle parole chiave, ad esempio "template", dopo varie ricerche, vedremo del codice come quello nell'esempio qui sotto:

<li id="ca-nstab-template" class="selected">

<a href="/wiki/Template:MediaWiki" title="Vedi il template [c]" accesskey="c">Template</a>

</li>

 

Sono tre righe di semplice HTML, ma in alcune possiamo trovare alcuni elementi a noi molto utili:

 

Quindi nel caso in cui volessimo aggiungere delle piccole icone al tab "template", dovremo usare il seguente codice CSS:

li#ca-nstab-template a {

padding-left: 18px;

background:url( http://Indirizzo_completo/immagine.estensione) top left no-repeat !important;

}

Questa dichiarazione CSS serve per inserire un'iconcina accanto al testo della tab "template". In particolare:

* <code>li#ca-nstab-template a</code>: questa parte del codice (selettore) serve a CSS per identificare l'elemento o gli elementi della pagina a cui applicare le dichiarazioni inserite tra le parentesi graffe: in questo caso, indichiamo di prendere tutti gli elementi <code>&lt;a&gt;</code> contenuti nell'elemento <code>&lt;li&gt;</code> che presenta l'ID <code>ca-nstab-template</code>, cioè la tab del namespace "template".

=== Notifica nuova messaggi ===

Quando un utente riceve nuovi messaggi, MediaWiki mostra un messaggio di avviso. La notifica può essere personalizzata in quanto è identificata dalla classe <code>usermessage</code>. Ad esempio:

.usermessage { /* imposta uno sfondo blu */

background: blue;

color: red;

}

 

=== Table of Content ===

La tabella dei contenuti (o "TOC") non è altro che una tabella HTML con id #toc. Possiamo ad esempio lavorare sullo span .tocnumber nascondendolo:

#toc .tocnumber {

display: none; /* nasconde l'elemento */

}

In particolare, questa dichiarazione nasconde i numeri accanto ai titoli nel TOC

 

 

In generale, per far eseguire un JavaScript in ogni pagina di MediaWiki, utilizziamo questo codice:

addOnloadHook( function () {

//le istruzioni inserite qui verranno eseguite al caricamento della pagina

}

);

 

Questa istruzione va inserita nel proprio Monobook.js (per creare un JavaScript personale) oppure nel suo omologo nel namespace MediaWiki (per far eseguire lo script in ogni pagina della wiki).

=== Creare un portlet personalizzato ===

Muovendosi tra gli oggetti del DOM, è possibile creare, modificare o eliminare gli oggetti nella pagina; per esempio è possibile creare un menu personale nella barra laterale (portlet), partendo da quelli già esistenti:

//tratto da [[User:Ramac/monobook.js]]

var barra = document.getElementById('p-navigation').parentNode; //ottiene un riferimento alla barra laterale

//inserisce infine il div nella barra laterale prima del portlet comunità

barra.insertBefore(mieiLink, com);

 

In questo modo è stato creato un nuovo box nella barra laterale (come "navigazione" o "ricerca" pronto a contenere i nostri link o i nostri oggetto [[w:HTML|HTML]]. Sarà sufficiente infatti creare un nuovo oggetto DOM e poi "appenderlo" all'elemento &lt;ul&gt; memorizzato nella variabile <code>ul</code>. Il codice seguente inserisce nel porlet appena creato un link:

var l = document.createElement('LI'); //crea un punto elenco

l.setAttribute('id','l-miolink'); //imposta un ID, non si sa mai, può servire

l.appendChild(link);

ul.appendChild(l);

Ovviamente non è possibile inserire solo link; è possibile anche inserire moduli ad esempio per creare un box di ricerca personalizzato, o qualsiasi altro elemento XHTML.

 

=== Aggiungere eventi agli oggetti della pagina ===

Per motivi di sicurezza e di comodità, è impossibile aggiungere script JavaScript all'interno delle pagine wiki tramite l'uso del tag &lt;script&gt; o gli eventi associati agli oggetti (utilizzando ad esempio gli attributi <code>onclick</code> o <code>onmousemove</code>. L'unico modo per poter aggiungere questi ''hook'' è tramite gli script personali o di sistema:

//per comodità definiamo una funzione

//la useremo per gestire l'evento click

}

);

In generale, per collegare un evento ad un oggetto della pagina, è sufficiente accedervi tramite il DOM e poi impostare correttamente la proprietà relativa all'evento da collegare.