SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 221 visiteurs en ce moment

Accueil > Rédaction > Affichage dans texte > Filtre Note Bulle 1.0

Filtre Note Bulle 1.0

Filtre pour afficher les notes dans des info-bulles...

11 mai 2008 – par FredoMkb – commentaires

1 vote

Petit filtre pour afficher les notes de bas de page, insérées dans un article ou dans une brève, dans des info-bulles personnalisables...

Avant Propos

Il arrive parfois, surtout pour des longs articles, que la consultation des notes de bas de page, par des aller/retour répétés dans le texte, perturbe la fluidité de la lecture.

De plus, il arrive souvent que les info-bulles, affichées automatiquement grâce à l’attribut « title » des liens des notes se trouvant dans le texte, se révèlent être bien trop limitées pour afficher l’ensemble du texte de la note.

Pour ces raisons, et suite à une demande dans les forums techniques du squelette MiniGriSpip, j’ai imaginé un petit filtre qui permet d’afficher une info-bulle personnalisable, par des styles Css, directement sous le lien de la note de bas de page située dans le texte de l’article.

Le fonctionnement « normal » du lien est préservé, mais l’apparition de l’info-bulle originale (attribut « title ») est inhibée, avec un petit bout de code JavaScript, afin qu’elle ne perturbe pas l’affichage de l’info-bulle personnalisée.

Installation

Ce filtre est constitué d’une fonction Php qui analyse le texte de l’article (ou brève) pour ajouter quelques balises Html autour des notes de bas de page existantes.

Le code Php du filtre est le suivant :

Pour installer ce filtre, il suffit d’éditer le fichier « mes_fonctions.php » de votre squelette puis d’ajouter, au début, juste après la balise d’ouverture <?php, le code publié ci-dessus.

Attention !

Les balises « cadre » et « code » ont été légèrement modifiés dans le code publié ici, en ajoutant une espace après le « <" et avant le "> », histoire que l’affichage dans cette page ne soit pas perturbé. Si vous utilisez ce code par un simple copier/coller, veillez à enlever les espaces en trop dans ces deux balises.
Pour éviter tout bogue lors du copier/coller, le plus judicieux serait d’utiliser le code fourni dans le fichier « note_bulle.php » disponible dans l’archive « .zip » téléchargeable à la fin du présent article.

Formatage

Pour que les info-bulles puissent s’afficher correctement, il faut ajouter à la fin de la feuille de styles principale de votre squelette, deux styles supplémentaires que voici :

Ces styles de base correspondent à une utilisation avec le squelette MiniGriSpip, mais vous pouvez les personnaliser à souhait selon besoins.

L’idéal serait que la largeur de l’info-bulle corresponde à la largeur de la colonne de texte de vos articles et/ou brèves, histoire de pouvoir accéder, avec le curseur de la souris, au contenu de l’info-bulle et ainsi pouvoir cliquer sur les éventuels liens présents.

Intégration

Pour pouvoir utiliser ce filtre, il faut l’intégrer dans les fichiers Html correspondant aux articles et/ou brèves de votre squelette, dans la balise « #TEXTE » des boucles « ARTICLES » et « BREVES » respectivement.

Voici deux exemples d’intégration, ici en nous basant toujours sur le squelette MiniGriSpip, mais la méthode reste identique pour tout autre squelette.

Il suffit donc de remplacer la balise « #TEXTE » originale, dans la boucle « ARTICLES » du fichier « article.html », par une de ces propositions (suivant votre version de Mgs), ou à adapter au code de votre squelette :

-  MiniGriSpip version 1.4.x :

-  MiniGriSpip version 1.6.0 :

Mêmes changements pour la balise « #TEXTE » dans la boucle « BREVES » du fichier correspondant.

Important

Il faut que la balise « #TEXTE » soit suivie d’un astérisque avant le premier filtre et que le filtre « note_bulle » soit suivie du filtre « propre » afin d’assurer le formatage typographique normal de Spip.

