Personnalisons Wikipédia : enrouler/dérouler des sections

Ce billet fait partie de la série « Personnalisons Wikipédia ».  Avez vous déjà rêvé de pouvoir plier/déplier des sections entières du bistro ou d’un article quelconque de notre belle Wikipédia  ? Grâce à la personnalisation d’aujourd’hui, c’est maintenant possible juste en cliquant sur le titre de la section.

Exemple par l’image, prise sur le bistro du jour  :

(faites pas attention à la couleur de fond grise, c’est un de mes autres test CSS)

*clic* sur « Le bistro/7 mars 2010 » => enroulé avec toutes ses sous-sections !

un autre clic dessus pour le re-dérouler.

Si le titre est un lien,  alors cliquez à droite du texte, ça marche aussi.

Malheureusement, il se trouve que j’ai totalement la flemme d’expliquer comment fonctionne la partie javascript (en plus, il y a un bout assez compliqué) ; donc je me contenterais de vous fournir le code :)

Comme d’habitude, le code est à insérer dans votre sous page monobook ou vector selon le skin MediaWiki  que vous utilisez.

Partie à mettre dans votre monobook.css (ou vector.css)

Ce petit bout de CSS est la raison de la colorisation différente (+ mise en italique) des titres repliés dans l’image ci dessus. « neko_toogle_cache » est le nom de la classe CSS que le code javascript donne aux titres repliés, pour pouvoir savoir qu’ils sont repliés et qu’ils faut « déplier » en cas de nouveau clic sur le titre.

/* couleur des titres dont la section est cachée par la fonction toogle */
.neko_toogle_cache {
  color:#333;
  font-style:italic;
}

Partie à mettre dans votre monobook.js (ou vector.js)

Pas d’explication détaillée pour cette partie là, désolé (juste les commentaires du code). Peut être plus tard, je vous promet rien :)

/* Cette fonction ajoute un "onclick" sur chaque titre, qui lancera un appel à toogleTitle() lors d'un clic sur ceux ci */
function ImplementToogleOnclick() {

   for( var titleLevel = 1 ; titleLevel < 7 ; titleLevel++) {
      var titleList = document.getElementsByTagName('h' + titleLevel)
      var nb = titleList.length
      for( var b = 0 ; b < nb ; b++) {
          titleList[b].setAttribute('onclick', "toogleTitle(this)");
      }
   }
}
addOnloadHook(ImplementToogleOnclick)

/* Cette fonction, quand invoquée, fait disparaitre ou réaparaitre le contenu placé sous un titre jusqu'au prochain titre de niveau egal ou supérieur
(= un h3 s'arrete au prochain h2 ou h3 mais continuera s'il rencontre un h4 ou h5) */
function toogleTitle(p_this) {
  var p_niveau = p_this.nodeName.substring(1,2) //le 1 de h1 (ou 2 de h2, etc.)

  //construction de l'expression reguliere permettant le trouver le prochain titre de niveau égal ou supérieur
  var stopMatch = "(h1"
  for(var a = 2 ; a <= p_niveau ; a++)  {
    stopMatch += "|h"+a
  }
  stopMatch += ")"
  reg = new RegExp(stopMatch, "i" )

  //on ajoute une classe (neko_toogle_cache) au titre pour savoir s'il est en mode replié
  if( p_this.className != "neko_toogle_cache") { //il faut  replier
     p_this.className = "neko_toogle_cache"
     var display_to_put = "none"
  } else { //il faut faire déplier
     p_this.className = ""
     var display_to_put = "block"
  }

  var nextSiblingNode = p_this.nextSibling

  while( nextSiblingNode ) {
     if(  nextSiblingNode.nodeName.match(reg) ) break; //on a atteint le titre "bloquant" suivant = stop

     if( nextSiblingNode.style) { //certains nodes sont des nodes texte et n'ont pas de style.
        nextSiblingNode.style.display = display_to_put
        if( nextSiblingNode.className = "neko_toogle_cache") nextSiblingNode.className = "" // x
     }
     nextSiblingNode = nextSiblingNode.nextSibling //on passe au voisin suivant
  }
}