From 747f54f22c8c362a7017f6e2084efd1111efabdc Mon Sep 17 00:00:00 2001 From: "Daniel W. Hieber" Date: Fri, 26 Jul 2024 22:51:43 -0500 Subject: [PATCH] NEW: Load correct search mode when page loads (#182) partially addresses #182 --- pages/Search/Search.hbs | 4 +- pages/Search/Search.test.js | 25 +++++++++++-- pages/Search/client.js | 19 +++++++--- pages/Search/scripts/AdvancedSearch.js | 20 ++++++++++ pages/Search/scripts/QuickSearch.js | 52 +++++++++++++++++--------- 5 files changed, 90 insertions(+), 30 deletions(-) create mode 100644 pages/Search/scripts/AdvancedSearch.js 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) }