Body classnames manipulation during Barba.js transition

barba

barba.hooks.beforeEnter(({ next }) => {
  const parser = new DOMParser();
  const source = parser.parseFromString(next.html, "text/html");
  const body = source.querySelector('body');
  const classnames = body.getAttribute('class');
  
  console.log(classnames);
  
  if( classnames ) document.querySelector('body').setAttribute('class', classnames);
});

@ebhoren,
Je profites de tes connaissances avec Barba... Je me demandais où inclure un loader qui resterait actif tout le temps que le contenu de la prochaine page charge. Je load avec sync:true.

En fait, est-ce que Barba est en mesure de savoir que tous les medias ont été loadé? comme les background-images?

Merci encore,

Fait plaisir. Si ça t’intéresse, on a fait un script Barba chez Mill3 Studio, qui permet de loader dynamiquement les fichiers css et js qui sont dans les nouvelles pages chargées par Barba. On s’en sert pour la compatibilité Barba avec GravityForm. https://github.com/Mill3/mill3-packages/tree/master/packages/barba-scripts Bonne chance dans ton projet Le dim. 2 août 2020 à 16:57, Simon Gauthier Boudreau < notifications@github.com> a écrit :

***@***.**** commented on this gist. ------------------------------ Wow, merci beaucoup! J'étais arrivé à quelque chose avec cette fonction. J'appliquais le style à un div dans le container de Barba... Mais ta solution est vraiment plus clean. Et j'apprends pour le { next } qui est pratique aussi! function newClass() { document.body.className = ""; let newClass = document.getElementById("body-classes").className; document.body.className += newClass; console.log("new class applied!" + newClass); } — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://gist.github.com/3a153fbe9d4d44a3b680f92c6f443471#gistcomment-3401387>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEVZOVUZJ7F5Q6F6QNWYWTR6XHMNANCNFSM4PSXMYYQ> .

-- --------------------------------------------------------- *Dominic Mercier* Développeur Interactif Sénior --------------------------------------------------------- 2125 rue du Faubourg Drummondville, Québec, J2B 0H7 819.850.8340 --------------------------------------------------------- d.mercier84@gmail.com dominic-mercier.com

@ebhoren,
Cool! Donc pour loader les JS de GSAP par page mettons?

Très cool votre site ;)
Je dois aussi aller investiguer du coté de Locomotive et leur Smooth Scroll.
Je sors actuellement mon premier site moi-même, tellement de chose à apprendre, c'est débile! Mais après 6 ans à faire faire des sites par d'autres et toujours être so-so satisfait du dev front end, j'ai décidé d'y aller all-in!

Je te partagerai le site lorsqu'il sera en ligne.

Merci encore,

Barba n’est pas en mesure de savoir si les images de la page sont loader. Barba load le contenu html de la prochaine page et ensuite effectue la chaîne de transition en Promise. Regarde la librairie ImagesLoaded pour savoir quand les images de ta page sont toutes chargées. Inclus ton loader hors de ton barba-wrapper. Tu l’affiches durant le hook afterLeave et tu le cache dans beforeEnter. Le truc est de faire attendre ta transition tant que ImagesLoaded n’est pas terminé. On le fait dans tous nos projets et ça fonctionne à merveille. Ex: bien-joue.ca Bon dimanche Le dim. 2 août 2020 à 17:06, Simon Gauthier Boudreau < notifications@github.com> a écrit :

***@***.**** commented on this gist. ------------------------------ @ebhoren <https://github.com/ebhoren>, Je profites de tes connaissances avec Barba... Je me demandais où inclure un loader qui resterait actif tout le temps que le contenu de la prochaine page charge. Je load avec sync:true. En fait, est-ce que Barba est en mesure de savoir que tous les medias ont été loadé? comme les background-images? Merci encore, — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/3a153fbe9d4d44a3b680f92c6f443471#gistcomment-3401391>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEVZOW6USMP64SL6QEBJFLR6XIOTANCNFSM4PSXMYYQ> .

-- --------------------------------------------------------- *Dominic Mercier* Développeur Interactif Sénior --------------------------------------------------------- 2125 rue du Faubourg Drummondville, Québec, J2B 0H7 819.850.8340 --------------------------------------------------------- d.mercier84@gmail.com dominic-mercier.com