Pagination infinie
Ce plugin propose un modèle de pagination infinie utilisable simplement :
<BOUCLE_articles(ARTICLES) {!par date} {pagination}>
<div class="hentry clearfix">
[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{150,*})]
<h3 class="h2 entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
<small><abbr class="published">[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:> (#LESAUTEURS|supprimer_tags)]</small>
[<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
</div>
</BOUCLE_articles>
[<nav role="navigation" class="p pagination">(#PAGINATION{infinie})</nav>]
</B_articles>
Par défaut, le bouton affiche un label « Plus… » correspondant à la chaine de langue pagination_infinie:label_plus
Il est possible de le personaliser au cas par cas via
[<nav role="navigation" class="p pagination">(#PAGINATION{infinie,label_plus="Voir plus d'articles…"})</nav>]
Fonctionnement
Le modèle modeles/pagination_infinie.html
insère également le script javascript/pagination_infinie.js
qui se charge d’ajouter une callback en debut et en fin de loading de la pagination.
La callback de début de loading pagination_infinie_loading
pose une class .loading
sur la pagination, ce qui permet d’afficher un loader svg pendant le chargement des contenus.
Après chargement des contenu, la callback pagination_infinie_loaded
prends la main sur le comportement normal de la pagination et ajoute les nouveaux contenus à ceux déjà affichés.
Cas des boucles avec parties avant/après
La pagination recharge tout le contenu de la boucle, ce qui inclue
- l’entête de boucle
<BB_xx>
- la partie conditionnelle avant
<B_xx>
- la partie conditionnelle après
</B_xx>
- le pieds de boucle
<BB_xx>
Si votre boucle utilise ces parties là, alors le html qu’elles produisent sera envoyé et affiché à chaque fois qu’une nouvelle page est chargée, ce qui va être totalement redondant.
Par exemple dans le cas ci-dessous, le titre <h2>Articles récents</h2>
sera réaffiché à chaque clic sur « Plus... », et surtout on réinjectera à chaque fois le conteneur
<div class="menu menu_articles" id="articles_recents">
<B_articles>
<div class="menu menu_articles" id="articles_recents">
<h2>Articles récents</h2>
#ANCRE_PAGINATION
<ul>
<BOUCLE_articles(ARTICLES) {!par date} {pagination}>
<li html dir="#LANG_DIR" class="hentry clearfix text-#LANG_LEFT">
[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{150,*})]
<h3 class="h2 entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
<small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:> (#LESAUTEURS|supprimer_tags)]</small>
[<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
</li>
</BOUCLE_articles>
</ul>
[<nav role="navigation" class="p pagination">(#PAGINATION{infinie,label_plus="Voir plus d'articles…"})</nav>]
</div><!--#articles_recents-->
</B_articles>
Pour remédier à cela, il est possible d’indiquer à la pagination quel est le contenu à réinejcter, via une classe .pagination-infinie-contenu
comme suit :
<B_articles>
<div class="menu menu_articles" id="articles_recents">
<h2>Articles récents</h2>
#ANCRE_PAGINATION
<div class="pagination-infinie-contenu">
<ul>
<BOUCLE_articles(ARTICLES) {!par date} {pagination}>
<li html dir="#LANG_DIR" class="hentry clearfix text-#LANG_LEFT">
[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{150,*})]
<h3 class="h2 entry-title"><a href="#URL_ARTICLE" rel="bookmark">#TITRE</a></h3>
<small><abbr class="published"[ title="(#DATE|date_iso)"]>[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:> (#LESAUTEURS|supprimer_tags)]</small>
[<div class="#EDIT{intro} introduction entry-content">(#INTRODUCTION)</div>]
</li>
</BOUCLE_articles>
</ul>
[<nav role="navigation" class="p pagination">(#PAGINATION{infinie,label_plus="Voir plus d'articles…"})</nav>]
</div>
</div><!--#articles_recents-->
</B_articles>
Dans ce cas, le script sait que seul l’intérieur de ce <div class="pagination-infinie-contenu"> ... </div>
doit être pris en compte, et il sera ajouté à celui déjà présent.
Attention a bien y inclure la #PAGINATION
pour avoir un lien vers la page suivante !
Par exemple ici on ne peut pas mettre la classe sur le <ul>
car sinon la nouvelle page chargée n’aurait pas de pagination.
Du coup cela veut dire aussi qu’après chaque chargement on aura un <ul>...</ul>
de plus, et non les <li>..</li>
qui s’ajoutent à la liste précédente.
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |