From 6fc0a678275c473127c26c8a3abc491783979e02 Mon Sep 17 00:00:00 2001 From: Antoine M Date: Wed, 4 Dec 2024 15:48:28 +0100 Subject: [PATCH] refining card click interaction and fixing nl search --- resources/js/dynamicSearch.js | 218 ++++++++++------------------------ 1 file changed, 66 insertions(+), 152 deletions(-) diff --git a/resources/js/dynamicSearch.js b/resources/js/dynamicSearch.js index 809db22..a06206b 100644 --- a/resources/js/dynamicSearch.js +++ b/resources/js/dynamicSearch.js @@ -10,10 +10,7 @@ function formatFormDataArray(formData) { if (Array.isArray(formObjectDatas[cleanName])) { formObjectDatas[cleanName].push(value); } else { - formObjectDatas[cleanName] = [ - formObjectDatas[cleanName], - value, - ]; + formObjectDatas[cleanName] = [formObjectDatas[cleanName], value]; } } else { formObjectDatas[cleanName] = value; @@ -23,37 +20,36 @@ function formatFormDataArray(formData) { } function observeSearchResetButton() { - const currentSearchWordQueryButton = - document.querySelector('.active-research-indicator'); + const currentSearchWordQueryButton = document.querySelector('.active-research-indicator'); - const searchInput = - document.querySelector('#search-input'); + const searchInput = document.querySelector('#search-input'); - currentSearchWordQueryButton.addEventListener( - 'click', - resetTextualSearch - ); + currentSearchWordQueryButton.addEventListener('click', () => { + resetSearchfield(); + hydrateWithAllArtisans({}); + }); searchInput.addEventListener('input', (event) => { - console.log(event); if (event.target.value === '') { - resetTextualSearch(); + resetSearchfield(); + hydrateWithAllArtisans({}); } }); } +function clearAllCheckboxes() { + const filtersCheckboxes = document.querySelectorAll('.taxonomy-checkbox'); -function resetTextualSearch() { - const searchInput = - document.querySelector('#search-input'); + filtersCheckboxes.forEach((checkbox) => { + checkbox.checked = false; + }); +} + +function resetSearchfield() { + const searchInput = document.querySelector('#search-input'); searchInput.value = ''; - hydrateWithAllArtisans({}); - const currentSearchWordQueryButton = - document.querySelector('.active-research-indicator'); - currentSearchWordQueryButton.setAttribute( - 'is-active', - 'false' - ); + const currentSearchWordQueryButton = document.querySelector('.active-research-indicator'); + currentSearchWordQueryButton.setAttribute('is-active', 'false'); } function formatSearchDataArray(formData) { @@ -67,95 +63,60 @@ function formatSearchDataArray(formData) { function handleRadioCardClick(card) { card.addEventListener('click', (e) => { - const radioInput = card.querySelector( - 'input[type="radio"]' - ); + const radioInput = card.querySelector('input[type="radio"]'); radioInput.checked = true; - const artisanPosts = document.querySelector( - '.artisans-posts' - ); + const artisanPosts = document.querySelector('.artisans-posts'); + + clearAllCheckboxes(); + resetSearchfield(); + if (!artisanPosts) return; artisanPosts.scrollIntoView({ behavior: 'smooth' }); }); } async function hydrateFields(formObjectDatas) { - const currentLanguage = document - .querySelector('body') - .getAttribute('current-language'); + const currentLanguage = document.querySelector('body').getAttribute('current-language'); const taxonomy = formObjectDatas.search_by; const localisation = formObjectDatas.localisation ?? null; - const taxonomyIds = - taxonomy === 'metiers' - ? formObjectDatas.metiers - : formObjectDatas.elementsbatiments; + const taxonomyIds = taxonomy === 'metiers' ? formObjectDatas.metiers : formObjectDatas.elementsbatiments; - const response = await fetch( - `/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}&taxonomy=${taxonomy}&taxonomy-ids=${taxonomyIds}&localisation=${localisation}` - ); + const response = await fetch(`/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}&taxonomy=${taxonomy}&taxonomy-ids=${taxonomyIds}&localisation=${localisation}`); const artisansDatas = await response.json(); - const artisansGrid = document.querySelector( - '.artisans-posts__grid' - ); + const artisansGrid = document.querySelector('.artisans-posts__grid'); artisansGrid.innerHTML = artisansDatas.html_template; - const postResultsLiveDiv = document.querySelector( - '.posts-results-count .results-count' - ); + const postResultsLiveDiv = document.querySelector('.posts-results-count .results-count'); - postResultsLiveDiv.innerHTML = - artisansDatas.total_posts_found.toString(); + postResultsLiveDiv.innerHTML = artisansDatas.total_posts_found.toString(); } async function hydrateWithAllArtisans() { - const currentLanguage = document - .querySelector('body') - .getAttribute('current-language'); - - const response = await fetch( - `/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}` - ); + const currentLanguage = document.querySelector('body').getAttribute('current-language'); + const response = await fetch(`/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}`); const artisansDatas = await response.json(); - const artisansGrid = document.querySelector( - '.artisans-posts__grid' - ); + const artisansGrid = document.querySelector('.artisans-posts__grid'); artisansGrid.innerHTML = artisansDatas.html_template; - const postResultsLiveDiv = document.querySelector( - '.posts-results-count .results-count' - ); + const postResultsLiveDiv = document.querySelector('.posts-results-count .results-count'); - postResultsLiveDiv.innerHTML = - artisansDatas.total_posts_found.toString(); + postResultsLiveDiv.innerHTML = artisansDatas.total_posts_found.toString(); } async function hydrateSearch(searchValue) { - const currentLanguage = document - .querySelector('body') - .getAttribute('current-language'); + const currentLanguage = document.querySelector('body').getAttribute('current-language'); - const response = await fetch( - `/wp-json/metiers-patrimoine-datas/v1/build/artisans?search=${searchValue}` - ); + const response = await fetch(`/wp-json/metiers-patrimoine-datas/v1/build/artisans?search=${searchValue}¤t-page-language=${currentLanguage}`); const searchArtisansDatas = await response.json(); - const artisansGrid = document.querySelector( - '.artisans-posts__grid' - ); - artisansGrid.innerHTML = - searchArtisansDatas.html_template; + const artisansGrid = document.querySelector('.artisans-posts__grid'); + artisansGrid.innerHTML = searchArtisansDatas.html_template; - const postResultsAriaLiveDiv = document.querySelector( - '.posts-results-count .results-count' - ); + const postResultsAriaLiveDiv = document.querySelector('.posts-results-count .results-count'); - postResultsAriaLiveDiv.innerHTML = - searchArtisansDatas.total_posts_found.toString(); + postResultsAriaLiveDiv.innerHTML = searchArtisansDatas.total_posts_found.toString(); - const currentQueriedWordAriaLiveDiv = - document.querySelector('.current-queried-word'); - const activeSearchIndicator = document.querySelector( - '.active-research-indicator' - ); + const currentQueriedWordAriaLiveDiv = document.querySelector('.current-queried-word'); + const activeSearchIndicator = document.querySelector('.active-research-indicator'); currentQueriedWordAriaLiveDiv.innerHTML = searchValue; activeSearchIndicator.setAttribute('is-active', 'true'); @@ -163,69 +124,43 @@ async function hydrateSearch(searchValue) { function handleHierarchicalTaxonomyCheckboxRelation(e) { // If parent is checked, check all children - if ( - e.target.checked && - e.target.classList.contains('parent-checkbox') - ) { - const parentRootTag = e.target.closest( - '.checkbox-choice' - ); - const children = parentRootTag.querySelectorAll( - '.child-checkbox' - ); + if (e.target.checked && e.target.classList.contains('parent-checkbox')) { + const parentRootTag = e.target.closest('.checkbox-choice'); + const children = parentRootTag.querySelectorAll('.child-checkbox'); children.forEach((child) => { child.checked = true; }); } - if ( - !e.target.checked && - e.target.classList.contains('parent-checkbox') - ) { + if (!e.target.checked && e.target.classList.contains('parent-checkbox')) { // alert('uncheck parent'); const parent = e.target.closest('.checkbox-choice'); - const children = parent.querySelectorAll( - '.child-checkbox' - ); + const children = parent.querySelectorAll('.child-checkbox'); children.forEach((child) => { child.checked = false; }); } - if ( - !e.target.checked && - e.target.classList.contains('child-checkbox') - ) { - const checkboxRootTag = e.target.closest( - '.checkbox-choice' - ); - const parentCheckbox = - checkboxRootTag.parentElement.parentElement.querySelector( - '.parent-checkbox' - ); + if (!e.target.checked && e.target.classList.contains('child-checkbox')) { + const checkboxRootTag = e.target.closest('.checkbox-choice'); + const parentCheckbox = checkboxRootTag.parentElement.parentElement.querySelector('.parent-checkbox'); parentCheckbox.checked = false; } } function handleLocalisationCheckboxBehaviour(e) { - const AlllocalisationsCheckboxes = document.querySelector( - '.localisation-checkbox[value="all"]' - ); + const AlllocalisationsCheckboxes = document.querySelector('.localisation-checkbox[value="all"]'); // If parent is checked, check all children if (e.target.checked && e.target.value === 'all') { - const localisationCheckboxes = - document.querySelectorAll('.localisation-checkbox'); + const localisationCheckboxes = document.querySelectorAll('.localisation-checkbox'); localisationCheckboxes.forEach((checkbox) => { checkbox.checked = true; }); } - if ( - !e.target.checked && - AlllocalisationsCheckboxes.checked === true - ) { + if (!e.target.checked && AlllocalisationsCheckboxes.checked === true) { AlllocalisationsCheckboxes.checked = false; } if (e.target.checked && e.target.value !== 'all') { @@ -236,16 +171,10 @@ function handleLocalisationCheckboxBehaviour(e) { function handleFormChange(e) { e.preventDefault(); - if ( - e.target.type === 'checkbox' && - e.target.classList.contains('taxonomy-checkbox') - ) { + if (e.target.type === 'checkbox' && e.target.classList.contains('taxonomy-checkbox')) { handleHierarchicalTaxonomyCheckboxRelation(e); } - if ( - e.target.type === 'checkbox' && - e.target.classList.contains('localisation-checkbox') - ) { + if (e.target.type === 'checkbox' && e.target.classList.contains('localisation-checkbox')) { handleLocalisationCheckboxBehaviour(e); } const form = e.target.closest('form'); @@ -258,53 +187,38 @@ function handleFormChange(e) { function handleSearchSubmit(e) { e.preventDefault(); - const searchBy = document.querySelector( - '.metier-patrimoine-searchbar__search-by' - ); - const elementsBatimentsCheckbox = document.querySelector( - '#elements_batiments_checkbox' - ); - const metiersCheckbox = document.querySelector( - '#metiers_checkbox' - ); + const searchBy = document.querySelector('.metier-patrimoine-searchbar__search-by'); + const elementsBatimentsCheckbox = document.querySelector('#elements_batiments_checkbox'); + const metiersCheckbox = document.querySelector('#metiers_checkbox'); metiersCheckbox.checked = false; elementsBatimentsCheckbox.checked = false; const form = e.target.closest('form'); - const searchValue = - form.querySelector('#search-input').value; + const searchValue = form.querySelector('#search-input').value; hydrateSearch(searchValue); - const artisanPosts = document.querySelector( - '.artisans-posts' - ); + const artisanPosts = document.querySelector('.artisans-posts'); if (!artisanPosts) return; artisanPosts.scrollIntoView({ behavior: 'smooth' }); } export default function dynamicSearch() { - const form = document.querySelector( - '.metier-patrimoine-searchform' - ); + const form = document.querySelector('.metier-patrimoine-searchform'); if (!form) { return; } form.addEventListener('change', handleFormChange); - const searchRadioCards = document.querySelectorAll( - '.search-radio-card' - ); + const searchRadioCards = document.querySelectorAll('.search-radio-card'); searchRadioCards.forEach((card) => { handleRadioCardClick(card); }); - const searchForm = document.querySelector( - '.artisan-search-bar' - ); + const searchForm = document.querySelector('.artisan-search-bar'); searchForm.addEventListener('submit', handleSearchSubmit); observeSearchResetButton();