Search Results | SymfonyCasts

682 search results

Sort By

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

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

Comment

Learn Symfony

30 Days with LAST Stack

AJAX Modal!

Hey |mention:91995| I just answered your other message, but I just realized that you're using Webpack Encore, not AssetMapper, right? In general, you need to install the package `turbo-view-transitions` and rebuild your assets Cheers!

MolloKhan

Read Full Comment

Comment

Learn Symfony

Cosmic Coding with Symfony 7

…includes doing work here! Fortunately Kevin is now "spun up" & I'm also recording, so we're hoping to accelerate. Not sure about PWAs this year, I'm also interested in https://turbo.hotwired.dev/handbook/native but haven't played with it yet Cheers!

weaverryan

Read Full Comment

Comment

Learn Symfony

Cosmic Coding with Symfony 7

Twig & Templates

…done this way. Depending on exact situation there can be found different ways, for example maybe some turbo frame with menu to display what you need. And if you want do it inside the twig, you can get current route name from request, and compare…

sadikoff

Read Full Comment

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();
	}
	});