Des rechargements Ajax avec des transitions personnalisables
En me penchant sur les librairies JS de transitions entre pages telles que https://barba.js.org ou https://swup.js.org, je me faisais la réflexion qu'on a déjà quasiment tout ce qu'il faut dans Spip pour avoir l'équivalent avec les rechargements de blocs Ajax.
Il ne s'agirait pas d'ajouter une ces libs hein, mais juste d'étendre le mécanisme actuel dans "ajaxCallback.js":https://git.spip.net/spip/spip/src/branch/master/prive/javascript/ajaxCallback.js, ce qui devrait permettre de reproduire la chose à peu de frais (pour les blocs ajax, pas des pages entières donc). Je n'ai pas encore regardé en détail, mais il semblerait qu'il ne manque pas grand chose.
Pour rappel, ces libs reposent entièrement sur des animations CSS pour les transitions, animations personnalisables au cas par cas : c'est souple et facile à personnaliser. Des classes sont ajoutées au conteneur pour indiquer chaque étape (couplé à des events JS) : quand l'ancien contenu part, quand le nouveau arrive, etc. Exemple pour Swup : https://swup.js.org/getting-started/how-it-works. Exemple pour Barba : https://barba.js.org/docs/getstarted/lifecycle/
Pour nos rechargements ajax c'est déjà un peu pareil, il y a plusieurs étapes (début du chargement, fin du chargement), sauf que les styles CSS sont mis en dur : .css('opacity', 0.5)
Donc ce que j'imagine, c'est ça :
- Ne plus mettre des styles en dur, mais des classes CSS. Par défaut il s'agirait par exemple de
.ajax-transition-defaut
. - Découper le chargement en autant d'étapes que nécessaires, chaque étape appliquant une classe au bloc, par exemple : .ajax-loading-beforeleaving, .ajax-loading-isleaving, .ajax-loading-afterleaving, etc.
- Chaque étape ne doit appeler la suivante qu'une fois l'animation (optionnelle) de l'étape précédente terminée. C'est une chose possible en JS (attendre la fin de l'anim du bloc ciblé). Par exemple si un⋅e intégrateur⋅ice décide que son animation de départ et d'arrivée prend 10s, ça la regarde, on n'impose rien.
- Enfin, permettre de choisir l'animation désirée pour chaque bloc, au cas par cas. Il pourrait s'agir par exemple d'un paramètre réservé en complément de
ajax
:<INCLURE{fond=truc, ajax, ajax_transition=masuperanim}>
Le but c'est que ça reste facilement prenable en main par les intégrateurs et intégratrices.
Exemple concret.
Mettons que je veuille une animation personnalisée pour un bloc, je lui donne un identifiant :
<INCLURE{fond=truc, ajax=machin, ajax_transition=mojito}>
La transition personnalisée est ajoutée comme classe au bloc ajax, ainsi que l'étape actuelle mise à jour au fil du chargement :
<div class="ajaxbloc ajax-id-machin ajax-transition-mojito ajax-loading-[etape_du_chargement]" data-ajax-env="…">
Il reste juste à créer les styles pour chaque étape de cette transition, et on fait absolument ce qu'on veut : flip en 3D, translation… Nb : il n'est pas toujours nécessaire d'avoir des styles pour toutes les étapes, ça dépend de ce qu'on veut.
.ajax-transition-mojito.ajax-loading-beforeleaving {… }
.ajax-transition-mojito.ajax-loading-isleaving {… }
.ajax-transition-mojito.ajax-loading-afterleaving {… }
// etc.
Et donc pour la transition par défaut, il y aurait son équivalent en CSS fourni par Spip, avec l'opacité à 50% etc. Et personnalisable facilement également si on le souhaite.