Search Results | SymfonyCasts

690 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

Code

Learn Symfony

Symfony Security: Going Further

Sudo Mode: Requiring Full Authentication

            Copy Code

                            Show All Lines

                        75 lines
            |
            templates/security/login.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
                <section class="px-6 py-10 sm:py-16">
        
                    <div class="mx-auto max-w-md">
        
                        <div class="rounded-2xl border border-white/10 bg-[#16202A]/80 p-8 shadow-2xl shadow-black/30 backdrop-blur-sm">
        
                Show Lines

                                                    // ... lines 9 - 18
                            
                            <form method="post" class="space-y-6" data-turbo="false">
        
                Show Lines

                                                    // ... lines 20 - 25
                            
                                {% if app.user %}
        
                                    <input type="hidden" name="_username" value="{{ app.user.userIdentifier }}">
        
                                {% else %}
        
                Show Lines

                                                    // ... lines 29 - 41
                            
                                {% endif %}
        
                Show Lines

                                                    // ... lines 43 - 69
                            
                            </form>
        
                        </div>
        
                    </div>
        
                </section>
        
            {% endblock %}

See Code Block in Script

Code

Learn Symfony

Symfony Security: Going Further

Sudo Mode: Requiring Full Authentication

            Copy Code

                            Show All Lines

                        75 lines
            |
            templates/security/login.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
                <section class="px-6 py-10 sm:py-16">
        
                    <div class="mx-auto max-w-md">
        
                        <div class="rounded-2xl border border-white/10 bg-[#16202A]/80 p-8 shadow-2xl shadow-black/30 backdrop-blur-sm">
        
                Show Lines

                                                    // ... lines 9 - 18
                            
                            <form method="post" class="space-y-6" data-turbo="false">
        
                Show Lines

                                                    // ... lines 20 - 57
                            
                                {% if app.user %}
        
                                    <input type="hidden" name="_remember_me" value="1">
        
                                {% else %}
        
                Show Lines

                                                    // ... lines 61 - 64
                            
                                {% endif %}
        
                Show Lines

                                                    // ... lines 66 - 69
                            
                            </form>
        
                        </div>
        
                    </div>
        
                </section>
        
            {% endblock %}

See Code Block in Script

Code

Learn Symfony

Symfony Security: Going Further

Sudo Mode: Requiring Full Authentication

            Copy Code

                            Show All Lines

                        75 lines
            |
            templates/security/login.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
                <section class="px-6 py-10 sm:py-16">
        
                    <div class="mx-auto max-w-md">
        
                        <div class="rounded-2xl border border-white/10 bg-[#16202A]/80 p-8 shadow-2xl shadow-black/30 backdrop-blur-sm">
        
                Show Lines

                                                    // ... lines 9 - 18
                            
                            <form method="post" class="space-y-6" data-turbo="false">
        
                Show Lines

                                                    // ... lines 20 - 66
                            
                                <button class="w-full rounded-lg bg-green-700 px-5 py-3 font-semibold text-white transition hover:bg-green-800 cursor-pointer" type="submit">
        
                                    {{ app.user ? 'Confirm' : 'Sign in' }}
        
                                </button>
        
                            </form>
        
                        </div>
        
                    </div>
        
                </section>
        
            {% endblock %}

See Code Block in Script

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

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

Show Lines	// ... lines 1 - 4
	{% block body %}
	<section class="px-6 py-10 sm:py-16">
	<div class="mx-auto max-w-md">
	<div class="rounded-2xl border border-white/10 bg-[#16202A]/80 p-8 shadow-2xl shadow-black/30 backdrop-blur-sm">
Show Lines	// ... lines 9 - 18
	<form method="post" class="space-y-6" data-turbo="false">
Show Lines	// ... lines 20 - 25
	{% if app.user %}
	<input type="hidden" name="_username" value="{{ app.user.userIdentifier }}">
	{% else %}
Show Lines	// ... lines 29 - 41
	{% endif %}
Show Lines	// ... lines 43 - 69
	</form>
	</div>
	</div>
	</section>
	{% endblock %}