590 search results for Turbo

Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Adding a Custom Request Header Based on the Frame
134 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 3
const TurboHelper = class {
constructor() {
// ... lines 6 - 17
document.addEventListener('turbo:before-fetch-request', (event) => {
this.beforeFetchRequest(event);
});
// ... lines 21 - 26
}
// ... lines 28 - 106
beforeFetchRequest(event) {
console.log(event);
}
// ... lines 111 - 130
}
// ... lines 132 - 134
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Manual "Restore" Visit
130 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 3
const TurboHelper = class {
// ... lines 5 - 103
async beforeFetchResponse(event) {
// ... lines 105 - 113
event.preventDefault();
Turbo.clearCache();
const snapshot = Turbo.PageSnapshot.fromHTMLString(await fetchResponse.responseHTML);
Turbo.navigator.view.snapshotCache.put(fetchResponse.location, snapshot)
Turbo.visit(fetchResponse.location, {
action: 'restore'
});
}
// ... lines 123 - 126
}
// ... lines 128 - 130
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Manual "Restore" Visit
128 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 3
const TurboHelper = class {
// ... lines 5 - 103
beforeFetchResponse(event) {
// ... lines 105 - 115
Turbo.visit(fetchResponse.location, {
action: 'restore'
});
}
// ... lines 121 - 124
}
// ... lines 126 - 128
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Frame Redirecting and Clearing the Snapshot Cache
125 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 3
const TurboHelper = class {
// ... lines 5 - 103
beforeFetchResponse(event) {
// ... lines 105 - 113
event.preventDefault();
Turbo.clearCache();
Turbo.visit(fetchResponse.location);
}
// ... lines 118 - 121
}
// ... lines 123 - 125
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Redirecting the Full Page from a Frame
124 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 3
const TurboHelper = class {
// ... lines 5 - 103
beforeFetchResponse(event) {
const fetchResponse = event.detail.fetchResponse;
if (!fetchResponse.succeeded || !fetchResponse.redirected) {
return;
}
if (!this.getCurrentFrame() || !this.getCurrentFrame().dataset.turboFormRedirect) {
return;
}
event.preventDefault();
Turbo.visit(fetchResponse.location);
}
// ... lines 117 - 120
}
// ... lines 122 - 124
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Redirecting the Full Page from a Frame
118 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 3
const TurboHelper = class {
constructor() {
// ... lines 6 - 16
document.addEventListener('turbo:before-fetch-response', (event) => {
this.beforeFetchResponse(event);
});
// ... line 22
}
// ... lines 24 - 114
}
// ... lines 116 - 118
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Redirecting the Full Page from a Frame
118 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 3
const TurboHelper = class {
// ... lines 5 - 103
beforeFetchResponse(event) {
if (!this.modal || !this.modal._isShown) {
return;
}
const fetchResponse = event.detail.fetchResponse;
if (fetchResponse.succeeded && fetchResponse.redirected) {
event.preventDefault();
Turbo.visit(fetchResponse.location);
}
}
}
// ... lines 116 - 118
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Globally Disable Buttons on Form Submit
91 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 8
document.addEventListener('turbo:submit-start', (event) => {
event.detail.formSubmission.submitter.toggleAttribute('disabled', true);
})
// ... lines 14 - 91
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Globally Disable Buttons on Form Submit
91 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 8
document.addEventListener('turbo:submit-start', (event) => {
console.log('submit-start', event);
})
// ... lines 14 - 91
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Fixing External JS + Analytics Code
45 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 3
constructor() {
document.addEventListener('turbo:before-cache', () => {
this.closeModal();
this.closeSweetalert();
});
document.addEventListener('turbo:render', () => {
this.initializeWeatherWidget();
});
}
// ... lines 14 - 38
initializeWeatherWidget() {
__weatherwidget_init();
}
// ... lines 42 - 45
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Fixing External JS + Analytics Code
41 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 3
constructor() {
document.addEventListener('turbo:before-cache', () => {
this.closeModal();
this.closeSweetalert();
});
document.addEventListener('turbo:render', () => {
__weatherwidget_init();
});
}
// ... lines 14 - 41
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Fixing External JS + Analytics Code
41 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 3
constructor() {
document.addEventListener('turbo:before-cache', () => {
this.closeModal();
this.closeSweetalert();
});
document.addEventListener('turbo:before-render', () => {
document.querySelector('#weatherwidget-io-js').remove();
});
}
// ... lines 14 - 41
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Fixing External JS + Analytics Code
41 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 3
constructor() {
document.addEventListener('turbo:before-cache', () => {
this.closeModal();
this.closeSweetalert();
});
document.addEventListener('turbo:before-render', () => {
console.log('before render!');
});
}
// ... lines 14 - 41
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Organizing our Turbo Events 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
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Organizing our Turbo Events 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 Frameworks & Tools

 >

