diff --git a/pages/Search/Search.hbs b/pages/Search/Search.hbs
index 82f28eea..5e338dc6 100644
--- a/pages/Search/Search.hbs
+++ b/pages/Search/Search.hbs
@@ -6,12 +6,12 @@
diff --git a/pages/Search/Search.test.js b/pages/Search/Search.test.js
index bd75de1b..fe484633 100644
--- a/pages/Search/Search.test.js
+++ b/pages/Search/Search.test.js
@@ -117,10 +117,6 @@ describe(`Search`, function() {
cy.get(`#results tbody tr`).should(`have.length`, 1)
})
- })
-
- describe(`Language Filter`, function() {
-
it(`language filter only`, function() {
cy.visit(`/search`)
cy.get(`#language-select`).select(`Cree_East`)
@@ -138,6 +134,27 @@ describe(`Search`, function() {
})
+ describe(`Search Mode`, function() {
+
+ it(`toggles`, function() {
+ cy.visit(`/search`)
+ cy.get(`#advanced-search-form`).should(`not.be.visible`)
+ cy.get(`input[value=advanced]`).check()
+ cy.get(`#advanced-search-form`).should(`be.visible`)
+ cy.get(`#quick-search-form`).should(`not.be.visible`)
+ cy.get(`input[value=quick]`).check()
+ cy.get(`#advanced-search-form`).should(`not.be.visible`)
+ cy.get(`#quick-search-form`).should(`be.visible`)
+ })
+
+ it(`loads the correct tab when page loads`, function() {
+ cy.visit(`/search?advanced=true`)
+ cy.get(`#quick-search-form`).should(`not.be.visible`)
+ cy.get(`#advanced-search-form`).should(`be.visible`)
+ })
+
+ })
+
describe(`Pagination`, function() {
it(`defaults`, function() {
diff --git a/pages/Search/client.js b/pages/Search/client.js
index 644994fc..41fa843d 100644
--- a/pages/Search/client.js
+++ b/pages/Search/client.js
@@ -1,9 +1,10 @@
/* global document */
-import Copier from '../../scripts/Copier.js'
-import Downloader from './scripts/Downloader.js'
-import QuickSearch from './scripts/QuickSearch.js'
-import Table from './scripts/Table.js'
+import AdvancedSearch from './scripts/AdvancedSearch.js'
+import Copier from '../../scripts/Copier.js'
+import Downloader from './scripts/Downloader.js'
+import QuickSearch from './scripts/QuickSearch.js'
+import Table from './scripts/Table.js'
// Initialize button to copy citation information
@@ -15,10 +16,16 @@ if (button && el) {
copier.initialize()
}
-// Initialize search box
+// Initialize Quick Search
const quickSearch = new QuickSearch
-quickSearch.initialize()
+quickSearch.render()
+quickSearch.listen()
+
+// Initialize Advanced Search
+
+const advancedSearch = new AdvancedSearch
+advancedSearch.render()
// Initialize results table
diff --git a/pages/Search/scripts/AdvancedSearch.js b/pages/Search/scripts/AdvancedSearch.js
new file mode 100644
index 00000000..45ebf0e0
--- /dev/null
+++ b/pages/Search/scripts/AdvancedSearch.js
@@ -0,0 +1,20 @@
+/* global document, localStorage, location */
+
+export default class AdvancedSearch {
+
+ constructor() {
+ this.option = document.getElementById(`advanced-option`)
+ }
+
+ render() {
+
+ const url = new URL(location.href)
+ const advanced = url.searchParams.get(`advanced`) || localStorage.getItem(`advanced`) === `true`
+
+ if (!advanced) return
+
+ this.option.checked = true
+
+ }
+
+}
diff --git a/pages/Search/scripts/QuickSearch.js b/pages/Search/scripts/QuickSearch.js
index ba773c06..ac8b1ca5 100644
--- a/pages/Search/scripts/QuickSearch.js
+++ b/pages/Search/scripts/QuickSearch.js
@@ -2,20 +2,45 @@
export default class QuickSearch {
- initialize() {
-
+ /**
+ * Hook onto DOM elements.
+ */
+ constructor() {
this.caseSensitive = document.getElementById(`case-sensitive-box`)
this.diacritics = document.getElementById(`diacritics-box`)
this.form = document.getElementById(`quick-search-form`)
this.language = document.getElementById(`language-select`)
this.regex = document.getElementById(`regex-box`)
- this.reset = document.getElementById(`reset-button`)
+ this.resetButton = document.getElementById(`reset-button`)
this.search = document.getElementById(`search-box`)
+ }
+
+ /**
+ * Add event listeners.
+ */
+ listen() {
+ this.caseSensitive.addEventListener(`input`, this.saveSettings.bind(this))
+ this.diacritics.addEventListener(`input`, this.saveSettings.bind(this))
+ this.form.addEventListener(`input`, this.resetValidity.bind(this))
+ this.form.addEventListener(`submit`, this.validate.bind(this))
+ this.language.addEventListener(`input`, this.saveSettings.bind(this))
+ this.regex.addEventListener(`input`, this.saveSettings.bind(this))
+ this.resetButton.addEventListener(`click`, this.reset.bind(this))
+ }
+
+ /**
+ * Populate the search form.
+ * This method combines mixes the functions of a Model and View, but oh well 🤷🏼♂️
+ * NOTE: Query parameters take precedence over local storage.
+ */
+ render() {
- // Populate search form from querystring / local storage.
- // NOTE: Query parameters take precedence over local storage.
+ const url = new URL(location.href)
+
+ const advanced = url.searchParams.get(`advanced`)
+
+ if (advanced) return
- const url = new URL(location.href)
const caseSensitive = Boolean(url.searchParams.get(`caseSensitive`)) || localStorage.getItem(`caseSensitive`) === `true`
const diacritics = Boolean(url.searchParams.get(`diacritics`)) || localStorage.getItem(`diacritics`) === `true`
const language = url.searchParams.get(`language`) ?? localStorage.getItem(`language`)
@@ -27,23 +52,13 @@ export default class QuickSearch {
this.regex.checked = regex
if (language) this.language.value = language
- if (query) this.search.value = query
+ if (query) this.search.value = query
this.search.focus()
- // Add event listeners
-
- this.caseSensitive.addEventListener(`input`, this.saveSettings.bind(this))
- this.diacritics.addEventListener(`input`, this.saveSettings.bind(this))
- this.form.addEventListener(`input`, this.resetValidity.bind(this))
- this.form.addEventListener(`submit`, this.validate.bind(this))
- this.language.addEventListener(`input`, this.saveSettings.bind(this))
- this.regex.addEventListener(`input`, this.saveSettings.bind(this))
- this.reset.addEventListener(`click`, this.resetForm.bind(this))
-
}
- resetForm() {
+ reset() {
const url = new URL(location.href)
@@ -54,6 +69,7 @@ export default class QuickSearch {
}
// NB: The second parameter to this method is deprecated and does nothing.
+ // It's just there because it's required by the method signature.
history.pushState({}, document.title, url.href)
}