altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 3 Packages Projects Releases Wiki Activity

fix: Set font size from cookie before DOM is ready, to avoid flickering (#4882)

Browse source 
* fix: Set font size from cookie before DOM is ready, to avoid flickering

* fix: Use localStorage instead of cookies where possible
This commit is contained in:
Lars Eggert 2022-12-15 17:36:30 +02:00 committed by GitHub
parent 38748cb10b
commit 8a599b749b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
ietf/static/js/document_html.js
View file

@ -11,22 +11,23 @@ import { populate_nav } from "./nav.js";
const cookies = Cookies.withAttributes({ sameSite: "strict" });
// set initial point size from cookie before DOM is ready, to avoid flickering
const ptsize_var = "doc-ptsize-max";
function change_ptsize(ptsize) {
document.documentElement.style.setProperty(`--${ptsize_var}`,
`${ptsize}pt`);
localStorage.setItem(ptsize_var, ptsize);
}
const ptsize = localStorage.getItem(ptsize_var);
change_ptsize(ptsize ? Math.min(Math.max(7, ptsize), 16) : 12);
document.addEventListener("DOMContentLoaded", function (event) {
// handle point size slider
const cookie = "doc-ptsize-max";
function change_ptsize(ptsize) {
document.documentElement.style.setProperty(`--${cookie}`,
`${ptsize}pt`);
cookies.set(cookie, ptsize);
}
document.getElementById("ptsize")
.oninput = function () { change_ptsize(this.value) };
const ptsize = cookies.get(cookie);
change_ptsize(ptsize ? Math.min(Math.max(7, ptsize), 16) : 12);
// Use the Bootstrap tooltip plugin for all elements with a title attribute
const tt_triggers = document.querySelectorAll(
"[title]:not([title=''])");
@ -45,15 +46,25 @@ document.addEventListener("DOMContentLoaded", function (event) {
#content .h1, #content .h2, #content .h3, #content .h4, #content .h5, #content .h6`,
["py-0"]);
// activate pref buttons selected by pref cookies
// activate pref buttons selected by pref cookies or localStorage
const in_localStorage = ["deftab"];
document.querySelectorAll(".btn-check")
.forEach(btn => {
const id = btn.id.replace("-radio", "");
if (cookies.get(btn.name) == id) {
const val = in_localStorage.includes(btn.name) ?
localStorage.getItem(btn.name) : cookies.get(btn.name);
if (val == id) {
btn.checked = true;
}
btn.addEventListener("click", el => {
cookies.set(btn.name, id);
// only use cookies for things used in HTML templates
if (in_localStorage.includes(btn.name)) {
localStorage.setItem(btn.name, id)
} else {
cookies.set(btn.name, id);
}
window.location.reload();
});
});
@ -62,7 +73,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
let defpane;
try {
defpane = Tab.getOrCreateInstance(
`#${cookies.get("deftab")}-tab`);
`#${localStorage.getItem("deftab")}-tab`);
} catch (err) {
defpane = Tab.getOrCreateInstance("#docinfo-tab");
};