Symfony UX: Turbo

 >

Prefetching the Next Page
153 lines | assets/turbo/prefetch.js
// https://gist.github.com/vitobotta/8ac3c6f65633b5edb2949aeff0dec69b
// This code is to be used with https://turbo.hotwire.dev. By default Turbo keeps visited pages in its cache
// so that when you visit one of those pages again, Turbo will fetch the copy from cache first and present that to the user, then
// it will fetch the updated page from the server and replace the preview. This makes for a much more responsive navigation
// between pages. We can improve this further with the code in this file. It enables automatic prefetching of a page when you
// hover with the mouse on a link or touch it on a mobile device. There is a delay between the mouseover event and the click
// event, so with this trick the page is already being fetched before the click happens, speeding up also the first
// view of a page not yet in cache. When the page has been prefetched it is then added to Turbo's cache so it's available for
// the next visit during the same session. Turbo's default behavior plus this trick make for much more responsive UIs (non SPA).
import * as Turbo from '@hotwired/turbo';
let lastTouchTimestamp
let delayOnHover = 65
let mouseoverTimer
const pendingPrefetches = new Set()
const eventListenersOptions = {
capture: true,
passive: true,
}
class Snapshot extends Turbo.navigator.view.snapshot.constructor {
}
// ... lines 28 - 153
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Prefetching the Next Page
153 lines | assets/turbo/prefetch.js
// ... lines 1 - 133
function preload(link) {
const url = link.getAttribute("href")
const loc = new URL(url, location.protocol + "//" + location.host)
const absoluteUrl = loc.toString()
if (link.dataset.prefetchWithLink == "true") {
const prefetcher = document.createElement('link')
prefetcher.rel = 'prefetch'
prefetcher.href = url
document.head.appendChild(prefetcher)
pendingPrefetches.delete(absoluteUrl)
} else if (!Turbo.navigator.view.snapshotCache.has(loc)) {
fetchPage(url, responseText => {
const snapshot = Snapshot.fromHTMLString(responseText)
Turbo.navigator.view.snapshotCache.put(loc, snapshot)
pendingPrefetches.delete(absoluteUrl)
})
}
}
See Code Block in Script
Code

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo

 >

Prefetching the Next Page
153 lines | assets/turbo/prefetch.js
// ... lines 1 - 91
function isPreloadable(linkElement) {
if (!linkElement || !linkElement.getAttribute("href") || linkElement.dataset.turbo == "false" || linkElement.dataset.prefetch == "false") {
return
}
// ... lines 98 - 153
See Code Block in Script
Course

Learn Symfony 6
30 Days with LAST Stack

LAST stack - Live Components, AssetMapper, Stimulus & Turbo - puts the joy, productivity & simplicity back into creating rich, frontend experiences. And in 30 days, I'll prove it: AssetMapper fundamentals JavaScript ...

32 videos
|
4:16:27
Video

Learn JS Frameworks & Tools

 >

Symfony UX: Turbo
Adding a Custom Request Header Based on the Frame

Okay, so if we don't want to cheat and use the internal restore action with a Turbo visit, how else can we solve our problem? Well, there's really only one option. Let me reopen my network tools. Right now, when we ...

7:02
1 2 3 4 5