Search Results for: Turbo

590 search results for Turbo

Sort By

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Frame Loading Animations

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 18
                            
            turbo-frame[busy] .frame-loading-hide, turbo-frame .frame-loading-show {
        
                display: none;
        
            }
        
            turbo-frame[busy] .frame-loading-show {
        
                display: inline-block;
        
            }
        
                Show Lines

                                                    // ... lines 25 - 180

See Code Block in Script

Code

Learn Symfony 6

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 Frameworks & Tools

Symfony UX: Turbo

Installing Turbo

That link doesn't work, but you're talking about stimulus, and he is asking why turbo isn't working. That is a really important question: how do you integrate turbo into easy admin? I have implemented turbo frames, but I cannot get turbo drive to work because it messes up the javascript with the easy admin bundle. ...

Nick-F

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Entity Broadcast

            Copy Code

                            Show All Lines

                        27 lines
            |
            templates/broadcast/Review.stream.html.twig
        
            {% block create %}
        
                <turbo-stream action="update" target="product-{{ entity.product.id }}-quick-stats">
        
                    <template>
        
                        {{ include('product/_quickStats.html.twig', {
        
                            product: entity.product
        
                        }) }}
        
                    </template>
        
                </turbo-stream>
        
                <turbo-stream action="append" target="product-{{ entity.product.id }}-review-list">
        
                    <template>
        
                        {{ include('product/_review.html.twig', {
        
                            review: entity,
        
                            isNew: true
        
                        }) }}
        
                    </template>
        
                </turbo-stream>
        
            {% endblock %}
        
                Show Lines

                                                    // ... lines 19 - 27

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Fancy things on Modal Form Success

            Copy Code

                            Show All Lines

                        99 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
                Show Lines

                                                    // ... lines 3 - 15
                            
                <body class="bg-black text-white font-mono">
        
                Show Lines

                                                    // ... lines 17 - 55
                            
                    <div
        
                Show Lines

                                                    // ... lines 57 - 58
                            
                    >
        
                        <dialog
        
                Show Lines

                                                    // ... lines 61 - 63
                            
                        >
        
                            <div class="flex grow p-5">
        
                                <div class="grow overflow-auto p-1">
        
                                    <turbo-frame
        
                                        id="modal"
        
                Show Lines

                                                    // ... lines 69 - 71
                            
                                    >
        
                                        <turbo-stream action="append" target="flash-container">
        
                                            <template>{{ include('_flashes.html.twig') }}</template>
        
                                        </turbo-stream>
        
                                    </turbo-frame>
        
                                </div>
        
                            </div>
        
                        </dialog>
        
                Show Lines

                                                    // ... lines 80 - 95
                            
                    </div>
        
                </body>
        
            </html>

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Fancy things on Modal Form Success

            Copy Code

                            Show All Lines

                        99 lines
            |
            templates/base.html.twig
        
            <!DOCTYPE html>
        
            <html>
        
                Show Lines

                                                    // ... lines 3 - 15
                            
                <body class="bg-black text-white font-mono">
        
                Show Lines

                                                    // ... lines 17 - 55
                            
                    <div
        
                Show Lines

                                                    // ... lines 57 - 58
                            
                    >
        
                        <dialog
        
                Show Lines

                                                    // ... lines 61 - 63
                            
                        >
        
                            <div class="flex grow p-5">
        
                                <div class="grow overflow-auto p-1">
        
                                    <turbo-frame
        
                                        id="modal"
        
                Show Lines

                                                    // ... lines 69 - 71
                            
                                    >
        
                                        <turbo-stream action="append" target="flash-container">
        
                Show Lines

                                                    // ... line 74
                            
                                        </turbo-stream>
        
                                    </turbo-frame>
        
                                </div>
        
                            </div>
        
                        </dialog>
        
                Show Lines

                                                    // ... lines 80 - 95
                            
                    </div>
        
                </body>
        
            </html>

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Turbo Frames

            Copy Code

                            Show All Lines

                        56 lines
            |
            templates/planet/show.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="m-4 p-4 bg-gray-800 rounded-lg">
        
                Show Lines

                                                    // ... lines 7 - 8
                            
                <turbo-frame id="planet-info">
        
                Show Lines

                                                    // ... lines 10 - 35
                            
                    <div class="mt-2 hidden turbo-frame:block" >
        
                        <a href="{{ path('app_homepage') }}">&lt;-- Back</a>
        
                        <a data-turbo-frame="_top" href="{{ path('app_planet_edit', {'id': planet.id}) }}">Edit</a>
        
                    </div>
        
                </turbo-frame>
        
                Show Lines

                                                    // ... lines 42 - 53
                            
            </div>
        
            {% endblock %}

