Search Results | SymfonyCasts

687 search results

Sort By

Code

Learn Symfony

30 Days with LAST Stack

Modal Twig Component

            Copy Code

                        40 lines
            |
            templates/components/Modal.html.twig
        
            <div
        
                data-controller="modal"
        
                data-action="turbo:before-cache@window->modal#close"
        
            >
        
                <dialog
        
                    class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
        
                    data-modal-target="dialog"
        
                    data-action="close->modal#close click->modal#clickOutside"
        
                >
        
                    <div class="flex grow p-5">
        
                        <div class="grow overflow-auto p-1">
        
                            <turbo-frame
        
                                id="modal"
        
                                data-modal-target="dynamicContent"
        
                                data-action="turbo:before-fetch-request->modal#showLoading"
        
                                class="aria-busy:opacity-50 transition-opacity"
        
                            >
        
                                {{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
        
                            </turbo-frame>
        
                        </div>
        
                    </div>
        
                </dialog>
        
                <template data-modal-target="loadingTemplate">
        
                    <div class="bg-space-pattern bg-cover rounded-lg p-8">
        
                        <div class="space-y-2">
        
                            <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                            <div class="h-4"></div>
        
                            <div class="h-4 bg-gray-700 rounded animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
        
                            <div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
        
                            <div class="h-4"></div>
        
                            <div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
        
                        </div>
        
                    </div>
        
                </template>
        
            </div>

See Code Block in Script

Code

Learn Symfony

30 Days with LAST Stack

AJAX Modal!

            Copy Code

                        2 lines
            |
            templates/modalBase.html.twig
        
            {% extends app.request.headers.get('turbo-frame') == 'modal' ? 'modalFrame.html.twig' : 'base.html.twig' %}

See Code Block in Script

Code

Learn Symfony

30 Days with LAST Stack

More with fun Modals! Editing & Deleting

            Copy Code

                        9 lines
            |
            templates/_frameSuccessStreams.html.twig
        
            {% if app.request.headers.get('turbo-frame') == frame %}
        
                <turbo-stream action="append" target="flash-container">
        
                    <template>{{ include('_flashes.html.twig') }}</template>
        
                </turbo-stream>
        
                {% for stream in app.flashes('stream') %}
        
                    {{ stream|raw }}
        
                {% endfor %}
        
            {% endif %}

See Code Block in Script

Comment

Learn JS

Symfony UX: Turbo

How Turbo Drive Works

…I haven't enabled Turbo for EA yet, so can't tell you for sure... but there should not be any problems I think... there were some problems in the past as I see: https://github.com/EasyCorp/EasyAdminBundle/issues?q=is%3Aissue+turbo+is%3Aclosed …

Victor

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Installing Turbo

There are some incompatibilities with the Turbo JavaScript library and the web debug toolbar... but I've never had a chance to dive into them. However, they've never actually caused my any real issues. But, we really do need to hunt those down - the…

weaverryan

Read Full Comment

Comment

Learn JS

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

Symfony UX: Turbo

Targeting Links in or out of the Frame

It seems that with recent versions of Turbo (eg. 7.2.4) adding `target="_top"` is not required anymore. Unfortunately I can't find out why in Turbo release notes :/ Any idea what caused that improvement?

jmsche

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Smartly Updating Elements for all Users

Hello, I am using UX Turbo, I watched this doc : https://github.com/symfony/ux-turbo/#sending-async-changes-using-mercure-a-chat I wanted to know if it is possible to push data to selected users through a query, but also push other data…

seb-jean

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Manual Visits with Turbo

…ajax response which is why I can't simply generate them in twig and pass them to the stimulus controller. It would be awesome if this functionality was built into Turbo. Or is there a completely different way that I just don't know about

Nick-F

Read Full Comment

Code

Learn JS

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 JS

Symfony UX: Turbo

The "defer" Attribute & Conditionally Activating Turbo

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 27
                            
                                <ul class="navbar-nav" data-turbo="true">
        
                                    <li class="nav-item">
        
                                        <a class="nav-link" href="{{ path('app_cart') }}">
        
                                            Shopping Cart ({{ count_cart_items() }})
        
                                        </a>
        
                                    </li>
        
                Show Lines

                                                    // ... lines 35 - 84

See Code Block in Script

Comment

Learn Symfony

30 Days with LAST Stack

HTML dialog for Modals

Hey |mention:91995| It is telling you the package `turbo-view-transitions` was not found (for some reason). Can you double-check that it's installed? You can install it by running `php bin/console importmap:require turbo-view-transitions` Cheers!

MolloKhan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

The "defer" Attribute & Conditionally Activating Turbo

Hey |mention:90254| Your problem can likely be solved with a `Turbo-Frame`. Have you watched those chapters yet? Take a look at them and let me know if you run into trouble Cheers!

MolloKhan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

The "defer" Attribute & Conditionally Activating Turbo

I have a question concerning form submission with Turbo. (I have not even finished all these videos yet, so the answer may be there, but twith time constraints I'm hoping someone can give me clue...) Obviously turbo works great with form submission and will…

JeffJones

Read Full Comment

Comment

Learn Symfony

AssetMapper: Modern JS with Zero Build System

Lazy Stimulus Controllers

Yes, I just disabled Turbo drive ( Turbo.session.drive = false;) and the lazy controllers work as expected. As soon as I enable turbo again, they stop working when navigating from another page.

Nicolas-S

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Fixing External JS + Analytics Code

Hey |mention:11130| You can listen to the `turbo:before-render` event, find the recaptcha script tag in your HTML, and reload it. I suppose you can reload it by removing the element from the DOM and the adding it again Cheers!

MolloKhan

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

How Turbo Drive Works

Hey |mention:45357| I think you can add the `.turbo-progress-bar` css class in your styles and change any attribute you want Cheers!

MolloKhan

Read Full Comment

Comment

Learn Symfony

30 Days with LAST Stack

Stimulus

Thank you so much. Turbo was enabled in controllers.json. Now it works fine. That's great!

Delenclos-A

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Processing Streams by Hand for Fun & Profit

…the *data-turbo-cach"false"* directly into the div.alert within the turbo-stream from the stimulus controller. I aslo added the attribute to the default div.alert from base.html.twig for not caching other flash messages. Notice, since @hotwired/turbo version >= 7…

Nondediou

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Frame Redirecting and Clearing the Snapshot Cache

Hey Infourok, Are you on the latest version of Turbo? Otherwise, you can follow the same workaround we're using in this course. Cheers!

Victor

Read Full Comment

9 10 11 12 13

	<div
	data-controller="modal"
	data-action="turbo:before-cache@window->modal#close"
	>
	<dialog
	class="open:flex bg-gray-800 rounded-lg shadow-xl inset-0 w-full md:w-fit md:max-w-[50%] md:min-w-[50%] animate-fade-in backdrop:bg-slate-600 backdrop:opacity-80"
	data-modal-target="dialog"
	data-action="close->modal#close click->modal#clickOutside"
	>
	<div class="flex grow p-5">
	<div class="grow overflow-auto p-1">
	<turbo-frame
	id="modal"
	data-modal-target="dynamicContent"
	data-action="turbo:before-fetch-request->modal#showLoading"
	class="aria-busy:opacity-50 transition-opacity"
	>
	{{ include('_frameSuccessStreams.html.twig', { frame: 'modal' }) }}
	</turbo-frame>
	</div>
	</div>
	</dialog>

	<template data-modal-target="loadingTemplate">
	<div class="bg-space-pattern bg-cover rounded-lg p-8">
	<div class="space-y-2">
	<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
	<div class="h-4"></div>
	<div class="h-4 bg-gray-700 rounded animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
	<div class="h-4 bg-gray-700 rounded w-3/4 animate-pulse"></div>
	<div class="h-4"></div>
	<div class="h-4 bg-gray-700 rounded w-1/2 animate-pulse"></div>
	</div>
	</div>
	</template>
	</div>

	{% if app.request.headers.get('turbo-frame') == frame %}
	<turbo-stream action="append" target="flash-container">
	<template>{{ include('_flashes.html.twig') }}</template>
	</turbo-stream>
	{% for stream in app.flashes('stream') %}
	{{ stream\|raw }}
	{% endfor %}
	{% endif %}

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

Show Lines	// ... lines 1 - 27

	<ul class="navbar-nav" data-turbo="true">
	<li class="nav-item">
	<a class="nav-link" href="{{ path('app_cart') }}">
	Shopping Cart ({{ count_cart_items() }})
	</a>
	</li>
Show Lines	// ... lines 35 - 84