|
|
// ... lines 1 - 4
|
|
{% block body %} |
|
<div class="flex"> |
|
|
// ... lines 7 - 13
|
|
<section class="flex-1 ml-10"> |
|
|
// ... lines 15 - 29
|
|
<div class="bg-gray-800 p-4 rounded"> |
|
<table class="w-full text-white"> |
|
|
// ... lines 32 - 38
|
|
<tbody> |
|
{% for voyage in voyages %} |
|
<tr class="border-b border-gray-700 {% if loop.index is odd %} bg-gray-800 {% else %} bg-gray-700 {% endif %}"> |
|
|
// ... line 42
|
|
<td class="px-2 whitespace-nowrap"> |
|
<div |
|
data-controller="popover" |
|
data-action="mouseenter->popover#show mouseleave->popover#hide" |
|
class="relative" |
|
> |
|
|
// ... lines 49 - 54
|
|
<template data-popover-target="content"> |
|
<div |
|
data-popover-target="card" |
|
class="max-w-sm rounded shadow-lg bg-gray-900 absolute left-0 bottom-10" |
|
> |
|
<turbo-frame id="planet-card-{{ voyage.planet.id }}" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"></turbo-frame> |
|
</div> |
|
</template> |
|
</div> |
|
</td> |
|
|
// ... line 67
|
|
</tr> |
|
{% endfor %} |
|
</tbody> |
|
</table> |
|
</div> |
|
|
// ... lines 73 - 76
|
|
</section> |
|
</div> |
|
{% endblock %} |
See Code Block in Script
|
|
// ... lines 1 - 43
|
|
<div |
|
data-controller="popover" |
|
data-action="mouseenter->popover#show mouseleave->popover#hide" |
|
class="relative" |
|
> |
|
|
// ... lines 49 - 54
|
|
<div data-popover-target="content"> |
|
<div |
|
data-popover-target="card" |
|
class="max-w-sm rounded shadow-lg bg-gray-900 absolute left-0 bottom-10" |
|
> |
|
<turbo-frame id="planet-card-{{ voyage.planet.id }}" target="_top" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"></turbo-frame> |
|
</div> |
|
</div> |
|
</div> |
|
|
// ... lines 66 - 80
|
See Code Block in Script
|
|
// ... lines 1 - 43
|
|
<div |
|
data-controller="popover" |
|
data-action="mouseenter->popover#show mouseleave->popover#hide" |
|
class="relative" |
|
> |
|
|
// ... lines 49 - 54
|
|
<div data-popover-target="content"> |
|
<div |
|
data-popover-target="card" |
|
class="max-w-sm rounded shadow-lg bg-gray-900 absolute left-0 bottom-10" |
|
> |
|
<turbo-frame loading="lazy" id="planet-card-{{ voyage.planet.id }}" target="_top" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"></turbo-frame> |
|
</div> |
|
</div> |
|
</div> |
|
|
// ... lines 66 - 80
|
See Code Block in Script
|
|
// ... lines 1 - 43
|
|
<div |
|
data-controller="popover" |
|
data-action="mouseenter->popover#show mouseleave->popover#hide" |
|
class="relative" |
|
> |
|
|
// ... lines 49 - 54
|
|
<template data-popover-target="content"> |
|
<div |
|
data-popover-target="card" |
|
class="max-w-sm rounded shadow-lg bg-gray-900 absolute left-0 bottom-10" |
|
> |
|
<turbo-frame loading="lazy" id="planet-card-{{ voyage.planet.id }}" target="_top" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"></turbo-frame> |
|
</div> |
|
</template> |
|
</div> |
|
|
// ... lines 66 - 80
|
See Code Block in Script
|
|
// ... lines 1 - 59
|
|
<turbo-frame loading="lazy" id="planet-card-{{ voyage.planet.id }}" target="_top" src="{{ path('app_planet_show_card', { |
|
'id': voyage.planet.id, |
|
}) }}"> |
|
<div class="p-10"> |
|
<svg xmlns="http://www.w3.org/2000/svg" class="animate-spin" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> |
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path> |
|
<path d="M12 3a9 9 0 1 0 9 9"></path> |
|
</svg> |
|
</div> |
|
</turbo-frame> |
|
|
// ... lines 70 - 87
|
See Code Block in Script
…in React, use React's tools & ecosystem". But if you're building a web app that returns HTML, AssetMapper + Stimulus + Turbo can give you a great UX & DX. So, there are 2 paths and both are valid.
Let me know if that makes sense :).
Cheers!
…custom actions.
This seriously sounds epic. What are you using to open the modals? Are you opening Bootstrap modals that point to the page's URL that has the turbo-frame? What about closing the modal? I go into modals in a big way in…
…on my index pages and update menu badges in real time with mercure and turbo streams from webhooks. Also, overriding any of the form templates and surrounding it in a turbo frame lets you have a modal anywhere that can load the crud forms for…
…making the Ajax call manually (i.e. POSTing via Axios), you're going outside of the Turbo Frames system. That's ok - it just means that "you're in charge" of making any updates or handling the response. There are a few options I can…
…is so much easier to work with.
Using a turbo-stream required hooking up additional stimulus controllers, and functions, and actions/listeners. In many cases, the only thing the controller did was POST the data and handle the render the turbo stream. And nothing else…
…need to submit individually. And so it's definitely a case where you'll want to avoid a full page refresh. I would normally use Turbo Frames for the Ajax submitting side of things, but that is not a requirement.
Anyway, if this is still…
…not divisible by 3 then I get a blank space in the grid when the next turbo frame is populated.
I tried display:contents on the turbo-frames but that seems to prevent turbo from triggering the frame to load.
I think maybe this is…
…with Live Component??)
You CAN do it with this - especially once we merge https://github.com/symfony/ux/pull/1230 - but I'm planning to do it entirely with Turbo frames
> Can’t wait to see this training, it’s going to be great!
…
…because it doesn't always need to update, and I also want to break up a complicated page. I thought "hey, turbo frame or streams, right?"
Here's the stream template (I removed the template code, there is something there in the actual file).
```
// drawer…
Blog
Your LAST Stack
…that we no longer need.
And since cool tools deserve cool names, say hello to LAST Stack:
L Live Components
A AssetMapper
S Stimulus (or Symfony)
T Turbo (or Twig)
LAST stack is about web standards. AssetMapper (stable in Symfony
6.4) leverages importmaps:
a…
…So, in your code, you can now post an "update" to Mercure containing Turbo Stream directions to update *any* elements on your page (at this point, it doesn't matter at all what original element you added the `{{ turbo_stream_listen('product-reviews') }}` to. So…
…2.*",
"symfony/runtime": "6.2.*",
"symfony/translation": "6.2.*",
"symfony/twig-bridge": "6.2.*",
"symfony/twig-bundle": "6.2.*",
"symfony/ux-turbo": "^2.0",
"symfony/webpack-encore-bundle": "^1.13",
"symfony/yaml": "6.2.*",
"twig/extra-bundle": "^2.12|^3.0",
"twig/twig": "^2.12|^3.0…
…1.*",
"symfony/http-client": "6.1.*",
"symfony/monolog-bundle": "^3.0",
"symfony/runtime": "6.1.*",
"symfony/twig-bundle": "6.1.*",
"symfony/ux-turbo": "^2.0",
"symfony/webpack-encore-bundle": "^1.13",
"symfony/yaml": "6.1.*",
"twig/extra-bundle": "^2.12|^3.0",
"twig/twig": "^2.12|^3…
…how much of a problem this is anymore in practice.
However, yes, using this stimulus/turbo setup would avoid any potential SEO problems because... the page is loading as normal JavaScript. Even if a crawler didn't support JavaScript at all (which I don't…
…ever want to triple-check if Turbo is being loaded at all, you can go into your console and run: `console.log(Turbo)`. When Turbo is loaded, it's a rare situation where a global variable (`Turbo`) is added. so if Turbo has been loaded…
x
690