Recherche avancée

Sur d’autres sites (6694)

• Revision 3921 : Amélioration du lecteur ... On se retrouve moins souvent avec un problème ...

  2 septembre 2010, par kent1 — Log

  Amélioration du lecteur ... On se retrouve moins souvent avec un problème de loading sur ff On vérifie correctement que l’on a les sliders de volume avant de modifier leur valeur On change le style du slider de volume lorsqu’il est (...)

• Evolution #4641 (Nouveau) : Des rechargements Ajax avec des transitions personnalisables

  27 janvier 2021

  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, 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` :

  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 :

  <span class="CodeRay"><span class="tag">span><span class="error">{</span><span class="attribute-name">fond</span>=<span class="attribute-value">truc</span><span class="error">,</span> <span class="attribute-name">ajax</span>=<span class="attribute-value">machin</span><span class="error">,</span> <span class="attribute-name">ajax_transition</span>=<span class="attribute-value">mojito</span><span class="error">}</span><span class="tag">></span>
  
  </span></span>

  La transition personnalisée est ajoutée comme classe au bloc ajax, ainsi que l’étape actuelle mise à jour au fil du chargement :

  <span class="CodeRay"><span class="tag">span> <span class="attribute-name">class</span>=<span class="string"><span class="delimiter">"</span><span class="content">ajaxbloc ajax-id-machin ajax-transition-mojito ajax-loading-[etape_du_chargement]</span><span class="delimiter">"</span></span> <span class="attribute-name">data-ajax-env</span>=<span class="string"><span class="delimiter">"</span><span class="content">…</span><span class="delimiter">"</span></span><span class="tag">></span>
  
  </span></span>

  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.

  <span class="CodeRay"><span class="class">.ajax-transition-mojito</span><span class="class">.ajax-loading-beforeleaving</span> {<span class="error">…</span> }
  <span class="class">.ajax-transition-mojito</span><span class="class">.ajax-loading-isleaving</span> {<span class="error">…</span> }
  <span class="class">.ajax-transition-mojito</span><span class="class">.ajax-loading-afterleaving</span> {<span class="error">…</span> }
  // <span class="tag">etc</span>.
  </span>
  Télécharger

  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.

• Added Demo Cover Image

  3 juin 2012, par riconeitzel

  m EPub.Example1.php + demo/cover-image.jpg Added Demo Cover Image changed example to use file-data directly rather then using the path-value because the second way is absolute to the customers machine and the example will not work "out of the (...)