Search Results for: Turbo

590 search results for Turbo

Sort By

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

The "defer" Attribute & Conditionally Activating Turbo

Hello, I wanted to clarify something. If I want my app to use turbo (quickly) and I have a huge, ugly jquery document ready function (I don't want to immediately split this out into stimulus controllers), I can just move it into a turbo:load event and be good to go? ...

kbond

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Running the Mercure Service in the symfony Binary

HI victor That you answer me, but can I use the "finally or If I using the Symfony binary as my local web server", It must be already runing" https://symfonycasts.com/screencast/turbo/mercure-service, min.-3:54 . I tried to download mercure.exe file and put it in my project ... but again i can not activate mercure ...

dsad

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Running the Mercure Service in the symfony Binary

Hey Basha, Yes, you need to start it with Symfony web server, i.e. run: $ symfony serve But please, read the first TIP on this page: https://symfonycasts.com/screencast/turbo/mercure-service - follow the instructions ...

Victor

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

... = e.target.getElementsByTagName( 'template' )[0].content.children[0] if(frame.tagName.toLowerCase() === 'turbo-frame' && frame.hasAttribute('src')) { frame.innerHTML = document.getElementById(frame.id).innerHTML } }); ```

Dave B.

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Frame Redirecting & Dynamic Frame Targets

... you referring to Symfony's fragments system - https://symfonycasts.com/screencast/turbo/frames-find-frames#using-fragment-uri ? Cheers!

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Turbo Stream for Instant Review Update

What is better solution taking into account server load (Mercure Hub)? Users subscribe for one topic "product reviews" so that Mercure Pushes information to all of them and Turbo, based on frame ID, decides if do something with it or not - like shown in tutorial. Or the better solution is to have unique topic for each product? ...

Tomasz-I

Read Full Comment

Comment

Expanding Code Blocks

Thanks for your reply Ryan. Actually I’m just into the code highlighting stuff for blog posts with shell scripts/source code. Expanding is not needed by me. And, by the way, many, many thanks for your great videos. Currently I’m into Stimulus, looking forward to Turbo. Keep on that great work. ...

tracer

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Processing Streams by Hand for Fun & Profit

            Copy Code

                            Show All Lines

                        103 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html lang="en-US">
        
                <head>
        
                Show Lines

                                                    // ... lines 4 - 13
                            
                </head>
        
                <body>
        
                Show Lines

                                                    // ... lines 16 - 69
                            
                        <div id="flash-container" data-turbo-cache="false">
        
                        {% for flash in app.session.flashBag.get('success') %}
        
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
        
                                {{ flash }}
        
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
        
                                  <span aria-hidden="true"></span>
        
                                </button>
        
                            </div>
        
                        {% endfor %}
        
                        </div>
        
                Show Lines

                                                    // ... lines 81 - 100
                            
                </body>
        
            </html>

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Automatically Redirect Ajax Calls to /login

            Copy Code

                            Show All Lines

                        54 lines
            |
            src/EventSubscriber/TurboFrameRedirectSubscriber.php
        
                Show Lines

                                                    // ... lines 1 - 10
                            
            class TurboFrameRedirectSubscriber implements EventSubscriberInterface
        
            {
        
                private UrlGeneratorInterface $urlGenerator;
        
                public function __construct(UrlGeneratorInterface $urlGenerator)
        
                {
        
                    $this->urlGenerator = $urlGenerator;
        
                }
        
                Show Lines

                                                    // ... lines 20 - 37
                            
                private function shouldWrapRedirect(Request $request, Response $response): bool
        
                {
        
                    if (!$response->isRedirection()) {
        
                        return false;
        
                    }
        
                    $location = $response->headers->get('Location');
        
                    if ($location === $this->urlGenerator->generate('app_login')) {
        
                        return true;
        
                    }
        
                    return (bool) $request->headers->get('Turbo-Frame-Redirect');
        
                }
        
            }

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Modal Twig Component

            Copy Code

                            Show All Lines

                        19 lines
            |
            templates/voyage/_row.html.twig
        
            <tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
        
                Show Lines

                                                    // ... lines 2 - 4
                            
                <td class="px-6 py-4 whitespace-nowrap">
        
                Show Lines

                                                    // ... lines 6 - 11
                            
                    <a
        
                        href="{{ path('app_voyage_edit', {'id': voyage.id}) }}"
        
                        class="ml-4 text-yellow-400 hover:text-yellow-600"
        
                        data-turbo-frame="modal"
        
                    >edit</a>
        
                </td>
        
            </tr>

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Live Components

            Copy Code

                            Show All Lines

                        89 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
                Show Lines

                                                    // ... lines 3 - 15
                            
                <body class="bg-black text-white font-mono">
        
                    <div class="container mx-auto min-h-screen flex flex-col">
        
                        <header class="my-8 px-4">
        
                            <nav class="flex items-center justify-between mb-4">
        
                Show Lines

                                                    // ... lines 20 - 31
                            
                                <twig:Modal :closeButton="true" padding="" :fixedTop="true" data-turbo-permanent id="global-search-modal">
        
                Show Lines

                                                    // ... lines 33 - 43
                            
                                </twig:Modal>
        
                            </nav>
        
                        </header>
        
                Show Lines

                                                    // ... lines 47 - 56
                            
                    </div>
        
                Show Lines

                                                    // ... lines 58 - 86
                            
                </body>
        
            </html>

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

AJAX Modal!

            Copy Code

                            Show All Lines

                        51 lines
            |
            templates/voyage/index.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="m-4 p-4 bg-gray-800 rounded-lg">
        
                <div
        
                    class="flex justify-between"
        
                >
        
                    <h1 class="text-xl font-semibold text-white mb-4">Voyages</h1>
        
                    <a
        
                        href="{{ path('app_voyage_new') }}"
        
                        data-turbo-frame="modal"
        
                        class="flex items-center space-x-1 bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold px-4 rounded"
        
                    >
        
                Show Lines

                                                    // ... lines 17 - 18
                            
                    </a>
        
                </div>
        
                Show Lines

                                                    // ... lines 21 - 48
                            
            </div>
        
            {% endblock %}

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Fancy things on Modal Form Success

            Copy Code

                            Show All Lines

                        106 lines
            |
            src/Controller/VoyageController.php
        
                Show Lines

                                                    // ... lines 1 - 15
                            
            class VoyageController extends AbstractController
        
            {
        
                Show Lines

                                                    // ... lines 18 - 25
                            
                #[Route('/new', name: 'app_voyage_new', methods: ['GET', 'POST'])]
        
                public function new(Request $request, EntityManagerInterface $entityManager): Response
        
                {
        
                Show Lines

                                                    // ... lines 29 - 32
                            
                    if ($form->isSubmitted() && $form->isValid()) {
        
                Show Lines

                                                    // ... lines 34 - 38
                            
                        if ($request->headers->has('turbo-frame')) {
        
                            $stream = $this->renderBlockView('voyage/new.html.twig', 'stream_success', [
        
                                'voyage' => $voyage
        
                            ]);
        
                            $this->addFlash('stream', $stream);
        
                        }
        
                Show Lines

                                                    // ... lines 46 - 47
                            
                    }
        
                Show Lines

                                                    // ... lines 49 - 53
                            
                }
        
                Show Lines

                                                    // ... lines 55 - 104
                            
            }

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

More with fun Modals! Editing & Deleting

            Copy Code

                            Show All Lines

                        122 lines
            |
            src/Controller/VoyageController.php
        
                Show Lines

                                                    // ... lines 1 - 15
                            
            class VoyageController extends AbstractController
        
            {
        
                Show Lines

                                                    // ... lines 18 - 91
                            
                public function delete(Request $request, Voyage $voyage, EntityManagerInterface $entityManager): Response
        
                {
        
                    if ($this->isCsrfTokenValid('delete'.$voyage->getId(), $request->request->get('_token'))) {
        
                        $id = $voyage->getId();
        
                Show Lines

                                                    // ... lines 96 - 100
                            
                        if ($request->headers->has('turbo-frame')) {
        
                            $stream = $this->renderBlockView('voyage/delete.html.twig', 'success_stream', [
        
                                'id' => $id,
        
                            ]);
        
                            $this->addFlash('stream', $stream);
        
                        }
        
                    }
        
                Show Lines

                                                    // ... lines 109 - 110
                            
                }
        
                Show Lines

                                                    // ... lines 112 - 120
                            
            }

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Turbo Drive

            Copy Code

                            Show All Lines

                        52 lines
            |
            templates/base.html.twig
        
                Show Lines

                                                    // ... lines 1 - 14
                            
                <body class="bg-black text-white font-mono">
        
                    <div class="container mx-auto min-h-screen flex flex-col">
        
                        <header class="my-8 px-4">
        
                            <nav class="flex items-center justify-between mb-4">
        
                                <div class="flex items-center">
        
                Show Lines

                                                    // ... lines 20 - 27
                            
                                    <a href="{{ path('app_voyage_index') }}" data-turbo-preload class="ml-6 hover:text-gray-400">Voyages</a>
        
                Show Lines

                                                    // ... line 29
                            
                                </div>
        
                Show Lines

                                                    // ... lines 31 - 36
                            
                            </nav>
        
                        </header>
        
                Show Lines

                                                    // ... lines 39 - 48
                            
                    </div>
        
                </body>
        
            </html>

See Code Block in Script

Code

Learn Symfony 6

Symfony 6 Fundamentals: Services, Config & Environments

Bundles!

            Copy Code

                        13 lines
            |
            config/bundles.php
        
            <?php
        
            return [
        
                Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
        
                Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
        
                Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
        
                Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
        
                Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
        
                Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true],
        
                Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
        
                Symfony\UX\Turbo\TurboBundle::class => ['all' => true],
        
            ];

See Code Block in Script

Comment

Learn JS Frameworks & Tools

Symfony UX: Stimulus

... should be opened or closed. > It feels like I'm missing something though, and even wondering if Turbo would solve this problem for me? Turbo CAN solve a lot of problems. But... probably not in this case. Well ...

weaverryan

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Data Tables with Turbo Frames

Hey @Fabrice! Sorry for the slow reply! But I'm happy to chat about this topic! > 1. Requests are submitted via Ajax using Turbo Drive (if I understood correctly). But if our application is not ready to ...

weaverryan

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Data Tables with Turbo Frames

Hey |mention:37880|! Morphing is alive and well on Turbo 8, though I admit that I don't have any real experience with it yet (not because it's bad or anything, I've just not been available!). If you have the `meta ...

