NEW: Load correct search mode when page loads (#182)

partially addresses #182

pages/Search/Search.hbs

@@ -6,12 +6,12 @@
 
     <label>
       <span>Quick Search</span>
-      <input checked name=search type=radio value=quick>
+      <input checked id=quick-option name=search type=radio value=quick>
     </label>
 
     <label>
       <span>Advanced Search</span>
-      <input name=search type=radio value=advanced>
+      <input id=advanced-option name=search type=radio value=advanced>
     </label>
 
   </fieldset>

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() {

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
 

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
+
+  }
+
+}

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)
 
   }