Search Results | SymfonyCasts

687 search results

Sort By

Code

Learn JS

Symfony UX: Turbo

CSS Page Transitions

            Copy Code

                            Show All Lines

                        61 lines
            |
            assets/turbo/turbo-helper.js
        
                Show Lines

                                                    // ... lines 1 - 3
                            
                constructor() {
        
                    document.addEventListener('turbo:before-cache', () => {
        
                        this.closeModal();
        
                        this.closeSweetalert();
        
                    });
        
                    document.addEventListener('turbo:render', () => {
        
                        this.initializeWeatherWidget();
        
                    });
        
                    document.addEventListener('turbo:visit', () => {
        
                        // fade out the old body
        
                        document.body.classList.add('turbo-loading');
        
                    });
        
                Show Lines

                                                    // ... lines 18 - 61

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Organizing our Turbo Events Code

            Copy Code

                        30 lines
            |
            assets/turbo/turbo-helper.js
        
            import { Modal } from 'bootstrap';
        
            const TurboHelper = class {
        
                constructor() {
        
                    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();
        
                        }
        
                        // internal way to see if sweetalert2 has been imported yet
        
                        if (__webpack_modules__[require.resolveWeak('sweetalert2')]) {
        
                            // because we know it's been imported, this will run synchronously
        
                            import(/* webpackMode: 'weak' */'sweetalert2').then((Swal) => {
        
                                if (Swal.default.isVisible()) {
        
                                    Swal.default.getPopup().style.animationDuration = '0ms'
        
                                    Swal.default.close();
        
                                }
        
                            })
        
                        }
        
                    });
        
                }
        
            }
        
            export default new TurboHelper();

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Organizing our Turbo Events Code

            Copy Code

                        37 lines
            |
            assets/turbo/turbo-helper.js
        
            import { Modal } from 'bootstrap';
        
            const TurboHelper = class {
        
                constructor() {
        
                    document.addEventListener('turbo:before-cache', () => {
        
                        this.closeModal();
        
                        this.closeSweetalert();
        
                    });
        
                }
        
                closeModal() {
        
                    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();
        
                    }
        
                }
        
                closeSweetalert() {
        
                    // internal way to see if sweetalert2 has been imported yet
        
                    if (__webpack_modules__[require.resolveWeak('sweetalert2')]) {
        
                        // because we know it's been imported, this will run synchronously
        
                        import(/* webpackMode: 'weak' */'sweetalert2').then((Swal) => {
        
                            if (Swal.default.isVisible()) {
        
                                Swal.default.getPopup().style.animationDuration = '0ms'
        
                                Swal.default.close();
        
                            }
        
                        })
        
                    }
        
                }
        
            }
        
            export default new TurboHelper();

See Code Block in Script

Blog

Live Stream #11: Turbo Morph Updates & Autocomplete Morphing Work

…updates on the "active value" change in Turbo 8 morphing. Then we dive into work on a PR for the autocomplete component: making it morph-ready... which is tricky! Good news from the week! :15 Turbo's ignoreActiveValue Idiomorph change 3:40 How to keep…

By weaverryan, sadikoff, and bocharsky-bw

Read Full Post

Blog

Live Components + Turbo Streams: Navigating a Turbo Frame

… instead of the full page? Let's learn a bit about how Live Components handles redirects, then see how we can use Turbo Streams to navigate a frame instead of the full page. This is team work at the max! To answer this…

By weaverryan and bocharsky-bw

Read Full Post

Blog

Live Stream #9: Turbo 8, Live Components & Challenges in Morphing

In this week's live stream, we dive Turbo 8, view transitions, and "morphing": the key tech behind LiveComponents & a new feature in Turbo 8. We work on how to make our Stimulus controllers morph-ready, including the UX autocomplete controller. Updates on the new…

By weaverryan and bocharsky-bw

Read Full Post

Comment

Learn JS

Symfony UX: Turbo

Adding a Custom Request Header Based on the Frame

Turbo has had a lot of updates. Here's a much simpler way to get the same functionality using stimulus (I'm not using the global turbo-helper): Sorry, this text editor kind of screws up the code and changes some characters. turbo-frame div…

Nick-F

Read Full Comment

Comment

Learn JS

Symfony UX: Turbo

Multiple Updates in one Stream

"Turbo can also be used to build Native iOS or Android apps". Now that has me convinced. Does this mean one could take a mostly PHP powered website and with some JS/Turbo sprincles make a mobile App? I's love to see an example…

Gabs

Read Full Comment

Code

Learn JS

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 JS

Symfony UX: Turbo

Frame Loading Animations

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 18
                            
            turbo-frame[busy] {
        
                opacity: .2;
        
            }
        
                Show Lines

                                                    // ... lines 22 - 183

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Frame Loading Animations

186 lines | assets/styles/app.css

Show Lines	// ... lines 1 - 18
	turbo-frame {
	display: block;
	}
Show Lines	// ... lines 22 - 186

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Frame Loading Animations

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 18
                            
            turbo-frame {
        
                display: block;
        
            }
        
            turbo-frame[busy] {
        
                opacity: .7;
        
            }
        
            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 31 - 186

