1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265
| <script type="text/javascript">
/*
* Script table des matières. Ce script est publié sous licence GPL
* article : http://giminik.developpez.com/articles/javascript-dom/table-des-matieres/
* date : 2005-09-14
* http://www.gnu.org/copyleft/gpl.html
* Vous pouvez le modifier librement et le redistribuer.
* Merci de m'indiquer tout bug, incompatibilité, amélioration
* à giminik at redaction-developpez.com
*/
/* Cette fonction permet d'afficher/cacher le contenu d'un élément dont on
* connaît l'identifiant : containerId. Ici, on s'en sert pour cacher la
* liste de liens. En même temps, le nom de classe de l'élément titre de
* la liste est modifié afin de pouvoir lui affecter un style CSS.
* containerId : l'identifiant de l'élément html à afficher cacher.
* classOpened : le nom de la classe à donner à l'élément html lorsqu'il est
* affiché.
* classClosed : le nom de la classe à donner à l'élément html lorsqu'il est
* caché.
*/
function TCSwap(containerId, classOpened, classClosed) {
var linkList = document.getElementById(containerId).lastChild;
var listTitle = document.getElementById(containerId).firstChild;
if (linkList.style.display != 'none') {
linkList.style.display = 'none';
listTitle.className = classClosed;
}
else if (linkList.style.display != 'block') {
linkList.style.display = 'block';
listTitle.className = classOpened;
}
}
/* Cette fonction génère la table des matière. Elle construit les éléments
* html et les insère dans l'arborescence du document.
*
* contentId : seuls les titres contenus dans l'élément (et ses sous éléments)
* ayant comme id contentId seront utilisés pour la table des matières.
* ce doit être un identifiant valide et existant.
* insertBeforeId : la table des matières sera insérée juste avant l'élément
* portant cet identifiant. ce doit être un identifiant
* valide et existant.
* containerId : le nom du conteneur sera celui passé en paramètre. cet
* identifiant ne doit pas déjà être utilisé dans la page.
* minHead : par exemple 5 pour titre h5 : les titres hiérarchiquement inférieurs
* sont ignorés. doit être compris entre 1 et 6.
* maxHead : par exemple 2 pour titre h2 : les titres hiérarchiquement supérieurs
* sont ignorés. doit être compris entre 1 et 6 et doit être inférieur
* à minHead.
* tableHeadLevel : un titre est inséré pour annoncer la table des matières.
* utilisez 3 pour que le titre de cette table des matières soit
* h3. doit être compris entre 1 et 6.
* clickable : booléen indique si la table des matières est rétractable sur
* l'évènement click. doit prendre comme valeur true ou false.
*/
function contentTable(contentId, insertBeforeId, containerId, minHead,
maxHead, tableHeadLevel, clickable) {
var contentTableTitle = 'Table des matières';
var anchorName = 'tableDesMatieres';
var anchorsNumberingBeginning = 0;
var openedClass = 'ouvert';
var closedClass = 'ferme';
if (!document.getElementById) return;
if (!minHead || minHead < 1 || minHead > 6) {
minHead = 6;
}
if (!maxHead || maxHead < 1 || maxHead > minHead) {
maxHead = 1;
}
if (!tableHeadLevel || tableHeadLevel < 1 || tableHeadLevel > 6) {
tableHeadLevel = 2;
}
if (document.getElementById(containerId)) {
alert(containerId + ' already exists in this page!');
return;
}
else if (!document.getElementById(insertBeforeId)) {
alert(insertBeforeId + ' is not an existing id!');
return;
}
else if (!document.getElementById(contentId)) {
alert(contentId + ' is not an existing id!');
return;
}
else {
var TCContainer = document.createElement('div');
TCContainer.id = containerId;
var content = document.getElementById(contentId);
var chapters = Array();
headTag(content, chapters);
if (chapters.length < 2) return;
var TCTitle = document.createElement('h' + tableHeadLevel);
TCTitle.appendChild(document.createTextNode(contentTableTitle));
TCContainer.appendChild(TCTitle);
var theList = document.createElement('ul');
if (clickable) {
TCTitle.onclick = function() { TCSwap(containerId, openedClass, closedClass) };
TCTitle.className = openedClass;
theList.onclick = function() { TCSwap(containerId, openedClass, closedClass) };
}
for (var i = 0; i < chapters.length; i++) {
var titleNumber = parseInt(chapters[i].nodeName.charAt(1));
if (titleNumber <= minHead && titleNumber >= maxHead) {
var anItem = document.createElement('li');
var aLink = document.createElement('a');
aLink.appendChild(document.createTextNode(inText(chapters[i])));
anItem.className = chapters[i].nodeName.toLowerCase();
if (chapters[i].id) {
aLink.href = '#' + chapters[i].id;
}
else {
do {
anchorsNumberingBeginning++;
} while (document.getElementById(anchorName + anchorsNumberingBeginning))
chapters[i].id = anchorName + anchorsNumberingBeginning;
aLink.href = '#' + chapters[i].id;
}
anItem.appendChild(aLink);
theList.appendChild(anItem);
}
}
TCContainer.appendChild(theList);
var beforeElement = document.getElementById(insertBeforeId);
var theParent = beforeElement.parentNode;
theParent.insertBefore(TCContainer, beforeElement);
}
}
/* Cette fonction ajoute récursivement la liste des balises d'en-têtes à l'intérieur
* d'un noeud dans le tableau passé en paramètres. Afin de conserver l'ordre et de
* prendre en compte tous les éléments d'un noeud, cette fonction est récursive.
* node : Il s'agit du noeud dans lequel on recherche les éléments titre.
* headArray : Il s'agit du tableau dans lequel on va ajouter les noeuds
* des éléments titre Hn.
*/
function headTag(node, headArray) {
var childrenNumber = node.childNodes.length;
for (var i = 0; i < childrenNumber; i++) {
var element = node.childNodes[i];
var elementName = element.nodeName.toLowerCase();
if (elementName == 'h1' || elementName == 'h2' || elementName == 'h3'
|| elementName == 'h4' || elementName == 'h5'
|| elementName == 'h6') {
headArray[headArray.length] = element;
}
else {
headTag(element, headArray);
}
}
}
/* Cette fonction retourne le texte contenu dans un noeud, uniquement le texte.
* Le texte est épuré de toutes les balises intermédiaires.
* node : le noeud pour lequel on ne souhaite récupérer que la partie textuelle.
*/
function inText(node) {
var childrenNumber = node.childNodes.length;
var foundString = "";
if (childrenNumber == 0) {
return node.nodeValue;
}
else {
for (var i = 0; i < childrenNumber; i++) {
foundString += inText(node.childNodes[i]);
}
return foundString;
}
}
</script> |
Partager