Fardeen GHULAM Parrain de la mafia multimédia

Tutoriel Mootools 1.0 : Generation table des matieres

Et non je n'était pas mort, juste occupé alors me revoila

Au programme aujourd'hui : un petit tutoriel Mootools 1.0 sur la génération d'une table des matières automatiquement .

Vous devriez normalement la voir sur la gauche de la page

Alors pour information avant de commencer concernant les fonctionnalités :

• Génération automatique en fonction des titres de la page et ajout des anchres dans la page
• Possibilité de déplacer la table des matières en cliquant sur le titre
• Repositionnement automatique toutes les secondes avec effet de transition
• Testé sous Firefox 2.0, IE6, IE7 et Safari.
• Normalement il devrait y avoir une effet de transition pour le scroll mais IE6 est pas très gentil alors j'ai désactivé pour l'instant

Allez hop tous ca c'est dans la suite !

Si c'est pas la premiere fois que vous venez sur le site, je vous conseille de vider votre cache si le slider ou la table des matieres ne fonctionnent pas correctement.

Le HTML

Le code HTML de notre table des matières . Bien entendu il ne faut pas oublier d'inclure le fichier Mootools 1.0 que je vous laisse le soin de telecharger. Si vous captez pas de quoi je parle , rendez vous sur les anciens tutos sur Mootools.

<p id="table_matiere">&amp;nbsp;</p>

<h2>Table des matieres</h2>
<p id="loading_table_matiere">Chut, ca charge ...</p>
<img src="loading.gif" />
<ul id="liste_table_matiere">           <!-- la liste va ici se remplir toute seule de facon magique   --></ul>

Le javascript

Voila le code qui m'a bien fait galérer je dois dire. Merci IE Normalement c'est suffisament bien documenté mais si tu ne ne comprends pas et bien tant pis pour toi, n'hésite à lacher ton com.

A la fin du chargement

///////////////////////////////////////////////////////////////////////////////
//a la fin du chargement de la page
//Quand la page est chargee completement (sans les images, avec les images c'est onload)
//NB : Nouvelle syntaxe window.addEvent, le window.onLoad sera bientot deprecie, vaut mieux utiliser cette commande
////////////////////////////////////////////////////////////////////////////////
window.addEvent('domready', function(){

//pr les infobulles
init_slider();

//pr les infobulles
enableTooltips("content");
enableTooltips("sidebar");

//pr les lien externe
init_lien_externe();

//creation table des matieres
creation_table_matiere();

});

Creation de la table des matieres

/////////////////////////////////
//creation_table_matiere()
//Generation tables des matieres
//////////////////////////////////
function creation_table_matiere() {
//on active le scrolling avec transition
//new SmoothScroll();
//bugger pr l instant , attend prochaine version Mootools
/*
window.addEvent("domready", function() {
new SmoothScroll({duration: 1500, transition: Fx.Transitions.sineInOut});
});
*/

//permet de deplacer le div
$('table_matiere').makeDraggable({
handle: $("h2")  //on le deplace en cliquant sur le titre
});

//on cache la liste
var mySlider = new Fx.Slide('liste_table_matiere', {duration: 500});
mySlider.hide();

var num_titre = 0;
//on recup les titres (H3 du div #content dans mon cas)
var titres =  $$('#content h3');

var contenu_titre;
//on parcourt les titres trouves sur la page
titres.each(function(titre){

//alert(titre.innerHTML);
//titre.setProperty('name', 'titre_'+num_titre); //on affecte un name a chaque titre pour les liens crees ensuite
contenu_titre = titre.innerHTML;

//on cree une balise avant chaque titre afin de pouvoir l'atteindre ensuite
titre.innerHTML = "<a name="titre_"></a>" + contenu_titre;

//on ajoute au div liste table matiere les differents element
//je voulais mettre un scroll avec effet de transition mais IE6 il aime pas alors on se contente d'un simple lien #titre
//parcque la IE commence a me peter les youks et j'ai plus envie de debugger
$("liste_table_matiere").innerHTML = $("liste_table_matiere").innerHTML + "
	<li><a href="http://localhost/fardeen.biz/backup_13_fev_07_blog/wp-admin/#titre_">"+contenu_titre+"</a></li>
" ;
//version qui marche que sous Firefox qui integre le scroll avec Transition
//le new Fx.scroll qui permet d'avoir un effet de scroll avec transition
//desactiver la ligne suivante pour avoir plus la classe internationale 
//$("liste_table_matiere").innerHTML = $("liste_table_matiere").innerHTML + "
	<li><a href="http://localhost/fardeen.biz/backup_13_fev_07_blog/wp-admin/#">"+contenu_titre+"</a></li>
" ;

num_titre++; //ca sert a rien mais bon on sais jamais 
});

//quand c'est fini :
//on enleve le loading
$('loading_table_matiere').remove() //bye bye
//on affiche la table des matieres
mySlider.slideIn();

//on repositionne le div toute les 1 seconde
setInterval(repositionner,1000);

}

