Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rjsparks merged 4 commits into from
Dec 15, 2022
Merged

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

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ba2647d
fix: Set font size from cookie before DOM is ready, to avoid flickering
larseggert Dec 13, 2022
1f57342
Merge branch 'main' into fix-flickering
larseggert Dec 14, 2022
df1d1cb
fix: Use localStorage instead of cookies where possible
larseggert Dec 14, 2022
0a599a5
Merge branch 'main' into fix-flickering
larseggert Dec 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 26 additions & 15 deletions ietf/static/js/document_html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,23 @@ import { populate_nav } from "./nav.js";

const cookies = Cookies.withAttributes({ sameSite: "strict" });

document.addEventListener("DOMContentLoaded", function (event) {
// handle point size slider
const cookie = "doc-ptsize-max";
// 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(`--${cookie}`,
`${ptsize}pt`);
cookies.set(cookie, ptsize);
}
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
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=''])");
Expand All @@ -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();
});
});
Expand All @@ -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");
};
Expand Down