From 45752b412216eb3b13d7c749c6335a22128ad825 Mon Sep 17 00:00:00 2001 From: TJ Date: Thu, 4 Apr 2024 23:13:10 +0900 Subject: [PATCH 1/2] Fix the left and right arrow navigation. The right arrow should expand, and the left arrow should close, whereas currently they both just toggle --- assets/js/autocomplete/autocomplete-list.js | 47 ++++++++++++++-- .../autocomplete-suggestions.handlebars | 13 +++-- assets/js/search-bar.js | 6 +- ...NV.js => handlebars.templates-ARBDFVK5.js} | 28 +++++----- formatters/html/dist/html-EXQMMTQJ.js | 56 +++++++++++++++++++ formatters/html/dist/html-QJRGK6VM.js | 56 ------------------- 6 files changed, 126 insertions(+), 80 deletions(-) rename formatters/html/dist/{handlebars.templates-YQ7HIJNV.js => handlebars.templates-ARBDFVK5.js} (96%) create mode 100644 formatters/html/dist/html-EXQMMTQJ.js delete mode 100644 formatters/html/dist/html-QJRGK6VM.js diff --git a/assets/js/autocomplete/autocomplete-list.js b/assets/js/autocomplete/autocomplete-list.js index 0bd6151ec..d57d3dd72 100644 --- a/assets/js/autocomplete/autocomplete-list.js +++ b/assets/js/autocomplete/autocomplete-list.js @@ -111,11 +111,37 @@ export function togglePreview () { showPreview(elementToSelect) } else { suggestionList.classList.remove('previewing') - const container = previewContainer() + } +} - if (container) { - container.remove() - }; +function expandPreview () { + state.previewOpen = true + const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR) + if (suggestionList) { + suggestionList.classList.add('previewing') + } +} + +function closePreview () { + state.previewOpen = false + const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR) + if (suggestionList) { + suggestionList.classList.remove('previewing') + } +} + +export function removePreview () { + state.previewOpen = false + const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR) + + if (suggestionList) { + suggestionList.classList.remove('previewing') + } + + const container = previewContainer() + + if (container) { + container.remove() } } @@ -138,6 +164,19 @@ function showPreview (elementToSelect) { iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups') iframe.setAttribute('src', previewHref) newContainer.replaceChildren(iframe) + iframe.onload = () => { + if (iframe.contentDocument) { + iframe.contentDocument.addEventListener('keydown', event => { + if (event.key === 'ArrowLeft') { + closePreview() + event.preventDefault() + } else if (event.key === 'ArrowRight') { + expandPreview() + event.preventDefault() + } + }) + } + } elementToSelect.parentNode.insertBefore(newContainer, elementToSelect.nextSibling) } else { suggestionList.classList.remove('previewing') diff --git a/assets/js/handlebars/templates/autocomplete-suggestions.handlebars b/assets/js/handlebars/templates/autocomplete-suggestions.handlebars index 1a90869da..21624e031 100644 --- a/assets/js/handlebars/templates/autocomplete-suggestions.handlebars +++ b/assets/js/handlebars/templates/autocomplete-suggestions.handlebars @@ -6,7 +6,8 @@ Autocompletion results for "{{term}}" - Press RETURN for full-text search, TAB for previews + Press RETURN for full-text search, → for expand previews, + ← for close previews
@@ -22,14 +23,16 @@ {{#each labels}} {{this}} {{/each}} -
+
-
+
@@ -43,4 +46,4 @@ {{/each}}
- + \ No newline at end of file diff --git a/assets/js/search-bar.js b/assets/js/search-bar.js index 83293f0d4..3f2ef38f0 100644 --- a/assets/js/search-bar.js +++ b/assets/js/search-bar.js @@ -6,7 +6,8 @@ import { togglePreview, updateAutocompleteList, AUTOCOMPLETE_CONTAINER_SELECTOR, - AUTOCOMPLETE_SUGGESTION_SELECTOR + AUTOCOMPLETE_SUGGESTION_SELECTOR, + removePreview } from './autocomplete/autocomplete-list' import { isMacOS, qs } from './helpers' @@ -67,7 +68,7 @@ function addEventListeners () { } else if (event.key === 'ArrowDown' || (macOS && event.ctrlKey && event.key === 'n')) { moveAutocompleteSelection(1) event.preventDefault() - } else if (event.key === 'ArrowRight' || event.key === 'ArrowLeft') { + } else if (event.key === 'ArrowRight') { togglePreview() event.preventDefault() } @@ -79,6 +80,7 @@ function addEventListeners () { searchInput.addEventListener('focus', event => { document.body.classList.add('search-focused') + removePreview() updateAutocompleteList(event.target.value) }) diff --git a/formatters/html/dist/handlebars.templates-YQ7HIJNV.js b/formatters/html/dist/handlebars.templates-ARBDFVK5.js similarity index 96% rename from formatters/html/dist/handlebars.templates-YQ7HIJNV.js rename to formatters/html/dist/handlebars.templates-ARBDFVK5.js index df6a4eb9f..6f66403f2 100644 --- a/formatters/html/dist/handlebars.templates-YQ7HIJNV.js +++ b/formatters/html/dist/handlebars.templates-ARBDFVK5.js @@ -1,24 +1,26 @@ -(()=>{(function(){var d=Handlebars.template,y=Handlebars.templates=Handlebars.templates||{};y["autocomplete-suggestions"]=d({1:function(e,l,a,p,r){var o,n,u=l??(e.nullContext||{}),s=e.hooks.helperMissing,i="function",c=e.escapeExpression,t=e.lookupProperty||function(f,m){if(Object.prototype.hasOwnProperty.call(f,m))return f[m]};return' +(()=>{(function(){var d=Handlebars.template,y=Handlebars.templates=Handlebars.templates||{};y["autocomplete-suggestions"]=d({1:function(e,l,a,p,r){var o,n,u=l??(e.nullContext||{}),s=e.hooks.helperMissing,i="function",c=e.escapeExpression,t=e.lookupProperty||function(f,m){if(Object.prototype.hasOwnProperty.call(f,m))return f[m]};return'
-`+((o=t(a,"if").call(u,l!=null?t(l,"deprecated"):l,{name:"if",hash:{},fn:e.program(2,r,0),inverse:e.program(4,r,0),data:r,loc:{start:{line:16,column:10},end:{line:20,column:17}}}))!=null?o:"")+` -`+((o=t(a,"each").call(u,l!=null?t(l,"labels"):l,{name:"each",hash:{},fn:e.program(6,r,0),inverse:e.noop,data:r,loc:{start:{line:22,column:10},end:{line:24,column:19}}}))!=null?o:"")+`
+`+((o=t(a,"if").call(u,l!=null?t(l,"deprecated"):l,{name:"if",hash:{},fn:e.program(2,r,0),inverse:e.program(4,r,0),data:r,loc:{start:{line:17,column:10},end:{line:21,column:17}}}))!=null?o:"")+` +`+((o=t(a,"each").call(u,l!=null?t(l,"labels"):l,{name:"each",hash:{},fn:e.program(6,r,0),inverse:e.noop,data:r,loc:{start:{line:23,column:10},end:{line:25,column:19}}}))!=null?o:"")+`
-
+
-`+((o=t(a,"if").call(u,l!=null?t(l,"description"):l,{name:"if",hash:{},fn:e.program(8,r,0),inverse:e.noop,data:r,loc:{start:{line:37,column:8},end:{line:41,column:15}}}))!=null?o:"")+` -`},2:function(e,l,a,p,r){var o,n,u=e.lookupProperty||function(s,i){if(Object.prototype.hasOwnProperty.call(s,i))return s[i]};return' '+((o=(n=(n=u(a,"title")||(l!=null?u(l,"title"):l))!=null?n:e.hooks.helperMissing,typeof n=="function"?n.call(l??(e.nullContext||{}),{name:"title",hash:{},data:r,loc:{start:{line:17,column:49},end:{line:17,column:60}}}):n))!=null?o:"")+` -`},4:function(e,l,a,p,r){var o,n,u=e.lookupProperty||function(s,i){if(Object.prototype.hasOwnProperty.call(s,i))return s[i]};return' '+((o=(n=(n=u(a,"title")||(l!=null?u(l,"title"):l))!=null?n:e.hooks.helperMissing,typeof n=="function"?n.call(l??(e.nullContext||{}),{name:"title",hash:{},data:r,loc:{start:{line:19,column:46},end:{line:19,column:57}}}):n))!=null?o:"")+` +`+((o=t(a,"if").call(u,l!=null?t(l,"description"):l,{name:"if",hash:{},fn:e.program(8,r,0),inverse:e.noop,data:r,loc:{start:{line:40,column:8},end:{line:44,column:15}}}))!=null?o:"")+` +`},2:function(e,l,a,p,r){var o,n,u=e.lookupProperty||function(s,i){if(Object.prototype.hasOwnProperty.call(s,i))return s[i]};return' '+((o=(n=(n=u(a,"title")||(l!=null?u(l,"title"):l))!=null?n:e.hooks.helperMissing,typeof n=="function"?n.call(l??(e.nullContext||{}),{name:"title",hash:{},data:r,loc:{start:{line:18,column:49},end:{line:18,column:60}}}):n))!=null?o:"")+` +`},4:function(e,l,a,p,r){var o,n,u=e.lookupProperty||function(s,i){if(Object.prototype.hasOwnProperty.call(s,i))return s[i]};return' '+((o=(n=(n=u(a,"title")||(l!=null?u(l,"title"):l))!=null?n:e.hooks.helperMissing,typeof n=="function"?n.call(l??(e.nullContext||{}),{name:"title",hash:{},data:r,loc:{start:{line:20,column:46},end:{line:20,column:57}}}):n))!=null?o:"")+` `},6:function(e,l,a,p,r){return' '+e.escapeExpression(e.lambda(l,l))+` `},8:function(e,l,a,p,r){var o,n,u=e.lookupProperty||function(s,i){if(Object.prototype.hasOwnProperty.call(s,i))return s[i]};return`
- `+((o=(n=(n=u(a,"description")||(l!=null?u(l,"description"):l))!=null?n:e.hooks.helperMissing,typeof n=="function"?n.call(l??(e.nullContext||{}),{name:"description",hash:{},data:r,loc:{start:{line:39,column:10},end:{line:39,column:27}}}):n))!=null?o:"")+` + `+((o=(n=(n=u(a,"description")||(l!=null?u(l,"description"):l))!=null?n:e.hooks.helperMissing,typeof n=="function"?n.call(l??(e.nullContext||{}),{name:"description",hash:{},data:r,loc:{start:{line:42,column:10},end:{line:42,column:27}}}):n))!=null?o:"")+`
`},compiler:[8,">= 4.3.0"],main:function(e,l,a,p,r){var o,n,u=l??(e.nullContext||{}),s=e.lookupProperty||function(i,c){if(Object.prototype.hasOwnProperty.call(i,c))return i[c]};return`
@@ -28,14 +30,14 @@ Autocompletion results for "`+e.escapeExpression((n=(n=s(a,"term")||(l!=null?s(l,"term"):l))!=null?n:e.hooks.helperMissing,typeof n=="function"?n.call(u,{name:"term",hash:{},data:r,loc:{start:{line:6,column:55},end:{line:6,column:63}}}):n))+`" - Press RETURN for full-text search, TAB for previews + Press RETURN for full-text search, \u2192 for expand previews, + \u2190 for close previews
-`+((o=s(a,"each").call(u,l!=null?s(l,"suggestions"):l,{name:"each",hash:{},fn:e.program(1,r,0),inverse:e.noop,data:r,loc:{start:{line:13,column:6},end:{line:43,column:15}}}))!=null?o:"")+`
+`+((o=s(a,"each").call(u,l!=null?s(l,"suggestions"):l,{name:"each",hash:{},fn:e.program(1,r,0),inverse:e.noop,data:r,loc:{start:{line:14,column:6},end:{line:46,column:15}}}))!=null?o:"")+`
- -`},useData:!0}),y["modal-layout"]=d({compiler:[8,">= 4.3.0"],main:function(e,l,a,p,r){return``},useData:!0}),y["modal-layout"]=d({compiler:[8,">= 4.3.0"],main:function(e,l,a,p,r){return`