Personnalisons Wikipédia : ajouter un système d’onglet à sa page utilisateur

Ce billet fait partie de la série “Personnalisons Wikipédia“.

La personnalisation d’aujourd’hui vous permettra d’ajouter un système d’onglets en JavaScript sur votre page utilisateur. Vous pourrez du coup profiter d’une page utilisateur différente de celle que vous montrerez au monde (par exemple, mettre une jolie image pour l’extérieur, et un gros paquet de liens/pense-bêtes affichés pour vous)

En pratique, ça fonctionne pour une quelconque  page, mais n’oubliez pas que seules les personnes ayant ce même code dans leur monobook pourrons en profiter :)

Partie HTML

Tout d’abord, créons le squelette de notre page à onglets

1) un div vide pour le menu « onglets »

<div id="ongletMenu" />

Il est possible de créer le menu de l’onglet entièrement en JavaScript, mais je suis assez flemmard. Du coup, je créée le « conteneur » directement en HTML, et me contenterais de le remplir ensuite en javascript.

Le menu étant en JavaScript, là encore, seul vous et les personnes ayant ce code dans leur monobook pourrons le voir.

2) Un div pour la vue par défaut

<div id="onglet0">

(ici le contenu)

</div>

Vous mettrez à l’intérieur de ce div ce que vous voulez faire apparaitre pour le commun des mortels : son contenu sera affiché par défaut.

3) D’autres divs pour vos contenus cachés

<div id="onglet1" style="display:none;">

....

</div>

<div id="onglet2" style="display:none;">

....

</div>

<div id="onglet3" style="display:none;">

....

</div>

Chaque div correspond à un onglet. Comme vous l’aurez sans doute remarqué, display:none spécifie qu’ils n’apparaitront pas sur la page par défaut.

Le code de votre page ressemble donc à ceci :

Partie JavaScript

Comme dans le billet précédent, nous allons utiliser une fonction de mon invention pour nous faciliter la vie, cette fois ci createAdressNode(). Comme son nom l’indique, elle encapsule la creation d’un node lien et nous le retourne.

Syntaxe :

createAdressNode(‘lien’, ‘texte du lien’, ‘code JavaScript‘)

Le 3eme paramètre de cette fonction est optionnel et permet de spécifier un code à éxecuter lorsque le lien sera cliqué. Nous nous en servirons pour dire « lorsque je clique sur ce lien, alors afficher ce div (=cet onglet) et cacher les autres ».

createAdressNode() étant présent dans mediawiki:common.js (car utilisé par deux de mes gadgets), vous n’aurez aucune page (bibliothèque de fonctions) à importer cette fois ci.

Note : createLiAdressNode() possède aussi ce paramètre optionnel.

1) la fonction qui génèrera le menu onglets

Je n’entrerais pas dans les détails car ce sont des éléments déjà vu dans l’autre billet. Par contre, chaque action reste commentée.

function ongletsPageUser() {
    //afficher l'onglet 1 par defaut (c'est normalement le 0 qui est visible )
    document.getElementById("onglet0").style.display = "none" //masquer
    document.getElementById("onglet1").style.display = "block" //afficher

    //on recupere le futur conteneur du menu onglets
    var ongletMenu = document.getElementById("ongletMenu")

    //ajout des liens dedans.
    //le "return afficherOnglet(x)" indique qu'en cliquant dessus, cela appellera la fonction js "afficherOnglet"
    // ...  avec en parametre le numero de l'onglet que l'on veux faire apparaitre
    ongletMenu.appendChild( createAdressNode('#', 'Défaut',    'return afficherOnglet(0);') )
    ongletMenu.appendChild( document.createTextNode( ' - ' ) ) //on sépare chaque lien par un node texte contenant un tiret et deux espaces.
    ongletMenu.appendChild( createAdressNode('#', 'Principal', 'return afficherOnglet(1);') )
    ongletMenu.appendChild( document.createTextNode( ' - ' ) )
    ongletMenu.appendChild( createAdressNode('#', 'Outils',    'return afficherOnglet(2);') )
    ongletMenu.appendChild( document.createTextNode( ' - ' ) )
    ongletMenu.appendChild( createAdressNode('#', 'Autre',     'return afficherOnglet(3);') )
}

Ce qui vous affichera, une fois appelée, quelque chose comme ça, dont vous êtes bien-entendu invité à améliorer l’apparence avec un peu de CSS (vous connaissez son id) :

Note importante : aucune vérification n’est faite sur l’existence des éléments aux id « onglet0 », « onglet1 » et « ongletMenu ».

Ce qui veux dire que si vous lancez cette fonction sur une page qui ne les possèdent pas, l’exécution du code JavaScript s’arrêtera en erreur en essayant de mettre des liens dans quelque chose qui n’existe pas (si « ongletMenu » absent) ou en tentant de changer le CSS d’éléments d’existant pas (le display pour « onglet0 » et/ou « onglet1 »). Selon le navigateur, cela causera un « plantage »  de la fonction (FF3, sans doute d’autres), ou de toute la page (auquel cas aucun code appelé après ne sera exécuté) ; donc faites bien attention à ne pas l’appeler n’importe ou :) J’indiquerais plus bas une manière de limiter l’appel à la page qui va bien.

Dans un code plus propre (et donc plus compliqué), des tests seraient faits pour vérifier que chaque node existe. Mais je garde ça pour une prochaine fois : le but de ce tutoriel est de rester le plus simple possible.

2) la fonction qui permet de changer d’onglet

La fonction ci dessous réalise le changement d’onglets en lui même.

Comme elle ne sais pas quel onglet est actuellement activé, elle passe tous les onglets qu’elle trouve à « display:none » – c’est à dire qu’elle parcoure chaque identifiant possible (onglet0, onglet1…ongletN) et s’arrête lorsque celui demandé n’existe pas- , puis passe celui qu’on lui demande d’afficher en « display:block ».

//afficher un onglet, masquer tous les autres
function afficherOnglet(numero) {
  //cette boucle est générique : elle marche pour 4 onglets, comme elle marchera pour 40. Pratique si vous en voulez un nombre différent :)
  for (var i=0 ; (onglet = document.getElementById("onglet"+i)) ; i++) {
     onglet.style.display="none"
  }
  document.getElementById("onglet"+numero).style.display="block"
  //retourner false reviens à repondre "non" à la demande de clic (c'est à dire que la page ou pointe le lien ne sera pas ouverte)
  return false
}

3) Gestion de l’appel à la fonction

Le code ci dessous détermine quand la fonction sera lancée (en l’occurrence, uniquement lorsque vous visitez votre page utilisateur).

Il y a la gestion d’un seul appel ici, mais je me sert de cette même fonction pour gérer l’appel à toutes mes fonctions JavaScript, donc ce même bout de code sera réutilisé dans tous mes prochains billets sur le sujet.

function main() {
   if ( wgPageName == "Utilisateur:(votre pseudo à la place de cette parenthèse)" ) {
       ongletsPageUser()
   }
}

addOnloadHook(main)

Et Voila le travail !