Barba: New website for the "Examples" page

Created on 30 Oct 2017 · 5Comments · Source: barbajs/barba

Hello there, my latest website is proudly powered by Barba.js, I would be happy to see it in the "Examples" section :)

https://www.giuseppespota.com/

Thanks a lot! I will make a donation for this library, you totally deserve it!!

Source

kekkorider

Most helpful comment

@tiansial it's quite easy to achieve :)

First of all, you have to listen for the newPageReady event and get the newPageRawHTML parameter, just like this:

Barba.Dispatcher.on('newPageReady', function(currentStatus, prevStatus, HTMLElementContainer, newPageRawHTML) {
    const newDoc = parseHTML(newPageRawHTML);
});

That parameter, as the name suggests, is a string containing the whole new page HTML, you just need to parse it using a simple function that I called parseHTML().

function parseHTML(html) {
    var parser = new DOMParser();
    return parser.parseFromString(html, 'text/html');
}

This way you can obtain the new page's document object as value of the newDoc constant.

Finally, you have to get the HTML of the WPML language switcher (or anything else that's outside the Barba.js container) from the newPage document object and inject it into the actual page's language switcher.

Barba.Dispatcher.on('newPageReady', function(currentStatus, prevStatus, HTMLElementContainer, newPageRawHTML) {

    // Getting the new page's document object
    const newDoc = parseHTML(newPageRawHTML); 

    // In this case I have to update the whole #masthead div
    const newPageMasthead = newDoc.getElementById('masthead');

    // The inner HTML of the new page's #masthead is injected into the current #masthead
    document.getElementById('masthead').innerHTML = newPageMasthead.innerHTML;

});

I changed the whole #masthead div in order to update the menu too, but this process can be used to update everything outside the Barba.js container.

Let me know if it's not clear ;)

kekkorider on 13 Nov 2017

👍7 🎉2 ❤1

All 5 comments

How did you get the WPML language switcher update itself outside the barba-container?

tiansial on 13 Nov 2017

@tiansial it's quite easy to achieve :)

First of all, you have to listen for the newPageReady event and get the newPageRawHTML parameter, just like this:

Barba.Dispatcher.on('newPageReady', function(currentStatus, prevStatus, HTMLElementContainer, newPageRawHTML) {
    const newDoc = parseHTML(newPageRawHTML);
});

That parameter, as the name suggests, is a string containing the whole new page HTML, you just need to parse it using a simple function that I called parseHTML().

function parseHTML(html) {
    var parser = new DOMParser();
    return parser.parseFromString(html, 'text/html');
}

This way you can obtain the new page's document object as value of the newDoc constant.

Barba.Dispatcher.on('newPageReady', function(currentStatus, prevStatus, HTMLElementContainer, newPageRawHTML) {

    // Getting the new page's document object
    const newDoc = parseHTML(newPageRawHTML); 

    // In this case I have to update the whole #masthead div
    const newPageMasthead = newDoc.getElementById('masthead');

    // The inner HTML of the new page's #masthead is injected into the current #masthead
    document.getElementById('masthead').innerHTML = newPageMasthead.innerHTML;

});

I changed the whole #masthead div in order to update the menu too, but this process can be used to update everything outside the Barba.js container.

Let me know if it's not clear ;)

kekkorider on 13 Nov 2017

👍7 🎉2 ❤1

Works like a charm, thanks. :)

tiansial on 15 Nov 2017

👍1

@kekkorider Hi Francesco, I wanted to ask you how you do to change the body class and the data-namespace between each page. I couldn't solve this using Wordpress, can you help me please?

Your site is amazing, one day I want to do something as great as your site.
Have a nice day man! Thanks in advance!