Remove preview feature

Author: josevalim

assets/css/_html.css

@@ -34,7 +34,6 @@
 @import "print-cheatsheet.css";
 @import "makeup.css";
 @import "tabset.css";
-@import "preview.css";
 
 body:not(.dark) .content-inner img[src*="#gh-dark-mode-only"],
 body.dark .content-inner img[src*="#gh-light-mode-only"] {

assets/css/autocomplete.css

@@ -19,58 +19,6 @@
   background-color: transparent;
 }
 
-.autocomplete-preview {
-  width: 100%;
-  margin: 0;
-  height: 100%;
-  line-height: 20px;
-  background-color: var(--background);
-  font-family: var(--sansFontFamily);
-  border: 4px solid var(--autocompleteBorder);
-  padding: 12px 16px;
-}
-
-.autocomplete-preview div, .autocomplete-preview span {
-  display: none;
-}
-
-.autocomplete-preview.loading div {
-  float: left;
-  display: block;
-  border: 5px solid var(--autocompleteBorder);
-  border-radius: 50%;
-  border-top: 5px solid var(--textDetailAccent);
-  width: 20px;
-  height: 20px;
-  animation: spinner 4s linear infinite;
-}
-
-.autocomplete-preview.loading span {
-  color: var(--autocompleteResults);
-  display: inline;
-  margin-left: 6px;
-}
-
-.autocomplete-preview.loading span:after {
-  color: var(--autocompleteResults);
-  content: "Loading";
-}
-
-@keyframes spinner {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-.autocomplete-preview.loading iframe {
-  height: 0;
-}
-
-.autocomplete-preview iframe {
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
-
 .autocomplete-results {
   list-style: none;
   margin: 0;
@@ -117,22 +65,6 @@
   scrollbar-width: thin;
 }
 
-.autocomplete-suggestions.previewing:has(.selected) {
-  max-height: 80vh;
-}
-
-.autocomplete-suggestions.previewing:has(.selected) .autocomplete-suggestion:not(.selected) {
-  display: none;
-}
-
-.autocomplete-suggestions.previewing:not(:has(.selected)) .autocomplete-preview {
-  display: none;
-}
-
-.autocomplete-suggestions:not(.previewing) .autocomplete-preview {
-  display: none;
-}
-
 .autocomplete-suggestion {
   color: var(--textHeaders) !important;
   display: block;
@@ -153,49 +85,6 @@
   background-color: var(--autocompleteHover);
 }
 
-.autocomplete-suggestion:not(.selected) .autocomplete-preview-indicator {
-  display: none;
-}
-
-.autocomplete-preview-indicator {
-  float: right;
-}
-
-.autocomplete-preview-indicator button {
-  color: var(--iconAction);
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  border: 1px solid var(--suggestionBorder);
-  border-radius: var(--borderRadius-base);
-  transition: var(--transition-colors);
-  background-color: var(--autocompletePreview);
-  cursor: pointer;
-  padding: 4px 8px;
-  font-size: var(--text-sm);
-}
-
-.autocomplete-preview-indicator button:hover {
-  color: var(--iconActionHover);
-  background-color: var(--autocompleteHover);
-}
-
-.autocomplete-preview-indicator button i {
-  margin-right: 4px;
-}
-
-.autocomplete-suggestions.previewing .autocomplete-preview-indicator-closed {
-  display: none;
-}
-
-.autocomplete-suggestions:not(.previewing) .autocomplete-preview-indicator-open {
-  display: none;
-}
-
-.autocomplete-suggestion:hover:not(.selected) .autocomplete-preview-indicator-closed {
-  display: block;
-}
-
 .autocomplete-suggestion em {
   font-style: normal;
   font-weight: bold;
@@ -231,10 +120,6 @@
 }
 
 @media screen and (hover: none) {
-  .autocomplete-preview-indicator {
-    display: none !important;
-  }
-
   .autocomplete-results .press-return {
     display: none !important;
   }

assets/css/preview.css

@@ -1,6 +1,5 @@
 import { getSuggestions } from './suggestions'
 import { isBlank, qs } from '../helpers'
-import { currentTheme } from '../theme'
 import autocompleteSuggestionsTemplate from '../handlebars/templates/autocomplete-suggestions.handlebars'
 
 export const AUTOCOMPLETE_CONTAINER_SELECTOR = '.autocomplete'
@@ -9,7 +8,6 @@ export const AUTOCOMPLETE_SUGGESTION_SELECTOR = '.autocomplete-suggestion'
 
 const state = {
   autocompleteSuggestions: [],
-  previewOpen: false,
   selectedIdx: -1
 }
 
@@ -84,17 +82,6 @@ export function moveAutocompleteSelection (offset) {
   setAutocompleteSelection(newAutocompleteIndex(offset))
 }
 
-function handlePreviewMessage (event) {
-  if (event.data.type === 'preview') {
-    const { contentHeight } = event.data
-    const previewContainer = qs('.autocomplete-preview')
-    if (previewContainer) {
-      previewContainer.style.height = `${contentHeight + 32}px`
-      previewContainer.classList.remove('loading')
-    }
-  }
-}
-
 export function setAutocompleteSelection (index) {
   state.selectedIdx = index
   const suggestionList = qs(AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR)
@@ -106,77 +93,13 @@ export function setAutocompleteSelection (index) {
   }
 
   if (elementToSelect) {
-    if (state.previewOpen) {
-      removePreview()
-      window.addEventListener('message', handlePreviewMessage)
-      suggestionList.classList.add('previewing')
-      const newContainer = document.createElement('div')
-      newContainer.classList.add('autocomplete-preview')
-      newContainer.classList.add('loading')
-
-      const previewHref = elementToSelect.href.replace('.html', `.html?preview=true&theme=${currentTheme()}`)
-      const iframe = document.createElement('iframe')
-      iframe.setAttribute('src', previewHref)
-
-      newContainer.appendChild(document.createElement('div'))
-      newContainer.appendChild(document.createElement('span'))
-      newContainer.appendChild(iframe)
-      elementToSelect.parentNode.insertBefore(newContainer, elementToSelect.nextSibling)
-    }
-
     elementToSelect.classList.add('selected')
     elementToSelect.scrollIntoView({ block: 'nearest' })
   } else {
     if (suggestionList) { suggestionList.scrollTop = 0 }
   }
 }
 
-/**
- * Toggles the preview state of the autocomplete list
- */
-export function togglePreview () {
-  if (state.previewOpen) {
-    hidePreview()
-  } else {
-    showPreview()
-  }
-}
-
-/**
- * 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') }
-  removePreview()
-}
-
-/**
- * Shows the preview state of the autocomplete list
- */
-export function showPreview (elementToSelect) {
-  state.previewOpen = true
-
-  if (elementToSelect) {
-    elementToSelect = elementToSelect.closest(AUTOCOMPLETE_SUGGESTION_SELECTOR)
-  } else {
-    elementToSelect = qs(`${AUTOCOMPLETE_SUGGESTION_SELECTOR}[data-index="${state.selectedIdx}"]`)
-  }
-
-  if (elementToSelect) {
-    setAutocompleteSelection(parseInt(elementToSelect.dataset.index))
-  }
-}
-
-function removePreview () {
-  const preview = qs('.autocomplete-preview')
-  if (preview) {
-    preview.remove()
-    window.removeEventListener('message', handlePreviewMessage)
-  }
-}
-
 function newAutocompleteIndex (offset) {
   // Include the default first option with index -1
   const length = state.autocompleteSuggestions.length + 1

assets/js/autocomplete/autocomplete-list.js

@@ -1,6 +1,5 @@
-// Load preview & hint-page first because they could remove DOM.
+// Load hint-page first because it could remove DOM.
 // This prevents later modules doing unnecessary work.
-import '../preview'
 import '../tooltips/hint-page'
 // The remaining modules are loaded in order of visible impact.
 import '../theme'

assets/js/entry/html.js

@@ -1,9 +1,8 @@
 const params = new URLSearchParams(window.location.search)
 const isFrame = window.self !== window.parent
 
-export const isPreview = isFrame && params.has('preview')
 export const isHint = isFrame && params.has('hint')
-export const isEmbedded = isPreview || isHint
+export const isEmbedded = isHint
 
 // These variables are set by other scripts (e.g. generated by the docs task).
 

assets/js/globals.js

@@ -6,7 +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">TAB</span> for previews
+        Press <span class="bold">RETURN</span> for full-text search
       </span>
     </div>
     <div>
@@ -22,18 +22,6 @@
           {{#each labels}}
           <span class="label">{{this}}</span>
           {{/each}}
-          <div class="autocomplete-preview-indicator autocomplete-preview-indicator-open">
-            <button onclick="onTogglePreviewClick(event, false)" title="Close preview" tabindex="-1">
-              <i class="ri-close-line" aria-hidden="true"></i>
-              Close preview
-            </button>
-          </div>
-          <div class="autocomplete-preview-indicator autocomplete-preview-indicator-closed">
-            <button onclick="onTogglePreviewClick(event, true)" title="Open preview" tabindex="-1">
-              <i class="ri-search-2-line" aria-hidden="true"></i>
-              Open preview
-            </button>
-          </div>
         </div>
 
         {{#if description}}