-
-
Save jin0x/88436c2d8ebcdfeafaeb90c8c1eb8adc to your computer and use it in GitHub Desktop.
barbajs for wordpress
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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]); | |
// }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment