diff --git a/doc/nimdoc.css b/doc/nimdoc.css index 0c399e4c19193..d50f766ed4378 100644 --- a/doc/nimdoc.css +++ b/doc/nimdoc.css @@ -770,11 +770,10 @@ div.topic { div.search_results { background-color: var(--third-background); - margin: 3vh 5vw; padding: 1em; border: 1px solid #4d4d4d; - position: fixed; - top: 10px; + position: sticky; + top: 1em; isolation: isolate; max-width: calc(100vw - 6em); z-index: 1; diff --git a/nimdoc/testproject/expected/nimdoc.out.css b/nimdoc/testproject/expected/nimdoc.out.css index 0c399e4c19193..d50f766ed4378 100644 --- a/nimdoc/testproject/expected/nimdoc.out.css +++ b/nimdoc/testproject/expected/nimdoc.out.css @@ -770,11 +770,10 @@ div.topic { div.search_results { background-color: var(--third-background); - margin: 3vh 5vw; padding: 1em; border: 1px solid #4d4d4d; - position: fixed; - top: 10px; + position: sticky; + top: 1em; isolation: isolate; max-width: calc(100vw - 6em); z-index: 1; diff --git a/tools/dochack/dochack.nim b/tools/dochack/dochack.nim index 9469453463062..4c0a17bd0b3d9 100644 --- a/tools/dochack/dochack.nim +++ b/tools/dochack/dochack.nim @@ -303,25 +303,49 @@ var timer: Timeout loadIndexFut: Future[void] = nil +proc hideSearch() = + ## hides the search results element + # If its nil, then results haven't been shown anyways + if not oldToc.isNil: + replaceById("tocRoot", oldToc) + +proc runSearch() = + ## Runs a search and shows the results in the page + let elem = document.getElementById("searchInput") + let value = elem.value + if value != "": + if oldtoc.isNil: + oldtoc = document.getElementById("tocRoot") + let results = dosearch(value) + replaceById("tocRoot", results) + else: + hideSearch() + proc search*() {.exportc.} = - proc wrapper() = - let elem = document.getElementById("searchInput") - let value = elem.value - if value.len != 0: - if oldtoc.isNil: - oldtoc = document.getElementById("tocRoot") - let results = dosearch(value) - replaceById("tocRoot", results) - elif not oldtoc.isNil: - replaceById("tocRoot", oldtoc) # Start loading index as soon as user starts typing. # Will only be loaded the once anyways if loadIndexFut == nil: loadIndexFut = loadIndex() # Run wrapper once loaded so we don't miss the users query - discard loadIndexFut.then(wrapper) + discard loadIndexFut.then(runSearch) if timer != nil: clearTimeout(timer) - timer = setTimeout(wrapper, 400) + timer = setTimeout(runSearch, 400) + +# Register `/` hotkey to jump to search +window.addEventListener("keypress") do (e: Event): + if KeyboardEvent(e).key == "/": + e.preventDefault() + let searchElem = document.getElementById("searchInput") + searchElem.focus() + searchElem.parentElement.scrollIntoView() + + # Run search, so results are shown again if user is jumping back to + # a partial search + runSearch() + +# Hide the search results when we jump around the page so we can read the page +window.addEventListener("hashchange") do (e: Event): + hideSearch() proc copyToClipboard*() {.exportc.} = {.emit: """ @@ -331,23 +355,23 @@ proc copyToClipboard*() {.exportc.} = const allPreTags = document.querySelectorAll("pre:not(.line-nums)") allPreTags.forEach((e) => { - + const div = document.createElement("div") div.classList.add("copyToClipBoard") - + const preTag = document.createElement("pre") preTag.innerHTML = e.innerHTML - + const button = document.createElement("button") - button.value = e.textContent.replace('...', '') + button.value = e.textContent.replace('...', '') button.classList.add("copyToClipBoardBtn") button.style.cursor = "pointer" - + div.appendChild(preTag) div.appendChild(button) - + e.outerHTML = div.outerHTML - + }) } @@ -372,7 +396,7 @@ proc copyToClipboard*() {.exportc.} = e.target.nextElementSibling.style.setProperty("--clipboard-image", "var(--clipboard-image-normal)") } }) - + window.addEventListener("DOMContentLoaded", updatePreTags) """