Search Results for: Turbo

590 search results for Turbo

Sort By

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Smart Frame Redirecting with the Server

            Copy Code

                            Show All Lines

                        40 lines
            |
            src/EventSubscriber/TurboFrameRedirectSubscriber.php
        
                Show Lines

                                                    // ... lines 1 - 9
                            
            class TurboFrameRedirectSubscriber implements EventSubscriberInterface
        
            {
        
                Show Lines

                                                    // ... lines 12 - 30
                            
                private function shouldWrapRedirect(Request $request, Response $response): bool
        
                {
        
                    if (!$response->isRedirection()) {
        
                        return false;
        
                    }
        
                    return (bool) $request->headers->get('Turbo-Frame-Redirect');
        
                }
        
            }

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Lazy Modal & Big Cleanup

            Copy Code

                        7 lines
            |
            templates/product_admin/_form.html.twig
        
            {{ form_start(form, {
        
                attr: { 'data-turbo-frame': formTarget|default('_top') }
        
            }) }}
        
                {{ form_widget(form) }}
        
                <button class="btn btn-primary" formnovalidate>{{ button_label|default('Save') }}</button>
        
            {{ form_end(form) }}

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Frame Redirecting & Dynamic Frame Targets

            Copy Code

                        7 lines
            |
            templates/product_admin/_form.html.twig
        
            {{ form_start(form, {
        
                attr: { 'data-turbo-frame': formTarget|default('_top') }
        
            }) }}
        
                {{ form_widget(form) }}
        
                <button class="btn btn-primary" formnovalidate>{{ button_label|default('Save') }}</button>
        
            {{ form_end(form) }}

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Frames & Form "action" Attributes

            Copy Code

                        7 lines
            |
            templates/product_admin/_form.html.twig
        
            {{ form_start(form, {
        
                attr: { 'data-turbo-frame': 'product-info' }
        
            }) }}
        
                {{ form_widget(form) }}
        
                <button class="btn btn-primary" formnovalidate>{{ button_label|default('Save') }}</button>
        
            {{ form_end(form) }}

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Frame-Powered Inline Editing

            Copy Code

                            Show All Lines

                        53 lines
            |
            templates/product/show.html.twig
        
                Show Lines

                                                    // ... lines 1 - 16
                            
                        <h1>
        
                            {{ product.name }}
        
                            {% if is_granted('ROLE_ADMIN') %}
        
                                <a
        
                                    href="{{ path('product_admin_edit', {
        
                                        id: product.id
        
                                    }) }}"
        
                                    class="btn btn-sm btn-secondary"
        
                                    data-turbo-frame="product-info"
        
                                >Edit</a>
        
                            {% endif %}
        
                        </h1>
        
                Show Lines

                                                    // ... lines 29 - 53

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Review this Product... in a turbo-frame!

            Copy Code

                            Show All Lines

                        33 lines
            |
            templates/product/_reviews.html.twig
        
                Show Lines

                                                    // ... lines 1 - 28
                            
            {% elseif not is_granted('ROLE_USER') %}
        
                <p><a href="{{ path('app_login') }}" data-turbo-frame="_top">Log in</a> to post your review</p>
        
            {% endif %}
        
                Show Lines

                                                    // ... lines 32 - 33

See Code Block in Script

Code

Learn JS Frameworks & Tools

Symfony UX: Turbo

Adding a "Read More" Ajax Frame

            Copy Code

                            Show All Lines

                        34 lines
            |
            templates/cart/_featuredSidebar.html.twig
        
                Show Lines

                                                    // ... lines 1 - 16
                            
                        {% if showDescription %}
        
                            {{ featuredProduct.description }}
        
                        {% else %}
        
                            {{ featuredProduct.description|u.truncate(25)|trim }}...
        
                            <a
        
                                data-turbo-frame="cart-sidebar"
        
                                href="{{ path('_app_cart_product_featured', {
        
                                description: true,
        
                            }) }}">(read more)</a>
        
                        {% endif %}
        
                Show Lines

                                                    // ... lines 30 - 34

See Code Block in Script

Code

Learn JS Frameworks & Tools

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

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

Code

Learn Symfony 6

30 Days with LAST Stack

More with fun Modals! Editing & Deleting

            Copy Code

                            Show All Lines

                        7 lines
            |
            templates/voyage/_delete_form.html.twig
        
            <form method="post" data-turbo-frame="_top" action="{{ path('app_voyage_delete', {'id': voyage.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
        
                Show Lines

                                                    // ... lines 2 - 5
                            
            </form>

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">
        
                        <form
        
                Show Lines

                                                    // ... lines 39 - 42
                            
                            data-turbo-frame="voyage-list"
        
                        >
        
                Show Lines

                                                    // ... lines 45 - 55
                            
                        </form>
        
                Show Lines

                                                    // ... lines 57 - 135
                            
                    </section>
        
                </div>
        
            {% endblock %}

See Code Block in Script

Video

Learn JS Frameworks & Tools

Symfony UX: Turbo

Toast Notifications

... - or top - of your screen. And Bootstrap has support for them. Our goal is simple but bold! I want to be able to trigger a toast notification from any template or from a Turbo Stream. Start by creating a new template ...

10:14

Comment

Learn JS Frameworks & Tools

