Créer une webpart de génération de sommaire automatique des titres d’une page de publication pour le publishing de SharePoint 2010

Voici un petit bout de code rapide pour réaliser un sommaire des titres (H1) dans une page de publication assez longue, avec un retour vers le sommaire sous le titre :

var WebPart_SommaireAncres_Variable_Sommaire_CodeRetourSommaire = "<div class='WebPart_Sommaire_RetourSommaire'><a class='WebPart_Sommaire_RetourSommaire_a' href='#Sommaire'>Retour Sommaire</a><img class='WebPart_Sommaire_RetourSommaire_img' src='/_layouts/DemoCorp/images/WebPart_Sommaire_Fleche-Haut.png' /></div>"

jQuery(document).ready(function () {

    var divMainResize = document.getElementById('MainResize');

    /* Ajout des ancres sur les H1 */
    var divh1Array = divMainResize.getElementsByTagName('h1');
    for (var i = 0; i < divh1Array.length; i++) {
        // Ajoute l'id qui permet au menu d'identifier le titre
        jQuery(divh1ArrayIdea).attr("id", "sommaireIndex" + i);
        // Ajoute le lien de retour vers le sommaire
        jQuery(divh1ArrayIdea).after(WebPart_SommaireAncres_Variable_Sommaire_CodeRetourSommaire);
    }

    /* Ajout du sommaire */
    var elSommaire = jQuery("<a name='Sommaire'></a>");
    jQuery(divMainResize).prepend(elSommaire);
    // Génération du sommaire
    var elContenuSommaire = jQuery("<div id='WebPart_Sommaire'></div>").appendTo(elSommaire);
    jQuery("<h1 class='WebPart_Sommaire_h1'>Sommaire</h1>").appendTo(jQuery(elContenuSommaire));
    var elSommaireListe = jQuery("<ul class='WebPart_Sommaire_Liste_Lien_ul'></u>");
    jQuery(elSommaireListe).appendTo(jQuery(elContenuSommaire));
    for (var i = 1; i < divh1Array.length; i++) { // Début à 1 car nous ajoutons un H1 avec le titre du sommaire
        var contenuLi = jQuery("<li class='WebPart_Sommaire_Liste_Lien_li'></li>");
        jQuery(contenuLi).appendTo(elSommaireListe);
        var contenuLinkLi = jQuery("<a class='WebPart_Sommaire_Liste_Lien_a' href='#sommaireIndex" + (i - 1).toString() + "'>" + divh1ArrayIdea.innerHTML + "</a>");
        jQuery(contenuLinkLi).appendTo(contenuLi);
    }
});

Avec un peu de CSS et des images cela devrait rendre quelque chose de pas mal du tout !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *