585 search results for Turbo

Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Smart Frame Redirecting with the Server
40 lines | src/EventSubscriber/TurboFrameRedirectSubscriber.php
// ... lines 1 - 9
class TurboFrameRedirectSubscriber implements EventSubscriberInterface
{
public function onKernelResponse(ResponseEvent $event)
{
if (!$this->shouldWrapRedirect($event->getRequest(), $event->getResponse())) {
return;
}
$response = new Response(null, 200, [
'Turbo-Location' => $event->getResponse()->headers->get('Location'),
]);
$event->setResponse($response);
}
// ... lines 23 - 30
private function shouldWrapRedirect(Request $request, Response $response): bool
{
if (!$response->isRedirection()) {
return false;
}
return (bool) $request->headers->get('Turbo-Frame-Redirect');
}
}
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Smart Frame Redirecting with the Server
43 lines | src/EventSubscriber/TurboFrameRedirectSubscriber.php
// ... lines 1 - 9
class TurboFrameRedirectSubscriber implements EventSubscriberInterface
{
public function onKernelResponse(ResponseEvent $event)
{
if (!$this->shouldWrapRedirect($event->getRequest(), $event->getResponse())) {
return;
}
}
// ... lines 18 - 25
private function shouldWrapRedirect(Request $request, Response $response): bool
{
if (!$response->isRedirection()) {
return false;
}
if (!$request->headers->has('Turbo-Frame')) {
return false;
}
if ($request->headers->get('Turbo-Frame-Redirect')) {
return true;
}
return false;
}
}
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Frame Redirecting and Clearing the Snapshot Cache
45 lines | templates/product/_cart_add_controls.html.twig
<turbo-frame id="add-to-cart-controls">
{{ form_start(addToCartForm, {
attr: { class: 'cart-add-controls d-flex align-items-center justify-content-baseline' }
}) }}
{% if addToCartForm.color is defined %}
// ... lines 6 - 25
{% endif %}
// ... lines 27 - 34
{{ form_end(addToCartForm) }}
<div>
{{ form_errors(addToCartForm) }}
{% if addToCartForm.color is defined %}
{{ form_errors(addToCartForm.color) }}
{% endif %}
{{ form_errors(addToCartForm.quantity) }}
</div>
</turbo-frame>
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

turbo-frame inside a Modal
25 lines | templates/_modal.html.twig
<div
class="modal fade"
tabindex="-1"
aria-hidden="true"
data-modal-form-target="modal"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ modalTitle }}</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<turbo-frame
class="modal-body"
src="{{ modalSrc }}"
id="{{ id }}"
>
{{ modalContent|default('Loading...') }}
</turbo-frame>
</div>
</div>
</div>
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

