clean up autocomplete

digitalnsw · Jul 26, 2022 · ca5e380 · ca5e380
1 parent 7b76aa4
commit ca5e380
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 75 deletions.
diff --git a/config.json b/config.json
@@ -36,11 +36,6 @@
     "watch": ["./src/docs/docs.js"],
     "build": "./dist/docs/js/"
   },
-  "jsSearch": {
-    "src": "./src/docs/search.js",
-    "watch": ["./src/docs/search.js"],
-    "build": "./dist/docs/js/"
-  },
   "images": {
     "src": "./src/assets/images/*.*",
     "watch": "./src/assets/images/*.*",

diff --git a/gulpfile.js b/gulpfile.js
@@ -248,18 +248,6 @@ function compileDocsJS() {
     .pipe(dest(config.jsDocs.build))
 }
 
-function compileSearchJS() {
-  return src(config.jsSearch.src)
-    .pipe(
-      rollup(
-        {
-          plugins: [babel()],
-        },
-      ),
-    )
-    .pipe(dest(config.jsSearch.build))
-}
-
 function lintJavascript() {
   return src(config.js.watch)
     .pipe(eslint())
@@ -317,13 +305,12 @@ function bumping() {
 }
 
 const styles = series(lintStyles, buildStyles, buildCoreStyles, buildDocStyles)
-const javascript = series(lintJavascript, compileJS, compileDocsJS, compileSearchJS)
+const javascript = series(lintJavascript, compileJS, compileDocsJS)
 
 function watchFiles(done) {
   watch(config.scss.watch, series(styles, reload))
   watch(config.js.watch, series(javascript, reload))
   watch(config.jsDocs.watch, series(javascript, reload))
-  watch(config.jsSearch.watch, series(javascript, reload))
   watch(config.images.watch, series(moveImages, reload))
   watch(config.brand.watch, series(moveBrand, reload))
   watch(config.metalSmith.watch, series(metalsmithBuild, reload))

diff --git a/src/docs/docs.js b/src/docs/docs.js
@@ -1,3 +1,6 @@
+/* eslint-disable no-new */
+import { searchData } from '../global/scripts/helpers/searchdata'
+
 function initDocs() {
   const codeButtons = document.querySelectorAll('.js-code-button')
 
@@ -67,6 +70,61 @@ function initDocs() {
       }
     }
   })
+  let inputValue = ''
+  let showNoResults = false
+
+  const autocomplete = document.querySelector('.autocomplete')
+  const autocompleteInput = document.querySelector('.autocomplete-input')
+
+  const noResult = document.createElement('div')
+  noResult.classList = 'no-result'
+  noResult.innerText = 'No results found'
+  autocomplete.insertAdjacentElement('beforeend', noResult)
+
+  const newAutocomplete = new Autocomplete(autocomplete, {
+
+    search: (input) => {
+      inputValue = input
+      if (input.length < 1) { return [] }
+      return searchData.filter((item) => item.title.toLowerCase().includes(input.toLowerCase())
+      || item.keywords.toLowerCase().includes(input.toLowerCase()))
+    },
+
+    renderResult: (result, props) => `
+      <li ${props}>
+        <a href="${result.url}">
+          ${result.title}
+        </a>
+      </li>
+    `,
+
+    onUpdate: (results) => {
+      showNoResults = inputValue && results.length === 0
+
+      if (showNoResults) {
+        autocomplete.classList.add('active')
+        autocompleteInput.setAttribute('aria-describedby', 'active')
+      } else {
+        autocomplete.classList.remove('active')
+        autocompleteInput.removeAttribute('aria-describedby')
+      }
+    },
+
+    getResultValue: (result) => result.title,
+
+    onSubmit: (result) => {
+      autocomplete.classList.remove('active')
+      autocompleteInput.removeAttribute('aria-describedby')
+      window.open(`${result.url}`, '_self')
+    },
+  })
+
+  autocompleteInput.addEventListener('focus', () => {
+    autocompleteInput.classList.add('focused')
+  })
+  autocompleteInput.addEventListener('blur', () => {
+    autocompleteInput.classList.remove('focused')
+  })
 }
 
 initDocs();
diff --git a/src/docs/search.js → src/global/scripts/helpers/searchdata.js b/src/docs/search.js → src/global/scripts/helpers/searchdata.js
@@ -1,6 +1,5 @@
-/* eslint-disable no-new */
 /* eslint-disable max-len */
-const data = [
+export const searchData = [
   {
     objectID: '1',
     title: 'Digital NSW Community',
@@ -351,57 +350,4 @@ const data = [
   },
 ]
 
-let inputValue = ''
-let showNoResults = false
-
-const autocomplete = document.querySelector('.autocomplete')
-const autocompleteInput = document.querySelector('.autocomplete-input')
-
-const noResult = document.createElement('div')
-noResult.classList = 'no-result'
-noResult.innerText = 'No results found'
-autocomplete.insertAdjacentElement('beforeend', noResult)
-
-const newAutocomplete = new Autocomplete(autocomplete, {
-
-  search: (input) => {
-    inputValue = input
-    if (input.length < 1) { return [] }
-    return data.filter((item) => item.title.toLowerCase().includes(input.toLowerCase()) || item.keywords.toLowerCase().includes(input.toLowerCase()))
-  },
-
-  renderResult: (result, props) => `
-    <li ${props}>
-      <a href="${result.url}">
-        ${result.title}
-      </a>
-    </li>
-  `,
-
-  onUpdate: (results) => {
-    showNoResults = inputValue && results.length === 0
-
-    if (showNoResults) {
-      autocomplete.classList.add('active')
-      autocompleteInput.setAttribute('aria-describedby', 'active')
-    } else {
-      autocomplete.classList.remove('active')
-      autocompleteInput.removeAttribute('aria-describedby')
-    }
-  },
-
-  getResultValue: (result) => result.title,
-
-  onSubmit: (result) => {
-    autocomplete.classList.remove('active')
-    autocompleteInput.removeAttribute('aria-describedby')
-    window.open(`${result.url}`, '_self')
-  },
-})
-
-autocompleteInput.addEventListener('focus', () => {
-  autocompleteInput.classList.add('focused')
-})
-autocompleteInput.addEventListener('blur', () => {
-  autocompleteInput.classList.remove('focused')
-})
+export default searchData