elixir-lang · arathunku · Apr 4, 2024
diff --git a/assets/css/icons.css b/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');
@@ -28,6 +34,8 @@
   --icon-search-2-line: "\f0cd";
   --icon-settings-3-line: "\f0e6";
   --icon-printer-line: "\f029";
+  --icon-eye-line: "\ecb5";
+  --icon-eye-line-off: "\ecb7";
 }
 
 .ri-lg { font-size: 1.3333em; line-height: .75em; vertical-align: -.0667em; }
@@ -47,4 +55,6 @@
 .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); }
+.ri-eye-line:before { content: var(--icon-eye-line); }
+.ri-eye-off-line:before { content: var(--icon-eye-line-off); }
diff --git a/assets/fonts/RemixIconCollection.remixicon b/assets/fonts/RemixIconCollection.remixicon
@@ -0,0 +1 @@
+eye-off-line,eye-line,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
diff --git a/assets/fonts/remixicon.woff2 b/assets/fonts/remixicon.woff2
diff --git a/assets/js/autocomplete/autocomplete-list.js b/assets/js/autocomplete/autocomplete-list.js
@@ -88,9 +88,12 @@ export function moveAutocompleteSelection (offset) {
     selectedElement.classList.remove('selected')
   }
 
+  if (state.previewOpen) {
+    showPreview(elementToSelect)
+  }
+
   if (elementToSelect) {
     elementToSelect.classList.add('selected')
-    showPreview(elementToSelect)
 
     elementToSelect.scrollIntoView({ block: 'nearest' })
   } else {
@@ -103,32 +106,37 @@ export function moveAutocompleteSelection (offset) {
  * Toggles the preview state of the autocomplete list
  */
 export function togglePreview () {
-  state.previewOpen = !state.previewOpen
-  const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
   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')
-    const container = previewContainer()
-
-    if (container) {
-      container.remove()
-    };
+    showPreview()
   }
 }
 
-function showPreview (elementToSelect) {
+/**
+ * Hides the preview state of the autocomplete list
+ */
+export function hidePreview () {
+  state.previewOpen = false
+  const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
+  suggestionList.classList.remove('previewing')
   const container = previewContainer()
 
   if (container) {
     container.remove()
   };
+}
 
+/**
+ * Shows the preview state of the autocomplete list
+ */
+export function showPreview (elementToSelect) {
+  hidePreview()
+  state.previewOpen = true
   const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
+  elementToSelect = elementToSelect || qs(`${AUTOCOMPLETE_SUGGESTION_SELECTOR}[data-index="${state.selectedIdx}"]`)
 
-  if (state.previewOpen && elementToSelect) {
+  if (elementToSelect) {
     suggestionList.classList.add('previewing')
     const newContainer = document.createElement('div')
     newContainer.classList.add('autocomplete-preview')
@@ -139,8 +147,6 @@ function showPreview (elementToSelect) {
     iframe.setAttribute('src', previewHref)
     newContainer.replaceChildren(iframe)
     elementToSelect.parentNode.insertBefore(newContainer, elementToSelect.nextSibling)
-  } else {
-    suggestionList.classList.remove('previewing')
   }
 }
 

diff --git a/assets/js/content.js b/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()
 }
 

diff --git a/assets/js/entry/html.js b/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()

diff --git a/assets/js/handlebars/templates/autocomplete-suggestions.handlebars b/assets/js/handlebars/templates/autocomplete-suggestions.handlebars
@@ -22,14 +22,16 @@
           {{#each labels}}
           <span class="label">{{this}}</span>
           {{/each}}
-          <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-open" onclick="togglePreview()">
-            <button type="button">
-              Close Preview
+          <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-open">
+            <button onclick="onTogglePreviewClick(event)" class="icon-settings display-settings" title="Close preveiw" tabindex="-1">
+              <i class="ri-eye-off-line" aria-hidden="true"></i>
+              <span class="sr-only">Close preview</span>
             </button>
           </div>
-          <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-closed" onclick="togglePreview()">
-            <button type="button">
-              Open Preview <span class="ri-arrow-right-s-line"/>
+          <div class="autocomplete-suggestion-preview-indicator autocomplete-suggestion-preview-indicator-closed">
+            <button onclick="onTogglePreviewClick(event)" class="icon-settings display-settings" title="Open preview" tabindex="-1">
+              <i class="ri-eye-line" aria-hidden="true"></i>
+              <span class="sr-only">Open preview</span>
             </button>
           </div>
         </div>

diff --git a/assets/js/search-bar.js b/assets/js/search-bar.js
@@ -4,6 +4,8 @@ import {
   moveAutocompleteSelection,
   selectedAutocompleteSuggestion,
   togglePreview,
+  showPreview,
+  hidePreview,
   updateAutocompleteList,
   AUTOCOMPLETE_CONTAINER_SELECTOR,
   AUTOCOMPLETE_SUGGESTION_SELECTOR
@@ -18,6 +20,17 @@ const SEARCH_CLOSE_BUTTON_SELECTOR = 'form.search-bar .search-close-button'
  */
 export function initialize () {
   addEventListeners()
+
+  window.onTogglePreviewClick = function onTogglePreviewClick (event) {
+    event.preventDefault()
+    event.stopImmediatePropagation()
+
+    // Keep the focus on the input instead of the button when the user clicked to open the preview
+    // Maintains consistent keyboard navigation and look
+    focusSearchInput()
+
+    togglePreview()
+  }
 }
 
 /**
@@ -67,9 +80,15 @@ 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 === 'Tab') {
       togglePreview()
       event.preventDefault()
+    } else if (event.key === 'ArrowRight') {
+      showPreview()
+      event.preventDefault()
+    } else if (event.key === 'ArrowLeft') {
+      hidePreview()
+      event.preventDefault()
     }
   })
 
@@ -78,8 +97,10 @@ function addEventListeners () {
   })
 
   searchInput.addEventListener('focus', event => {
-    document.body.classList.add('search-focused')
-    updateAutocompleteList(event.target.value)
+    if (!document.body.classList.contains('search-focused')) {
+      document.body.classList.add('search-focused')
+      updateAutocompleteList(event.target.value)
+    }
   })
 
   searchInput.addEventListener('blur', event => {
@@ -97,11 +118,11 @@ function addEventListeners () {
           }
         }, 1000)
         return null
+      } else {
+        hideAutocomplete()
       }
-
-      if (relatedTarget.matches(SEARCH_CLOSE_BUTTON_SELECTOR)) {
-        clearSearch()
-      }
+    } else {
+      hideAutocomplete()
     }
   })
 
@@ -114,6 +135,11 @@ function addEventListeners () {
       hideAutocomplete()
     }
   })
+
+  qs(SEARCH_CLOSE_BUTTON_SELECTOR).addEventListener('click', _event => {
+    clearSearch()
+    hideAutocomplete()
+  })
 }
 
 function handleAutocompleteFormSubmission (event) {
@@ -150,6 +176,7 @@ function clearSearch () {
 }
 
 function hideAutocomplete () {
+  hidePreview()
   document.body.classList.remove('search-focused')
   hideAutocompleteList()
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		eye-off-line,eye-line,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