4.6.2.2 Défilement infini

Ce module Javascript permet de charger automatiquement les pages du blog quand vous arrivez à la fin de la page courante.

Inclure le défilement infini dans votre page

Pour pouvoir utiliser ce module, vous devez inclure dans le fichier header.html de votre thème deux scripts :

Une bonne façon de faire est d'inclure ces deux scripts de la façon suivante :

<script type="text/javascript" src=".:GetRelativeRoot:.VenC-Scripts-Bootstrap-x.y.z.js"></script>

.:IfInfiniteScrollEnabled::
    .:IfInThread::
        <script type="text/javascript" src=".:GetRelativeRoot:.VenC-Infinite-Scroll-x.y.z.js"></script>
    ::

    :.
:.

Inclure le défilement infini dans votre thème

Il y a deux façons de procéder :

Structure d'une page

Pour que le défilement infini fonctionne, votre thème doit être structuré d'une certaine manière, que nous allons détailler ici.

Les exemples ci-dessous constituent un code minimal pour faire fonctionner le défilement infini.

header.html

Comme nous l'avons vu, il faut que les scripts soient inclus dans le fichier header.html. Idéalement de la façon suivante :

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src=".:GetRelativeRoot:.VenC-Scripts-Bootstrap-x.y.z.js">
        </script>
        .:IfInfiniteScrollEnabled::
            .:IfInThread::
                <script type="text/javascript" src=".:GetRelativeOrigin:.VenC-Infinite-Scroll-x.y.z.js">
                </script>
            ::
        
            :.
        :.
    </head>

entry.html

Chaque bloc contenant une publication doit être de la classe "entry". Sinon, le script de défilement infini n'est pas capable de reconnaître les publications qu'il doit charger.

            <div class="entry">
                <!-- Contenu de la publication -->
            </div>

Ici il y a trois éléments à considérer qui devrait se trouver dans footer.html mais qui, si votre choix de mise en page l'impose, pourrait se trouver dans header.html. Chaque élément ne devrait être présent qu'une et une seule fois dans la page.

        .:GetBlogMetadataIfExists::
            loading_image
        ::
            <img id="__VENC_LOADING__" src=".:GetRelativeOrigin:.{value}" />
        :.
        <footer>
            <div id="__VENC_NAVIGATION__">
                <!-- Insérer ici des patterns VenC permettant de générer les liens de navigation -->
                .:GetNextPage::
                    <a id="next" href="{path}" data-venc-api-infinite-scroll-hook="{path}">→</a>
                :.
            </div>
        </footer>
    </body>
</html>

Personnaliser le défilement infini

VenC fourni une API pour personnaliser le défilement infini. Pour cela, vous pouvez modifier les attributs de la variable globale VENC_INFINITE_SCROLL.

hideVenCNavigation

hideVenCNavigation: true

Normalement, les liens de navigation (numéro de page, page suivante/précédente) contenus dans l'élément ayant l'id __VENC_NAVIGATION__ sont désactivés pour le défilement infini. Mais il est possible de ne pas le faire et laisser ces éléments visibles en changeant la valeur de cette variable.

interval

interval: 250

Cette variable définit le temps, en millisecondes, entre chaque test visant à savoir si la fin de la page a été atteinte et donc s'il faut charger la suite. La valeur par défaut est 250 millisecondes.

imageDefaultSetup

imageDefaultSetup: function(img) {}

Cette méthode ne fait rien par défaut, mais si vous le souhaitez vous pouvez y configurer l'était initial des images dans une publication au moment où celle-ci est chargée dans le DOM.

entryDefaultSetup

entryDefaultSetup: function(entry) {
    entry.style.opacity = "0.0";
}

Cette méthode permet d'initialiser l'état d'une publication au moment où elle est chargée dans le DOM. Par défaut, les publications sont invisibilisées.

onLoadImage

onLoadImage : function(img) {}

Par défaut, cette fonction ne fait rien de particulier, mais permet si vous le souhaitez de configurer l'état ou l'animation d'apparition d'une image au moment où son téléchargement est terminé.

onLoadEntry

onLoadEntry : function(entry){
    entry.style.transition = "opacity 0.5s ease";
    entry.style.opacity = "1.0";
}

Par défaut quand une publication est chargée, elle apparaît avec une petite animation de transparence. Vous pouvez redéfinir la fonction pour créer l'animation que vous souhaitez.

dontWait

dontWait: false

Par défaut, VenC attend que la page en cours de chargement soit entièrement téléchargée avant de récupérer la suivante. Il est possible en changeant la valeur de cette variable à True, de charger plusieurs pages en même temps, ce n'est cependant pas recommandé.

loading

Quand le chargement d'une page est en cours, le script rend par défaut visible l'icône de chargement de la page, si l'élément HTML ayant pour id __VENC_LOADING__ existe. Cet élément est passé en argument à la fonction suivante, qu'il est possible de redéfinir :

loading : function(loading_image) {
    loading_image.style.opacity = "1.0";
}

idle

Quand le chargement est inactif, le script rend par défaut invisible l'icône de chargement de la page, si l'élément HTML ayant pour id __VENC_LOADING__ existe. Cet élément est passé en argument à la fonction suivante, qu'il est possible de redéfinir :

idle : function(loading_image) {
    loading_image.style.opacity = "0.0";
}