Search Results | SymfonyCasts

687 search results

Sort By

Code

Learn JS

Symfony UX: Turbo

Frame Loading Animations

            Copy Code

                            Show All Lines

                        66 lines
            |
            templates/checkout/checkout.html.twig
        
                Show Lines

                                                    // ... lines 1 - 10
                            
                    <div class="row">
        
                        <aside class="col-12 col-lg-4">
        
                            <turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
        
                                Loading...
        
                            </turbo-frame>
        
                        </aside>
        
                Show Lines

                                                    // ... lines 18 - 66

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Adding a "Read More" Ajax Frame

            Copy Code

                            Show All Lines

                        32 lines
            |
            templates/cart/cart.html.twig
        
                Show Lines

                                                    // ... lines 1 - 10
                            
                        <aside class="col-12 col-md-4 order-2 order-md-1">
        
                            <turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
        
                                Loading...
        
                            </turbo-frame>
        
                        </aside>
        
                Show Lines

                                                    // ... lines 16 - 32

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Targeting Links in or out of the Frame

            Copy Code

                            Show All Lines

                        32 lines
            |
            templates/cart/cart.html.twig
        
                Show Lines

                                                    // ... lines 1 - 10
                            
                        <aside class="col-12 col-md-4 order-2 order-md-1">
        
                            <turbo-frame id="cart-sidebar" src="{{ fragment_uri(controller('App\\Controller\\CartController::_cartFeaturedProduct')) }}" target="_top">
        
                                Loading...
        
                            </turbo-frame>
        
                        </aside>
        
                Show Lines

                                                    // ... lines 17 - 32

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Turbo Frames Look for & Load the Matching Frame

            Copy Code

                            Show All Lines

                        32 lines
            |
            templates/cart/cart.html.twig
        
                Show Lines

                                                    // ... lines 1 - 10
                            
                        <aside class="col-12 col-md-4 order-2 order-md-1">
        
                            <turbo-frame id="cart-sidebar" src="{{ fragment_uri(controller('App\\Controller\\CartController::_cartFeaturedProduct')) }}">
        
                                Loading...
        
                            </turbo-frame>
        
                        </aside>
        
                Show Lines

                                                    // ... lines 16 - 32

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Turbo Frames: Lazy Frames

            Copy Code

                            Show All Lines

                        34 lines
            |
            package.json
        
                Show Lines

                                                    // ... line 1
                            
                "devDependencies": {
        
                    "@babel/preset-react": "^7.0.0",
        
                    "@fortawesome/fontawesome-free": "^5.15.3",
        
                    "@hotwired/turbo": "^7.0.0-beta.5",
        
                    "@popperjs/core": "^2.9.1",
        
                    "@symfony/stimulus-bridge": "^2.0.0",
        
                Show Lines

                                                    // ... lines 8 - 34

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Turbo Frames: Lazy Frames

            Copy Code

                            Show All Lines

                        32 lines
            |
            templates/cart/cart.html.twig
        
                Show Lines

                                                    // ... lines 1 - 10
                            
                        <aside class="col-12 col-md-4 order-2 order-md-1">
        
                            <turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}">
        
                                Loading...
        
                            </turbo-frame>
        
                        </aside>
        
                Show Lines

                                                    // ... lines 16 - 32

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Manual Visits with Turbo

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 96
                            
                    <script>
        
                    document.getElementById('logo-img').addEventListener('click', (event) => {
        
                        event.preventDefault();
        
                        Turbo.visit('/cart');
        
                    })
        
                    </script>
        
                Show Lines

                                                    // ... lines 103 - 105

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

CSS Page Transitions

            Copy Code

                            Show All Lines

                        173 lines
            |
            assets/styles/app.css
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            body {
        
                font-family: 'Montserrat', sans-serif;
        
                transition: opacity 1000ms;
        
            }
        
            body.turbo-loading, body.turbo-loaded {
        
                opacity: .2;
        
            }
        
                Show Lines

                                                    // ... lines 12 - 173

See Code Block in Script

Comment

Learn JS

Symfony UX: Turbo

Organizing our Turbo Events Code

…it - they're kind of fun, and fit right into the Turbo & Stimulus world (one is built on top of Stimulus): https://github.com/symfony/ux-twig-component and https://github.com/symfony/ux-live-component Anyways, we should be right back on our normal…

weaverryan

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Fixing the Sweetalert Modal

            Copy Code

                            Show All Lines

                        31 lines
            |
            assets/app.js
        
                Show Lines

                                                    // ... lines 1 - 13
                            
            import { Modal } from 'bootstrap';
        
            import Swal from 'sweetalert2';
        
            document.addEventListener('turbo:before-cache', () => {
        
                if (document.body.classList.contains('modal-open')) {
        
                    const modalEl = document.querySelector('.modal');
        
                    const modal = Modal.getInstance(modalEl);
        
                    modalEl.classList.remove('fade');
        
                    modal._backdrop._config.isAnimated = false;
        
                    modal.hide();
        
                    modal.dispose();
        
                }
        
                if (Swal.isVisible()) {
        
                    Swal.close();
        
                }
        
            });

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Fixing the Sweetalert Modal

            Copy Code

                            Show All Lines

                        32 lines
            |
            assets/app.js
        
                Show Lines

                                                    // ... lines 1 - 13
                            
            import { Modal } from 'bootstrap';
        
            import Swal from 'sweetalert2';
        
            document.addEventListener('turbo:before-cache', () => {
        
                if (document.body.classList.contains('modal-open')) {
        
                    const modalEl = document.querySelector('.modal');
        
                    const modal = Modal.getInstance(modalEl);
        
                    modalEl.classList.remove('fade');
        
                    modal._backdrop._config.isAnimated = false;
        
                    modal.hide();
        
                    modal.dispose();
        
                }
        
                if (Swal.isVisible()) {
        
                    Swal.getPopup().style.animationDuration = '0ms'
        
                    Swal.close();
        
                }
        
            });

