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 :

  • VenC-Scripts-Bootstrap-x.y.z.js : ce script est obligatoire pour faire fonctionner n'importe quel module.
  • VenC-Infinite-Scroll-x.y.z.js : il s'agit du script permettant le défilement infini. Il doit être inclus après VenC-Scripts-Bootstrap.

Pour connaître la version disponible de ces scripts sur votre système, vous pouvez jeter un œil au répertoire où ceux-là sont normalement installés.

ls ~/.local/share/VenC/themes_assets/

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

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

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

    :.
:.
  • IfInThread permet de n'inclure le script que si le contexte l'exige, ce qui permet de ne pas alourdir la page inutilement. Si dans votre thème vous prévoyez de n'utiliser que le module de défilement infini, alors vous pouvez déplacer le code incluant VenC-Scripts-Bootstrap dans le premier argument de IfInThread.
  • Si vous prévoyez de distribuer votre thème, le pattern IfInfiniteScrollEnabled permet d'activer / désactiver l'inclusion du module depuis le fichier de configuration principal de votre blog à l'aide de la variable booléenne disable_infinite_scroll.

Inclure le défilement infini dans votre thème.

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

  • Vous pouvez copier le module et sa dépendance dans le répertoire assets de votre thème depuis ~/.local/share/VenC/themes_assets. C'est cette méthode qui est recommandée.
  • Vous pouvez définir un fichier de configuration de thème dans lequel vous indiquez les noms de fichier des modules que vous souhaitez voir être exporté pendant la génération de votre blog.

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. Il manque, évidemment, de nombreuses choses pour que votre thème soit pleinement opérationnel.

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>
        <!-- Insérer ici tout un tas de truc utile, genre les balises meta, title, les feuilles de styles... -->
        <script type="text/javascript" src=".:GetRelativeOrigin:.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>
    <body>
        <header>
            <!-- Les en-têtes de votre page, une bannière, un menu déroulant, un nuage de tags. Tout ce que vous voulez. -->
        </header>
        <div id="__VENC_THREAD__">

entry.html

Chaque bloc contenant une publication doit avoir la class "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>

footer.html

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

  • __VENC_LOADING__ : cet élément est optionnel, dans notre exemple, il s'agit d'une image, mais ce pourrait être n'importe quoi d'autre faisant office d'animation de chargement.
  • __VENC_NAVIGATION__ : il s'agit de l'élément contenant les liens de navigation. Quand le défilement infini est activé, par défaut cet élément est rendu invisible.
  • data-venc-api-infinite-scroll-hook : l'élément permettant au script de connaître la page suivante. Ce n'est pas nécessairement un lien, mais dans la pratique, c'est plus commode que ce soit le cas. Ce qui compte c'est qu'il a l'attribut data-venc-api-infinite-scroll-hook dont la valeur correspond au chemin de la page suivante. Cette valeur est accessible avec le pattern GetNextPage.
        </div> <!-- fin du bloc __VENC_THREAD__ -->
        .: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 navigations -->
                .: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 milliseconde, 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 permet si vous souhaitez la redéfinir de configurer l'était initial des images dans une publication au moment où celle-ci est chargé 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 souhaitez la redéfinir, 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";
}

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";
}