bigfoot

Un plugin qui facilite l’utilisation des notes de bas de page en les affichant dans des infobulles à l’aide d’un peu de javascript.

Le constat de l’auteur du script :

Les notes de bas de page sur le web sont une plaie. Tu dois d’abord essayer de cliquer sur un tout petit nombre qui te renvoie quelque part vers le bas de la page, tu lis la note que tu cherchais, puis tu cliques de nouveau sur un petit nombre pour remonter là où tu étais dans la page.

La solution proposée par bigfoot :

  • le bloc des notes en bas de page est masqué ;
  • les liens vers les notes de bas de page sont remplacés par des boutons afin de les rendre plus facile à cliquer ;
  • au clic, le contenu de la note apparaît dans une infobulle directement à côté du bouton, ce qui évite le défilement vers le bas de la page ;
  • l’infobulle est redimensionnée et positionnée automatiquement pour assurer une lecture confortable de son contenu (même sur petit écran).

De plus, les notes de bas de page sont bien visibles lors de l’impression.

Voici un aperçu du rendu d’une note ouverte dans une infobulle :

Copie d'écran montrant l'apparence d'une bulle d'aide affichant une note de base de page avec bigfoot
Copie d’écran montrant l’apparence d’une bulle d’aide affichant une note de base de page avec bigfoot

Le plugin agit automatiquement sur les notes des pages de votre site, aucune configuration ou adaptation n’est nécessaire. Simple et efficace :)

updated on 2 October 2019

Discussion