See Code Block in Script

Comment

Learn JS

Symfony UX: Stimulus

useTransition in a Neat, Reusable Module

Hey Michael B.! Ah!!! This is awesome - and I'm so honored. Alpine is a very powerful system - so I'm even happier that you like Stimulus (I also much prefer its approach). And Turbo is... starting today! Cheers!

weaverryan

Read Full Comment

Comment

Learn Symfony 5

Doctrine, Symfony & the Database

Foundry Tricks

… Yea, sorry about the big delay - we've been busy with a bunch of frontend stuff (Stimulus, Turbo), which I know a lot of people LOVE... but also a lot of people want this stuff too :). > Authentication and generating fixtures with relationships are things…

weaverryan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

…That being said, the community is huge, the projects using Stimulus & Turbo are huge - so we'll find a path forward. The technology is just too good not to :). Edit: For others reading this, the loss of the 2 maintainers was not for any reasons…

weaverryan

Read Full Comment

Comment

Learn JS

Symfony UX: Stimulus

My mind is now fully blown by how easy and intuitive stimulus makes doing front-end javascript dev without abandoning Twig. Thanks and I can't wait for the Turbo course!

akincer

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Hey Axel! We'll cover that :). Well, specifically Turbo and Mercure - there is absolutely a built-in feature for having a section of your site subscribe for updates and have them added automatically. It's pretty sweet. Cheers!

weaverryan

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Turbo Drive

…that you can move between previously visited pages using browser navigation without downloading them again from the server, but how to prevent this after logging out (for pages that should not be available to non-logged in users)? Does Trubo provide any mechanisms for this?

Nataniel-Z

Read Full Comment

Comment

Learn Symfony

Upgrading to Symfony 8

Upgrading to Symfony 8.0!

…`symfony/stimulus-bundle`, and `symfony/ux-turbo`. Once those were bumped, the `composer.lock` update reflected the new resolved graph, and the app was then verified in the browser plus the Turbo/Stimulus checks. --- **Sources:** - [Upgrading to Symfony 8.0!](/screencast/symfony8-upgrade/symfony-80…

Brontie

Read Full Comment

Comment

Learn Symfony

Upgrading to Symfony 8

Upgrading to Symfony 8.0!

…`symfony/stimulus-bundle`, and `symfony/ux-turbo`: ```terminal symfony composer outdated -D ``` In this chapter’s flow, the Symfony 8 upgrade is validated by the app booting, Turbo still showing AJAX navigation in the web debug toolbar, and Stimulus still initializing in the browser console…

Brontie

Read Full Comment

Comment

Learn Symfony

Symfony Bundle Development: Share the Love

Initialize the Bundle

…up stimulus controllers and other assets? I'm pretty sure some bundles I've used have twig controllers and themes, but I'm not sure about assets. I'm just starting out with Symfony, but the few projects I have all use turbo and stimulus.

JeffJones

Read Full Comment

Show Lines	// ... lines 1 - 10
	<div class="row">
	<aside class="col-12 col-lg-4">
	<turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
	Loading...
	</turbo-frame>
	</aside>

Show Lines	// ... lines 18 - 66

Show Lines	// ... lines 1 - 10
	<aside class="col-12 col-md-4 order-2 order-md-1">
	<turbo-frame id="cart-sidebar" src="{{ path('_app_cart_product_featured') }}" target="_top">
	Loading...
	</turbo-frame>
	</aside>
Show Lines	// ... lines 16 - 32

Show Lines	// ... line 1
	"devDependencies": {
	"@babel/preset-react": "^7.0.0",
	"@fortawesome/fontawesome-free": "^5.15.3",
	"@hotwired/turbo": "^7.0.0-beta.5",
	"@popperjs/core": "^2.9.1",
	"@symfony/stimulus-bridge": "^2.0.0",
Show Lines	// ... lines 8 - 34

Show Lines	// ... lines 1 - 96
	<script>
	document.getElementById('logo-img').addEventListener('click', (event) => {
	event.preventDefault();
	Turbo.visit('/cart');
	})
	</script>
Show Lines	// ... lines 103 - 105

Show Lines	// ... lines 1 - 4
	body {
	font-family: 'Montserrat', sans-serif;
	transition: opacity 1000ms;
	}
	body.turbo-loading, body.turbo-loaded {
	opacity: .2;
	}
Show Lines	// ... lines 12 - 173

Show Lines	// ... lines 1 - 13
	import { Modal } from 'bootstrap';
	import Swal from 'sweetalert2';

	document.addEventListener('turbo:before-cache', () => {
	if (document.body.classList.contains('modal-open')) {
	const modalEl = document.querySelector('.modal');
	const modal = Modal.getInstance(modalEl);
	modalEl.classList.remove('fade');
	modal._backdrop._config.isAnimated = false;
	modal.hide();
	modal.dispose();
	}

	if (Swal.isVisible()) {
	Swal.close();
	}
	});