rendez-vous sur ArraKISS
Archives ContactATOM
whoami@ybad.name
# find . -iname

    Table des matières automatique

    Sur le site du hollandaisvolant, on trouve un bout de javascript pour obtenir une table des matières automatique à partir des titres présents dans une page.

    Je l’ai un peu modifié pour qu’il ne tienne pas compte des “h1” car c’est souvent le titre de la page, et qu’il rajoute des “id” vers les différentes parties s’il n’y en a pas déjà.

    Par ailleurs, la table des matières n’apparaît que s’il y a plus de 3 titres dans une page.

    Afin d’en profiter, il suffit d’insérer dans le code html la balise suivante :

    <ul id="toc"></ul>
    

    Voici la fonction qui se charge d’afficher la table des matières:

    /* display toc */
    function toc() {
    var TOC = document.getElementById('toc'),
    	headings = document.querySelectorAll('h2, h3, h4, h5, h6'),
    	parentLevel = 2,
    	tocn = 0,
    	cursorNode = TOC;
    	if (headings.length < 3) { /* Si moins de 3, pas de toc */
    		return;
    	}
    
    	for (var i = 0, len = headings.length ; i < len ; ++i) {
    		var currentHeading = headings[i];
    		var newLevel = parseInt(currentHeading.tagName.substr(1,1));
    		var diff = newLevel - parentLevel;
    		if (diff > 0) {
    			var containerLiNode = cursorNode.lastChild;
    			var ulNode = document.createElement('UL')
    			containerLiNode.appendChild(ulNode);
    			cursorNode = ulNode;
    			parentLevel = newLevel;		
    		}
    		if (diff < 0) {
    			while (0 !== diff++) {
    				cursorNode = cursorNode.parentNode.parentNode;
    			}
    			parentLevel = newLevel;
    		}
    
    		var liNode = document.createElement('LI');
    		if (!(currentHeading.hasAttribute('id'))) {
    		tocn++;
    		currentHeading.setAttribute('id', "toc"+tocn);
    	  }
    			var link = document.createElement('A');
    			link.setAttribute('href', '#' + currentHeading.getAttribute('id'));
    			link.appendChild(document.createTextNode(currentHeading.textContent))
    			liNode.appendChild(link);
    		cursorNode.appendChild(liNode);
    	}
    }