improvement: Allow the search type to be selected in the UI.

Author: jimsynz

assets/css/search-bar.css

@@ -30,7 +30,7 @@
   color: var(--searchAccentMain);
   position: relative;
   height: 46px;
-  padding: 8px 35px 8px 43px;
+  padding: 8px 135px 8px 43px;
   width: 100%;
   transition: var(--transition-all);
 }
@@ -80,7 +80,8 @@
   background-color: transparent;
   border: none;
   cursor: pointer;
-  right: 11px;
+  /* FIXME: I know this is wrong. Not sure what to do though */
+  right: 100px;
   margin: 0;
   opacity: 0.5;
   padding: 5px 1px 5px 0;
@@ -95,6 +96,31 @@
   opacity: 0.7;
 }
 
+.top-search .search-bar .search-type {
+  background-color: transparent;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-left: 1px solid var(--searchBarBorder);
+  border-top-right-radius: var(--borderRadius-base);
+  border-bottom-right-radius: var(--borderRadius-base);
+  color: var(--searchAccentMain);
+  position: absolute;
+  top: calc(50% - 23px);
+  right: 0;
+  height: 46px;
+  padding: 8px 8px 8px 16px;
+  transition: var(--transition-all);
+  z-index: 99;
+}
+
+.top-search .search-bar .search-type:focus {
+  border: 1px solid var(--searchBarFocusColor);
+  border-top-right-radius: calc(var(--borderRadius-base) - 1px);
+  border-bottom-right-radius: calc(var(--borderRadius-base) - 1px);
+  box-shadow: 0px 4px 20px 0px var(--searchBarBorderColor) inset;
+}
+
 .top-search .search-settings button.icon-settings {
   display: flex;
   align-items: center;

assets/js/search-bar.js

@@ -10,7 +10,7 @@ import {
   AUTOCOMPLETE_CONTAINER_SELECTOR,
   AUTOCOMPLETE_SUGGESTION_LIST_SELECTOR
 } from './autocomplete/autocomplete-list'
-import { isEmbedded } from './globals'
+import { isEmbedded, getSearchNodes, getVersionNodes } from './globals'
 import { isAppleOS, qs } from './helpers'
 
 const SEARCH_INPUT_SELECTOR = 'form.search-bar input'
@@ -37,6 +37,12 @@ function initialize () {
     focusSearchInput()
     if (open) { showPreview(event.target) } else { hidePreview() }
   }
+
+  if (window.navigator.onLine) {
+    enableRemoteSearch(null)
+  } else {
+    disableRemoteSearch(null)
+  }
 }
 
 /**
@@ -137,6 +143,66 @@ function addEventListeners () {
     clearSearch()
     hideAutocomplete()
   })
+
+  window.addEventListener('online', enableRemoteSearch)
+  window.addEventListener('offline', disableRemoteSearch)
+}
+
+function enableRemoteSearch (_event) {
+  Array.from(document.getElementsByClassName('online-only')).forEach(element => {
+    element.removeAttribute('disabled')
+    element.removeAttribute('title')
+    updateSearchTypeOptions(element)
+  })
+}
+
+function disableRemoteSearch (_event) {
+  Array.from(document.getElementsByClassName('online-only')).forEach(element => {
+    element.setAttribute('disabled', '')
+    element.setAttribute('title', 'Local searching only - browser is offline')
+    updateSearchTypeOptions(element)
+  })
+}
+
+function updateSearchTypeOptions (element) {
+  Array.from(element.getElementsByTagName('option')).forEach(option => {
+    if (option.value === 'related') {
+      if (shouldEnableRelatedSearch()) {
+        option.removeAttribute('disabled')
+        option.removeAttribute('title')
+      } else {
+        option.setAttribute('disabled', '')
+        option.setAttribute('title', 'No known related packages to search')
+      }
+    }
+    if (option.value === 'latest') {
+      if (shouldEnableLatestSearch()) {
+        option.removeAttribute('disabled')
+        option.removeAttribute('title')
+      } else {
+        option.setAttribute('disabled', '')
+        option.setAttribute('title', 'Already browsing latest version')
+      }
+    }
+  })
+}
+
+function shouldEnableRelatedSearch () {
+  return getSearchNodes().length > 1
+}
+
+function shouldEnableLatestSearch () {
+  const versionNodes = getVersionNodes()
+
+  if (versionNodes.length > 0) {
+    const latest = versionNodes[0]
+    const searchNodes = getSearchNodes()
+    const match = searchNodes.some(node => `v${node.version}` === latest.version)
+
+    return !match
+  }
+
+  return false
 }
 
 function handleAutocompleteFormSubmission (event) {
@@ -155,8 +221,18 @@ function handleAutocompleteFormSubmission (event) {
     anchor.setAttribute('href', autocompleteSuggestion.link)
   } else {
     const meta = document.querySelector('meta[name="exdoc:full-text-search-url"]')
-    const url = meta ? meta.getAttribute('content') : 'search.html?q='
-    anchor.setAttribute('href', `${url}${encodeURIComponent(searchInput.value)}`)
+    const url = meta ? meta.getAttribute('content') : 'search.html'
+
+    const params = new URLSearchParams()
+    params.set('q', searchInput.value)
+
+    const searchType = getSearchType()
+
+    if (searchType !== 'local') {
+      params.set('type', searchType)
+    }
+
+    anchor.setAttribute('href', `${url}?${params.toString()}`)
   }
 
   anchor.click()
@@ -167,6 +243,16 @@ function handleAutocompleteFormSubmission (event) {
   }
 }
 
+function getSearchType () {
+  const searchTypes = Array.from(document.getElementsByClassName('search-type'))
+
+  if (searchTypes.length > 0) {
+    return searchTypes[0].value
+  }
+
+  return 'local'
+}
+
 function clearSearch () {
   const input = qs(SEARCH_INPUT_SELECTOR)
   input.value = ''

assets/js/search-page.js

@@ -24,7 +24,7 @@ lunr.Pipeline.registerFunction(docTrimmerFunction, 'docTrimmer')
 
 window.addEventListener('exdoc:loaded', initialize)
 
-function initialize() {
+function initialize () {
   const pathname = window.location.pathname
   if (pathname.endsWith('/search.html') || pathname.endsWith('/search')) {
     const query = getQueryParamByName('q')
@@ -33,7 +33,7 @@ function initialize() {
   }
 }
 
-async function search(value, queryType) {
+async function search (value, queryType) {
   if (isBlank(value)) {
     renderResults({ value })
   } else {
@@ -44,6 +44,8 @@ async function search(value, queryType) {
       const searchNodes = getSearchNodes()
 
       if (['related', 'latest'].includes(queryType) && searchNodes.length > 0) {
+        setSearchType(queryType)
+
         results = await remoteSearch(value, queryType, searchNodes)
       } else {
         results = await localSearch(value)
@@ -56,7 +58,7 @@ async function search(value, queryType) {
   }
 }
 
-async function localSearch(value) {
+async function localSearch (value) {
   const index = await getIndex()
 
   // We cannot match on atoms :foo because that would be considered
@@ -65,7 +67,7 @@ async function localSearch(value) {
   return searchResultsToDecoratedSearchItems(index.search(fixedValue))
 }
 
-async function remoteSearch(value, queryType, searchNodes) {
+async function remoteSearch (value, queryType, searchNodes) {
   let filterNodes = searchNodes
 
   if (queryType === 'latest') {
@@ -107,13 +109,21 @@ async function remoteSearch(value, queryType, searchNodes) {
   }
 }
 
-function renderResults({ value, results, errorMessage }) {
+function setSearchType (value) {
+  const searchTypes = Array.from(document.getElementsByClassName('search-type'))
+
+  searchTypes.forEach(element => {
+    element.value = value
+  })
+}
+
+function renderResults ({ value, results, errorMessage }) {
   const searchContainer = qs(SEARCH_CONTAINER_SELECTOR)
   const resultsHtml = searchResultsTemplate({ value, results, errorMessage })
   searchContainer.innerHTML = resultsHtml
 }
 
-async function getIndex() {
+async function getIndex () {
   const cachedIndex = await loadIndex()
   if (cachedIndex) { return cachedIndex }
 
@@ -122,7 +132,7 @@ async function getIndex() {
   return index
 }
 
-async function loadIndex() {
+async function loadIndex () {
   try {
     const serializedIndex = sessionStorage.getItem(indexStorageKey())
     if (serializedIndex) {
@@ -137,7 +147,7 @@ async function loadIndex() {
   }
 }
 
-async function saveIndex(index) {
+async function saveIndex (index) {
   try {
     const serializedIndex = await compress(index)
     sessionStorage.setItem(indexStorageKey(), serializedIndex)
@@ -146,7 +156,7 @@ async function saveIndex(index) {
   }
 }
 
-async function compress(index) {
+async function compress (index) {
   const stream = new Blob([JSON.stringify(index)], {
     type: 'application/json'
   }).stream().pipeThrough(new window.CompressionStream('gzip'))
@@ -156,7 +166,7 @@ async function compress(index) {
   return b64encode(buffer)
 }
 
-async function decompress(index) {
+async function decompress (index) {
   const stream = new Blob([b64decode(index)], {
     type: 'application/json'
   }).stream().pipeThrough(new window.DecompressionStream('gzip'))
@@ -165,7 +175,7 @@ async function decompress(index) {
   return JSON.parse(blob)
 }
 
-function b64encode(buffer) {
+function b64encode (buffer) {
   let binary = ''
   const bytes = new Uint8Array(buffer)
   const len = bytes.byteLength
@@ -175,7 +185,7 @@ function b64encode(buffer) {
   return window.btoa(binary)
 }
 
-function b64decode(str) {
+function b64decode (str) {
   const binaryString = window.atob(str)
   const len = binaryString.length
   const bytes = new Uint8Array(new ArrayBuffer(len))
@@ -185,11 +195,11 @@ function b64decode(str) {
   return bytes
 }
 
-function indexStorageKey() {
+function indexStorageKey () {
   return `idv5:${getProjectNameAndVersion()}`
 }
 
-function createIndex() {
+function createIndex () {
   return lunr(function () {
     this.ref('ref')
     this.field('title', { boost: 3 })
@@ -207,11 +217,11 @@ function createIndex() {
   })
 }
 
-function docTokenSplitter(builder) {
+function docTokenSplitter (builder) {
   builder.pipeline.before(lunr.stemmer, docTokenFunction)
 }
 
-function docTokenFunction(token) {
+function docTokenFunction (token) {
   // If we have something with an arity, we split on : . to make partial
   // matches easier. We split only when tokenizing, not when searching.
   // Below we use ExDoc.Markdown.to_ast/2 as an example.
@@ -275,11 +285,11 @@ function docTokenFunction(token) {
   return tokens
 }
 
-function docTrimmer(builder) {
+function docTrimmer (builder) {
   builder.pipeline.before(lunr.stemmer, docTrimmerFunction)
 }
 
-function docTrimmerFunction(token) {
+function docTrimmerFunction (token) {
   // Preserve @ and : at the beginning of tokens,
   // and ? and ! at the end of tokens. It needs to
   // be done before stemming, otherwise search and
@@ -289,7 +299,7 @@ function docTrimmerFunction(token) {
   })
 }
 
-function searchResultsToDecoratedSearchItems(results) {
+function searchResultsToDecoratedSearchItems (results) {
   return results
     // If the docs are regenerated without changing its version,
     // a reference may have been doc'ed false in the code but
@@ -306,11 +316,11 @@ function searchResultsToDecoratedSearchItems(results) {
     })
 }
 
-function getSearchItemByRef(ref) {
+function getSearchItemByRef (ref) {
   return searchData.items.find(searchItem => searchItem.ref === ref) || null
 }
 
-function getExcerpts(searchItem, metadata) {
+function getExcerpts (searchItem, metadata) {
   const { doc } = searchItem
   const searchTerms = Object.keys(metadata)
 
@@ -331,7 +341,7 @@ function getExcerpts(searchItem, metadata) {
   return excerpts.slice(0, 1)
 }
 
-function excerpt(doc, sliceStart, sliceLength) {
+function excerpt (doc, sliceStart, sliceLength) {
   const startPos = Math.max(sliceStart - EXCERPT_RADIUS, 0)
   const endPos = Math.min(sliceStart + sliceLength + EXCERPT_RADIUS, doc.length)
   return [