682 search results

Code

Learn JS

 >

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

 >

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

 >

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

 >

Symfony UX: Turbo

 >

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

Learn JS

 >

Symfony UX: Turbo

 >

Globally Disable Buttons on Form Submit
101 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 4
document.addEventListener('turbo:before-cache', () => {
this.closeModal();
this.closeSweetalert();
this.reenableSubmitButtons();
});
// ... lines 10 - 90
reenableSubmitButtons() {
document.querySelectorAll('.turbo-submit-disabled').forEach((button) => {
button.toggleAttribute('disabled', false);
button.classList.remove('turbo-submit-disabled');
});
}
// ... lines 98 - 101
See Code Block in Script
Code

Learn JS

 >

Symfony UX: Turbo

 >

Polished CSS Transitions
61 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 2
const TurboHelper = class {
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');
});
document.addEventListener('turbo:before-render', (event) => {
// when we are *about* to render, start us faded out
event.detail.newBody.classList.add('turbo-loading');
});
document.addEventListener('turbo:render', () => {
// after rendering, we first allow the .turbo-loaded to set the low opacity
// THEN, 10ms later, we remove the turbo-loaded class, which allows the fade in
setTimeout(() => {
document.body.classList.remove('turbo-loading');
}, 10);
});
}
// ... lines 30 - 61
See Code Block in Script
Code

Learn JS

 >

Symfony UX: Turbo

 >

Polished CSS Transitions
81 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 73
isPreviewRendered() {
return document.documentElement.hasAttribute('data-turbo-preview');
}
}
// ... lines 79 - 81
See Code Block in Script
Code

Learn JS

 >

Symfony UX: Turbo

 >

Polished CSS Transitions
81 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 18
document.addEventListener('turbo:before-render', (event) => {
if (this.isPreviewRendered()) {
// this is a preview that has been instantly swapped
// remove .turbo-loading so the preview starts fully opaque
event.detail.newBody.classList.remove('turbo-loading');
// start fading out 1 frame later after opacity starts full
requestAnimationFrame(() => {
document.body.classList.add('turbo-loading');
});
} else {
// when we are *about* to render a fresh page
// we should already be faded out, so start us faded out
event.detail.newBody.classList.add('turbo-loading');
}
});
// ... lines 34 - 81
See Code Block in Script
Code

Learn JS

 >

Symfony UX: Turbo

 >

Polished CSS Transitions
81 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 33
document.addEventListener('turbo:render', () => {
if (!this.isPreviewRendered()) {
// if this is a preview, then we do nothing: stay faded out
// after rendering the REAL page, we first allow the .turbo-loading to
// instantly start the page at lower opacity. THEN remove the class
// one frame later, which allows the fade in
requestAnimationFrame(() => {
document.body.classList.remove('turbo-loading');
});
}
});
// ... lines 45 - 81
See Code Block in Script
Code

Learn JS

 >

Symfony UX: Turbo

 >

Polished CSS Transitions
91 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 18
document.addEventListener('turbo:before-render', (event) => {
if (this.isPreviewRendered()) {
// this is a preview that has been instantly swapped
// remove .turbo-loading so the preview starts fully opaque
event.detail.newBody.classList.remove('turbo-loading');
// start fading out 1 frame later after opacity starts full
requestAnimationFrame(() => {
document.body.classList.add('turbo-loading');
});
} else {
const isRestoration = event.detail.newBody.classList.contains('turbo-loading');
if (isRestoration) {
// this is a restoration (back button). Remove the class
// so it simply starts with full opacity
event.detail.newBody.classList.remove('turbo-loading');
return;
}
// when we are *about* to render a fresh page
// we should already be faded out, so start us faded out
event.detail.newBody.classList.add('turbo-loading');
}
});
// ... lines 44 - 91
See Code Block in Script
Code

Learn JS

 >

Symfony UX: Turbo

 >

Polished CSS Transitions
95 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();
});
this.initializeTransitions();
}
// ... lines 16 - 47
initializeTransitions() {
document.addEventListener('turbo:visit', () => {
// fade out the old body
document.body.classList.add('turbo-loading');
});
document.addEventListener('turbo:before-render', (event) => {
if (this.isPreviewRendered()) {
// this is a preview that has been instantly swapped
// remove .turbo-loading so the preview starts fully opaque
event.detail.newBody.classList.remove('turbo-loading');
// start fading out 1 frame later after opacity starts full
requestAnimationFrame(() => {
document.body.classList.add('turbo-loading');
});
} else {
const isRestoration = event.detail.newBody.classList.contains('turbo-loading');
if (isRestoration) {
// this is a restoration (back button). Remove the class
// so it simply starts with full opacity
event.detail.newBody.classList.remove('turbo-loading');
return;
}
// when we are *about* to render a fresh page
// we should already be faded out, so start us faded out
event.detail.newBody.classList.add('turbo-loading');
}
});
document.addEventListener('turbo:render', () => {
if (!this.isPreviewRendered()) {
// if this is a preview, then we do nothing: stay faded out
// after rendering the REAL page, we first allow the .turbo-loading to
// instantly start the page at lower opacity. THEN remove the class
// one frame later, which allows the fade in
requestAnimationFrame(() => {
document.body.classList.remove('turbo-loading');
});
}
});
}
// ... lines 92 - 95
See Code Block in Script
Code

Learn JS

 >

Symfony UX: Turbo

 >

CSS Page Transitions
61 lines | assets/turbo/turbo-helper.js
// ... lines 1 - 17
document.addEventListener('turbo:before-render', (event) => {
// when we are *about* to render, start us faded out
event.detail.newBody.classList.add('turbo-loading');
});
document.addEventListener('turbo:render', () => {
// after rendering, we first allow the turbo-loading class to set the low opacity
// THEN, one frame later, we remove the turbo-loading class, which allows the fade in
requestAnimationFrame(() => {
document.body.classList.remove('turbo-loading');
});
});
// ... lines 29 - 61
See Code Block in Script
Code

Learn JS

 >

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

 >

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
Code

Learn JS

 >

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

 >

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

 >

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

 >

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

 >

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

 >

Symfony UX: Turbo

 >

CSS Page Transitions
61 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();
});
document.addEventListener('turbo:visit', () => {
// fade out the old body
document.body.classList.add('turbo-loading');
});
// ... lines 18 - 61
See Code Block in Script
5 6 7 8 9