weaverryan

Read Full Comment

Comment

Learn Symfony 6

30 Days with LAST Stack

Hey |mention:38873| Thank you for your kind words. I believe you need a full-page refresh for this case. To make a `turbo-frame` load the content on the outside you need to add this HTML attribute `target="_top"` I ...

MolloKhan

Read Full Comment

	<!DOCTYPE html>
	<html lang="en-US">
	<head>
Show Lines	// ... lines 4 - 13
	</head>
	<body>
Show Lines	// ... lines 16 - 69
	<div id="flash-container" data-turbo-cache="false">
	{% for flash in app.session.flashBag.get('success') %}
	<div class="alert alert-success alert-dismissible fade show" role="alert">
	{{ flash }}
	<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
	<span aria-hidden="true"></span>
	</button>
	</div>

	{% endfor %}
	</div>
Show Lines	// ... lines 81 - 100
	</body>
	</html>

Show Lines	// ... lines 1 - 10
	class TurboFrameRedirectSubscriber implements EventSubscriberInterface
	{
	private UrlGeneratorInterface $urlGenerator;

	public function __construct(UrlGeneratorInterface $urlGenerator)
	{
	$this->urlGenerator = $urlGenerator;
	}

Show Lines	// ... lines 20 - 37

	private function shouldWrapRedirect(Request $request, Response $response): bool
	{
	if (!$response->isRedirection()) {
	return false;
	}

	$location = $response->headers->get('Location');

	if ($location === $this->urlGenerator->generate('app_login')) {
	return true;
	}

	return (bool) $request->headers->get('Turbo-Frame-Redirect');
	}
	}

	<tr class="even:bg-gray-700 odd:bg-gray-600" id="voyage-list-item-{{ voyage.id }}">