23 discussions

  • 9

    Bonjour, et merci pour cet excellent plugin!

    Quand je l’installe sur mon site le texte dans la bulle est précédé d’un paragraphe vide <p></p> ce qui crée un espace disgracieux en début de bulle (en bas aussi).

    Sauriez-vous comment me débarrasser de ces balises génantes?

    Merci,
    Abel

    Reply to this message

  • 1

    Depuis le passage à littlefoot, les notes de bas de page ne sont pas detectés si on est en url arbo....

    Reply to this message

  • 7

    Le passage à la version 1.3.0 SVN [117561] fait disparaître les notes, la fenêtre est vide :

    Site sous SPIP 3.2.4 [24285] avec SPIPr-dist

    • heu... “chez moi ca marche”. tu pourrais m’envoyer par mail le contenu de ton article?

    • question pratique : quelle version de bigfoot avait tu avant?

    • En investiguant cela semble du à la règle inline :
      .littlefoot-footnote__content {max-height:0};

    • Je vois pas ce que la version 1.3.0, qui n’a pas changé cela, viendrait faire.

    • Alors je viens de faire un test en passant un autre site de la version 1.1.1 à 1.3 de ce plugin.
      Et bien avec la version 1.3 j’ai l’erreur sur Firefox mais avec Chromium cela fonctionne
      (avec la 1.1.1 cela fonctionnait pour les 2 navigateurs).
      Je continue mes tests car c’est peut-être un problème chez moi.
      La page testée : https://www.admrduhautleon.com/aide-aux-seniors

    • chez moi, avec firefox, cette page marche. cache navigateur?

    • Non j’ai tout vidé, possiblement un conflit avec un plugin Firefox.

    Reply to this message

  • 4

    Bonjour
    Je viens de passer mon site en 3.2. Tout fonctionne bien.
    Juste un petit bug étrange, dites-moi si vous arrivez à le reproduire :

    Créez un article avec une note dans le texte de l’article.
    Enregistrez le. Pas de souci, la note apparait correctement dans la page de visualisation de l’article de l’espace privé.

    Cliquez sur “modifier l’article”. Enregistrez le à nouveau sans rien changer.
    Et là, la note que vous avez créée apparait plusieurs fois....
    Si on crée plusieurs notes, le phénomène se répète (voir la photo jointe).
    Si vous rafraichissez la page, le bug disparait.

    Ce bug n’apparait que dans l’espace privé.

    Etrange non ?

    • Salut et merci pour le signalement, la version 1.1.1 devrait corriger ça, cf https://zone.spip.org/trac/spip-zone/changeset/115983

    • C’est bon. C’est corrigé avec la nouvelle version 1.1.1.
      Merci ;-)

    • Bonjour b_b
      Le texte apparaissant au survol d’une note est “See Footnote X”.
      Ce texte est défini en “dur” dans la fonction insert_head du pipeline.

      A part surcharger le fichier “bigfoot_pipelines.php” (en en faisant une copie dans le dossier “squelettes”), y aurait-il un moyen plus simple de modifier ce texte une bonne fois pour toutes sans avoir à vérifier la compatibilité de la surcharge à chaque amélioration de version du plugin ?

      Merci d’avance pour ta réponse.

    • Bah deja c’était un pipeline, donc tu aurais pu brancher ton pipeline après pour faire la correction.

      Cela étant, avec la version 1.3.0 du plugin, c’est devenu une chaîne de langue (en français du coup). Redefinissable comme n’importe quelle chaîne de langue.

    Reply to this message

  • Bonjour,
    J’aimerais utiliser ce plugin... hélas je voudrais de nombreuses notes dans le texte du plugin “Encart” afin de ne pas avoir à les écrire chaque fois.
    et ça ne marche pas
    Merci de votre aide
    Cordialement

    Reply to this message

  • 3

    Hello,
    Je voulais avoir le joli bouton bigfoot mais en même temps garder les notes visibles en bas des articles (oui je fais ma compliquée mais je trouve que c’est plus facile pour le lecteur)

    Pour info (et pour référence pour y penser lors d’une future mise à jour du plugin) j’ai réussi en modifiant :

    bigfoot_pipelines.php / commenter la ligne
    /*jQuery('div.notes').hide();*/
    pour voir le titre h2 des notes

    bigfoot.js / commenter la ligne
    //  $relevantFootnote.addClass("footnote-print-only");

    perso.css / ajout de :
    .notes { max-width: initial;}

    dd

    • pas hyperpropre de modifier directement le plugin, surtotu que que si c’est dans un pipeline tu peux modifier toi même après coup, en créant ton propre pipeline.

    • D’accord mais je ne sais pas de quel pipeline il s’agit.

      PS en parlant d’espace : est-ce possible de coller l’appel de note au texte qui le précède pour empêcher qu’il se retrouve à la ligne tout seul (en fonction de la largeur du texte)

    • bah heu... insert_head, vu que ce c’est là qu’ai le code dans bigfoot_pipelines.php

      pour l’appel de note et les espaces, normalement si tu colle directement dans le texte, ca suit.

    Reply to this message

  • 7

    Petit bug avec la dernière version (1.0.6)

    si j’ai

     à partir de 18 ans[[Note]]

    la note n’est pas bigfootée (je comprend pas pourquoi). Alors qu’avec

     à partir de 18 ans [[Note]]

    c’est bigfooté. Il y a juste une espace supplémentaire. Hors en note normal, cet espace devrait pas exister.

    • Testé à l’instant, je ne reproduis pas. Il me faudrait l’extrait de texte complet pour t’en dire plus.

    • hum, c’est pas ca. Il doit y avoir autre chose. Parfois mes notes ne sont pas bigfooté, et je comprend pas pourquoi.

    • Trouvé : la regexp des ancres de notes posait problème si on avait plusieurs série de notes dans l’article (typiquement si #TEXTE est utilisé aussi dans le head pour calculer le meta description).

      J’arrivais pas à comprendre le bug car lorsqu’on vient d’éditer un texte via crayons, le calcul “instantanée” des notes produisait bien les ancres attendus par la regexp.

      Bref, corrigé en https://zone.spip.net/trac/spip-zone/changeset/115437/spip-zone

    • Pour memoire, avec un spip 3.2.4, juste bigfoot activé.

      Un article dont le contenu est

      s[[aaa]]sss s
      s[[aaa]]
      s[[aaa]]
      s[[aaa]]
      s[[aaa]]
      s[[aaa]]s[[aaa]]
      s[[aaa]]
      s[[aaa]]s[[aaa]]s[[aaa]]s[[aaa]]
      s[[aaa]]s[[aaa]]
      s[[aaa]]
      s[[aaa]]s[[aaa]]s[[aaa]]s[[aaa]]
      s[[aaa]]s[[aaa]]
      s[[aaa]]
      s[[aaa]]s[[aaa]]s[[aaa]]

      Le squelette dist génère

      <p>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-1' class='spip_note' rel='appendix' title='aaa' id='nh2-1'>1</a>]</span>sss s<br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-2' class='spip_note' rel='appendix' title='aaa' id='nh2-2'>2</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-3' class='spip_note' rel='appendix' title='aaa' id='nh2-3'>3</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-4' class='spip_note' rel='appendix' title='aaa' id='nh2-4'>4</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-5' class='spip_note' rel='appendix' title='aaa' id='nh2-5'>5</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-6' class='spip_note' rel='appendix' title='aaa' id='nh2-6'>6</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-7' class='spip_note' rel='appendix' title='aaa' id='nh2-7'>7</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-8' class='spip_note' rel='appendix' title='aaa' id='nh2-8'>8</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-9' class='spip_note' rel='appendix' title='aaa' id='nh2-9'>9</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-10' class='spip_note' rel='appendix' title='aaa' id='nh2-10'>10</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-11' class='spip_note' rel='appendix' title='aaa' id='nh2-11'>11</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-12' class='spip_note' rel='appendix' title='aaa' id='nh2-12'>12</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-13' class='spip_note' rel='appendix' title='aaa' id='nh2-13'>13</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-14' class='spip_note' rel='appendix' title='aaa' id='nh2-14'>14</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-15' class='spip_note' rel='appendix' title='aaa' id='nh2-15'>15</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-16' class='spip_note' rel='appendix' title='aaa' id='nh2-16'>16</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-17' class='spip_note' rel='appendix' title='aaa' id='nh2-17'>17</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-18' class='spip_note' rel='appendix' title='aaa' id='nh2-18'>18</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-19' class='spip_note' rel='appendix' title='aaa' id='nh2-19'>19</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-20' class='spip_note' rel='appendix' title='aaa' id='nh2-20'>20</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-21' class='spip_note' rel='appendix' title='aaa' id='nh2-21'>21</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-22' class='spip_note' rel='appendix' title='aaa' id='nh2-22'>22</a>]</span><br class='autobr' />
      s<span class="spip_note_ref">&nbsp;[<a href='#nb2-23' class='spip_note' rel='appendix' title='aaa' id='nh2-23'>23</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-24' class='spip_note' rel='appendix' title='aaa' id='nh2-24'>24</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href='#nb2-25' class='spip_note' rel='appendix' title='aaa' id='nh2-25'>25</a>]</span></p>

      dans le core de texte

      ce qui était pas supporté avant le commit https://zone.spip.net/trac/spip-zone/changeset/115437/spip-zone.

      En revanche, côté espace privé, on avait

      <p>s<span class="spip_note_ref">&nbsp;[<a href="#nb1" class="spip_note" rel="appendix" title="aaa" id="nh1">1</a>]</span>sss s<img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb2" class="spip_note" rel="appendix" title="aaa" id="nh2">2</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb3" class="spip_note" rel="appendix" title="aaa" id="nh3">3</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb4" class="spip_note" rel="appendix" title="aaa" id="nh4">4</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb5" class="spip_note" rel="appendix" title="aaa" id="nh5">5</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb6" class="spip_note" rel="appendix" title="aaa" id="nh6">6</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href="#nb7" class="spip_note" rel="appendix" title="aaa" id="nh7">7</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb8" class="spip_note" rel="appendix" title="aaa" id="nh8">8</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb9" class="spip_note" rel="appendix" title="aaa" id="nh9">9</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href="#nb10" class="spip_note" rel="appendix" title="aaa" id="nh10">10</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href="#nb11" class="spip_note" rel="appendix" title="aaa" id="nh11">11</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href="#nb12" class="spip_note" rel="appendix" title="aaa" id="nh12">12</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb13" class="spip_note" rel="appendix" title="aaa" id="nh13">13</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href="#nb14" class="spip_note" rel="appendix" title="aaa" id="nh14">14</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb15" class="spip_note" rel="appendix" title="aaa" id="nh15">15</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb16" class="spip_note" rel="appendix" title="aaa" id="nh16">16</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href="#nb17" class="spip_note" rel="appendix" title="aaa" id="nh17">17</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href="#nb18" class="spip_note" rel="appendix" title="aaa" id="nh18">18</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href="#nb19" class="spip_note" rel="appendix" title="aaa" id="nh19">19</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb20" class="spip_note" rel="appendix" title="aaa" id="nh20">20</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href="#nb21" class="spip_note" rel="appendix" title="aaa" id="nh21">21</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb22" class="spip_note" rel="appendix" title="aaa" id="nh22">22</a>]</span><img src="../local/cache-vignettes/L10xH10/br-auto-10-8beb9.png?1552570736" alt="Retour ligne automatique" title="Retour ligne automatique" class="br-auto" width="10" height="10"><br class="autobr">
      s<span class="spip_note_ref">&nbsp;[<a href="#nb23" class="spip_note" rel="appendix" title="aaa" id="nh23">23</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href="#nb24" class="spip_note" rel="appendix" title="aaa" id="nh24">24</a>]</span>s<span class="spip_note_ref">&nbsp;[<a href="#nb25" class="spip_note" rel="appendix" title="aaa" id="nh25">25</a>]</span></p>

      ce qui était géré.

    • Reprenons, il semble bien que tu n’utilises pas la dist pour tes tests.

      Je vois que ton problème vient du fait que tu utilises le code suivant dans le head de ta page :

      1. [<meta name="description" content="(#TEXTE*|match{<intro>}|?{#INTRODUCTION{99999999999999999},#INTRODUCTION}|attribut_html|trim)" />]

      L’utilisation de la balise texte fait que les notes du texte sont bien traités deux fois dans ta page, même si elle ne sont pas affichée lors de la première utilisation. On passe donc dans traiter_raccourci_notes() avec $marqueur_notes qui vaut 2 cf https://zone.spip.net/trac/spip-zone/browser/_core_/plugins/textwheel/inc/notes.php#L148

      Le problème peut aussi se présenter si on utilise des notes dans le texte et dans le PS d’un article.

      Concernant ton patch, il me semble que l’ajout dans la regex n’est pas bon, je pense que /(nb\d+(-\d+)?(footnote|appendix))/gi serait plus juste, car ta version rend optionnelle la présence de l’attribut rel avec une valeur à footnote ou appendix.

    • comme explicaton complémetaire : oui sur le site astro je n’utilise pas la dist. Mais pour le coup j’ai fait les tests sur une dist, justement pour eliminer les bruits de l’astro :)

      Cela étant tu a raison sur le patch. Mais ce que je comprend pas c’est que http://www.bigfootjs.com/ dit concernant “anchorPattern” concerne le href, pas le rel. Donc je vois même pas ce que footnote|appendix vient faire là.

    • Cela étant tu a raison sur le patch. Mais ce que je comprend pas c’est que http://www.bigfootjs.com/ dit concernant « anchorPattern » concerne le href, pas le rel. Donc je vois même pas ce que footnote|appendix vient faire là.

      < b_b‎ >  parce que
      < b_b‎ >  c'est dans le code du script
      < b_b‎ >  en résumé, le script teste ça aussi
      < b_b‎ >  sinon il risquerait d'attraper n'importe quel lien qui porte ce type de href
      < b_b‎ >  cf https://zone.spip.net/trac/spip-zone/browser/spip-zone/_plugins_/bigfoot/javascript/bigfoot.js#L40

    Reply to this message

  • 2

    Salut,

    suggestion d’un ami: puisqu’on fait disparaitre, en pratique, la note de bas de page, en mettant directement sur place, ne pourrait-on pas remplacer le numéro d’appel de note par un point d’interrogation.

    Sachant évidement qu’en impression il faudrait garder le numéro de note.

    Qu’en penses tu ? Une option à ajouter ?

    • Salut, c’est faisable en css avec la règle suivante .bigfoot-footnote__button::after { content: "?" }, et je préfère éviter l’ajout d’option :)

    • yep, tu as raison, mieux vaut ne pas mettre d’option et tout gérer niveau css.

    Reply to this message

  • 3

    bonjour

    j’ai mis ce plugin ce matin (spip 3.2 squelette escal

    on ne voit pas le bouton, quelle que soit la couleur du fond de page pour article

    plus noir ou color xx serait bien

    merci

    • Salut, tu peux très bien personnaliser la couleur pour tes besoins depuis un fichier perso.css ou autres. Quelle est l’url de la page où on peut voir le plugin en action ?

    • pour l’instant je fais mes essais en local
      je vais faire un article dans un site en ligne..
      j’enverrai le lien ensuite

    • je vais faire un article en ligne

    Reply to this message

  • Pour info après changement des bornes

    compatibilite=“[3.0.0;3.2.*]”

    RAS

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom