Skip to content

Commit

Permalink
Merge pull request #181 from stimulusreflex/fix-turbo-frames-advance-…
Browse files Browse the repository at this point in the history
…navigation

Opt out of restoring placeholders for a promoted TF navigation
  • Loading branch information
julianrubisch authored Jul 8, 2024
2 parents 789d15a + c8c92aa commit 6d9e180
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 2 deletions.
2 changes: 1 addition & 1 deletion javascript/elements/futurism_utils.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* global IntersectionObserver, CustomEvent, setTimeout */

const dispatchAppearEvent = (entry, observer = null) => {
if (!window.Futurism) {
if (!window.Futurism?.subscription) {
return () => {
setTimeout(() => dispatchAppearEvent(entry, observer)(), 1)
}
Expand Down
23 changes: 23 additions & 0 deletions javascript/elements/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,15 @@ const cachePlaceholders = e => {
}

const restorePlaceholders = e => {
// we have to opt out of this if the request leading to this is a TF request
// if the TF request has been promoted to an advance action
// (data-turbo-action="advance"), this callback will fire inadvertently
// but the whole page will not be exchanged as in a regular TD visit
if (sessionStorage.getItem('requested-turbo-frame')) {
delete sessionStorage.removeItem('requested-turbo-frame')
return
}

const inNamespace = ([key, _payload]) => key.startsWith('futurism-')
Object.entries(sessionStorage)
.filter(inNamespace)
Expand All @@ -72,6 +81,15 @@ const restorePlaceholders = e => {
})
}

const storeRequestedTurboFrame = e => {
const { headers } = e.detail.fetchOptions

if (!headers['Turbo-Frame'] || headers['X-Sec-Purpose'] === 'prefetch') return

// we store the frame ID in case the incoming request was referencing one
sessionStorage.setItem('requested-turbo-frame', headers['Turbo-Frame'])
}

export const initializeElements = () => {
polyfillCustomElements()
document.addEventListener('DOMContentLoaded', defineElements)
Expand All @@ -80,4 +98,9 @@ export const initializeElements = () => {
document.addEventListener('turbolinks:load', defineElements)
document.addEventListener('turbolinks:before-cache', restorePlaceholders)
document.addEventListener('cable-ready:after-outer-html', cachePlaceholders)

document.addEventListener(
'turbo:before-fetch-request',
storeRequestedTurboFrame
)
}
4 changes: 3 additions & 1 deletion javascript/futurism_channel.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ const debounceEvents = (callback, delay = 20) => {
export const createSubscription = consumer => {
consumer.subscriptions.create('Futurism::Channel', {
connected () {
window.Futurism = this
window.Futurism = {
subscription: this
}
document.addEventListener(
'futurism:appear',
debounceEvents(events => {
Expand Down

0 comments on commit 6d9e180

Please sign in to comment.