Skip to content

Commit d52b9aa

Browse files
GuillaumeGomezGuillaumeGomez
committed
Move theme handling JS into its own file to make theme being applied before first rendering
1 parent 47f40d4 commit d52b9aa

File tree

4 files changed

+72
-72
lines changed

4 files changed

+72
-72
lines changed

‎.github/deploy.sh‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ rm -rf out/master/ || exit 0
88
echo "Making the docs for master"
99
mkdir out/master/
1010
cp util/gh-pages/index.html out/master
11+
cp util/gh-pages/theme.js out/master
1112
cp util/gh-pages/script.js out/master
1213
cp util/gh-pages/style.css out/master
1314

‎util/gh-pages/index_template.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
<link rel="stylesheet" href="style.css">
2727
</head>
2828
<body>
29+
<script src="theme.js"></script>
2930
<div id="settings-dropdown">
3031
<button class="settings-icon" tabindex="-1"></button>
3132
<div class="settings-menu" tabindex="-1">

‎util/gh-pages/script.js‎

Lines changed: 14 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,3 @@
1-
function storeValue(settingName, value) {
2-
try {
3-
localStorage.setItem(`clippy-lint-list-${settingName}`, value);
4-
} catch (e) { }
5-
}
6-
7-
function loadValue(settingName) {
8-
return localStorage.getItem(`clippy-lint-list-${settingName}`);
9-
}
10-
11-
function setTheme(theme, store) {
12-
let enableHighlight = false;
13-
let enableNight = false;
14-
let enableAyu = false;
15-
16-
switch(theme) {
17-
case "ayu":
18-
enableAyu = true;
19-
break;
20-
case "coal":
21-
case "navy":
22-
enableNight = true;
23-
break;
24-
case "rust":
25-
enableHighlight = true;
26-
break;
27-
default:
28-
enableHighlight = true;
29-
theme = "light";
30-
break;
31-
}
32-
33-
document.getElementsByTagName("body")[0].className = theme;
34-
35-
document.getElementById("githubLightHighlight").disabled = enableNight || !enableHighlight;
36-
document.getElementById("githubDarkHighlight").disabled = !enableNight && !enableAyu;
37-
38-
document.getElementById("styleHighlight").disabled = !enableHighlight;
39-
document.getElementById("styleNight").disabled = !enableNight;
40-
document.getElementById("styleAyu").disabled = !enableAyu;
41-
42-
if (store) {
43-
storeValue("theme", theme);
44-
} else {
45-
document.getElementById(`theme-choice`).value = theme;
46-
}
47-
}
48-
491
window.searchState = {
502
timeout: null,
513
inputElem: document.getElementById("search-input"),
@@ -194,6 +146,7 @@ function expandLintId(lintId) {
194146
const lintElem = document.getElementById(lintId);
195147
const isCollapsed = lintElem.classList.remove("collapsed");
196148
lintElem.querySelector(".label-doc-folding").innerText = "-";
149+
onEachLazy(lintElem.querySelectorAll("pre > code.language-rust"), el => hljs.highlightElement(el));
197150
}
198151

199152
// Show details for one lint
@@ -207,6 +160,7 @@ function expandLint(lintId) {
207160
const lintElem = document.getElementById(lintId);
208161
const isCollapsed = lintElem.classList.toggle("collapsed");
209162
lintElem.querySelector(".label-doc-folding").innerText = isCollapsed ? "+" : "-";
163+
onEachLazy(lintElem.querySelectorAll("pre > code.language-rust"), el => hljs.highlightElement(el));
210164
}
211165

212166
function copyToClipboard(event) {
@@ -511,6 +465,7 @@ function setupDropdown(elementId) {
511465
child.onblur = event => handleBlur(event, elementId);
512466
};
513467
onEachLazy(elem.children, setBlur);
468+
onEachLazy(elem.querySelectorAll("select"), setBlur);
514469
onEachLazy(elem.querySelectorAll("input"), setBlur);
515470
onEachLazy(elem.querySelectorAll("ul button"), setBlur);
516471
}
@@ -599,28 +554,15 @@ function parseURLFilters() {
599554
}
600555
}
601556

602-
// loading the theme after the initial load
603-
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
604-
const theme = loadValue('theme');
605-
if (prefersDark.matches && !theme) {
606-
setTheme("coal", false);
607-
} else {
608-
setTheme(theme, false);
609-
}
610-
557+
document.getElementById(`theme-choice`).value = loadValue("theme");
611558
let disableShortcuts = loadValue('disable-shortcuts') === "true";
612-
// To prevent having a "flash", we give back time to the web browser to finish rendering with
613-
// theme applied before finishing the rendering.
614-
setTimeout(() => {
615-
document.getElementById("disable-shortcuts").checked = disableShortcuts;
616-
617-
document.addEventListener("keypress", handleShortcut);
618-
document.addEventListener("keydown", handleShortcut);
619-
620-
generateSettings();
621-
generateSearch();
622-
parseURLFilters();
623-
scrollToLintByURL();
624-
filters.filterLints();
625-
onEachLazy(document.querySelectorAll("pre > code.language-rust"), el => hljs.highlightElement(el));
626-
}, 0);
559+
document.getElementById("disable-shortcuts").checked = disableShortcuts;
560+
561+
document.addEventListener("keypress", handleShortcut);
562+
document.addEventListener("keydown", handleShortcut);
563+
564+
generateSettings();
565+
generateSearch();
566+
parseURLFilters();
567+
scrollToLintByURL();
568+
filters.filterLints();

‎util/gh-pages/theme.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
function storeValue(settingName, value) {
2+
try {
3+
localStorage.setItem(`clippy-lint-list-${settingName}`, value);
4+
} catch (e) { }
5+
}
6+
7+
function loadValue(settingName) {
8+
return localStorage.getItem(`clippy-lint-list-${settingName}`);
9+
}
10+
11+
function setTheme(theme, store) {
12+
let enableHighlight = false;
13+
let enableNight = false;
14+
let enableAyu = false;
15+
16+
switch(theme) {
17+
case "ayu":
18+
enableAyu = true;
19+
break;
20+
case "coal":
21+
case "navy":
22+
enableNight = true;
23+
break;
24+
case "rust":
25+
enableHighlight = true;
26+
break;
27+
default:
28+
enableHighlight = true;
29+
theme = "light";
30+
break;
31+
}
32+
33+
document.body.className = theme;
34+
35+
document.getElementById("githubLightHighlight").disabled = enableNight || !enableHighlight;
36+
document.getElementById("githubDarkHighlight").disabled = !enableNight && !enableAyu;
37+
38+
document.getElementById("styleHighlight").disabled = !enableHighlight;
39+
document.getElementById("styleNight").disabled = !enableNight;
40+
document.getElementById("styleAyu").disabled = !enableAyu;
41+
42+
if (store) {
43+
storeValue("theme", theme);
44+
}
45+
}
46+
47+
(function() {
48+
// loading the theme after the initial load
49+
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
50+
const theme = loadValue("theme");
51+
if (prefersDark.matches && !theme) {
52+
setTheme("coal", false);
53+
} else {
54+
setTheme(theme, false);
55+
}
56+
})();

0 commit comments

Comments
 (0)