mikros/rust
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move theme handling JS into its own file to make theme being applied before first rendering

Browse Source
This commit is contained in:
Guillaume Gomez 2024-08-29 21:09:32 +02:00
parent 47f40d468a
commit d52b9aa564
4 changed files with 70 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/deploy.sh vendored
View File

@ -8,6 +8,7 @@ rm -rf out/master/ || exit 0
echo "Making the docs for master" echo "Making the docs for master"
mkdir out/master/ mkdir out/master/
cp util/gh-pages/index.html out/master cp util/gh-pages/index.html out/master
cp util/gh-pages/theme.js out/master
cp util/gh-pages/script.js out/master cp util/gh-pages/script.js out/master
cp util/gh-pages/style.css out/master cp util/gh-pages/style.css out/master

1
util/gh-pages/index_template.html
View File

@ -26,6 +26,7 @@ Otherwise, have a great day =^.^=
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<script src="theme.js"></script>
<div id="settings-dropdown"> <div id="settings-dropdown">
<button class="settings-icon" tabindex="-1"></button> <button class="settings-icon" tabindex="-1"></button>
<div class="settings-menu" tabindex="-1"> <div class="settings-menu" tabindex="-1">

82
util/gh-pages/script.js
View File

@ -1,51 +1,3 @@
function storeValue(settingName, value) {
try {
localStorage.setItem(`clippy-lint-list-${settingName}`, value);
} catch (e) { }
}
function loadValue(settingName) {
return localStorage.getItem(`clippy-lint-list-${settingName}`);
}
function setTheme(theme, store) {
let enableHighlight = false;
let enableNight = false;
let enableAyu = false;
switch(theme) {
case "ayu":
enableAyu = true;
break;
case "coal":
case "navy":
enableNight = true;
break;
case "rust":
enableHighlight = true;
break;
default:
enableHighlight = true;
theme = "light";
break;
}
document.getElementsByTagName("body")[0].className = theme;
document.getElementById("githubLightHighlight").disabled = enableNight || !enableHighlight;
document.getElementById("githubDarkHighlight").disabled = !enableNight && !enableAyu;
document.getElementById("styleHighlight").disabled = !enableHighlight;
document.getElementById("styleNight").disabled = !enableNight;
document.getElementById("styleAyu").disabled = !enableAyu;
if (store) {
storeValue("theme", theme);
} else {
document.getElementById(`theme-choice`).value = theme;
}
}
window.searchState = { window.searchState = {
timeout: null, timeout: null,
inputElem: document.getElementById("search-input"), inputElem: document.getElementById("search-input"),
@ -194,6 +146,7 @@ function expandLintId(lintId) {
const lintElem = document.getElementById(lintId); const lintElem = document.getElementById(lintId);
const isCollapsed = lintElem.classList.remove("collapsed"); const isCollapsed = lintElem.classList.remove("collapsed");
lintElem.querySelector(".label-doc-folding").innerText = "-"; lintElem.querySelector(".label-doc-folding").innerText = "-";
onEachLazy(lintElem.querySelectorAll("pre > code.language-rust"), el => hljs.highlightElement(el));
} }
// Show details for one lint // Show details for one lint
@ -207,6 +160,7 @@ function expandLint(lintId) {
const lintElem = document.getElementById(lintId); const lintElem = document.getElementById(lintId);
const isCollapsed = lintElem.classList.toggle("collapsed"); const isCollapsed = lintElem.classList.toggle("collapsed");
lintElem.querySelector(".label-doc-folding").innerText = isCollapsed ? "+" : "-"; lintElem.querySelector(".label-doc-folding").innerText = isCollapsed ? "+" : "-";
onEachLazy(lintElem.querySelectorAll("pre > code.language-rust"), el => hljs.highlightElement(el));
} }
function copyToClipboard(event) { function copyToClipboard(event) {
@ -511,6 +465,7 @@ function setupDropdown(elementId) {
child.onblur = event => handleBlur(event, elementId); child.onblur = event => handleBlur(event, elementId);
}; };
onEachLazy(elem.children, setBlur); onEachLazy(elem.children, setBlur);
onEachLazy(elem.querySelectorAll("select"), setBlur);
onEachLazy(elem.querySelectorAll("input"), setBlur); onEachLazy(elem.querySelectorAll("input"), setBlur);
onEachLazy(elem.querySelectorAll("ul button"), setBlur); onEachLazy(elem.querySelectorAll("ul button"), setBlur);
} }
@ -599,28 +554,15 @@ function parseURLFilters() {
} }
} }
// loading the theme after the initial load document.getElementById(`theme-choice`).value = loadValue("theme");
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
const theme = loadValue('theme');
if (prefersDark.matches && !theme) {
setTheme("coal", false);
} else {
setTheme(theme, false);
}
let disableShortcuts = loadValue('disable-shortcuts') === "true"; let disableShortcuts = loadValue('disable-shortcuts') === "true";
// To prevent having a "flash", we give back time to the web browser to finish rendering with document.getElementById("disable-shortcuts").checked = disableShortcuts;
// theme applied before finishing the rendering.
setTimeout(() => {
document.getElementById("disable-shortcuts").checked = disableShortcuts;
document.addEventListener("keypress", handleShortcut); document.addEventListener("keypress", handleShortcut);
document.addEventListener("keydown", handleShortcut); document.addEventListener("keydown", handleShortcut);
generateSettings(); generateSettings();
generateSearch(); generateSearch();
parseURLFilters(); parseURLFilters();
scrollToLintByURL(); scrollToLintByURL();
filters.filterLints(); filters.filterLints();
onEachLazy(document.querySelectorAll("pre > code.language-rust"), el => hljs.highlightElement(el));
}, 0);

56
util/gh-pages/theme.js Normal file
View File

@ -0,0 +1,56 @@
function storeValue(settingName, value) {
try {
localStorage.setItem(`clippy-lint-list-${settingName}`, value);
} catch (e) { }
}
function loadValue(settingName) {
return localStorage.getItem(`clippy-lint-list-${settingName}`);
}
function setTheme(theme, store) {
let enableHighlight = false;
let enableNight = false;
let enableAyu = false;
switch(theme) {
case "ayu":
enableAyu = true;
break;
case "coal":
case "navy":
enableNight = true;
break;
case "rust":
enableHighlight = true;
break;
default:
enableHighlight = true;
theme = "light";
break;
}
document.body.className = theme;
document.getElementById("githubLightHighlight").disabled = enableNight || !enableHighlight;
document.getElementById("githubDarkHighlight").disabled = !enableNight && !enableAyu;
document.getElementById("styleHighlight").disabled = !enableHighlight;
document.getElementById("styleNight").disabled = !enableNight;
document.getElementById("styleAyu").disabled = !enableAyu;
if (store) {
storeValue("theme", theme);
}
}
(function() {
// loading the theme after the initial load
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
const theme = loadValue("theme");
if (prefersDark.matches && !theme) {
setTheme("coal", false);
} else {
setTheme(theme, false);
}
})();