Table des matières repliée par défaut

Par défaut, lorsque l'on arrive sur une page de DokuWiki, la table des matières est dépliée. Nous allons voir comment inverser ce comportement : le contenu de la table des matières sera alors invisible au chargement de la page et c'est l'utilisateur qui devra cliquer sur l'entête de la table des matières pour afficher son contenu.

Cette astuce est directement repiquée du thème Typo de Michael Klier.

1) Dans le répertoire de configuration de DokuWiki¹⁾, créez un fichier userscript.js contenant ceci :

addInitEvent(function() {
  var toc = $('toc__inside');
  if(toc) {
    toc.style.display   = 'none';
  }
});

Alternativement, vous pouvez aussi mettre ce code dans le fichier script.js du répertoire de votre thème.

2) Videz le cache manuellement ou attendez qu'il expire automatiquement pour voir le résultat.

1. Dans le fichier CSS du template, chercher

   div.dokuwiki #toc__inside {
   	border: 1px solid __border__;
   	background-color: __background__;
   	text-align: left;
   	padding: 0.5em 0 0.7em 0;
   	}

2. Ajouter display:none; à la fin pour obtenir

   div.dokuwiki #toc__inside {
   	border: 1px solid __border__;
   	background-color: __background__;
   	text-align: left;
   	padding: 0.5em 0 0.7em 0;
   	display:none;
   	}

1. Ouvrir le fichier lib/scripts/script.js
2. Chercher

   /**
    * Adds the toggle switch to the TOC
    */
   function addTocToggle() {
       if(!document.getElementById) return;
       var header = $('toc__header');
       if(!header) return;
    
       var obj          = document.createElement('span');
       obj.id           = 'toc__toggle';
       obj.innerHTML    = '<span>&minus;</span>';
       obj.className    = 'toc_close';
       obj.style.cursor = 'pointer';
    
       prependChild(header,obj);
       obj.parentNode.onclick = toggleToc;
       try {
          obj.parentNode.style.cursor = 'pointer';
          obj.parentNode.style.cursor = 'hand';
       }catch(e){}
   }
    
    
   /**
    * This toggles the visibility of the Table of Contents
    */
   function toggleToc() {
     var toc = $('toc__inside');
     var obj = $('toc__toggle');
     if(toc.style.display == 'none') {
       toc.style.display   = '';
       obj.innerHTML       = '<span>&minus;</span>';
       obj.className       = 'toc_close';
     } else {
       toc.style.display   = 'none';
       obj.innerHTML       = '<span>+</span>';
       obj.className       = 'toc_open';
     }
   }

3. Remplacer par ceci :

   /**
    * Adds the toggle switch to the TOC
    */
   function addTocToggle() {
       if(!document.getElementById) return;
       var header = $('toc__header');
       if(!header) return;
    
       var obj          = document.createElement('span');
       obj.id           = 'toc__toggle';
       obj.innerHTML    = '<span>&minus;</span>';
       obj.className    = 'toc_open';
       obj.style.cursor = 'pointer';
    
       prependChild(header,obj);
       obj.parentNode.onclick = toggleToc;
       try {
          obj.parentNode.style.cursor = 'pointer';
          obj.parentNode.style.cursor = 'hand';
       }catch(e){}
   }
    
   /**
    * This toggles the visibility of the Table of Contents
    */
   function toggleToc() {
     var toc = $('toc__inside');
     var obj = $('toc__toggle');
     if(toc.style.display == 'block') {
       toc.style.display   = '';
       obj.innerHTML       = '<span>&minus;</span>';
       obj.className       = 'toc_open';
     } else {
       toc.style.display   = 'block';
       obj.innerHTML       = '<span>+</span>';
       obj.className       = 'toc_close';
     }
   }

— Laynee 2008/08/13 15:43

Cette méthode n'est pas compatible avec les greffons qui génèrent autre chose que du html (par exemple le greffon odt)

Créer ou éditer le fichier entities.local.conf dans le répertoire de configuration de dokuwiki²⁾ et mettre le code suivant dedans. Attention, tout doit tenir sur une seule ligne

• code pour les versions de DokuWiki plus anciennes que 2011-11-10 (Angua)

  ~~closetoc~~ <script language="javascript" type="text/javascript">addInitEvent(function(t){if(t=$('toc__inside'))t.style.display='none';});</script>

• code pour les versions de DokuWiki à partir de 2011-11-10 (Angua)

  ~~closetoc~~ <script language="javascript" type="text/javascript">jQuery(function(){jQuery('div\x23toc__header').click();});</script> 

Ensuite, il suffit d'écrire ~~closetoc~~ dans une page pour que celle ci apparaisse avec une table des matières initialement repliée.

— schplurtz 2011/06/25 12:56

Ce sujet est-il toujours à jour ? La modification simple dans userscript.js ne fonctionne pas.

— karibou 2013/12/30 23:22