See Code Block in Script

Comment

Learn JS

Symfony UX: Turbo

Reloading When JS/CSS Changes

In turbo 8 we also have "dynamic" for CSS, see https://github.com/hotwired/turbo/pull/1140

Infourok

Read Full Comment

Code

Learn JS

Symfony UX: Turbo

Entity Broadcast

            Copy Code

                            Show All Lines

                        36 lines
            |
            templates/product/_reviews.html.twig
        
            <div {{ turbo_stream_listen('product-reviews') }}></div>
        
            <div {{ turbo_stream_listen('App\\Entity\\Review') }}></div>
        
                Show Lines

                                                    // ... lines 3 - 36

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Smartly Updating Elements for all Users

            Copy Code

                            Show All Lines

                        35 lines
            |
            templates/product/_reviews.html.twig
        
            <div {{ turbo_stream_listen('product-reviews') }}></div>
        
            {{ include('product/_reviews_list.html.twig') }}
        
                Show Lines

                                                    // ... lines 4 - 6
                            
            <turbo-frame id="product-reviews-form">
        
                Show Lines

                                                    // ... lines 8 - 33
                            
            </turbo-frame>

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Listening & Publishing

            Copy Code

                            Show All Lines

                        43 lines
            |
            templates/product/_reviews.html.twig
        
            <div {{ turbo_stream_listen('product-reviews') }}></div>
        
                Show Lines

                                                    // ... lines 2 - 43

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Prefetching the Next Page

            Copy Code

                            Show All Lines

                        16 lines
            |
            assets/app.js
        
                Show Lines

                                                    // ... lines 1 - 12
                            
            import './turbo/turbo-helper';
        
            import './turbo/prefetch';

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Prefetching the Next Page

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 8
                            
            /*
        
            body.turbo-loading {
        
                opacity: .8;
        
            }
        
            */
        
            /*
        
            [data-turbo-preview] body {
        
                opacity: .2;
        
            }
        
            */
        
                Show Lines

                                                    // ... lines 19 - 175

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Form Submits & The Preview Feature

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 7
                            
            [data-turbo-preview] body {
        
                opacity: .2;
        
            }
        
                Show Lines

                                                    // ... lines 11 - 167

See Code Block in Script

Code

Learn JS

Symfony UX: Turbo

Form Submits & The Preview Feature

            Copy Code

                            Show All Lines

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

                                                    // ... lines 1 - 7
                            
            /*
        
            [data-turbo-preview] body {
        
                opacity: .2;
        
            }
        
            */
        
                Show Lines

                                                    // ... lines 13 - 169

See Code Block in Script

6 7 8 9 10

Show Lines	// ... lines 1 - 3
	constructor() {
	document.addEventListener('turbo:before-cache', () => {
	this.closeModal();
	this.closeSweetalert();
	});

	document.addEventListener('turbo:render', () => {
	this.initializeWeatherWidget();
	});

	document.addEventListener('turbo:visit', () => {
	// fade out the old body
	document.body.classList.add('turbo-loading');
	});
Show Lines	// ... lines 18 - 61

	import { Modal } from 'bootstrap';

	const TurboHelper = class {
	constructor() {
	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();
	}

	// internal way to see if sweetalert2 has been imported yet
	if (__webpack_modules__[require.resolveWeak('sweetalert2')]) {
	// because we know it's been imported, this will run synchronously
	import(/* webpackMode: 'weak' */'sweetalert2').then((Swal) => {
	if (Swal.default.isVisible()) {
	Swal.default.getPopup().style.animationDuration = '0ms'
	Swal.default.close();
	}
	})
	}
	});
	}
	}

	export default new TurboHelper();

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

Show Lines	// ... lines 1 - 18
	turbo-frame[busy] {
	opacity: .2;
	}
Show Lines	// ... lines 22 - 183

	<div {{ turbo_stream_listen('product-reviews') }}></div>
	<div {{ turbo_stream_listen('App\\Entity\\Review') }}></div>
Show Lines	// ... lines 3 - 36

	<div {{ turbo_stream_listen('product-reviews') }}></div>

	{{ include('product/_reviews_list.html.twig') }}
Show Lines	// ... lines 4 - 6
	<turbo-frame id="product-reviews-form">
Show Lines	// ... lines 8 - 33
	</turbo-frame>

	<div {{ turbo_stream_listen('product-reviews') }}></div>
Show Lines	// ... lines 2 - 43

Show Lines	// ... lines 1 - 12

	import './turbo/turbo-helper';
	import './turbo/prefetch';

Show Lines	// ... lines 1 - 8
	/*
	body.turbo-loading {
	opacity: .8;
	}
	*/
	/*
	[data-turbo-preview] body {
	opacity: .2;
	}
	*/
Show Lines	// ... lines 19 - 175

Show Lines	// ... lines 1 - 7
	[data-turbo-preview] body {
	opacity: .2;
	}
Show Lines	// ... lines 11 - 167