Show Lines	// ... lines 2 - 4
	<td class="px-6 py-4 whitespace-nowrap">
Show Lines	// ... lines 6 - 11
	<a
	href="{{ path('app_voyage_edit', {'id': voyage.id}) }}"
	class="ml-4 text-yellow-400 hover:text-yellow-600"
	data-turbo-frame="modal"
	>edit</a>
	</td>
	</tr>

	<!DOCTYPE html>
	<html>
Show Lines	// ... lines 3 - 15
	<body class="bg-black text-white font-mono">
	<div class="container mx-auto min-h-screen flex flex-col">
	<header class="my-8 px-4">
	<nav class="flex items-center justify-between mb-4">
Show Lines	// ... lines 20 - 31
	<twig:Modal :closeButton="true" padding="" :fixedTop="true" data-turbo-permanent id="global-search-modal">
Show Lines	// ... lines 33 - 43
	</twig:Modal>
	</nav>
	</header>
Show Lines	// ... lines 47 - 56
	</div>
Show Lines	// ... lines 58 - 86
	</body>
	</html>

Show Lines	// ... lines 1 - 4
	{% block body %}
	<div class="m-4 p-4 bg-gray-800 rounded-lg">
	<div
	class="flex justify-between"
	>
	<h1 class="text-xl font-semibold text-white mb-4">Voyages</h1>

	<a
	href="{{ path('app_voyage_new') }}"
	data-turbo-frame="modal"
	class="flex items-center space-x-1 bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold px-4 rounded"
	>
