| author |  Wooster <r00ster91@proton.me> 2022-08-06 15:09:26+02:00 |
| committer | Wooster <r00ster91@proton.me> 2022-08-06 15:15:59+02:00 |
| log | df8cfb1273e7b99ff5de0164c676d291191a72c6 |
| tree | be16c931dcab16ba1eb5f4e5b3e56ca01ed33ad4 |
| parent | 6354851909749d9741d520ead2d1f9e517df3548 |
feat: new search placeholder
This new search placeholder looks much nicer because it allows HTML inside it which
the `placeholder` attribute on `<input>`s doesn't allow.
I tested it for all kinds of cases and it seems to work pretty well.2 files changed, 22 insertions(+), 7 deletions(-)
lib
lib/docs/index.html+10-7
| ... | ... | @@ -190,11 +190,11 @@ |
| 190 | 190 | box-shadow: 0 0.3em 1em 0.125em var(--search-sh-color); |
| 191 | 191 | } |
| 192 | 192 | |
| 193 | .docs .search::placeholder { | |
| 194 | font-size: 1rem; | |
| 195 | font-family: var(--ui); | |
| 196 | color: var(--tx-color); | |
| 197 | opacity: 0.5; | |
| 193 | #searchPlaceholder { | |
| 194 | position: absolute; | |
| 195 | pointer-events: none; | |
| 196 | top: 5px; | |
| 197 | left: 5px; | |
| 198 | 198 | } |
| 199 | 199 | |
| 200 | 200 | .docs a { |
| ... | ... | @@ -334,7 +334,7 @@ |
| 334 | 334 | margin-right: 0.5em; |
| 335 | 335 | } |
| 336 | 336 | |
| 337 | .help-modal kbd { | |
| 337 | kbd { | |
| 338 | 338 | display: inline-block; |
| 339 | 339 | padding: 0.3em 0.2em; |
| 340 | 340 | font-size: 1.2em; |
| ... | ... | @@ -614,7 +614,10 @@ |
| 614 | 614 | <div class="flex-right"> |
| 615 | 615 | <div class="wrap"> |
| 616 | 616 | <section class="docs"> |
| 617 | <input type="search" class="search" id="search" autocomplete="off" spellcheck="false" placeholder="`s` to search, `?` to see more options"> | |
| 617 | <div style="position: relative"> | |
| 618 | <span id="searchPlaceholder"><kbd>S</kbd> to search, <kbd>?</kbd> for more options</span> | |
| 619 | <input type="search" class="search" id="search" autocomplete="off" spellcheck="false"> | |
| 620 | </div> | |
| 618 | 621 | <p id="status">Loading...</p> |
| 619 | 622 | <div id="sectNav" class="hidden"><ul id="listNav"></ul></div> |
| 620 | 623 | <div id="fnProto" class="hidden"> |
lib/docs/main.js+12
| ... | ... | @@ -49,6 +49,7 @@ var zigAnalysis; |
| 49 | 49 | let domTdZigVer = document.getElementById("tdZigVer"); |
| 50 | 50 | let domHdrName = document.getElementById("hdrName"); |
| 51 | 51 | let domHelpModal = document.getElementById("helpModal"); |
| 52 | const domSearchPlaceholder = document.getElementById("searchPlaceholder"); | |
| 52 | 53 | |
| 53 | 54 | let searchTimer = null; |
| 54 | 55 | |
| ... | ... | @@ -103,6 +104,13 @@ var zigAnalysis; |
| 103 | 104 | // let nodesToCallsMap = indexNodesToCalls(); |
| 104 | 105 | |
| 105 | 106 | domSearch.addEventListener("keydown", onSearchKeyDown, false); |
| 107 | domSearch.addEventListener("focus", ev => { | |
| 108 | domSearchPlaceholder.classList.add("hidden"); | |
| 109 | }); | |
| 110 | domSearch.addEventListener("blur", ev => { | |
| 111 | if (domSearch.value.length == 0) | |
| 112 | domSearchPlaceholder.classList.remove("hidden"); | |
| 113 | }); | |
| 106 | 114 | domPrivDeclsBox.addEventListener( |
| 107 | 115 | "change", |
| 108 | 116 | function () { |
| ... | ... | @@ -2623,6 +2631,10 @@ var zigAnalysis; |
| 2623 | 2631 | updateCurNav(); |
| 2624 | 2632 | if (domSearch.value !== curNavSearch) { |
| 2625 | 2633 | domSearch.value = curNavSearch; |
| 2634 | if (domSearch.value.length == 0) | |
| 2635 | domSearchPlaceholder.classList.remove("hidden"); | |
| 2636 | else | |
| 2637 | domSearchPlaceholder.classList.add("hidden"); | |
| 2626 | 2638 | } |
| 2627 | 2639 | render(); |
| 2628 | 2640 | if (imFeelingLucky) { |