Autocomplete preview: handle tab and arrow keys, fix lost focus on iframe load

Author: arathunku

assets/css/autocomplete.css

@@ -82,7 +82,7 @@
   display: none;
 }
 
-.autocomplete-suggestions.previewing:has(.selected) .autocomplete-preview+.autocomplete-suggestion {
+.autocomplete-suggestions.previewing:has(.selected) .autocomplete-preview + .autocomplete-suggestion {
   display: block;
 }
 
@@ -125,6 +125,10 @@
   display: none;
 }
 
+.autocomplete-suggestion:hover .autocomplete-suggestion-preview-indicator {
+  display: block;
+}
+
 .autocomplete-suggestion-preview-indicator {
   float: right;
   border-radius: 100%;

assets/css/icons.css

@@ -1,3 +1,9 @@
+/*
+* Only used icons are included in the font
+* Icons can be generated at https://remixicon.com/
+* In assets/fonts/RemixIconCollection.remixicon there's easy to import on website list of icons
+*/
+
 @font-face {
   font-family: 'remixicon';
   src: url('../fonts/remixicon.woff2') format('woff2');
@@ -15,7 +21,6 @@
   --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";
@@ -39,7 +44,6 @@
 .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); }
@@ -49,4 +53,4 @@
 .ri-information-line:before { content: var(--icon-information); }
 .ri-alert-line:before { content: var(--icon-alert); }
 .ri-double-quotes-l:before { content: var(--icon-double-quotes-l); }
-.ri-printer-line:before { content: var(--icon-printer-line); }
+.ri-printer-line:before { content: var(--icon-printer-line); }

assets/fonts/RemixIconCollection.remixicon

@@ -0,0 +1 @@
+settings-3-line,add-line,subtract-line,arrow-up-s-line,arrow-down-s-line,arrow-right-s-line,search-2-line,menu-line,close-line,link-m,code-s-slash-line,error-warning-line,information-line,alert-line,double-quotes-l,printer-line

assets/js/autocomplete/autocomplete-list.js

@@ -1,5 +1,5 @@
 import { getSuggestions } from './suggestions'
-import { isBlank, qs, qsAll } from '../helpers'
+import { isBlank, qs } from '../helpers'
 
 export const AUTOCOMPLETE_CONTAINER_SELECTOR = '.autocomplete'
 export const AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR = '.autocomplete-suggestions'
@@ -16,15 +16,6 @@ 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()
-    })
-  })
 }
 
 /**
@@ -88,8 +79,12 @@ export function selectedAutocompleteSuggestion () {
  * @param {Number} offset How much to move down (or up) the list.
  */
 export function moveAutocompleteSelection (offset) {
-  state.selectedIdx = newAutocompleteIndex(offset)
+  setAutocompleteSelection(newAutocompleteIndex(offset))
+}
 
+export function setAutocompleteSelection (index) {
+  state.selectedIdx = index
+  const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
   const selectedElement = qs(`${AUTOCOMPLETE_SUGGESTION_SELECTOR}.selected`)
   const elementToSelect = qs(`${AUTOCOMPLETE_SUGGESTION_SELECTOR}[data-index="${state.selectedIdx}"]`)
 
@@ -98,102 +93,69 @@ export function moveAutocompleteSelection (offset) {
   }
 
   if (elementToSelect) {
-    elementToSelect.classList.add('selected')
-    showPreview(elementToSelect)
+    if (state.previewOpen) {
+      removePreview()
+      suggestionList.classList.add('previewing')
+      const newContainer = document.createElement('div')
+      newContainer.classList.add('autocomplete-preview')
+      const iframe = document.createElement('iframe')
+      const previewHref = elementToSelect.href.replace('.html', '.html?preview=true')
+      // The minimum permissions necessary for the iframe to run JavaScript and communicate with the parent window.
+      iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-popups')
+      iframe.setAttribute('src', previewHref)
+      newContainer.replaceChildren(iframe)
+      elementToSelect.parentNode.insertBefore(newContainer, elementToSelect.nextSibling)
+    }
 
+    elementToSelect.classList.add('selected')
     elementToSelect.scrollIntoView({ block: 'nearest' })
   } else {
-    const list = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
-    if (list) { list.scrollTop = 0 }
+    if (suggestionList) { suggestionList.scrollTop = 0 }
   }
 }
 
 /**
  * Toggles the preview state of the autocomplete list
  */
-export function togglePreview () {
-  state.previewOpen = !state.previewOpen
-  const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
+export function togglePreview (elementToSelect) {
   if (state.previewOpen) {
-    suggestionList.classList.add('previewing')
-    const elementToSelect = qs(`${AUTOCOMPLETE_SUGGESTION_SELECTOR}[data-index="${state.selectedIdx}"]`)
-    showPreview(elementToSelect)
+    hidePreview()
   } else {
-    suggestionList.classList.remove('previewing')
-  }
-}
-
-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')
+    showPreview(elementToSelect)
   }
 }
 
