Merge pull request #10335 from AA-Turner/fix-highlighting-div-body

Fix search highlighting
This commit is contained in:
Takeshi KOMIYA 2022-04-16 16:23:47 +09:00 committed by GitHub
commit 978b6c86fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -130,18 +130,16 @@ const Documentation = {
* highlight the search words provided in the url in the text * highlight the search words provided in the url in the text
*/ */
highlightSearchWords: () => { highlightSearchWords: () => {
const highlight = new URLSearchParams(window.location.search).get( const highlight =
"highlight" new URLSearchParams(window.location.search).get("highlight") || "";
); const terms = highlight.toLowerCase().split(/\s+/);
const terms = highlight ? highlight.split(/\s+/) : [];
if (terms.length === 0) return; // nothing to do if (terms.length === 0) return; // nothing to do
let body = document.querySelectorAll("div.body"); // There should never be more than one element matching "div.body"
if (!body.length) body = document.querySelector("body"); const divBody = document.querySelectorAll("div.body");
const body = divBody.length ? divBody[0] : document.querySelector("body");
window.setTimeout(() => { window.setTimeout(() => {
terms.forEach((term) => terms.forEach((term) => _highlightText(body, term, "highlighted"));
_highlightText(body, term.toLowerCase(), "highlighted")
);
}, 10); }, 10);
const searchBox = document.getElementById("searchbox"); const searchBox = document.getElementById("searchbox");
@ -169,8 +167,8 @@ const Documentation = {
.querySelectorAll("span.highlighted") .querySelectorAll("span.highlighted")
.forEach((el) => el.classList.remove("highlighted")); .forEach((el) => el.classList.remove("highlighted"));
const url = new URL(window.location); const url = new URL(window.location);
url.searchParams.delete('highlight'); url.searchParams.delete("highlight");
window.history.replaceState({}, '', url); window.history.replaceState({}, "", url);
}, },
/** /**
@ -206,8 +204,10 @@ const Documentation = {
initOnKeyListeners: () => { initOnKeyListeners: () => {
// only install a listener if it is really needed // only install a listener if it is really needed
if (!DOCUMENTATION_OPTIONS.NAVIGATION_WITH_KEYS && if (
!DOCUMENTATION_OPTIONS.ENABLE_SEARCH_SHORTCUTS) !DOCUMENTATION_OPTIONS.NAVIGATION_WITH_KEYS &&
!DOCUMENTATION_OPTIONS.ENABLE_SEARCH_SHORTCUTS
)
return; return;
const blacklistedElements = new Set([ const blacklistedElements = new Set([
@ -218,14 +218,12 @@ const Documentation = {
]); ]);
document.addEventListener("keydown", (event) => { document.addEventListener("keydown", (event) => {
if (blacklistedElements.has(document.activeElement.tagName)) return; // bail for input elements if (blacklistedElements.has(document.activeElement.tagName)) return; // bail for input elements
if (event.altKey || event.ctrlKey || event.metaKey) if (event.altKey || event.ctrlKey || event.metaKey) return; // bail with special keys
return; // bail with special keys
if (!event.shiftKey) { if (!event.shiftKey) {
switch (event.key) { switch (event.key) {
case "ArrowLeft": case "ArrowLeft":
if (!DOCUMENTATION_OPTIONS.NAVIGATION_WITH_KEYS) if (!DOCUMENTATION_OPTIONS.NAVIGATION_WITH_KEYS) break;
break;
const prevLink = document.querySelector('link[rel="prev"]'); const prevLink = document.querySelector('link[rel="prev"]');
if (prevLink && prevLink.href) { if (prevLink && prevLink.href) {
@ -234,8 +232,7 @@ const Documentation = {
} }
break; break;
case "ArrowRight": case "ArrowRight":
if (!DOCUMENTATION_OPTIONS.NAVIGATION_WITH_KEYS) if (!DOCUMENTATION_OPTIONS.NAVIGATION_WITH_KEYS) break;
break;
const nextLink = document.querySelector('link[rel="next"]'); const nextLink = document.querySelector('link[rel="next"]');
if (nextLink && nextLink.href) { if (nextLink && nextLink.href) {
@ -244,8 +241,7 @@ const Documentation = {
} }
break; break;
case "Escape": case "Escape":
if (!DOCUMENTATION_OPTIONS.ENABLE_SEARCH_SHORTCUTS) if (!DOCUMENTATION_OPTIONS.ENABLE_SEARCH_SHORTCUTS) break;
break;
Documentation.hideSearchWords(); Documentation.hideSearchWords();
event.preventDefault(); event.preventDefault();
} }
@ -253,9 +249,8 @@ const Documentation = {
// some keyboard layouts may need Shift to get / // some keyboard layouts may need Shift to get /
switch (event.key) { switch (event.key) {
case '/': case "/":
if (!DOCUMENTATION_OPTIONS.ENABLE_SEARCH_SHORTCUTS) if (!DOCUMENTATION_OPTIONS.ENABLE_SEARCH_SHORTCUTS) break;
break;
Documentation.focusSearchBar(); Documentation.focusSearchBar();
event.preventDefault(); event.preventDefault();
} }