fix: show the dark mode toast only after the cookie banner is answered
All checks were successful
Deploy to OVH VPS / deploy (push) Successful in 1m9s
All checks were successful
Deploy to OVH VPS / deploy (push) Successful in 1m9s
This commit is contained in:
parent
7a53279e60
commit
43cb271077
1 changed files with 43 additions and 2 deletions
|
|
@ -69,6 +69,20 @@ const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`;
|
||||||
showTitle: false,
|
showTitle: false,
|
||||||
textColor: "#000000",
|
textColor: "#000000",
|
||||||
},
|
},
|
||||||
|
// Let the dark mode toast wait until the cookie banner is gone
|
||||||
|
callback: {
|
||||||
|
onBannerShown: function () {
|
||||||
|
window.__iubBannerOpen = true;
|
||||||
|
},
|
||||||
|
onPreferenceExpressed: function () {
|
||||||
|
window.__iubBannerOpen = false;
|
||||||
|
window.dispatchEvent(new Event("iub-consent"));
|
||||||
|
},
|
||||||
|
onReady: function () {
|
||||||
|
window.__iubReady = true;
|
||||||
|
window.dispatchEvent(new Event("iub-ready"));
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<script
|
<script
|
||||||
|
|
@ -310,12 +324,39 @@ const fullCanonicalUrl = canonicalUrl || `${siteUrl}${Astro.url.pathname}`;
|
||||||
const hasBeenDismissed = localStorage.getItem(TOAST_DISMISSED_KEY);
|
const hasBeenDismissed = localStorage.getItem(TOAST_DISMISSED_KEY);
|
||||||
|
|
||||||
// Only show toast if user is in light mode and hasn't dismissed it
|
// Only show toast if user is in light mode and hasn't dismissed it
|
||||||
setTimeout(() => {
|
const bannerOpen = () =>
|
||||||
|
window.__iubBannerOpen || !!document.getElementById("iubenda-cs-banner");
|
||||||
|
const showToast = () => {
|
||||||
|
if (bannerOpen()) {
|
||||||
|
window.addEventListener("iub-consent", () => setTimeout(showToast, 1500), { once: true });
|
||||||
|
return;
|
||||||
|
}
|
||||||
const isDarkMode = document.documentElement.classList.contains("dark");
|
const isDarkMode = document.documentElement.classList.contains("dark");
|
||||||
if (!isDarkMode && !hasBeenDismissed && toast) {
|
if (!isDarkMode && !hasBeenDismissed && toast) {
|
||||||
toast.classList.remove("hidden");
|
toast.classList.remove("hidden");
|
||||||
}
|
}
|
||||||
}, 2000);
|
};
|
||||||
|
|
||||||
|
// Never on top of the cookie banner: wait for iubenda, and if the banner
|
||||||
|
// is open wait for the visitor's answer. If iubenda never loads
|
||||||
|
// (blocked), show it anyway after a few seconds.
|
||||||
|
let scheduled = false;
|
||||||
|
const scheduleToast = (delay) => {
|
||||||
|
if (scheduled) return;
|
||||||
|
scheduled = true;
|
||||||
|
setTimeout(showToast, delay);
|
||||||
|
};
|
||||||
|
const afterIubenda = () => {
|
||||||
|
scheduleToast(2000);
|
||||||
|
};
|
||||||
|
if (window.__iubReady) {
|
||||||
|
afterIubenda();
|
||||||
|
} else {
|
||||||
|
window.addEventListener("iub-ready", afterIubenda, { once: true });
|
||||||
|
setTimeout(() => {
|
||||||
|
if (!window.__iubReady) scheduleToast(0);
|
||||||
|
}, 6000);
|
||||||
|
}
|
||||||
|
|
||||||
// Enable dark mode
|
// Enable dark mode
|
||||||
if (tryButton) {
|
if (tryButton) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue