Bonsoir,
Comme je le disais dans un
précédent post, je propose une traduction du Plug-In Automatic TOC & Navbar en version 0.5 qui permet de créer un sommaire ou table des matières sur une ou toutes les pages de votre site en regroupant les titres de la page; une barre de navigation est également disponible.
Si quelqu’un peut vérifier la traduction...
Code source du Plug-In :
//<?
// ***********************************************************************
// * Automatic Toc by Soda *
// * version:0.5 - license:free *
// * traduction - TylerD - http://www.whynet.org *
// ***********************************************************************
// * Ce plugin remplace <!--sommaire--> par une table des matieres *
// * avec des liens vers les titres de la page *
// * Il peut rajouter une barre de navigation (Accueil-Haut-Retour) *
// * au niveau des titres si vous placez <!--navbar--> dans la page *
// * *
// ***********************************************************************
// * Derniers ajouts : *
// * Touches "Access Key" dans la barre de navigation *
// * Possibilité d'utiliser des attibuts dans les titres (img ...) *
// * Code en anglais *
// * *
// ***********************************************************************
// * Utilisez : *
// * Ajouter un "id" dans la balise <body> comme suit <body id="dpsite"> *
// * dans votre template, si vous voulez le changer, modifiez *
// * la variable $body_id *
// * Ajouter le plugin *
// * Allez dans "Nouveau plugin" dans le manager *
// * dans "Événements système", cochez "OnWebPagePrerender" *
// * mettez "AutoTOC" ou autre chose dans le nom *
// * copier/coller le code de ce fichier dans le nouveau plugin *
// * Placer <!--sommaire--> (exactement) où vous voulez voir apparaitre *
// * la table des matières (dans le contenu de votre page ou dans *
// * votre modèle) *
// * Placer <!--navbar--> (exactement) pour obtenir une barre de *
// * navigation à chaque niveau de vos titres (sauf le premier). *
// * Si vous voulez ajouter des images à votre barre de navigation, *
// * vous pouvez utilisez les CSS comme par exemple : *
// * a.iconeprec {padding:33px 7px 2px 7px; background: transparent url(/images/page_precedente.gif) top left no-repeat;}
// ***********************************************************************
// * La bibliothèque scriptaculous est requise pour les effets de *
// * (à placer entre les balises <head></head>) *
// * <script type="text/javascript" src="manager/media/script/scriptaculous/prototype.js"></script>
// * <script type="text/javascript" src="manager/media/script/scriptaculous/scriptaculous.js"></script>
// ***********************************************************************
// * A Faire : Supprimer les erreurs (bugs) :) *
// ***********************************************************************
global $tab_titres, $navbar, $premier, $n;
// ***********************************************************************
// * Paramètres de la table des matières *
// ***********************************************************************
//classe (id) CSS pour la balise <div> (pour appliquer des styles)
$id_toc="toc";
// niveau des titres à référencer toc:2 pour <h2>, 3 pour <h3> ...
$heading_level ='2';
// portion de code HTML qui va être insérée avant la table des matières entre les deux 'END'. !!! Ne pas toucher la ligne END; !!!
$header_toc= <<< END
<h3>Table des matières</h3>
END;
// portion de code HTML qui va être insérée avant la table des matières entre les deux 'END . !!! Ne pas toucher la ligne END; !!!
$footer_toc=<<< END
END;
// Classe (class) CSS pour la liste <ul> (pour appliquer des styles)
$classe_ul ='plan';
// ***********************************************************************
// * Paramètres de la barre de navigation *
// ***********************************************************************
// Attributs ID de la balise <body> pour effectuer le lien "haut"
$body_id='#dpsite';
// Classe (class) CSS ppour la barre de navigation (pour appliquer des styles)
$navbar_classe="navibar";
// Lien "Retour"
$label_prev="Retour";
// Titre du lien "Retour"
$title_prev="Aller à la page précédente.";
// Lien "Haut de page"
$label_top="Haut de page";
// Titre du lien "Aller en haut de la page"
$title_top="Aller en haut de la page";
// Lien "Accueil"
$label_home="Accueil";
// Titre du lien "Aller à l'accueil du site"
$title_home="Aller à l'accueil du site.";
// *********** Access Key (attributs CSS d'accessibilité) à desafecter si vous ne voulez pas les utiliser
// AccessKey pour le lien "Haut de page" (à desafecter si vous ne voulez pas les utiliser) :
$AkTop='t';
// AccessKey pour le lien "Retour" (à desafecter si vous ne voulez pas les utiliser) :
$AkPrev='p';
// AccessKey pour le lien "Accueil" (à desafecter si vous ne voulez pas les utiliser) :
$AkHome='a';
// ***********************************************************************
// ********** Fin de la configuration des varialbes **********************
if (isset($AkPrev)){ $title_prev.=" (Alt-$AkPrev, Ctrl-$AkPrev)";$AkPrev="accesskey=\"$AkPrev\"";} else {$AkPrev='';}
if (isset($AkTop)) { $title_top .=" (Alt-$AkTop, Ctrl-$AkTop)"; $AkTop ="accesskey=\"$AkTop\"";} else {$AkTop='';}
if (isset($AkHome)){ $title_home.=" (Alt-$AkHome, Ctrl-$AkHome)";$AkHome="accesskey=\"$AkHome\"";} else {$AkHome='';}
$navbar="<div class=\"".$navbar_classe."\">\n";
$back=(isset($_SERVER['HTTP_REFERER']))?$_SERVER['HTTP_REFERER']:$modx->config['site_url'];
$navbar.=" <a class=\"iconeprec\" href=\"$back\" $AkPrev title=\"$title_prev\">$label_prev</a>\n";
$navbar.=" <a class=\"iconehaut\" href=\"".$_SERVER['REQUEST_URI']."$body_id\" $AkTop onclick=\"new Effect.ScrollTo('dpsite',{duration:1});return false;\" title=\"$title_top\">$label_top</a>\n";
$navbar.=" <a class=\"iconeaccueil\" href=\"".$modx->config['site_url']."\" $AkHome title=\"$title_home\">$label_home</a>\n";
$navbar.="<!-- fin navibar --></div>\n";
// ***********************************************************************
// * fin de la configuration, début du traitement *
// ***********************************************************************
$premier=true;
$insert_sommaire=false;
$all_lines = $modx->documentOutput;
// strpos plus rapide que strstr//=strstr($all_lines, "<!--sommaire");
$search = "/<!--sommaire-->/";
preg_match($search, $all_lines, $matches);
$is_sommaire=$matches[0];
//$a=($is_sommaire)?"y'a un sommaire\n":"y'a pas de sommaire\n"; //$a.=($header_toc)?"y'a un titre\n":"y'a pas de titre\n";
$insert_sommaire=($is_sommaire)?true:false;
if (!strstr($all_lines, "<!--navbar-->")) {$navbar='';}
$tab_titres =array(); // tableau contenant les titres et les noms d'ancre
$search= array ('/(<h'.$heading_level.'[^>]*)>(.+?)(<\/h'.$heading_level.'>)/sim');
$all_lines_replaced=preg_replace_callback($search, 'rep', $all_lines); //replace les titre <h2> </h2> par <h2 id=""></h2>
if (count($tab_titres)>=2 ) { //s'il existe au min 2 titres et on trouve <!--sommaire-->
$class_div=(isset($id_toc))?"<div id=\"$id_toc\">\n":'<div>\n';
$sommaire .= $class_div."$header_toc\n<ul class=\"$classe_ul\">\n";
foreach ($tab_titres as $nom_titre_h2 =>$ancre_h2 )
{
$sommaire.= " <li><a href=\"".$_SERVER['REQUEST_URI']."#". $ancre_h2."\" onclick=\"new Effect.ScrollTo('$ancre_h2',{duration:1});return false;\">$nom_titre_h2</a></li>";
}
$sommaire.= "\n</ul>\n$footer_toc\n</div>\n";
if ($insert_sommaire==true){
$all_lines_replaced=preg_replace ( array ('/<\!--sommaire-->/'),array($sommaire),$all_lines_replaced); //insere le sommaire
}
$modx->documentOutput=$all_lines_replaced; // renvoie la page modifiée
}
// }
function rep($matches)
{
global $tab_titres, $navbar,$premier;
$start_tag=$matches[1]; //<h2>
$h=trim($matches[2]); //titre dans les balises <h2> </h2>
$end_tag=$matches[3]; //</h2>
// création de l'ancre:
$nom_ancre = html_entity_decode($h);
$search=(explode('::',wordwrap(" ÀÁÂÃÄÅàáâãäåÒÓÔÕÖØòóôõöøÈÉÊËèéêëÌÍÎÏìíîïÙÚÛÜùúûüÿÑñÇç",1,'::',1)));
$replac=(explode('::',wordwrap("-AAAAAAaaaaaaOOOOOOooooooEEEEeeeeIIIIiiiiUUUUuuuuyNnCc",1,'::',1)));
$nom_ancre=str_replace($search, $replac , $nom_ancre);
$search=array('/<[\/\!]*?[^<>]*?>/si','/([\r\n])[\s]+/','/[^_A-Za-z0-9-]/','/-$/');
$replace=array('');
$nom_ancre=preg_replace ($search, $replace,$nom_ancre);// vire les accents et divers caractères
$nom_ancre=strtolower($nom_ancre); //$nom_ancre=strtolower(rawurlencode($nom_ancre));
$tab_titres[$h]=$nom_ancre; // sauvegarde du titre et de l'ancre pour le sommaire
// don't write a navbar for the first title
if ($premier) {$str="\n$start_tag id=\"$nom_ancre\">$h$end_tag\n";} else { $str=$navbar."\n$start_tag id=\"$nom_ancre\">$h$end_tag\n";}
$premier=false;
return $str;
}
//?>
Traduction des instructions
du Plug-In dans le Repository :
Ce plugin vous permet de générer automatiquement une table des matières sur n’importe quelles pages, et aussi d’ajouter une barre de navigation (Haut, Accueil, Retour) sur la page principale.
Description
La table des matières est générer par rapport aux titres contenus dans la page. Elle reprend l’ensemble des niveau des titres que vous spécifiez (h1, h2, h3...) et créé des ancres et remplace <!--sommaire--> par une tablea des matières sous forme de liens hierarchisés.
L’application tire partie des effets de défilement de Scriptaculous. La Table des matières est très facile à personnaliser avec les CSS car il s’agit uniquement de liste <ul>.
Résumé des fonctionnalités
* Uniquement basé sur des langages serveur, pas de JavaScript,
* Automatique !
* Personnalisable à souhait avec les css
* Compatible avec les standards, liste <ul>
* Le nom des ancres est générés selon les titres contenus dans la page (optimisé pour SEO)
* Utilisable seulement sur la ou les pages spécifiés
* Vous pouvez choisir le niveau des titres à indexer
* Ajouter ou non une barre de navi avant les titres et personnalisable avec les CSS et images
Instructions
* Ajouter un ID à la balise BODY : remplacer <body> par <body id="dpsite"> dans votre template si vous voulez le changer vous devez modifier $body_id
* Aller dans ressource-plugins-new plugin
* dans les évènements système cochez onWebPagePreRender
* dans le nom de plugin mettez AutoTOC (ou autre chose)
* copier/coller le code source du fichier téléchargé
* sauvegarder
* Placer <!--sommaire--> (exactement) où vous voulez insérer la table des matières (dans le contenu de votre page ou dans votre template).
* Placer <!--navbar--> (exactement) pour obtenir une barre de navigation.
Astuces
* Si vous voulez placer des images dans votre barre de navigation, vous devez personnaliser les styles suivants dans votre CSS ex:
a.iconeprec {padding:33px 7px 2px 7px; background: transparent url(/images/page_precedente.gif) top left no-repeat;}
Bonne soirée à tous
