Disable navigation.instant on certain pages

[jurgenhaas]

This navigation.instant is amazing and I like it a lot.

However, we have a library section in our documentation which uses some javascript from a 3rd party and that break when navigation.instant is enabled.

I wonder if it's possible to disable navigation.instant on specific pages only?

[squidfunk]

Not possible and not planned. I'm not even sure how this should work. Nonetheless, you can detect location and document changes with the location$ and document$ observable which is exported to window, and use that to mount and unmount your components on specific pages. Note that script tags that are part of the page are executed.

[jurgenhaas]

Thanks, got it resolved by fixing the included javascript. For reference, the site which uses this can be found at https://ecaguide.org/library

[squidfunk]

Could you share some details on the problem and how you fixed it? This could be very valuable to other users 😊

[jurgenhaas]

Sure, here we go: in the library linked above, we have several pages, all of which with the following markup and links:

<script>url='bpmn_io-eca_lib_0004.xml';archive='bpmn_io-eca_lib_0004.tar.gz'</script>
<link rel="stylesheet" href="/stylesheets/library/bpmn-js.css">
<link rel="stylesheet" href="/stylesheets/library/viewer.css">

<div class="canvas">
    <div id="js-canvas"></div>
</div>
<div class="download"><a target="_blank" href="#">Download</a></div>

<script src="/javascripts/library/bpmn-viewer.development.js"></script>
<script src="/javascripts/library/jquery.js"></script>
<script src="/javascripts/library/loader.js"></script>
<script>open(url);</script>

Everything comes from an include file except the first line, which declares the variables that are later used by the JavaScript files that get triggered by the open command.

The problem has been, that the variables url and archive had been declared with let and that failed if the user selected a different page with another instance in the library because this wanted to re-declare the variables. This then also caused a few follow-up errors in the browser console.

When we removed the let statement from the variables, we got a similar error because the loader.js file also contained a let statement. We removed that too and then everything worked just fine.

The third-party JS files are the other 2: bpmn-viewer.development.js and jquery.js and they don't seem to have any issues being reloaded.

BTW, we also tried to include those JS files globally, but that didn't work at all. We are not sure why, but we're happy with how it works now.

[squidfunk]

Thanks for sharing!