Utilisateur:Stephane8888/monobook.js

/* Pour replier les sous-listes de la table des matières.

 Auteur : Eiku 25 avril 2012 d'après WikiTravel

 --------------------------------------------------------

 Le code n’est pas aussi joli que chez Wikitravel, mais il fonctionne bien.

 La table des matières est, en très simplifié, comme ça :
<li class="tabletoc-1">
  <a>1 blablabla</a>
  <ul>
    <li class="tabletoc-2>
      <a>1.1 blablabla</a>
    </li>
    <li class="tabletoc-2>
      <a>1.2 blablabla</a>
      <ul>
        <li class="tabletoc-3>
          <a>1.2.1</a>
        </li>
      </ul>
    </li>
  </ul>
</li>
etc.
Donc pour chaque ul contenu en 2ème position dans un li ayant une classe en "tabletoc-*",
on ajoute un bouton à son parent. À ce bouton, on lie une fonction qui masque ou affiche
le ul en question.

*/

var foldToc = function () {
	// pour chaque niveau raisonnable de profondeur de table des matières
	for (var level = 1; level < 7; level++){
		// récupérer la liste des éléments <li> de classe "toclevel-n"
		var lis = document.getElementsByClassName ('toclevel-'+level);
		// pour chacun :
		for (var _i=0; _i<lis.length; _i++){
			var li = lis;
			// vérifier que c’est bien un <li>
			if (li.tagName.toLowerCase() != 'li') continue;
			if (li.children.length>=2){
				var ul = li.children;
				// vérifier que son 2ème enfant est un <ul>
				if (ul.tagName.toLowerCase() != 'ul') continue;
				// lui ajouter (plus tard) un élément cliquable
				var plus = document.createElement ('a');
				plus.href = "#";
				// faire que si on clique dessus et que ul est visible,
				// ça le cache, et vice versa
				plus.onclick=(function (ul,plus){
					return function (){
						console.log ('onclick');
						console.log (ul.style.display);
						if (ul.style.display=='none') {
							ul.style.display='block';
							plus.innerHTML='';
						} else {
							ul.style.display='none';
							plus.innerHTML='';
						}
					};
				})(ul,plus);
				// cliquer virtuellement dessus (pour cacher par défaut)
				plus.onclick();
				// mettre ce lien en couleur noir et monoespacé
				// pour que - et + aient la même largeur
				plus.style.fontFamily='courier, monospace, mono';
				plus.style.color='#000';
				plus.style.fontWeight='bold';
				plus.style.textDecoration='none';
				// insérer le lien comme 1er nœud du <li> courant
				li.insertBefore (plus, li.firstChild);
			}
		}
	}
}; 
window.addOnloadHook(foldToc);