Show Lines	// ... lines 17 - 18
	</a>
	</div>
Show Lines	// ... lines 21 - 48
	</div>
	{% endblock %}

Show Lines	// ... lines 1 - 15
	class VoyageController extends AbstractController
	{
Show Lines	// ... lines 18 - 25
	#[Route('/new', name: 'app_voyage_new', methods: ['GET', 'POST'])]
	public function new(Request $request, EntityManagerInterface $entityManager): Response
	{
Show Lines	// ... lines 29 - 32
	if ($form->isSubmitted() && $form->isValid()) {
Show Lines	// ... lines 34 - 38
	if ($request->headers->has('turbo-frame')) {
	$stream = $this->renderBlockView('voyage/new.html.twig', 'stream_success', [
	'voyage' => $voyage
	]);

	$this->addFlash('stream', $stream);
	}
Show Lines	// ... lines 46 - 47
	}
Show Lines	// ... lines 49 - 53
	}
Show Lines	// ... lines 55 - 104
	}

Show Lines	// ... lines 1 - 14
	<body class="bg-black text-white font-mono">
	<div class="container mx-auto min-h-screen flex flex-col">
	<header class="my-8 px-4">
	<nav class="flex items-center justify-between mb-4">
	<div class="flex items-center">
Show Lines	// ... lines 20 - 27
	<a href="{{ path('app_voyage_index') }}" data-turbo-preload class="ml-6 hover:text-gray-400">Voyages</a>
Show Lines	// ... line 29
	</div>
Show Lines	// ... lines 31 - 36
	</nav>
	</header>
Show Lines	// ... lines 39 - 48
	</div>
	</body>
	</html>

	<?php

	return [
	Symfony\Bundle\FrameworkBundle\FrameworkBundle::class => ['all' => true],
	Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],
	Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
	Symfony\Bundle\WebProfilerBundle\WebProfilerBundle::class => ['dev' => true, 'test' => true],
	Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
	Symfony\Bundle\DebugBundle\DebugBundle::class => ['dev' => true],
	Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
	Symfony\UX\Turbo\TurboBundle::class => ['all' => true],
	];