authorgravatar for kappaloris@gmail.comLoris Cro <kappaloris@gmail.com> 2022-08-15 20:50:34+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2022-08-15 20:50:34+02:00
logaefb091973ad0cbc3374a436bdb3b1184596294b
treeae47f18e04a58207830c89ec5b0189de7b4dc588
parent95573dbeebf7a9d3617c1944ab0a74691b7e9d51
parent78bb29d1dc45acedf7ec8990e1ca2c47978b5087
signaturebadge-question-mark Signed by PGP key 4AEE18F83AFDEB23

Merge pull request #12445 from r00ster91/noresults

autodoc: better No Results Found page and other improvements

2 files changed, 62 insertions(+), 33 deletions(-)

lib/docs/index.html+17-9
...@@ -169,8 +169,8 @@...@@ -169,8 +169,8 @@
169 width: 100%;169 width: 100%;
170 margin-bottom: 0.8rem;170 margin-bottom: 0.8rem;
171 padding: 0.5rem;171 padding: 0.5rem;
172 font-size: 1rem;
173 font-family: var(--ui);172 font-family: var(--ui);
173 font-size: 1rem;
174 color: var(--tx-color);174 color: var(--tx-color);
175 background-color: var(--search-bg-color);175 background-color: var(--search-bg-color);
176 border-top: 0;176 border-top: 0;
...@@ -339,8 +339,8 @@...@@ -339,8 +339,8 @@
339 kbd {339 kbd {
340 display: inline-block;340 display: inline-block;
341 padding: 0.3em 0.2em;341 padding: 0.3em 0.2em;
342 font-size: 1.2em;342 font-family: var(--mono);
343 font-size: var(--mono);343 font-size: 1em;
344 line-height: 0.8em;344 line-height: 0.8em;
345 vertical-align: middle;345 vertical-align: middle;
346 color: #000;346 color: #000;
...@@ -612,7 +612,7 @@...@@ -612,7 +612,7 @@
612 </div>612 </div>
613 </nav>613 </nav>
614 </div>614 </div>
615 <div class="flex-right">615 <div id="docs" class="flex-right">
616 <div class="wrap">616 <div class="wrap">
617 <section class="docs">617 <section class="docs">
618 <div style="position: relative">618 <div style="position: relative">
...@@ -654,7 +654,13 @@...@@ -654,7 +654,13 @@
654 </div>654 </div>
655 <div id="sectSearchNoResults" class="hidden">655 <div id="sectSearchNoResults" class="hidden">
656 <h2>No Results Found</h2>656 <h2>No Results Found</h2>
657 <p>Press escape to exit search and then '?' to see more options.</p>657 <p>Here are some things you can try:</p>
658 <ul>
659 <li>Check out the <a id="langRefLink">Language Reference</a> for the language itself.</li>
660 <li>Check out the <a href="https://ziglang.org/learn/">Learn page</a> for other helpful resources for learning Zig.</li>
661 <li>Use your search engine.</li>
662 </ul>
663 <p>Press <kbd>?</kbd> to see keyboard shortcuts and <kbd>Esc</kbd> to return.</p>
658 </div>664 </div>
659 <div id="sectFields" class="hidden">665 <div id="sectFields" class="hidden">
660 <h2>Fields</h2>666 <h2>Fields</h2>
...@@ -716,11 +722,13 @@...@@ -716,11 +722,13 @@
716 <div class="modal">722 <div class="modal">
717 <h1>Keyboard Shortcuts</h1>723 <h1>Keyboard Shortcuts</h1>
718 <dl><dt><kbd>?</kbd></dt><dd>Show this help modal</dd></dl>724 <dl><dt><kbd>?</kbd></dt><dd>Show this help modal</dd></dl>
719 <dl><dt><kbd>Esc</kbd></dt><dd>Clear focus; close this modal</dd></dl>
720 <dl><dt><kbd>s</kbd></dt><dd>Focus the search field</dd></dl>725 <dl><dt><kbd>s</kbd></dt><dd>Focus the search field</dd></dl>
721 <dl><dt><kbd>↑</kbd></dt><dd>Move up in search results</dd></dl>726 <div style="margin-left: 1em">
722 <dl><dt><kbd>↓</kbd></dt><dd>Move down in search results</dd></dl>727 <dl><dt><kbd>↑</kbd></dt><dd>Move up in search results</dd></dl>
723 <dl><dt><kbd>⏎</kbd></dt><dd>Go to active search result</dd></dl>728 <dl><dt><kbd>↓</kbd></dt><dd>Move down in search results</dd></dl>
729 <dl><dt><kbd>⏎</kbd></dt><dd>Go to active search result</dd></dl>
730 </div>
731 <dl><dt><kbd>Esc</kbd></dt><dd>Clear focus; close this modal</dd></dl>
724 </div>732 </div>
725 </div>733 </div>
726 </div>734 </div>
lib/docs/main.js+45-24
...@@ -41,7 +41,7 @@ var zigAnalysis;...@@ -41,7 +41,7 @@ var zigAnalysis;
41 const domSearch = document.getElementById("search");41 const domSearch = document.getElementById("search");
42 const domSectSearchResults = document.getElementById("sectSearchResults");42 const domSectSearchResults = document.getElementById("sectSearchResults");
43 const domSectSearchAllResultsLink = document.getElementById("sectSearchAllResultsLink");43 const domSectSearchAllResultsLink = document.getElementById("sectSearchAllResultsLink");
4444 const domDocs = document.getElementById("docs");
45 const domListSearchResults = document.getElementById("listSearchResults");45 const domListSearchResults = document.getElementById("listSearchResults");
46 const domSectSearchNoResults = document.getElementById("sectSearchNoResults");46 const domSectSearchNoResults = document.getElementById("sectSearchNoResults");
47 const domSectInfo = document.getElementById("sectInfo");47 const domSectInfo = document.getElementById("sectInfo");
...@@ -51,6 +51,7 @@ var zigAnalysis;...@@ -51,6 +51,7 @@ var zigAnalysis;
51 const domHdrName = document.getElementById("hdrName");51 const domHdrName = document.getElementById("hdrName");
52 const domHelpModal = document.getElementById("helpModal");52 const domHelpModal = document.getElementById("helpModal");
53 const domSearchPlaceholder = document.getElementById("searchPlaceholder");53 const domSearchPlaceholder = document.getElementById("searchPlaceholder");
54 const domLangRefLink = document.getElementById("langRefLink");
5455
55 let searchTimer = null;56 let searchTimer = null;
56 let searchTrimResults = true;57 let searchTrimResults = true;
...@@ -116,10 +117,10 @@ var zigAnalysis;...@@ -116,10 +117,10 @@ var zigAnalysis;
116 });117 });
117 domSectSearchAllResultsLink.addEventListener('click', onClickSearchShowAllResults, false);118 domSectSearchAllResultsLink.addEventListener('click', onClickSearchShowAllResults, false);
118 function onClickSearchShowAllResults(ev) {119 function onClickSearchShowAllResults(ev) {
119 ev.preventDefault();120 ev.preventDefault();
120 ev.stopPropagation();121 ev.stopPropagation();
121 searchTrimResults = false;122 searchTrimResults = false;
122 onHashChange();123 onHashChange();
123 }124 }
124125
125 domPrivDeclsBox.addEventListener(126 domPrivDeclsBox.addEventListener(
...@@ -161,6 +162,13 @@ var zigAnalysis;...@@ -161,6 +162,13 @@ var zigAnalysis;
161 window.addEventListener("keydown", onWindowKeyDown, false);162 window.addEventListener("keydown", onWindowKeyDown, false);
162 onHashChange();163 onHashChange();
163164
165 let langRefVersion = zigAnalysis.params.zigVersion;
166 if (!/^\d+\.\d+\.\d+$/.test(langRefVersion)) {
167 // the version is probably not released yet
168 langRefVersion = "master";
169 }
170 domLangRefLink.href = `https://ziglang.org/documentation/${langRefVersion}/`;
171
164 function renderTitle() {172 function renderTitle() {
165 let list = curNav.pkgNames.concat(curNav.declNames);173 let list = curNav.pkgNames.concat(curNav.declNames);
166 let suffix = " - Zig";174 let suffix = " - Zig";
...@@ -3140,6 +3148,23 @@ var zigAnalysis;...@@ -3140,6 +3148,23 @@ var zigAnalysis;
3140 domSearch.blur();3148 domSearch.blur();
3141 }3149 }
31423150
3151 // hide the modal if it's visible or return to the previous result page and unfocus the search
3152 function onEscape(ev) {
3153 if (!domHelpModal.classList.contains("hidden")) {
3154 domHelpModal.classList.add("hidden");
3155 ev.preventDefault();
3156 ev.stopPropagation();
3157 } else {
3158 domSearch.value = "";
3159 domSearch.blur();
3160 domSearchPlaceholder.classList.remove("hidden");
3161 curSearchIndex = -1;
3162 ev.preventDefault();
3163 ev.stopPropagation();
3164 startSearch();
3165 }
3166 }
3167
3143 function onSearchKeyDown(ev) {3168 function onSearchKeyDown(ev) {
3144 switch (getKeyString(ev)) {3169 switch (getKeyString(ev)) {
3145 case "Enter":3170 case "Enter":
...@@ -3156,19 +3181,15 @@ var zigAnalysis;...@@ -3156,19 +3181,15 @@ var zigAnalysis;
3156 ev.stopPropagation();3181 ev.stopPropagation();
3157 return;3182 return;
3158 case "Esc":3183 case "Esc":
3159 domSearch.value = "";3184 onEscape(ev);
3160 domSearch.blur();3185 return
3161 curSearchIndex = -1;
3162 ev.preventDefault();
3163 ev.stopPropagation();
3164 startSearch();
3165 return;
3166 case "Up":3186 case "Up":
3167 moveSearchCursor(-1);3187 moveSearchCursor(-1);
3168 ev.preventDefault();3188 ev.preventDefault();
3169 ev.stopPropagation();3189 ev.stopPropagation();
3170 return;3190 return;
3171 case "Down":3191 case "Down":
3192 // TODO: make the page scroll down if the search cursor is out of the screen
3172 moveSearchCursor(1);3193 moveSearchCursor(1);
3173 ev.preventDefault();3194 ev.preventDefault();
3174 ev.stopPropagation();3195 ev.stopPropagation();
...@@ -3237,19 +3258,18 @@ var zigAnalysis;...@@ -3237,19 +3258,18 @@ var zigAnalysis;
3237 function onWindowKeyDown(ev) {3258 function onWindowKeyDown(ev) {
3238 switch (getKeyString(ev)) {3259 switch (getKeyString(ev)) {
3239 case "Esc":3260 case "Esc":
3240 if (!domHelpModal.classList.contains("hidden")) {3261 onEscape(ev);
3241 domHelpModal.classList.add("hidden");3262 break;
3263 case "s":
3264 if (domHelpModal.classList.contains("hidden")) {
3265 domSearch.focus();
3266 domSearch.select();
3267 domDocs.scrollTo(0, 0);
3242 ev.preventDefault();3268 ev.preventDefault();
3243 ev.stopPropagation();3269 ev.stopPropagation();
3270 startAsyncSearch();
3244 }3271 }
3245 break;3272 break;
3246 case "s":
3247 domSearch.focus();
3248 domSearch.select();
3249 ev.preventDefault();
3250 ev.stopPropagation();
3251 startAsyncSearch();
3252 break;
3253 case "?":3273 case "?":
3254 ev.preventDefault();3274 ev.preventDefault();
3255 ev.stopPropagation();3275 ev.stopPropagation();
...@@ -3265,6 +3285,7 @@ var zigAnalysis;...@@ -3265,6 +3285,7 @@ var zigAnalysis;
3265 domHelpModal.style.top =3285 domHelpModal.style.top =
3266 window.innerHeight / 2 - domHelpModal.clientHeight / 2 + "px";3286 window.innerHeight / 2 - domHelpModal.clientHeight / 2 + "px";
3267 domHelpModal.focus();3287 domHelpModal.focus();
3288 domSearch.blur();
3268 }3289 }
32693290
3270 function clearAsyncSearch() {3291 function clearAsyncSearch() {
...@@ -3290,7 +3311,7 @@ var zigAnalysis;...@@ -3290,7 +3311,7 @@ var zigAnalysis;
3290 list.sort();3311 list.sort();
3291 return list;3312 return list;
3292 }3313 }
3293 3314
3294 function renderSearch() {3315 function renderSearch() {
3295 let matchedItems = [];3316 let matchedItems = [];
3296 let ignoreCase = curNavSearch.toLowerCase() === curNavSearch;3317 let ignoreCase = curNavSearch.toLowerCase() === curNavSearch;
...@@ -3379,13 +3400,13 @@ var zigAnalysis;...@@ -3379,13 +3400,13 @@ var zigAnalysis;
3379 const text = lastPkgName + "." + match.path.declNames.join(".");3400 const text = lastPkgName + "." + match.path.declNames.join(".");
3380 const href = navLink(match.path.pkgNames, match.path.declNames);3401 const href = navLink(match.path.pkgNames, match.path.declNames);
33813402
3382 matchedItemsHTML += "<li><a href=\""+ href +"\">"+ text + "</a></li>";3403 matchedItemsHTML += "<li><a href=\"" + href + "\">" + text + "</a></li>";
3383 }3404 }
33843405
3385 // Replace the search results using our newly constructed HTML string3406 // Replace the search results using our newly constructed HTML string
3386 domListSearchResults.innerHTML = matchedItemsHTML;3407 domListSearchResults.innerHTML = matchedItemsHTML;
3387 if (searchTrimmed) {3408 if (searchTrimmed) {
3388 domSectSearchAllResultsLink.classList.remove("hidden");3409 domSectSearchAllResultsLink.classList.remove("hidden");
3389 }3410 }
3390 renderSearchCursor();3411 renderSearchCursor();
33913412