turbo-frame inside a Modal
15 lines | templates/product_admin/new.html.twig
// ... lines 1 - 4
{% block body %}
<div class="container mt-4">
<a href="{{ path('product_admin_index') }}"><i class="fas fa-caret-left"></i> Back to list</a>
<h1 class="mt-3">Create new Product</h1>
<turbo-frame id="product-info" target="_top">
{{ include('product_admin/_form.html.twig') }}
</turbo-frame>
</div>
{% endblock %}
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Frame-Powered Inline Editing
18 lines | templates/product_admin/edit.html.twig
// ... lines 1 - 4
{% block body %}
<div class="container mt-4">
<a href="{{ path('product_admin_index') }}"><i class="fas fa-caret-left"></i> Back to list</a>
<turbo-frame id="product-info" target="_top">
<div class="d-flex justify-content-between">
<h1 class="mt-3">Edit Product</h1>
{{ include('product_admin/_delete_form.html.twig') }}
</div>
{{ include('product_admin/_form.html.twig', {'button_label': 'Update'}) }}
</turbo-frame>
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Testing Part 2: Functional Testing
40 lines | tests/AppBrowser.php
// ... lines 1 - 4
use Facebook\WebDriver\WebDriverBy;
// ... lines 6 - 7
class AppBrowser extends PantherBrowser
{
// ... lines 10 - 17
public function waitForDialog(): self
{
$this->client()->wait()->until(function() {
return $this->crawler()->filter('dialog[open]')->count() > 0;
});
if ($this->crawler()->filter('dialog[open] turbo-frame')->count() > 0) {
$this->waitForTurboFrameLoad();
}
return $this;
}
public function waitForTurboFrameLoad(): self
{
$this->client()->wait()->until(function() {
return $this->crawler()->filter('turbo-frame[aria-busy="true"]')->count() === 0;
});
return $this;
}
}
See Code Block in Script
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Modal Twig Component
67 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 54
<twig:Modal>
<turbo-frame
id="modal"
data-modal-target="dynamicContent"
data-action="turbo:before-fetch-request->modal#showLoading"
class="aria-busy:opacity-50 transition-opacity"
>
{{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
</turbo-frame>
</twig:Modal>
</body>
</html>
See Code Block in Script
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

AJAX Modal!
74 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 55
<div
// ... lines 57 - 58
>
<dialog
// ... lines 61 - 63
>
<div class="flex grow p-5">
<div class="grow overflow-auto p-1">
<turbo-frame id="modal" data-modal-target="dynamicContent"></turbo-frame>
</div>
</div>
</dialog>
</div>
</body>
</html>
See Code Block in Script
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Fancy things on Modal Form Success
102 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 51
<div
// ... lines 53 - 54
>
<dialog
// ... lines 57 - 59
>
<div class="flex grow p-5">
<div class="grow overflow-auto p-1">
<turbo-frame
id="modal"
// ... lines 65 - 67
>
// ... lines 69 - 71
{% for stream in app.flashes('stream') %}
{{ stream|raw }}
{% endfor %}
</turbo-frame>
</div>
</div>
</dialog>
// ... lines 79 - 94
</div>
// ... lines 96 - 99
</body>
</html>
See Code Block in Script
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Fantastic Modal UX with a Loading State
95 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 55
<div
// ... lines 57 - 58
>
<dialog
// ... lines 61 - 63
>
<div class="flex grow p-5">
<div class="grow overflow-auto p-1">
<turbo-frame
// ... lines 68 - 70
class="aria-busy:opacity-50 transition-opacity"
></turbo-frame>
</div>
</div>
</dialog>
// ... lines 76 - 91
</div>
</body>
</html>
See Code Block in Script
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Fantastic Modal UX with a Loading State
94 lines | templates/base.html.twig
<!DOCTYPE html>
<html>
// ... lines 3 - 15
<body class="bg-black text-white font-mono">
// ... lines 17 - 55
<div
// ... lines 57 - 58
>
<dialog
// ... lines 61 - 63
>
<div class="flex grow p-5">
<div class="grow overflow-auto p-1">
<turbo-frame
id="modal"
data-modal-target="dynamicContent"
data-action="turbo:before-fetch-request->modal#showLoading"
></turbo-frame>
</div>
</div>
</dialog>
// ... lines 75 - 90
</div>
</body>
</html>
See Code Block in Script
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Turbo Frames
56 lines | templates/planet/show.html.twig
// ... lines 1 - 4
{% block body %}
<div class="m-4 p-4 bg-gray-800 rounded-lg">
// ... lines 7 - 8
<turbo-frame id="planet-info">
// ... lines 10 - 35
<div class="mt-2">
<a href="{{ path('app_homepage') }}">&lt;-- Back</a>
<a href="{{ path('app_planet_edit', {'id': planet.id}) }}">Edit</a>
</div>
</turbo-frame>
// ... lines 42 - 53
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Turbo Frames
54 lines | templates/planet/show.html.twig
// ... lines 1 - 4
{% block body %}
<div class="m-4 p-4 bg-gray-800 rounded-lg">
// ... lines 7 - 8
<turbo-frame id="planet-info">
<table class="min-w-full bg-gray-800 text-white">
// ... lines 11 - 33
</table>
<div class="mt-2">
<a href="{{ path('app_homepage') }}">&lt;-- Back</a>
</div>
</turbo-frame>
// ... lines 40 - 51
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Data Tables with Turbo Frames
138 lines | templates/main/homepage.html.twig
// ... lines 1 - 27
{% block body %}
<div class="flex">
// ... lines 30 - 36
<section class="flex-1 ml-10">
// ... lines 38 - 55
<turbo-frame id="voyage-list">
<div class="bg-gray-800 p-4 rounded">
<table class="w-full text-white">
// ... lines 59 - 120
</table>
</div>
<div class="flex items-center mt-6 space-x-4">
// ... lines 124 - 132
</div>
</turbo-frame>
</section>
</div>
{% endblock %}
See Code Block in Script
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Popover!
80 lines | templates/main/homepage.html.twig
// ... 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
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Popover!
80 lines | templates/main/homepage.html.twig
// ... 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
Code

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Popover!
80 lines | templates/main/homepage.html.twig
// ... 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
Comment

Learn Symfony 6

 >

30 Days with LAST Stack

 >

Live Components
... browser, it would load the whole page - the page with the multiple live components and turbo frames. B) Let's also assume that the 2nd turbo frame - the one that shows the results - looks like this: ```html ...
weaverryan
weaverryan
Read Full Comment
Comment

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Installing Turbo
... ": "^7.16.0", "@hotwired/stimulus": "^3.0.0", "@hotwired/turbo": "^7.0.1", "@popperjs/core": "^2.11.8", "@symfony/stimulus-bridge": "^3.2.0", "@symfony/ux-turbo": "file:vendor ...
Thomas-D
Thomas-D
Read Full Comment
12 13 14 15 16