From d52b9aa564357d64af0ea6acf02281217f0eb8d0 Mon Sep 17 00:00:00 2001 From: Guillaume Gomez Date: Thu, 29 Aug 2024 21:09:32 +0200 Subject: [PATCH] Move theme handling JS into its own file to make theme being applied before first rendering --- .github/deploy.sh | 1 + util/gh-pages/index_template.html | 1 + util/gh-pages/script.js | 82 +++++-------------------------- util/gh-pages/theme.js | 56 +++++++++++++++++++++ 4 files changed, 70 insertions(+), 70 deletions(-) create mode 100644 util/gh-pages/theme.js diff --git a/.github/deploy.sh b/.github/deploy.sh index 6cebbb7801b..ea118a3b6fc 100644 --- a/.github/deploy.sh +++ b/.github/deploy.sh @@ -8,6 +8,7 @@ rm -rf out/master/ || exit 0 echo "Making the docs for master" mkdir 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/style.css out/master diff --git a/util/gh-pages/index_template.html b/util/gh-pages/index_template.html index d942cbe39e7..f052e95cdaf 100644 --- a/util/gh-pages/index_template.html +++ b/util/gh-pages/index_template.html @@ -26,6 +26,7 @@ Otherwise, have a great day =^.^= +
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js index 4264f48e846..b503a16dd30 100644 --- a/util/gh-pages/script.js +++ b/util/gh-pages/script.js @@ -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 = { timeout: null, inputElem: document.getElementById("search-input"), @@ -194,6 +146,7 @@ function expandLintId(lintId) { const lintElem = document.getElementById(lintId); const isCollapsed = lintElem.classList.remove("collapsed"); lintElem.querySelector(".label-doc-folding").innerText = "-"; + onEachLazy(lintElem.querySelectorAll("pre > code.language-rust"), el => hljs.highlightElement(el)); } // Show details for one lint @@ -207,6 +160,7 @@ function expandLint(lintId) { const lintElem = document.getElementById(lintId); const isCollapsed = lintElem.classList.toggle("collapsed"); lintElem.querySelector(".label-doc-folding").innerText = isCollapsed ? "+" : "-"; + onEachLazy(lintElem.querySelectorAll("pre > code.language-rust"), el => hljs.highlightElement(el)); } function copyToClipboard(event) { @@ -511,6 +465,7 @@ function setupDropdown(elementId) { child.onblur = event => handleBlur(event, elementId); }; onEachLazy(elem.children, setBlur); + onEachLazy(elem.querySelectorAll("select"), setBlur); onEachLazy(elem.querySelectorAll("input"), setBlur); onEachLazy(elem.querySelectorAll("ul button"), setBlur); } @@ -599,28 +554,15 @@ function parseURLFilters() { } } -// 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); -} - +document.getElementById(`theme-choice`).value = loadValue("theme"); let disableShortcuts = loadValue('disable-shortcuts') === "true"; -// To prevent having a "flash", we give back time to the web browser to finish rendering with -// theme applied before finishing the rendering. -setTimeout(() => { - document.getElementById("disable-shortcuts").checked = disableShortcuts; +document.getElementById("disable-shortcuts").checked = disableShortcuts; - document.addEventListener("keypress", handleShortcut); - document.addEventListener("keydown", handleShortcut); +document.addEventListener("keypress", handleShortcut); +document.addEventListener("keydown", handleShortcut); - generateSettings(); - generateSearch(); - parseURLFilters(); - scrollToLintByURL(); - filters.filterLints(); - onEachLazy(document.querySelectorAll("pre > code.language-rust"), el => hljs.highlightElement(el)); -}, 0); +generateSettings(); +generateSearch(); +parseURLFilters(); +scrollToLintByURL(); +filters.filterLints(); diff --git a/util/gh-pages/theme.js b/util/gh-pages/theme.js new file mode 100644 index 00000000000..bc296955ddf --- /dev/null +++ b/util/gh-pages/theme.js @@ -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); + } +})();