Preventing Reload of Permanent Element?

1

Turbo is really great. Thanks for building it.

So, I coded up a video tray to persist across navigation. A user can click a button, which will load an iframe into a fixed positioned element that persists across navigation. This sort of works, but not quite. On navigation, the permanent element flashes in and out, and the iframe has to reload.

Here are some iterations I tried;

<html>
<head>
</head>
<body>

{{ rest of page }}

<div id="video-tray" turbo-data-permanent>
  {{ iframe dynamically added here }}
</div>
</body>
</html>

That has the problem with the iframe load on navigation. So I tried this:

<html>
<head>
</head>
<body>

<turbo-frame id="main_outlet" data-turbo-action="advance" >
  {{ rest of page }}
</turbo-frame>

<div id="video-tray"  turbo-data-permanent>
  {{ iframe dynamically added here }}
</div>
</body>
</html>

This solves the problem with the video tray! It does not reload any more on navigation.

HOWEVER, a whole lot of other far worse problems arise. The head section is not merged on navigation. This doesn’t end up as a true solution.

So we can try this:

<html>
<head>
</head>
<body>

<turbo-frame id="main_outlet" data-turbo-action="advance" target="_top">
  {{ rest of page }}
</turbo-frame>

<div id="video-tray"  turbo-data-permanent>
  {{ iframe dynamically added here }}
</div>
</body>
</html>

This ends up being identical to the first attempt. There is a reload flash on navigation.

So, how can this problem be solved without creating new problems?

2

It seems the issue that needs to be addressed is how turbo handles turbo-data-permanent elements…

3

Another approach would be to to offer a way to merge in the _top head in a turboframe navigation event. Is that possible?

4

For anyone with a similar problem, solution given here:

This would be good to add to Turbo core, so it doesn’t require a monkey patch.