diff --git a/assets/css/icons.css b/assets/css/icons.css index 77fba8d23..c23037f08 100644 --- a/assets/css/icons.css +++ b/assets/css/icons.css @@ -15,6 +15,7 @@ --icon-arrow-up-s: "\ea78"; --icon-arrow-down-s: "\ea4e"; --icon-arrow-right-s: "\ea6e"; + --icon-arrow-left-s: "\ea64"; --icon-add: "\ea13"; --icon-subtract: "\f1af"; --icon-error-warning: "\eca1"; @@ -38,6 +39,7 @@ .ri-arrow-up-s-line:before { content: var(--icon-arrow-up-s); } .ri-arrow-down-s-line:before { content: var(--icon-arrow-down-s); } .ri-arrow-right-s-line:before { content: var(--icon-arrow-right-s); } +.ri-arrow-left-s-line:before { content: var(--icon-arrow-left-s); } .ri-search-2-line:before { content: var(--icon-search-2-line); } .ri-menu-line:before { content: var(--icon-menu-line); } .ri-close-line:before { content: var(--icon-close-line); } diff --git a/assets/js/autocomplete/autocomplete-list.js b/assets/js/autocomplete/autocomplete-list.js index 0bd6151ec..c0f313577 100644 --- a/assets/js/autocomplete/autocomplete-list.js +++ b/assets/js/autocomplete/autocomplete-list.js @@ -1,5 +1,5 @@ import { getSuggestions } from './suggestions' -import { isBlank, qs } from '../helpers' +import { isBlank, qs, qsAll } from '../helpers' export const AUTOCOMPLETE_CONTAINER_SELECTOR = '.autocomplete' export const AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR = '.autocomplete-suggestions' @@ -16,6 +16,15 @@ const state = { */ export function showAutocompleteList () { qs(AUTOCOMPLETE_CONTAINER_SELECTOR).classList.add('shown') + + const buttons = qsAll('.autocomplete-suggestion-preview-indicator') + buttons.forEach(button => { + button.addEventListener('click', event => { + event.preventDefault() + event.stopPropagation() + togglePreview() + }) + }) } /** @@ -111,11 +120,37 @@ export function togglePreview () { showPreview(elementToSelect) } else { suggestionList.classList.remove('previewing') - const container = previewContainer() + } +} + +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 (container) { - container.remove() - }; + if (suggestionList) { + suggestionList.classList.remove('previewing') + } + + const container = previewContainer() + + if (container) { + container.remove() } } @@ -138,6 +173,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..ccc2b6f81 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,14 @@ {{#each labels}} {{this}} {{/each}} -
+
-
+
@@ -43,4 +44,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-E5CDYZX3.js similarity index 58% rename from formatters/html/dist/handlebars.templates-YQ7HIJNV.js rename to formatters/html/dist/handlebars.templates-E5CDYZX3.js index df6a4eb9f..411eb4d3f 100644 --- a/formatters/html/dist/handlebars.templates-YQ7HIJNV.js +++ b/formatters/html/dist/handlebars.templates-E5CDYZX3.js @@ -1,41 +1,41 @@ -(()=>{(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,s=l??(e.nullContext||{}),u=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(s,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(s,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(s,l!=null?t(l,"description"):l,{name:"if",hash:{},fn:e.program(8,r,0),inverse:e.noop,data:r,loc:{start:{line:38,column:8},end:{line:42,column:15}}}))!=null?o:"")+` +`},2:function(e,l,a,p,r){var o,n,s=e.lookupProperty||function(u,i){if(Object.prototype.hasOwnProperty.call(u,i))return u[i]};return' '+((o=(n=(n=s(a,"title")||(l!=null?s(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,s=e.lookupProperty||function(u,i){if(Object.prototype.hasOwnProperty.call(u,i))return u[i]};return' '+((o=(n=(n=s(a,"title")||(l!=null?s(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:"")+` +`},8:function(e,l,a,p,r){var o,n,s=e.lookupProperty||function(u,i){if(Object.prototype.hasOwnProperty.call(u,i))return u[i]};return`
+ `+((o=(n=(n=s(a,"description")||(l!=null?s(l,"description"):l))!=null?n:e.hooks.helperMissing,typeof n=="function"?n.call(l??(e.nullContext||{}),{name:"description",hash:{},data:r,loc:{start:{line:40,column:10},end:{line:40,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`
+`},compiler:[8,">= 4.3.0"],main:function(e,l,a,p,r){var o,n,s=l??(e.nullContext||{}),u=e.lookupProperty||function(i,c){if(Object.prototype.hasOwnProperty.call(i,c))return i[c]};return`
- 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))+`" + Autocompletion results for "`+e.escapeExpression((n=(n=u(a,"term")||(l!=null?u(l,"term"):l))!=null?n:e.hooks.helperMissing,typeof n=="function"?n.call(s,{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=u(a,"each").call(s,l!=null?u(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:44,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`