Pagination «à la Facebook»

This is an « educational contribution » which shows, with concrete example, how to develop a new functionality for SPIP.

SPIP propose un système de pagination qui marche très bien, on peut également faire une pagination « à la Facebook » qui en cliquant un lien permet d’ajouter au dessous des éléments affichés des publications plus anciennes sans recharger toute la page.

C’est l’occasion d’utiliser le critère {ajax} qui permet exactement ceci lors de l’appel d’une inclusion.

La doc de SPIP est comme d’habitude très claire et très précise.

Lien
-  ajax pour les inclure sur spip.net

Prenons l’exemple d’une page d’accueil où sont affichés les 5 derniers billets. Nous allons ajouter un lien «Billets plus anciens» au dessous du 5ème billet, qui déclenchera l’affichage de 5 billets supplémentaires.

Sur le squelette sommaire.html, la boucle qui affiche les 5 derniers articles se présente ainsi :

<BOUCLE_recents(ARTICLES){!par date}{0,5}>
<h1><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></h1>
... 
</BOUCLE_recents>

Tout d’abord déplaçons cette boucle sur un squelette inclus inc-recentposts.html

Sur sommaire.html, le squelette est inclus avec

<INCLURE{fond=inc-recentposts}{env}{nb=#ENV{nb,5}}{ajax}>

La variable nb sert à donner le nombre d’articles à afficher [1], par défaut égal à 5, le critère {ajax} indique que seul le fichier inclus devra être rafraîchi lorsqu’on clique un lien portant la classe ajax.

Dans le fichier inclus, le critère d’itération de la boucle principale doit donc être modifié pour afficher les nb premiers articles et non les 5 premiers.

<BOUCLE_recents(ARTICLES){!par date}{0,#ENV{nb}}>
<h1><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></h1>
... 
</BOUCLE_recents>

Au bas de la boucle, ajoutons un lien ajaxé qui déclenche le rafraîchissement du squelette inclus en incrémentant nb de 5.

<p><a class="ajax" href="[(#SELF|parametre_url{nb,[(#ENV{nb}|plus{5})]})]">Billets plus anciens</a><p>

A ce stade ça fonctionne, mais au moment du rafraichissement le focus revient sur le haut du fichier inclus, la page remonte au premier billet. Pour plus de lisibilité, il vaut mieux que la page reste où elle est.

Utilisons une ancre, nommée #more, placée sur le dernier élément affiché avant ajout, soit le nb-5ème post.

Pour ajouter cette ancre, l’affichage du détail des posts devient :

<BOUCLE_recents(ARTICLES){!par date}{0,#ENV{nb}}>
<h1[ (#COMPTEUR_BOUCLE|plus{5}|=={#ENV{nb}}|?{id,""})="more"]><a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a></h1>
... 
</BOUCLE_recents>

L’appel ajaxé des billets supplémentaires devient donc :

<p><a class="ajax" href="[(#SELF|parametre_url{nb,[(#ENV{nb}|plus{5})]})#more]">Billets plus anciens</a><p>

Et voilà !

Exemple sur cette page : http://another.teacher.free.fr/

Footnotes

[1on peut également passer le nombre d’articles à afficher dans l’URL

updated on 2 October 2019

Discussion

13 discussions

  • 1

    Excellent.

    Petites critiques constructives :
    -  on recharge la partie déjà chargée, ça paraît inutile (mais c’est peut-être plus difficile à faire)
    -  à partir du moment où on clique c’est qu’on veut en voir plus, il faudrait en donner tout de suite pas mal plus (c’est idiot de cliquer pour 5 liens, puis 5 autres, puis 5 autres)

    • pour le nombre de billets à afficher au départ et à chaque voyage, c’est bien sûr adaptable aux besoins et aux envies de chacun, au besoin par CFG. chez moi de 5 en 5 ça me convient bien pour l’instant ^^

    Reply to this message

  • Reply to this message

  • C’est top !
    Il semble que sur le lien qui sert de démo il te manque le #more sur le h1 (il est bien indiqué sur le lien en revanche).

    Reply to this message

Ajouter un commentaire

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