Barba JS with Sage 9


#1

Did someone successfully managed to incorporate Barba JS into Sage 9?

I can only get Barba JS working if I include all the code in common.js (see image below)

I can not figure out what is the best way to separate the code according to the sage 9 routing system.

I already tried to separate by file in routes/x.js, but I had problems and Barba JS did not always run.

I am aware of the other topics in the subject, but the users did not clarify the structure they used, as I think they manipulated the routing system a bit


#2

Libraries like this don’t reload the page, they load via ajax, which would therefore affect the JS routing system. Sage JS uses the body class for routing, and checks this on each page load. You will probably need to fire JS functions using one of Barba.js events

Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {

});

#3

Also, check this out with regards to what @withjacoby said: http://barbajs.org/views.html


#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.


#5

Where would you fire the Barba.Dispatcher on the Sage configuration though?


#6

What have you tried?


#7

This is my structure:

init.js: https://gist.github.com/tiansial/390aa43a71530c550c169cc9104921a6
home.js: https://gist.github.com/tiansial/64f96c068c4415f151fba1d8d4cc1d37
main.js: https://gist.github.com/tiansial/9a94bc7cfd5459d04f61f0d7b5f103e8


#8

Please also share you app.blade.php here. I guess your DOM is not as described under my point 1.


#10

https://gist.github.com/tiansial/b3d10f3eed4b90d00df7ba40f51e5a4b