| 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,11 +190,11 @@ |
| 190 | box-shadow: 0 0.3em 1em 0.125em var(--search-sh-color); | 190 | box-shadow: 0 0.3em 1em 0.125em var(--search-sh-color); |
| 191 | } | 191 | } |
| 192 | 192 | ||
| 193 | .docs .search::placeholder { | 193 | #searchPlaceholder { |
| 194 | font-size: 1rem; | 194 | position: absolute; |
| 195 | font-family: var(--ui); | 195 | pointer-events: none; |
| 196 | color: var(--tx-color); | 196 | top: 5px; |
| 197 | opacity: 0.5; | 197 | left: 5px; |
| 198 | } | 198 | } |
| 199 | 199 | ||
| 200 | .docs a { | 200 | .docs a { |
| ... | @@ -334,7 +334,7 @@ | ... | @@ -334,7 +334,7 @@ |
| 334 | margin-right: 0.5em; | 334 | margin-right: 0.5em; |
| 335 | } | 335 | } |
| 336 | 336 | ||
| 337 | .help-modal kbd { | 337 | kbd { |
| 338 | display: inline-block; | 338 | display: inline-block; |
| 339 | padding: 0.3em 0.2em; | 339 | padding: 0.3em 0.2em; |
| 340 | font-size: 1.2em; | 340 | font-size: 1.2em; |
| ... | @@ -614,7 +614,10 @@ | ... | @@ -614,7 +614,10 @@ |
| 614 | <div class="flex-right"> | 614 | <div class="flex-right"> |
| 615 | <div class="wrap"> | 615 | <div class="wrap"> |
| 616 | <section class="docs"> | 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 | <p id="status">Loading...</p> | 621 | <p id="status">Loading...</p> |
| 619 | <div id="sectNav" class="hidden"><ul id="listNav"></ul></div> | 622 | <div id="sectNav" class="hidden"><ul id="listNav"></ul></div> |
| 620 | <div id="fnProto" class="hidden"> | 623 | <div id="fnProto" class="hidden"> |
lib/docs/main.js+12
| ... | @@ -49,6 +49,7 @@ var zigAnalysis; | ... | @@ -49,6 +49,7 @@ var zigAnalysis; |
| 49 | let domTdZigVer = document.getElementById("tdZigVer"); | 49 | let domTdZigVer = document.getElementById("tdZigVer"); |
| 50 | let domHdrName = document.getElementById("hdrName"); | 50 | let domHdrName = document.getElementById("hdrName"); |
| 51 | let domHelpModal = document.getElementById("helpModal"); | 51 | let domHelpModal = document.getElementById("helpModal"); |
| 52 | const domSearchPlaceholder = document.getElementById("searchPlaceholder"); | ||
| 52 | 53 | ||
| 53 | let searchTimer = null; | 54 | let searchTimer = null; |
| 54 | 55 | ||
| ... | @@ -103,6 +104,13 @@ var zigAnalysis; | ... | @@ -103,6 +104,13 @@ var zigAnalysis; |
| 103 | // let nodesToCallsMap = indexNodesToCalls(); | 104 | // let nodesToCallsMap = indexNodesToCalls(); |
| 104 | 105 | ||
| 105 | domSearch.addEventListener("keydown", onSearchKeyDown, false); | 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 | domPrivDeclsBox.addEventListener( | 114 | domPrivDeclsBox.addEventListener( |
| 107 | "change", | 115 | "change", |
| 108 | function () { | 116 | function () { |
| ... | @@ -2623,6 +2631,10 @@ var zigAnalysis; | ... | @@ -2623,6 +2631,10 @@ var zigAnalysis; |
| 2623 | updateCurNav(); | 2631 | updateCurNav(); |
| 2624 | if (domSearch.value !== curNavSearch) { | 2632 | if (domSearch.value !== curNavSearch) { |
| 2625 | domSearch.value = curNavSearch; | 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 | render(); | 2639 | render(); |
| 2628 | if (imFeelingLucky) { | 2640 | if (imFeelingLucky) { |