See Code Block in Script

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Redirecting the Full Page from a Frame

... *really* tried to solve all of the issues there. This includes rendering the flash messages on success and updating the current page (through Turbo streams). However, I do think you still have a nice question: > So, I ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Hey Dave B.! Hmm, that's an interesting question! My first instinct was to say "just return the turbo-frame WITH the final content (instead of a lazy turbo-frame with src="") from the turbo-stream". However, I think ...

weaverryan

Read Full Comment

Course

Learn Symfony 7

Cosmic Coding with Symfony 7

... first into Twig & templating Your new favorite debugging tool: the web debug toolbar Simple, but crazy-powered CSS & JS setup with AssetMapper! Install & Running Tailwind CSS Intro into Stimulus & Turbo for JavaScript ...

20 videos

1:53:05

Comment

Learn Symfony 6

30 Days with LAST Stack

Live Components

Hey @Cyril! Ah! So I can explain this: > Usually, Turbo reloads the page without any move, which gives a nice impression of fluidity With a normal Turbo navigation (i.e. NOT inside a ``) Turbo actually DOES ...

weaverryan

Read Full Comment

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Mercure: Pushing Stream Updates Async

... As symfony/ux-turbo-mercure has been abandoned (files are located in symfony/ux-turbo), you now should run `composer req symfony/mercure-bundle` instead. Also, set `enabled` to `true` in assets/controllers.json for the mercure-turbo-stream config.

jmsche

Read Full Comment

Code

Learn Symfony 6

30 Days with LAST Stack

Turbo Frames

            Copy Code

                            Show All Lines

                        56 lines
            |
            templates/planet/show.html.twig
        
                Show Lines

                                                    // ... lines 1 - 4
                            
            {% block body %}
        
            <div class="m-4 p-4 bg-gray-800 rounded-lg">
        
                Show Lines

                                                    // ... lines 7 - 8
                            
                <turbo-frame id="planet-info">
        
                Show Lines

                                                    // ... lines 10 - 35
                            
                    <div class="mt-2">
        
                Show Lines

                                                    // ... lines 37 - 38
                            
                        <a data-turbo-frame="_top" href="{{ path('app_planet_edit', {'id': planet.id}) }}">Edit</a>
        
                    </div>
        
                </turbo-frame>
        
                Show Lines

                                                    // ... lines 42 - 53
                            
            </div>
        
            {% endblock %}

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Data Tables with Turbo Frames

            Copy Code

                            Show All Lines

                        139 lines
            |
            templates/main/homepage.html.twig
        
                Show Lines

                                                    // ... lines 1 - 27
                            
            {% block body %}
        
                <div class="flex">
        
                Show Lines

                                                    // ... lines 30 - 36
                            
                    <section class="flex-1 ml-10">
        
                Show Lines

                                                    // ... lines 38 - 56
                            
                        <turbo-frame id="voyage-list" data-turbo-action="advance" class="aria-busy:opacity-50 aria-busy:blur-sm transition-all">
        
                Show Lines

                                                    // ... lines 58 - 134
                            
                        </turbo-frame>
        
                    </section>
        
                </div>
        
            {% endblock %}

See Code Block in Script

Comment

Learn Symfony 6

30 Days with LAST Stack

Live Components

I tried but it doesn’t work. The live component is in the turbo-frame, the live action is redirecting to the same route (reloading the same page via the controller). So the turbo-frame element is in the returned HTML ...

Cyril

Read Full Comment

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Organizing our Turbo Events Code

            Copy Code

                            Show All Lines

                        15 lines
            |
            assets/app.js
        
                Show Lines

                                                    // ... lines 1 - 10
                            
            // start the Stimulus application
        
            import './bootstrap';
        
            import './turbo/turbo-helper';

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

AJAX Modal!

            Copy Code

                        4 lines
            |
            templates/modalFrame.html.twig
        
            <turbo-frame id="modal">
        
                {% block body %}{% endblock %}
        
            </turbo-frame>

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Turbo Drive

            Copy Code

                            Show All Lines

                        8 lines
            |
            assets/app.js
        
            import * as Turbo from '@hotwired/turbo';
        
                Show Lines

                                                    // ... lines 2 - 5
                            
            //Turbo.session.drive = false;
        
                Show Lines

                                                    // ... lines 7 - 8

See Code Block in Script

Code

Learn Symfony 6

