Hi Thomas,
i got swup working (with inline styles, external files doesn’t work at the moment - maybe i’ll check that later), but there are a lot of pitfalls on the way which for the most part do not relate specifically to bricks, but to the way Single Page Applications (like Swup or Barba) work, like:
Body Classes won’t update
This can easily be solved with the swup body class plugin.
Head Styles / Scripts won’t load
This can be solved with the swup head plugin.
Admin Bar doesn’t update
This is more complicated, so i decided to run swup only when there is no admin bar
Footer JS / Scripts
This is where it get’s even more complicated, because it depends on the Javascript used on the site. Since swup removes the page reloads from site, it also removes a standard lifecycle of scripts, which come with a set of problems that those pjax-like libraries bring.
So first of all, you’ll have to create and call an init function that checks if there is any element that uses js (like .bricks-animated) and if so, call the appropriate function (bricksAnimation()) and call the function again, when the content is being replaced (this can be done with swup events). Depending on the script, it might be good to cleanup all the instances, listeners and mess when leaving a page, which can be done with another swup event that will call a cleanup function before the content is getting replaced (didn’t integrated that into my example).
To keep the example (the init function) simple, this is the code i used (if you want to cover every Javascript function, the init function will of course be a lot bigger…).
I don’t know if there is a more “elegant” way of doing this, but after all, it works and looks like this:
Custom CSS
.transition-fade {
transition: 0.8s;
opacity: 1;
transform: translateY(0);
}
html.is-animating .transition-fade {
opacity: 0;
transform: translateY(100%);
}
Body (Footer) Scripts
<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
<script src="https://brickswup.local/wp-content/themes/bricks-child/assets/js/SwupBodyClassPlugin.min.js"></script>
<script src="https://brickswup.local/wp-content/themes/bricks-child/assets/js/SwupHeadPlugin.min.js"></script>
<script>
const wpadminbar = document.getElementById('wpadminbar');
if(!wpadminbar) {
const options = {
containers: ["#bricks-content"],
plugins: [
new SwupBodyClassPlugin(),
new SwupHeadPlugin()
]
};
const swup = new Swup(options);
// run once
init();
// this event runs for every page view after initial load
swup.on('contentReplaced', init);
function init() {
if (document.querySelector('.bricks-animated')) {
bricksAnimation();
}
}
}
</script>