/* * 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 = /\/gi, // match = regexp.exec(newPageRawHTML); // if(!match || !match[1]) return; // document.body.setAttribute('class', match[1]); // });