Wordpress: stuck when navigating back

[lightyearsagency]

HI SWUP & co.

I have a side...issue. Not big but would like to get it solved.

We have a wordpress site built with SWUP.
https://letsfuckcandev.wpengine.com/campaign-test-page/

Issue:
If the client includes an image, and links it to itself (link to media), a user is able to click on the image and view it.
When clicking 'back' from viewing this media file, 'is-animating' gets stuck in the .
So the site cover is never removed.

It also doesn't seem to follow the normal SWUP process, as I added a few alerts to see if it's ever registering the 'pageRetrievedFromCache', 'popState' or 'pageView' events.
It isn't.

When initially clicked, debug mode in the console shows a few items loading, but then the content is replaced with the image, and clicking 'back' brings up the previous page but it doesn't complete loading. or doesn't register that it ever left perhaps?

Normally I'd disable direct image linking in WP, but was wondering if there's something in my setup I should do to to cover this happening?

[daun]

You could try adding a [data-no-swup] attribute to the a tag. That should ignore those links.

[lightyearsagency]

The images are being embedded by Wordpress, instead if me having direct control.

Updating SWUP helped the 'back' reload issue. But I'm trying to check the clicked link before it's processed by SWUP now.
I.E. (Is this a link to an image? Open in new tab)

[daun]

If you don't have control over the output, you can add the attribute [data-no-swup] with JS after the page has loaded.

[gmrchk]

The link selector option could also be used to ignore the image links.

[daun]

Another option is to prevent the click event in the capturing phase, before swup will process it. See this issue comment for an example.

[lightyearsagency]

Thanks for the help everyone.

This was solved in three ways, but is still abit of a patch.

First, linkSelector was expanded to skip all target="_blank"
'"]:not([data-no-swup]):not([target="_blank"]), a[href^="/"]:not([data-no-swup]):not([target="_blank"]), a[href^="#"]:not([data-no-swup]):not([target="_blank"])
This wasn't an effective patch but was put in just-in-case.

Secondly, Swup needed to be updated to be able to recognise when it comes back to itself. So needed a newer version of the plugin.

Thirdly, I wrote a function to force all image links to open in new tabs. If I added a lightbox later I'd remove this. It just adds _blank to any image href's (using the isImage() function) it finds on links.

function allIndependentImageLinksToNewTabs() {
	allTheLinks = null; // Empty
	var allTheLinks = document.getElementsByTagName("a");
	for(var i=0; i<allTheLinks.length; i++) {
		let theHREF =  allTheLinks[i].getAttribute('href');
		if(isImage(theHREF)) {
			allTheLinks[i].setAttribute('target','_blank');
		}
	}
}