barbajs for wordpress

barba-wp.js

/*
 * apsoluttheme
 * transitionss
 * Barba.Pjax.Dom.containerClass
 * Barba.Pjax.Dom.currentHTML
 * Barba.Pjax.Dom.wrapperId
 * @URLtransitions.js http://barbajs.org/events.html
 */


const getUrl = window.location;
const getHomeUrl = getUrl.protocol + "//" + getUrl.host;

//
// Barba.js
//

Barba.Pjax.Dom.wrapperId = 'ajax-wrapper';
Barba.Pjax.Dom.containerClass = 'ajax-content';
Barba.Pjax.ignoreClassLink = 'no-ajax';

var FadeTransition = Barba.BaseTransition.extend({
    start: function() {
        /**
         * This function is automatically called as soon the Transition starts
         * this.newContainerLoading is a Promise for the loading of the new container
         * (Barba.js also comes with an handy Promise polyfill!)
         */

        // As soon the loading is finished and the old page is faded out, let's fade the new page
        Promise
            .all([this.newContainerLoading, this.fadeOut()])
            .then(this.fadeIn.bind(this));

    },

    fadeOut: function() {
        /**
         * this.oldContainer is the HTMLElement of the old Container
         */

        //return $(this.oldContainer).animate({ opacity: 0 }).promise();
        return $(this.oldContainer).animate({ opacity: 0 }).promise();
  

    },

    fadeIn: function() {
        /**
         * this.newContainer is the HTMLElement of the new Container
         * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
         * Please note, newContainer is available just after newContainerLoading is resolved!
         */

        var _this = this;
        var $newContainer = $(this.newContainer);

        $(this.oldContainer).hide();
        $(window).scrollTop(0); // scroll to top here

        $newContainer.css({
            visibility : 'visible',
            opacity : 0,
            "margin-left" : "30px",
        });

        $newContainer.animate({
            opacity: 1,
            "margin-left" : 0,
        }, 400, function() {
            /**
             * Do not forget to call .done() as soon your transition is finished!
             * .done() will automatically remove from the DOM the old Container
             */

            _this.done();
        });
    }
});

/**
 * Next step, you have to tell Barba to use the new Transition
 */

Barba.Pjax.getTransition = function() {
    /**
     * Here you can use your own logic!
     * For example you can use different Transition based on the current page or link...
     */

    return FadeTransition;
};

Barba.Pjax.start()
Barba.Prefetch.init();



/**
 * GET WP body classes
 */
Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container, newPageRawHTML) {

    var response = newPageRawHTML.replace(/(<\/?)body( .+?)?>/gi, '$1notbody$2>', newPageRawHTML)
    var bodyClasses = $(response).filter('notbody').attr('class')
    $('body').attr('class', bodyClasses);


});


//regex
// Barba.Dispatcher.on('newPageReady', (currentStatus, oldStatus, container, newPageRawHTML) => {
//     let regexp = /\<body.*\sclass=["'](.+?)["'].*\>/gi,
//         match = regexp.exec(newPageRawHTML);
//     if(!match || !match[1]) return;
//     document.body.setAttribute('class', match[1]);
// });

Thanks for sharing! Which version of barbajs do you use?

HI fjobeir... I think this was for older barbajs (v1) you can look at events: https://barba.js.org/v1/events.html

The biggest problem with Barba and WordPress are the external CSS and JS files, which are embedded context-related. For example mediaelement.js, if a video is included. Unfortunately you don't have a solution for this in your code neither.