Symfony UX: Turbo

Toast Notifications

... not sure! :). I am not aware of a built-in way to do this (i.e. I am not aware of any `data-turbo="restore"` type of attribute you could add somewhere to opt into this). To do this, I would try to "cancel" the visit ...

weaverryan

Read Full Comment

Comment

Learn Symfony 5

All about Uploading Files in Symfony

Setup for Uploading Private Article References

... " onto the page so the new user shows up there. Stimulus can help do this pretty cleanly. If you were using Turbo (that's a whole other topic), you could probably use a Turbo frame + Turbo Streams to accomplish this. Or ...

weaverryan

Read Full Comment

Video

Learn Symfony 6

30 Days with LAST Stack

Hello LAST Stack

... fun to match a whole new paradigm. It stands for Live Components, AssetMapper, Stimulus, and Turbo. It's a front-end stack that'll let us build a truly rich user interface - like a single-page application, with modals ...

4:01

Video

Learn Symfony 6

Upgrading & What's New in Symfony 6!

Form Improvements for Symfony 6

... .. though the status code is now 422. Symfony made this change for two reasons. First... it's just technically more correct to have an error status code if there is a validation error. And second, if you're using Turbo ...

4:13

Comment

Learn Symfony 5

All about Uploading Files in Symfony

Coding the API Upload Endpoint

... approaches to this: 1) Use Turbo Frames. You don't have to use the rest of Turbo (you could disable Turbo Drive), but this is a wonderful use-case for Turbo Frames. Wrap that entire widget in a ``. Then add all the ...

weaverryan

Read Full Comment

Comment

Learn Symfony 6

AssetMapper: Modern JS with Zero Build System

Deploying to Platform.sh

Hey Pasquale, Choosing between Stimulus/Turbo and frontend frameworks such as React or Vue.js depends on the type of application you're building, the complexity of the features, and your personal preferences among ...

Victor

Read Full Comment

Video

Learn JS Frameworks & Tools

Symfony UX: Turbo

Entity Broadcast

... There's one super cool feature of the Turbo Mercure UX package that we installed earlier that we have not talked about. And it's this: the ability to publish a Mercure update automatically whenever an entity is created ...

7:02

Video

Learn JS Frameworks & Tools

Symfony UX: Turbo

Listening Publishing

... " in Mercure - a topic is like a message key or category. Second, in PHP, publish a message to that topic containing Turbo Stream HTML. And finally, when our JavaScript receives a message, make it pass the Turbo Stream HTML ...

5:42

Show Lines	// ... lines 1 - 9
	class TurboFrameRedirectSubscriber implements EventSubscriberInterface
	{
Show Lines	// ... lines 12 - 30
	private function shouldWrapRedirect(Request $request, Response $response): bool
	{
	if (!$response->isRedirection()) {
	return false;
	}

	return (bool) $request->headers->get('Turbo-Frame-Redirect');
	}
	}

	{{ form_start(form, {
	attr: { 'data-turbo-frame': formTarget\|default('_top') }
	}) }}
	{{ form_widget(form) }}
	<button class="btn btn-primary" formnovalidate>{{ button_label\|default('Save') }}</button>
	{{ form_end(form) }}

	{{ form_start(form, {
	attr: { 'data-turbo-frame': 'product-info' }
	}) }}
	{{ form_widget(form) }}
	<button class="btn btn-primary" formnovalidate>{{ button_label\|default('Save') }}</button>
	{{ form_end(form) }}

Show Lines	// ... lines 1 - 16
	<h1>
	{{ product.name }}
	{% if is_granted('ROLE_ADMIN') %}
	<a
	href="{{ path('product_admin_edit', {
	id: product.id
	}) }}"
	class="btn btn-sm btn-secondary"
	data-turbo-frame="product-info"
	>Edit</a>
	{% endif %}
	</h1>
Show Lines	// ... lines 29 - 53

Show Lines	// ... lines 1 - 28
	{% elseif not is_granted('ROLE_USER') %}
	<p><a href="{{ path('app_login') }}" data-turbo-frame="_top">Log in</a> to post your review</p>
	{% endif %}
Show Lines	// ... lines 32 - 33

Show Lines	// ... lines 1 - 16

	{% if showDescription %}
	{{ featuredProduct.description }}
	{% else %}
	{{ featuredProduct.description\|u.truncate(25)\|trim }}...

	<a
	data-turbo-frame="cart-sidebar"
	href="{{ path('_app_cart_product_featured', {
	description: true,
	}) }}">(read more)</a>
	{% endif %}

Show Lines	// ... lines 30 - 34

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 - 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

	<form method="post" data-turbo-frame="_top" action="{{ path('app_voyage_delete', {'id': voyage.id}) }}" onsubmit="return confirm('Are you sure you want to delete this item?');">
Show Lines	// ... lines 2 - 5
	</form>

Show Lines	// ... lines 1 - 27
	{% block body %}
	<div class="flex">
Show Lines	// ... lines 30 - 36
	<section class="flex-1 ml-10">
	<form
Show Lines	// ... lines 39 - 42
	data-turbo-frame="voyage-list"
	>
Show Lines	// ... lines 45 - 55
	</form>
Show Lines	// ... lines 57 - 135
	</section>
	</div>
	{% endblock %}