diff options
| -rw-r--r-- | src/content/dependencies/generateSearchSidebarBox.js | 14 | ||||
| -rw-r--r-- | src/static/css/site.css | 6 | ||||
| -rw-r--r-- | src/static/js/client.js | 22 | ||||
| -rw-r--r-- | src/strings-default.yaml | 9 |
4 files changed, 46 insertions, 5 deletions
diff --git a/src/content/dependencies/generateSearchSidebarBox.js b/src/content/dependencies/generateSearchSidebarBox.js index 6632a4e8..d4d6b4e0 100644 --- a/src/content/dependencies/generateSearchSidebarBox.js +++ b/src/content/dependencies/generateSearchSidebarBox.js @@ -1,21 +1,27 @@ export default { contentDependencies: ['generatePageSidebarBox'], - extraDependencies: ['html'], + extraDependencies: ['html', 'language'], relations: (relation) => ({ sidebarBox: relation('generatePageSidebarBox'), }), - generate: (relations, {html}) => + generate: (relations, {html, language}) => relations.sidebarBox.slots({ attributes: {class: 'wiki-search-sidebar-box'}, collapsible: false, content: [ html.tag('input', {class: 'wiki-search-input'}, - {placeholder: `Search for anything`}, - {type: 'search'}) + { + placeholder: + language.$('misc.search.placeholder').toString(), + }, + {type: 'search'}), + + html.tag('template', {class: 'wiki-search-no-results-string'}, + language.$('misc.search.noResults')), ], }), }; diff --git a/src/static/css/site.css b/src/static/css/site.css index 4fc2d8a3..17a85170 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -499,6 +499,12 @@ summary .group-name { margin-bottom: 5px; } +.wiki-search-no-results { + font-size: 0.9em; + padding: 2px 3px 4px 6px; + cursor: default; +} + .wiki-search-result { position: relative; display: flex; diff --git a/src/static/js/client.js b/src/static/js/client.js index d8828ad2..1b98137a 100644 --- a/src/static/js/client.js +++ b/src/static/js/client.js @@ -154,6 +154,14 @@ function cssProp(el, ...args) { } } +function templateContent(el) { + if (el?.nodeName !== 'TEMPLATE') { + throw new Error(`Expected a <template> element`); + } + + return el.content.cloneNode(true); +} + // Curry-style, so multiple points can more conveniently be tested at once. function pointIsOverAnyOf(elements) { return (clientX, clientY) => { @@ -3571,6 +3579,8 @@ const sidebarSearchInfo = initInfo('sidebarSearchInfo', { resultsContainer: null, results: null, + noResultsString: null, + state: { stoppedTypingTimeout: null, }, @@ -3591,7 +3601,10 @@ function getSidebarSearchReferences() { document.querySelector('.wiki-search-sidebar-box'); info.searchInput = - document.querySelector('.wiki-search-input'); + info.searchBox.querySelector('.wiki-search-input'); + + info.noResultsString = + info.searchBox.querySelector('.wiki-search-no-results-string'); } function mutateSidebarSearchContent() { @@ -3712,6 +3725,13 @@ function showSidebarSearchResults(results) { cssProp(info.resultsContainer, 'display', 'block'); + if (empty(flatResults)) { + const p = document.createElement('p'); + p.classList.add('wiki-search-no-results'); + p.appendChild(templateContent(info.noResultsString)); + info.results.appendChild(p); + } + for (const result of flatResults) { const el = generateSidebarSearchResult(result); if (!el) continue; diff --git a/src/strings-default.yaml b/src/strings-default.yaml index 7dcbf9c1..ec298749 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -616,6 +616,15 @@ misc: _: "{TITLE}" withWikiName: "{TITLE} | {WIKI_NAME}" + # search: + # Strings to do with the search bar! + + search: + placeholder: "Search for anything" + noResults: >- + No results for this query, sorry! + Check spelling and use complete words. + # skippers: # # These are navigational links that only show up when you're |