30 Days with LAST Stack

Popover!

            Copy Code

                            Show All Lines

                        11 lines
            |
            templates/planet/_card.html.twig
        
            <turbo-frame id="planet-card-{{ planet.id }}">
        
                Show Lines

                                                    // ... lines 2 - 9
                            
            </turbo-frame>

See Code Block in Script

Code

Learn Symfony 6

AssetMapper: Modern JS with Zero Build System

Lazy Stimulus Controllers

            Copy Code

                            Show All Lines

                        16 lines
            |
            assets/controllers.json
        
            {
        
                "controllers": {
        
                    "@symfony/ux-turbo": {
        
                        "turbo-core": {
        
                            "enabled": true,
        
                            "fetch": "eager"
        
                        },
        
                Show Lines

                                                    // ... lines 8 - 11
                            
                    }
        
                },
        
                Show Lines

                                                    // ... line 14
                            
            }

See Code Block in Script

5 6 7 8 9

Show Lines	// ... lines 1 - 18
	turbo-frame[busy] .frame-loading-hide, turbo-frame .frame-loading-show {
	display: none;
	}
	turbo-frame[busy] .frame-loading-show {
	display: inline-block;
	}
Show Lines	// ... lines 25 - 180

	{% 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 %}

	{% block create %}
	<turbo-stream action="update" target="product-{{ entity.product.id }}-quick-stats">
	<template>
	{{ include('product/_quickStats.html.twig', {
	product: entity.product
	}) }}
	</template>
	</turbo-stream>

	<turbo-stream action="append" target="product-{{ entity.product.id }}-review-list">
	<template>
	{{ include('product/_review.html.twig', {
	review: entity,
	isNew: true
	}) }}
	</template>
	</turbo-stream>
	{% endblock %}
Show Lines	// ... lines 19 - 27

	<!DOCTYPE html>
	<html>
Show Lines	// ... lines 3 - 15
	<body class="bg-black text-white font-mono">
Show Lines	// ... lines 17 - 55
	<div
Show Lines	// ... lines 57 - 58
	>
	<dialog
Show Lines	// ... lines 61 - 63
	>
	<div class="flex grow p-5">
	<div class="grow overflow-auto p-1">
	<turbo-frame
	id="modal"
Show Lines	// ... lines 69 - 71
	>
	<turbo-stream action="append" target="flash-container">
	<template>{{ include('_flashes.html.twig') }}</template>
	</turbo-stream>
	</turbo-frame>
	</div>
	</div>
	</dialog>
Show Lines	// ... lines 80 - 95
	</div>
	</body>
	</html>

Show Lines	// ... lines 1 - 4
	{% block body %}
	<div class="m-4 p-4 bg-gray-800 rounded-lg">
Show Lines	// ... lines 7 - 8
	<turbo-frame id="planet-info">
Show Lines	// ... lines 10 - 35
	<div class="mt-2 hidden turbo-frame:block" >
	<a href="{{ path('app_homepage') }}"><-- Back</a>

	<a data-turbo-frame="_top" href="{{ path('app_planet_edit', {'id': planet.id}) }}">Edit</a>
	</div>
	</turbo-frame>
Show Lines	// ... lines 42 - 53
	</div>
	{% endblock %}

Show Lines	// ... lines 1 - 27
	{% block body %}
	<div class="flex">
Show Lines	// ... lines 30 - 36
	<section class="flex-1 ml-10">
Show Lines	// ... lines 38 - 56
	<turbo-frame id="voyage-list" data-turbo-action="advance" class="aria-busy:opacity-50 aria-busy:blur-sm transition-all">
Show Lines	// ... lines 58 - 134
	</turbo-frame>
	</section>
	</div>
	{% endblock %}

Show Lines	// ... lines 1 - 10
	// start the Stimulus application
	import './bootstrap';

	import './turbo/turbo-helper';

	<turbo-frame id="modal">
	{% block body %}{% endblock %}
	</turbo-frame>

	import * as Turbo from '@hotwired/turbo';
Show Lines	// ... lines 2 - 5
	//Turbo.session.drive = false;
Show Lines	// ... lines 7 - 8

	<turbo-frame id="planet-card-{{ planet.id }}">
Show Lines	// ... lines 2 - 9
	</turbo-frame>

	{
	"controllers": {
	"@symfony/ux-turbo": {
	"turbo-core": {
	"enabled": true,
	"fetch": "eager"
	},
Show Lines	// ... lines 8 - 11
	}
	},
Show Lines	// ... line 14
	}