Repositionnement automatique

/////////////////////////////////////////////////////////////////////////////////////////////////////////
//Repositionner();
//Fonction qui repositionne le div table des matieres a intervalle regulier si necessaire.
//J'utilise cette fonction parcque Internet Explorer il pue du q et qu'il capte pas le position : fixed .
////////////////////////////////////////////////////////////////////////////////////////////////////////
function repositionner() {
//on declare l'effet qui fait que notre table des matiere peut bouger. On joue sur sa propriete top puisqu'on la definit en position absolute.
var effetTop = new Fx.Style('table_matiere', 'top', {duration : 700,transition: Fx.Transitions.sineOut}) ;
//retourne la position actuelle
var position_actuelle = $('table_matiere').getStyle('top');
//on positionne la table des matieres, de sa position actuelle jusqu'a l'endroit actuel de scroll
//NB : document.documentElement.scrollTop est un variable javascript de base, c'est pas du Mootools
//NB2 : C'est start(valeur depart, valeur arrive) et non plus custom() comme dans la version 0.83 de Mootools
effetTop.start(position_actuelle,document.documentElement.scrollTop);

}

Et voila !

Habillage CSS

Et le petit code CSS (à adapter pour vos besoins bien entendu)

/*pour table matiere*/
#table_matiere {
position:absolute;
left: 10px;
top: 10px;
width:250px;
/*display : none;*/
}

#table_matiere h2{
cursor : move ;
}

#loading_table_matiere {
text-align : center;
padding : 20px;
}

/*represente le ul de table matiere*/
#liste_table_matiere {
padding : 0;
margin : 0;
list-style-type:none;
padding-bottom:1em;
padding-top:1em;
}

#liste_table_matiere li {
margin-left : 0;
background : url(images/arrow_right.gif) no-repeat top left;
padding-left : 2em;
margin-bottom:0.5em;
}

Améliorations

Il y a plein d'améliorations à apporter, c'est juste un premier jet .

• Notamment la possibilité d'avoir l'arborescence complète et indenté (pas uniquement les H3).
• Améliorer l'accessibilité
• En faire un plugin Wordpres
• Verifier la compatibilité partout
• Remettre le SmoothScroll
• Acheter du pain

J'essaierai de faire ca quand j'aurais le temps. Le temps, quel merde, on en a jamais...

Avant de vous quittez, je pense que vous avez remarqué le petit slider qui vous permet dorénavant de changer la taille de la page à la volée. (parcequ' il me soulait à la longue ce design étriqué) Donc vous aurez droit très prochainement à un prochain tutoriel sur cela

J'ai également changé un peu les CSS pour améliorer votre confort de lecture tellement je vous aime. Si y a des bugs, lache ton com pour me l'indiquer.

Bisous les amis

PS : Des nouveaux scripts Mootools : Inline Edit et E2 Photo Gallery

Edit : Le script est maintenant fonctionnel avec IE7 . Pour installer IE7 en version standalone (sans perdre IE6), utilisez cet installeur (400Ko). Simple et pratique