Darkoneko's Weblog

Yesterday, today, and no future / time waits for no one

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

Posted by DarkoNeko sur lundi 8 mars 2010

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
  }
}


Advertisements

9 Réponses to “Personnalisons Wikipédia : enrouler/dérouler des sections”

  1. […] trouverez ci dessous une mise à jour du code de mon précédent billet, Personnalisons Wikipédia : enrouler/dérouler des sections, qui vous permet de masquer ou réafficher des sections de pages de Wikipédia en cliquant sur leur […]

  2. Coyau said

    Ça tombe bien, le menu de gauche est sur le bord. (Je connais la sortie, merci).

  3. Coyau said

    FF 3.6
    Ça ne le fait pas sur toutes les sections, ça le fait quand il y a un titre (de section, pas le titre de la page) au-dessus du sommaire, par exemple ici, quand j’enroule et déroule « Le Bistro/8 mars 2010 ».

    • DarkoNeko said

      uuh je pense avoir trouvé :
      il y a un
      script class= » » style= »display: block; » type= »text/javascript »
      //![CDATA[
      if (window.showTocToggle) { var tocShowText = « afficher »; var tocHideText = « masquer »; showTocToggle(); }
      //]]
      /script

      juste sous le sommaire qui se prend un « display:block » lors du déroulage. Je corrige le script pour prendre ça en compte ce soir :)

  4. DarkoNeko said

    urk, c’est un bout du code du repli/dépli du sommaire ça. ça ne me le fait pas chez moi, quel navigateur as-tu ?

  5. Coyau said

    Groumpf ! Bien sûr, un truc entre chevrons, ça passe pas ici. La même chose avec un chevron en moins : « ////<![CDATA[ if (windows.showTocToggle) {var tocShowText = "afficher"; car tocHideText = "masquer"; showTocToggle(); }//]] »

  6. Coyau said

    Ça faisait longtemps…

    Tiens, ça m’ajoute « // » sous le sommaire quand je re-déroule le titre au-dessus du sommaire.

  7. É-norme. T’as bien fait de ne pas expliquer, j’aurais pas compris.

Sorry, the comment form is closed at this time.