persist yec banner close during navigation

While the checkbox persistence mechanism is clever for not requiring
javascript, it only really works for reloads of the *same* page/url. The
checkbox only remembers its state on a given page, not all pages of the
same site. For example, even if the visitor closes the banner on the front
page, it will be shown when navigating to /about, and so forth.

This leverages the browser's sessionStorage to remember when the banner
is closed, and persists for all pages of the same website until the browser
session or tab is closed, which should be much more convenient for casual
visitors.
This commit is contained in:
Jérôme Charaoui 2024-10-02 11:06:14 -04:00
parent 06a378d2bf
commit 4c16f26b23
No known key found for this signature in database
GPG Key ID: 69C52F658E988542

View File

@ -38,6 +38,14 @@
</div>
<script type="text/javascript">
/* persist banner close across pages in the same session/tab */
let trigger = document.querySelector(".banner #trigger");
trigger.addEventListener("change", () => {
sessionStorage.setItem("bannerClosed", trigger.checked);
});
if (sessionStorage.getItem("bannerClosed")) {
trigger.checked = sessionStorage.getItem("bannerClosed");
}
/* display a random variant of the banner */
/* not using jQuery because it's loaded later, and this is just faster */
const variants = ['browse', 'search', 'speak'];