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

4 files changed

Lines changed: 72 additions & 72 deletions

File tree

‎.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
<linkrel="stylesheet" href="style.css">
2727
</head>
2828
<body>
29+
<scriptsrc="theme.js"></script>
2930
<divid="settings-dropdown">
3031
<buttonclass="settings-icon" tabindex="-1"></button>
3132
<divclass="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-
functionstoreValue(settingName,value){
2-
try{
3-
localStorage.setItem(`clippy-lint-list-${settingName}`,value);
4-
}catch(e){}
5-
}
6-
7-
functionloadValue(settingName){
8-
returnlocalStorage.getItem(`clippy-lint-list-${settingName}`);
9-
}
10-
11-
functionsetTheme(theme,store){
12-
letenableHighlight=false;
13-
letenableNight=false;
14-
letenableAyu=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
constlintElem=document.getElementById(lintId);
195147
constisCollapsed=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
constlintElem=document.getElementById(lintId);
208161
constisCollapsed=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
functioncopyToClipboard(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-
constprefersDark=window.matchMedia("(prefers-color-scheme: dark)");
604-
consttheme=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
letdisableShortcuts=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+
functionstoreValue(settingName,value){
2+
try{
3+
localStorage.setItem(`clippy-lint-list-${settingName}`,value);
4+
}catch(e){}
5+
}
6+
7+
functionloadValue(settingName){
8+
returnlocalStorage.getItem(`clippy-lint-list-${settingName}`);
9+
}
10+
11+
functionsetTheme(theme,store){
12+
letenableHighlight=false;
13+
letenableNight=false;
14+
letenableAyu=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+
constprefersDark=window.matchMedia("(prefers-color-scheme: dark)");
50+
consttheme=loadValue("theme");
51+
if(prefersDark.matches&&!theme){
52+
setTheme("coal",false);
53+
}else{
54+
setTheme(theme,false);
55+
}
56+
})();

0 commit comments

Comments
 (0)