Search Results for: Turbo

590 search results for Turbo

Sort By

Comment

Learn Symfony 6

30 Days with LAST Stack

Fantastic Modal UX with a Loading State

... the native close event so we can close everything. But.... (there's always one), how do you handle the following: Let's say the user clicks a link, modal with turbo frame opens but the loading time is longer then ...

webstack

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

... 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 any entity ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

Thanks for the response Ryan, but still not working This is the current error now: ``` Module build failed (from ./node_modules/@symfony/stimulus-bridge/dist/webpack/loader.js): Error: The file "@symfony/ux-turbo ...

Xavier-V

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Toast Notifications

... server, that is just a normal link, right? You shouldn't need to do anything (write any custom JavaScript) - you can just allow the link to be a normal link and then, on click, Turbo will follow it. I feel I'm missing some ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Hi Ryan Thanks. Yes I wanted to use new Update() or Entity Broadcast to render user specific views. Returning the turbo frame with the src to get this content works well e.g. ``` // _list.stream.html.twig ...

Dave B.

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Reloading When JS/CSS Changes

Hey Ewald V.! That's... actually a great question! There are two parts to this: A) In Turbo, they need to know which things we consider as "assets" that should be tracked. So, they make us add this attribute. Maybe ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Turbo Frames: Lazy Frames

... IIRC it's a change in Turbo, so now no error is supposed to happen anymore.

jmsche

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Automatically Redirect Ajax Calls to /login

I think this chapter can be skipped for users of a recent version of Turbo :) ...

jmsche

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Lazy Modal & Big Cleanup

            Copy Code

                            Show All Lines

                        104 lines
            |
            src/Controller/ProductAdminController.php
        
                Show Lines

                                                    // ... lines 1 - 81
                            
                    return $this->renderForm('product_admin/edit.html.twig', [
        
                        'product' => $product,
        
                        'form' => $form,
        
                        'formTarget' => $request->headers->get('Turbo-Frame', '_top')
        
                    ]);
        
                }
        
                Show Lines

                                                    // ... lines 89 - 104

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Form Submits & The Preview Feature

            Copy Code

                            Show All Lines

                        36 lines
            |
            templates/registration/register.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block metas %}
        
                <meta name="turbo-cache-control" content="no-preview">
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 8 - 36

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

The "defer" Attribute & Conditionally Activating Turbo

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 11
                            
                    {% endblock %}
        
                </head>
        
                <body data-turbo="false">
        
                    <div class="page-top">
        
                        <header class="header px-2">
        
                Show Lines

                                                    // ... lines 17 - 84

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

HTML dialog for Modals

            Copy Code

                            Show All Lines

                        34 lines
            |
            templates/_flashes.html.twig
        
            {% for message in app.flashes('success') %}
        
                <div
        
                Show Lines

                                                    // ... lines 3 - 4
                            
                    data-turbo-temporary
        
                Show Lines

                                                    // ... lines 6 - 7
                            
                >
        
                Show Lines

                                                    // ... lines 9 - 31
                            
                </div>
        
            {% endfor %}

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

HTML dialog for Modals

            Copy Code

                            Show All Lines

                        42 lines
            |
            assets/app.js
        
                Show Lines

                                                    // ... lines 1 - 20
                            
            document.addEventListener('turbo:load', () => {
        
                // View Transitions don't play nicely with Turbo cache
        
                // if (shouldPerformTransition()) Turbo.cache.exemptPageFromCache();
        
            });
        
                Show Lines

                                                    // ... lines 25 - 42

See Code Block in Script

Code

Learn Symfony 6

AssetMapper: Modern JS with Zero Build System

Preloading

            Copy Code

                            Show All Lines

                        37 lines
            |
            importmap.php
        
                Show Lines

                                                    // ... lines 1 - 15
                            
            return [
        
                Show Lines

                                                    // ... lines 17 - 23
                            
                '@hotwired/stimulus' => [
        
                Show Lines

                                                    // ... line 25
                            
                    'preload' => true,
        
                ],
        
                '@symfony/stimulus-bundle' => [
        
                Show Lines

                                                    // ... line 29
                            
                    'preload' => true,
        
                ],
        
                '@hotwired/turbo' => [
        
                Show Lines

                                                    // ... line 33
                            
                    'preload' => true,
        
                ],
        
            ];

See Code Block in Script

Blog

Live Stream 8 Live Component JavaScript Internals

... & the new UX 2.14.1 version 1:30 Pull request for the icon package! 3:30 Monthly release structure for UX 9:30 The new Type component for Symfony 11:45 Turbo 8 is out! 15:00 Hello LiveComponents JavaScript 18:40 What happens ...

By weaverryan

Read Full Post

Blog

Your LAST Stack

... 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 standard that's now supported on all major browsers (and ...

By weaverryan and stof

Read Full Post

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

... controllers. It is amazing when you get symfony ux in there. I add/remove rows 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 ...

Nick-F

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Stimulus

Listening to An Event From Another Controller

Hi Ryan, nice work!! Just a note. When I have nested stimulus controllers and the child one inside a turbo frame like this: ``` ``` The method_name in controller_2 is ...

Alcides

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Hi Thanks for all the great content. Was just wondering if there is some way to keep the existing Turbo frame content instead of replacing it with a temporary loading icon etc until new frame content is rendered? For ...

Dave B.

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Stimulus

Free 3rd Party Controllers!

... ;) > I will also say that Stimulus integration has been the most exciting thing for me since learning Symfony! I feel that same way - along with Turbo. It's completely changed the JavaScript paradigm for me, and ...

weaverryan

Read Full Comment

Show Lines	// ... lines 1 - 81

	return $this->renderForm('product_admin/edit.html.twig', [
	'product' => $product,
	'form' => $form,
	'formTarget' => $request->headers->get('Turbo-Frame', '_top')
	]);
	}
Show Lines	// ... lines 89 - 104

Show Lines	// ... lines 1 - 4
	{% block metas %}
	<meta name="turbo-cache-control" content="no-preview">
	{% endblock %}
Show Lines	// ... lines 8 - 36

Show Lines	// ... lines 1 - 11
	{% endblock %}
	</head>
	<body data-turbo="false">
	<div class="page-top">
	<header class="header px-2">
Show Lines	// ... lines 17 - 84

	{% for message in app.flashes('success') %}
	<div
Show Lines	// ... lines 3 - 4
	data-turbo-temporary
Show Lines	// ... lines 6 - 7
	>
Show Lines	// ... lines 9 - 31
	</div>
	{% endfor %}

Show Lines	// ... lines 1 - 20
	document.addEventListener('turbo:load', () => {
	// View Transitions don't play nicely with Turbo cache
	// if (shouldPerformTransition()) Turbo.cache.exemptPageFromCache();
	});
Show Lines	// ... lines 25 - 42

Show Lines	// ... lines 1 - 15
	return [
Show Lines	// ... lines 17 - 23
	'@hotwired/stimulus' => [
Show Lines	// ... line 25
	'preload' => true,
	],
	'@symfony/stimulus-bundle' => [
Show Lines	// ... line 29
	'preload' => true,
	],
	'@hotwired/turbo' => [
Show Lines	// ... line 33
	'preload' => true,
	],
	];