Fix null localstorage and h1 styling

This commit is contained in:
joncrangle
2023-11-30 22:11:43 -05:00
parent 4d5786a443
commit 3422154e26

View File

@@ -159,13 +159,17 @@ const handleFontChange = () => {
if (mainElement === null) { if (mainElement === null) {
return; return;
} }
const font = localStorage.getItem("font"); let font = localStorage.getItem("font");
if (font === "sans-serif") { if (font === null) {
mainElement.classList.add("font-sans"); localStorage.setItem("font", "sans-serif");
mainElement.classList.remove("font-serif"); font = "sans-serif";
} else { }
if (font === "serif") {
mainElement.classList.add("font-serif"); mainElement.classList.add("font-serif");
mainElement.classList.remove("font-sans"); mainElement.classList.remove("font-sans");
} else {
mainElement.classList.add("font-sans");
mainElement.classList.remove("font-serif");
} }
}; };
@@ -179,9 +183,10 @@ const changeFontSize = (node, classes) => {
"text-2xl", "text-2xl",
"text-3xl", "text-3xl",
"text-4xl", "text-4xl",
"sm:text-3xl", "text-5xl",
"sm:text-4xl", "lg:text-4xl",
"sm:text-5xl", "lg:text-5xl",
"lg:text-6xl",
]; ];
const currentClasses = sizes.filter((size) => node.classList.contains(size)); const currentClasses = sizes.filter((size) => node.classList.contains(size));
node.classList.remove(...currentClasses); node.classList.remove(...currentClasses);
@@ -192,9 +197,21 @@ const handleFontSizeChange = () => {
if (mainElement === null) { if (mainElement === null) {
return; return;
} }
const fontSize = localStorage.getItem("fontsize"); let fontSize = localStorage.getItem("fontsize");
if (fontSize === null) {
localStorage.setItem("fontsize", "text-base");
fontSize = "text-base";
}
if (fontSize === "text-sm") {
changeFontSize(document.querySelector("body"), ["text-sm"]);
} else if (fontSize === "text-lg") {
changeFontSize(document.querySelector("body"), ["text-lg"]);
} else {
changeFontSize(document.querySelector("body"), ["text-base"]);
}
const nodes = document.querySelectorAll( const nodes = document.querySelectorAll(
"h1, h2, h3, h4, code, pre, kbd, table" "h1, h2, h3, h4, h5, h6, code, pre, kbd, table"
); );
if (fontSize === "text-sm") { if (fontSize === "text-sm") {
changeFontSize(mainElement, ["text-sm"]); changeFontSize(mainElement, ["text-sm"]);
@@ -208,12 +225,13 @@ const handleFontSizeChange = () => {
switch (node.tagName) { switch (node.tagName) {
case "H1": { case "H1": {
if (fontSize === "text-sm") { if (fontSize === "text-sm") {
classes = ["text-2xl", "sm:text-3xl"]; classes = ["text-3xl", "lg:text-4xl"];
} else if (fontSize === "text-lg") { } else if (fontSize === "text-lg") {
classes = ["text-4xl", "sm:text-5xl"]; classes = ["text-5xl", "lg:text-6xl"];
} else { } else {
classes = ["text-3xl", "sm:text-4xl"]; classes = ["text-4xl", "lg:text-5xl"];
} }
break;
} }
case "H2": { case "H2": {
if (fontSize === "text-sm") { if (fontSize === "text-sm") {
@@ -235,7 +253,9 @@ const handleFontSizeChange = () => {
} }
break; break;
} }
case "H4": { case "H4":
case "H5":
case "H6": {
if (fontSize === "text-sm") { if (fontSize === "text-sm") {
classes = ["text-lg"]; classes = ["text-lg"];
} else if (fontSize === "text-lg") { } else if (fontSize === "text-lg") {
@@ -259,6 +279,13 @@ const handleFontSizeChange = () => {
break; break;
} }
default: { default: {
if (fontSize === "text-sm") {
classes = ["text-sm"];
} else if (fontSize === "text-lg") {
classes = ["text-lg"];
} else {
classes = ["text-base"];
}
break; break;
} }
} }