Commit df8cfb1273

r00ster91 <r00ster91@proton.me>
2022-08-06 15:09:26
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.
master
1 parent 6354851
Changed files (2)
lib
docs
index.html
main.js
lib/docs/index.html
@@ -190,11 +190,11 @@
         box-shadow: 0 0.3em 1em 0.125em var(--search-sh-color);
       }
 
-      .docs .search::placeholder {
-        font-size: 1rem;
-        font-family: var(--ui);
-        color: var(--tx-color);
-        opacity: 0.5;
+      #searchPlaceholder {
+        position: absolute;
+        pointer-events: none;
+        top: 5px;
+        left: 5px;
       }
 
       .docs a {
@@ -334,7 +334,7 @@
         margin-right: 0.5em;
       }
 
-      .help-modal kbd {
+      kbd {
         display: inline-block;
         padding: 0.3em 0.2em;
         font-size: 1.2em;
@@ -614,7 +614,10 @@
       <div class="flex-right">
         <div class="wrap">
           <section class="docs">
-            <input type="search" class="search" id="search" autocomplete="off" spellcheck="false" placeholder="`s` to search, `?` to see more options">
+            <div style="position: relative">
+              <span id="searchPlaceholder"><kbd>S</kbd> to search, <kbd>?</kbd> for more options</span>
+              <input type="search" class="search" id="search" autocomplete="off" spellcheck="false">
+            </div>
             <p id="status">Loading...</p>
             <div id="sectNav" class="hidden"><ul id="listNav"></ul></div>
             <div id="fnProto" class="hidden">
lib/docs/main.js
@@ -49,6 +49,7 @@ var zigAnalysis;
   let domTdZigVer = document.getElementById("tdZigVer");
   let domHdrName = document.getElementById("hdrName");
   let domHelpModal = document.getElementById("helpModal");
+  const domSearchPlaceholder = document.getElementById("searchPlaceholder");
 
   let searchTimer = null;
 
@@ -103,6 +104,13 @@ var zigAnalysis;
   // let nodesToCallsMap = indexNodesToCalls();
 
   domSearch.addEventListener("keydown", onSearchKeyDown, false);
+  domSearch.addEventListener("focus", ev => {
+    domSearchPlaceholder.classList.add("hidden");
+  });
+  domSearch.addEventListener("blur", ev => {
+    if (domSearch.value.length == 0)
+      domSearchPlaceholder.classList.remove("hidden");
+  });
   domPrivDeclsBox.addEventListener(
     "change",
     function () {
@@ -2623,6 +2631,10 @@ var zigAnalysis;
     updateCurNav();
     if (domSearch.value !== curNavSearch) {
       domSearch.value = curNavSearch;
+      if (domSearch.value.length == 0)
+        domSearchPlaceholder.classList.remove("hidden");
+      else
+        domSearchPlaceholder.classList.add("hidden");
     }
     render();
     if (imFeelingLucky) {