Utilisation

L’utilisation de ce filtre est très simple, il suffit d’utiliser deux raccourcis légèrement différents des originaux de Spip, qui sont les doubles crochets « [ » d’ouverture et deux autres crochets « ] » de fermeture, pour entourer les contenus des notes de bas de page.

Ce filtre s’utilise donc avec exactement les mêmes raccourcis mais en y ajoutant une barre verticale « | » après les doubles crochets d’ouverture «  » et une autre barre verticale «  » de la note de bas de page.

Ce qui donne :

Texte [[|Ceci est une note de bas de page qui sera affichée sous forme d'info-bulle.|]]

La barre verticale « | » est un caractère obtenu par la combinaison des touches « alt + shift + L » (sur Mac et pour un claver Azerty, pour d’autres plate-formes ou claviers il faudra chercher la correspondance).

Voici un petit exemple d’affichage d’une info-bulle :

Important

Bien entendu, le raccourcis originaux des notes de bas de pages de Spip restent toujours utilisables, les deux syntaxes peuvent ainsi cohabiter sans aucun souci dans le même texte.

Téléchargement

Voici une archive « .zip » avec le code Php du filtre, une feille de style avec les formatages des info-bulles et un exemple d’intégration dans un fichier « article.html » (issu du squelette MiniGriSpip 1.6.0).

Filtre « NoteBulle »

Remerciements

À Vincent, sur les forums techniques de Mgs, à tous les utilisateurs du squelette MiniGriSpip et, bien-sûr, à toute la communauté de Spipeurs.

Voir en ligne : Filtre Note Bulle 1.0

Dernière modification de cette page le 11 mai 2008

Retour en haut de la page

Vos commentaires

  • Le 16 novembre 2010 à 21:58, par zaa En réponse à : Filtre Note Bulle 1.0

    Bonjour,

    Sur SPIP 2.1, la fonction fait planter SPIP. Je ne sais pa ce qui cause ça. C’est bien dommage, car c’est vraiment un super script, qui à mon avis devrait être intégré dans le core de SPIP.

    Pensez-vous le mettre à jour pour la version 2.1 ?

    Merci

    Répondre à ce message

  • Le 3 septembre 2008 à 16:39, par abel En réponse à : Filtre Note Bulle 1.0

    Bonjour, bravo et merci pour cette contrib’ bien utile !
    Une très bonne idée !

    J’aimerai savoir s’il était possible de légèrement modifier la fonction pour que cela marche sur toutes les notes spip. C’est à dire pour que l’on ne soit pas obligé d’ajouter de barre verticale dans les raccourcis SPIP.

    En générale, les rédacteurs pour qui je travaille se servent de la barre de typo, voir utilisent une macro Word pour SPIP. De plus il y a beaucoup de vieux articles sur le site qu’il faudrait retoucher pour ajouter cette fonction partout.

    J’ai essayé de tripoter le code mais n’étant pas très fort en PHP, le résultat n’est pas satisfaisant.
    Cela ne marche pas sur toutes les notes, certaines disparaissent carrément de l’article.

    Merci de me dire où je me suis planté.

    Ci dessous, le code de la fonction modifiée par mes soins :

    <?php
    /**********************************************************************************************************/
    /* Filtre "note_bulle" 1.0 */
    /* ---------------------------------------------------------------------------------------------------- */
    /* Infos : GPL - 04/08 (c) FredoMkb */
    /* Utilisation : #TEXTE*|note_bulle|propre */
    /* Usage : Insere des balises "span" qui s'affichent comme info-bulles lors de leur survol */
    /* Voir styles Css "notebulle" associes */
    /* ---------------------------------------------------------------------------------------------------- */
    function note_bulle($texteOrig) {
    // Fonction pour creer des info-bulles dans le texte des articles et breves.
    // La fonction verifie l'existence des balises ouvrantes "[[|" et fermantes "|]]"
    // si c'est le cas, elle les remplace par une balise survolable affichant une info-bulle
    // avec tout le contenu des balises, meme s'il est formate en Html.
           
            // Test de l'existence des info-bulles.
            preg_match("#\\[\\[(.*?)\\]\\]#iU", $texteOrig, $testInfoBulle);
           
            // Si un des info-bulles existent, alors on genere les balises survolables.
            if ($testInfoBulle[1] != false) {

                    // On exclu les textes des codes et cadres
                    $texteOrigClean = preg_replace('#< cadre>(.*?)< /cadre>#s','',$texteOrig);
                    $texteOrigClean = preg_replace('#< code>(.*?)< /code>#s','',$texteOrigClean);
           
                    // Recuperation des toutes les info-bulles presentes dans le texte nettoye.
                    preg_match_all('#\\[\\[(.*?)\\]\\]#iU', $texteOrigClean, $listeOrig);
                                   
                    // On place le resultat dans une variable et on initialise les autres variables.
                    $listeInfoBullesOrig = $listeOrig[1];
                    $lienDebut = '<span class="notebulle" onmouseover="this.childNodes[1].setAttribute(\'title\', \'\');">[[';
                    $lienCentre = ']]<span>';
                    $lienFin = '</span></span>';
                   
                    // Boucle sur chaque element de la liste des info-bulles recuperees.
                    foreach ($listeInfoBullesOrig as $textInfoBulleOrig) {
                            $textInfoBulleNew = $lienDebut.$textInfoBulleOrig.$lienCentre.$textInfoBulleOrig.$lienFin;
                            $texteOrig = str_replace("[[".$textInfoBulleOrig."]]", $textInfoBulleNew, $texteOrig);
                    };
            };
            // Retour du texte modifie.
            return $texteOrig;
    }
    /**********************************************************************************************************/
    ?>

    merci

    • Le 3 septembre 2008 à 16:43, par abel En réponse à : Filtre Note Bulle 1.0

      PS : pour résumer, j’ai juste viré les barres verticales du code dans « Test de l’existence des info-bulles », « Recuperation des toutes les info-bulles presentes dans le texte nettoye » et à la fin : « "[[".$textInfoBulleOrig."]]" »

      merci.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Le plugin ZotSpip

    28 mai 2012 – 138 commentaires

    Synchronise Spip avec une bibliothèque (personnelle ou partagée) de références bibliographiques Zotero. Utilisez Zotero pour gérer / importer / rédiger vos références bibliographiques, puis incorporez vos références bibliographiques dans votre Spip avec (...)

  • ScolaSPIP 4

    19 janvier 2016 – 213 commentaires

    ScolaSPIP est plugin-squelette responsive personnalisable pour sites Web d’établissements scolaires basé sur SPIPr Présentation de ScolaSPIP Ce plugin pour SPIP 3 est développé par la Dane de l’académie de Versailles pour les webmestres de cette (...)

  • MediaBox

    10 mai 2010 – 514 commentaires

    Avertissement Le présent plugin est installé et activé par défaut sur toute les version de SPIP > 3.0. Inutile donc de l’installer manuellement sauf si vous utilisez SPIP 2.1. Aperçu La MediaBox est une Boîte multimédia polyvalente et (...)

  • Sommaire automatique

    31 janvier 2013 – 14 commentaires

    Ce plugin repère les intertitres des textes de vos articles et s’en sert pour génèrer un sommaire. Ce dernier peut être inséré automatiquement au début de chaque article, ou utilisé dans les squelettes pour générer un sommaire sur n’importe quel autre (...)

  • La Fabrique

    20 avril 2012 – 316 commentaires

    La Fabrique est un outil pour webmestres ou développeurs qui souhaitent créer des plugins. La Fabrique est capable de générer le code source minimal d’un plugin pour SPIP 3 (elle accélère donc le démarrage d’un plugin) et peut s’occuper également de (...)

Ça spipe par là