Barba JS with Sage 9

sage
4

I did that once with sage. As far as I remember I did the following:

1.) Add another div into the ajax loaded content which get’s the correct classes via @php(body_class()). So in the dom it could be:

`<div id="barba-wrapper">
  <div class="barba-container">
   <div id="body-classes" @php(body_class())>
    ...Put here the content you wish to change between pages...
   </div>
  </div>
</div>`

1.) Add a new folder & file under assets/scripts/barba/init.js so separate the code and use something like:

import Barba from 'barba.js/dist/barba';

    export default function (routes) {
        Barba.Pjax.Dom.wrapperId = 'barba-wrapper';
        Barba.Pjax.Dom.containerClass = 'barba-container';

        // Blacklist all WordPress Links (e.g. for adminbar)
        function addBlacklistClass() {
            $( 'a' ).each( function() {
                if ( this.href.indexOf('/wp-admin/') !== -1 ||
                    this.href.indexOf('/wp-login.php') !== -1 ) {
                    $( this ).addClass( 'no-barba' ).addClass( 'wp-link' );
                }
            });
        }

        // Set blacklist links
        addBlacklistClass();

        // Fire Barba.js
        Barba.Pjax.start();
        Barba.Prefetch.init();

        Barba.Dispatcher.on('transitionCompleted', function() {

            // Set new classes from #af-classes to body
            $('body').attr('class', $('#body-classes').attr('class'));

            // Fire routes again after new content loaded
            routes.loadEvents();
        });

3.) In main.js load the barba/init.js

// import barba.js init script
import barbaInit from './barba/init';

4.) To load barba.js and to fire the correct routes after ajax loaded content, you’ll need to modify in main.js:

// Load Events
jQuery(document).ready(() => {
    routes.loadEvents();
    barbaInit(routes);
});

I hope that helps.

3 Likes