-export function removePreview () {
+/**
+ * Hides the preview state of the autocomplete list
+ */
+export function hidePreview () {
   state.previewOpen = false
   const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
-
-  if (suggestionList) {
-    suggestionList.classList.remove('previewing')
-  }
-
-  const container = previewContainer()
-
-  if (container) {
-    container.remove()
-  }
+  suggestionList.classList.remove('previewing')
+  removePreview()
 }
 
+/**
+ * Shows the preview state of the autocomplete list
+ */
 function showPreview (elementToSelect) {
-  const container = previewContainer()
-
-  if (container) {
-    container.remove()
-  };
-
+  state.previewOpen = true
   const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
 
-  if (state.previewOpen && elementToSelect) {
-    suggestionList.classList.add('previewing')
-    const newContainer = document.createElement('div')
-    newContainer.classList.add('autocomplete-preview')
-    const iframe = document.createElement('iframe')
-    const previewHref = elementToSelect.href.replace('.html', '.html?preview=true')
-    // The minimum permissions necessary for the iframe to run JavaScript and communicate with the parent window.
-    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)
+  if(elementToSelect) {
+    elementToSelect = elementToSelect.closest(AUTOCOMPLETE_SUGGESTION_SELECTOR)
   } else {
-    suggestionList.classList.remove('previewing')
+    elementToSelect = qs(`${AUTOCOMPLETE_SUGGESTION_SELECTOR}[data-index="${state.selectedIdx}"]`)
+  }
+
+  if (elementToSelect) {
+    setAutocompleteSelection(parseInt(elementToSelect.dataset.index))
   }
 }
 
-function previewContainer () {
-  return qs('.autocomplete-preview')
+function removePreview () {
+  let preview = qs('.autocomplete-preview')
+  if(preview) { preview.remove() }
 }
 
 function newAutocompleteIndex (offset) {

assets/js/content.js

@@ -8,10 +8,14 @@ const LIVEBOOK_BADGE_ANCHOR_SELECTOR = '.livebook-badge'
 /**
  * Runs some general modifiers on the documentation content.
  */
-export function initialize () {
-  fixLinks()
-  fixSpacebar()
+export function initialize (isPreview) {
+  // Disabled on autocomplete preview because it moves the focus to inner iframe
+  if (!isPreview) {
+    fixSpacebar()
+  }
+
   setLivebookBadgeUrl()
+  fixLinks()
   fixBlockquotes()
 }
 

assets/js/entry/html.js

@@ -23,17 +23,18 @@ import { initialize as initPreview} from '../preview'
 
 onDocumentReady(() => {
   const params = new URLSearchParams(window.location.search)
+  const isPreview = params.has('preview')
 
   initTheme()
-  initContent()
+  initContent(isPreview)
   initMakeup()
   initTooltips()
   initHintsPage()
   initCopyButton()
   initOs()
   initTabsets()
 
-  if (params.has('preview')) {
+  if (isPreview) {
     initPreview()
   } else {
     initVersions()

assets/js/handlebars/templates/autocomplete-suggestions.handlebars

@@ -6,8 +6,7 @@
         Autocompletion results for <span class="bold">"{{term}}"</span>
       </span>
       <span class="press-return">
-        Press <span class="bold">RETURN</span> for full-text search, <span class="bold">→</span> for expand previews,
-        <span class="bold">←</span> for close previews
+        Press <span class="bold">RETURN</span> for full-text search, <span class="bold">TAB</span> for previews
       </span>
     </div>
     <div>
@@ -24,13 +23,15 @@
           <span class="label">{{this}}</span>
           {{/each}}
           <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-open">
-            <button type="button">
-              <span class="ri-arrow-left-s-line" /> Close Preview
+            <button onclick="onTogglePreviewClick(event)" class="icon-settings display-settings" title="Close preveiw" tabindex="-1">
+              <i class="ri-close-line" aria-hidden="true"></i>
+              Close preview
             </button>
           </div>
           <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-closed">
-            <button type="button">
-              Open Preview <span class="ri-arrow-right-s-line" />
+            <button onclick="onTogglePreviewClick(event)" class="icon-settings display-settings" title="Open preview" tabindex="-1">
+              <i class="ri-search-2-line" aria-hidden="true"></i>
+              Open preview
             </button>
           </div>
         </div>
@@ -44,4 +45,4 @@
       {{/each}}
     </div>
   </div>
-</div>
+</div>

assets/js/preview.js

@@ -17,7 +17,6 @@ function preview (previewing) {
 function makeLinksOpenInParent () {
   const links = document.getElementsByTagName('a')
   for (const element of links) {
-    console.log(element)
     if (element.getAttribute('target') !== '_blank') {
       element.setAttribute('target', '_parent')
     }