Antoine/Metiers_du_patrimoine_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refining card click interaction and fixing nl search

Browse Source
This commit is contained in:
Antoine M 2024-12-04 15:48:28 +01:00
parent d297d3ddeb
commit 6fc0a67827
1 changed files with 66 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

218
resources/js/dynamicSearch.js
View File

@ -10,10 +10,7 @@ function formatFormDataArray(formData) {
if (Array.isArray(formObjectDatas[cleanName])) { if (Array.isArray(formObjectDatas[cleanName])) {
formObjectDatas[cleanName].push(value); formObjectDatas[cleanName].push(value);
} else { } else {
formObjectDatas[cleanName] = [ formObjectDatas[cleanName] = [formObjectDatas[cleanName], value];
formObjectDatas[cleanName],
value,
];
} }
} else { } else {
formObjectDatas[cleanName] = value; formObjectDatas[cleanName] = value;
@ -23,37 +20,36 @@ function formatFormDataArray(formData) {
} }
function observeSearchResetButton() { function observeSearchResetButton() {
const currentSearchWordQueryButton = const currentSearchWordQueryButton = document.querySelector('.active-research-indicator');
document.querySelector('.active-research-indicator');
const searchInput = const searchInput = document.querySelector('#search-input');
document.querySelector('#search-input');
currentSearchWordQueryButton.addEventListener( currentSearchWordQueryButton.addEventListener('click', () => {
'click', resetSearchfield();
resetTextualSearch hydrateWithAllArtisans({});
); });
searchInput.addEventListener('input', (event) => { searchInput.addEventListener('input', (event) => {
console.log(event);
if (event.target.value === '') { if (event.target.value === '') {
resetTextualSearch(); resetSearchfield();
hydrateWithAllArtisans({});
} }
}); });
} }
function clearAllCheckboxes() {
const filtersCheckboxes = document.querySelectorAll('.taxonomy-checkbox');
function resetTextualSearch() { filtersCheckboxes.forEach((checkbox) => {
const searchInput = checkbox.checked = false;
document.querySelector('#search-input'); });
}
function resetSearchfield() {
const searchInput = document.querySelector('#search-input');
searchInput.value = ''; searchInput.value = '';
hydrateWithAllArtisans({});
const currentSearchWordQueryButton = const currentSearchWordQueryButton = document.querySelector('.active-research-indicator');
document.querySelector('.active-research-indicator'); currentSearchWordQueryButton.setAttribute('is-active', 'false');
currentSearchWordQueryButton.setAttribute(
'is-active',
'false'
);
} }
function formatSearchDataArray(formData) { function formatSearchDataArray(formData) {
@ -67,95 +63,60 @@ function formatSearchDataArray(formData) {
function handleRadioCardClick(card) { function handleRadioCardClick(card) {
card.addEventListener('click', (e) => { card.addEventListener('click', (e) => {
const radioInput = card.querySelector( const radioInput = card.querySelector('input[type="radio"]');
'input[type="radio"]'
);
radioInput.checked = true; radioInput.checked = true;
const artisanPosts = document.querySelector( const artisanPosts = document.querySelector('.artisans-posts');
'.artisans-posts'
); clearAllCheckboxes();
resetSearchfield();
if (!artisanPosts) return; if (!artisanPosts) return;
artisanPosts.scrollIntoView({ behavior: 'smooth' }); artisanPosts.scrollIntoView({ behavior: 'smooth' });
}); });
} }
async function hydrateFields(formObjectDatas) { async function hydrateFields(formObjectDatas) {
const currentLanguage = document const currentLanguage = document.querySelector('body').getAttribute('current-language');
.querySelector('body')
.getAttribute('current-language');
const taxonomy = formObjectDatas.search_by; const taxonomy = formObjectDatas.search_by;
const localisation = formObjectDatas.localisation ?? null; const localisation = formObjectDatas.localisation ?? null;
const taxonomyIds = const taxonomyIds = taxonomy === 'metiers' ? formObjectDatas.metiers : formObjectDatas.elementsbatiments;
taxonomy === 'metiers'
? formObjectDatas.metiers
: formObjectDatas.elementsbatiments;
const response = await fetch( const response = await fetch(`/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}&taxonomy=${taxonomy}&taxonomy-ids=${taxonomyIds}&localisation=${localisation}`);
`/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 artisansDatas = await response.json();
const artisansGrid = document.querySelector( const artisansGrid = document.querySelector('.artisans-posts__grid');
'.artisans-posts__grid'
);
artisansGrid.innerHTML = artisansDatas.html_template; artisansGrid.innerHTML = artisansDatas.html_template;
const postResultsLiveDiv = document.querySelector( const postResultsLiveDiv = document.querySelector('.posts-results-count .results-count');
'.posts-results-count .results-count'
);
postResultsLiveDiv.innerHTML = postResultsLiveDiv.innerHTML = artisansDatas.total_posts_found.toString();
artisansDatas.total_posts_found.toString();
} }
async function hydrateWithAllArtisans() { async function hydrateWithAllArtisans() {
const currentLanguage = document const currentLanguage = document.querySelector('body').getAttribute('current-language');
.querySelector('body') const response = await fetch(`/wp-json/metiers-patrimoine-datas/v1/build/artisans?current-page-language=${currentLanguage}`);
.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 artisansDatas = await response.json();
const artisansGrid = document.querySelector( const artisansGrid = document.querySelector('.artisans-posts__grid');
'.artisans-posts__grid'
);
artisansGrid.innerHTML = artisansDatas.html_template; artisansGrid.innerHTML = artisansDatas.html_template;
const postResultsLiveDiv = document.querySelector( const postResultsLiveDiv = document.querySelector('.posts-results-count .results-count');
'.posts-results-count .results-count'
);
postResultsLiveDiv.innerHTML = postResultsLiveDiv.innerHTML = artisansDatas.total_posts_found.toString();
artisansDatas.total_posts_found.toString();
} }
async function hydrateSearch(searchValue) { async function hydrateSearch(searchValue) {
const currentLanguage = document const currentLanguage = document.querySelector('body').getAttribute('current-language');
.querySelector('body')
.getAttribute('current-language');
const response = await fetch( const response = await fetch(`/wp-json/metiers-patrimoine-datas/v1/build/artisans?search=${searchValue}&current-page-language=${currentLanguage}`);
`/wp-json/metiers-patrimoine-datas/v1/build/artisans?search=${searchValue}`
);
const searchArtisansDatas = await response.json(); const searchArtisansDatas = await response.json();
const artisansGrid = document.querySelector( const artisansGrid = document.querySelector('.artisans-posts__grid');
'.artisans-posts__grid' artisansGrid.innerHTML = searchArtisansDatas.html_template;
);
artisansGrid.innerHTML =
searchArtisansDatas.html_template;
const postResultsAriaLiveDiv = document.querySelector( const postResultsAriaLiveDiv = document.querySelector('.posts-results-count .results-count');
'.posts-results-count .results-count'
);
postResultsAriaLiveDiv.innerHTML = postResultsAriaLiveDiv.innerHTML = searchArtisansDatas.total_posts_found.toString();
searchArtisansDatas.total_posts_found.toString();
const currentQueriedWordAriaLiveDiv = const currentQueriedWordAriaLiveDiv = document.querySelector('.current-queried-word');
document.querySelector('.current-queried-word'); const activeSearchIndicator = document.querySelector('.active-research-indicator');
const activeSearchIndicator = document.querySelector(
'.active-research-indicator'
);
currentQueriedWordAriaLiveDiv.innerHTML = searchValue; currentQueriedWordAriaLiveDiv.innerHTML = searchValue;
activeSearchIndicator.setAttribute('is-active', 'true'); activeSearchIndicator.setAttribute('is-active', 'true');
@ -163,69 +124,43 @@ async function hydrateSearch(searchValue) {
function handleHierarchicalTaxonomyCheckboxRelation(e) { function handleHierarchicalTaxonomyCheckboxRelation(e) {
// If parent is checked, check all children // If parent is checked, check all children
if ( if (e.target.checked && e.target.classList.contains('parent-checkbox')) {
e.target.checked && const parentRootTag = e.target.closest('.checkbox-choice');
e.target.classList.contains('parent-checkbox') const children = parentRootTag.querySelectorAll('.child-checkbox');
) {
const parentRootTag = e.target.closest(
'.checkbox-choice'
);
const children = parentRootTag.querySelectorAll(
'.child-checkbox'
);
children.forEach((child) => { children.forEach((child) => {
child.checked = true; child.checked = true;
}); });
} }
if ( if (!e.target.checked && e.target.classList.contains('parent-checkbox')) {
!e.target.checked &&
e.target.classList.contains('parent-checkbox')
) {
// alert('uncheck parent'); // alert('uncheck parent');
const parent = e.target.closest('.checkbox-choice'); const parent = e.target.closest('.checkbox-choice');
const children = parent.querySelectorAll( const children = parent.querySelectorAll('.child-checkbox');
'.child-checkbox'
);
children.forEach((child) => { children.forEach((child) => {
child.checked = false; child.checked = false;
}); });
} }
if ( if (!e.target.checked && e.target.classList.contains('child-checkbox')) {
!e.target.checked && const checkboxRootTag = e.target.closest('.checkbox-choice');
e.target.classList.contains('child-checkbox') const parentCheckbox = checkboxRootTag.parentElement.parentElement.querySelector('.parent-checkbox');
) {
const checkboxRootTag = e.target.closest(
'.checkbox-choice'
);
const parentCheckbox =
checkboxRootTag.parentElement.parentElement.querySelector(
'.parent-checkbox'
);
parentCheckbox.checked = false; parentCheckbox.checked = false;
} }
} }
function handleLocalisationCheckboxBehaviour(e) { function handleLocalisationCheckboxBehaviour(e) {
const AlllocalisationsCheckboxes = document.querySelector( const AlllocalisationsCheckboxes = document.querySelector('.localisation-checkbox[value="all"]');
'.localisation-checkbox[value="all"]'
);
// If parent is checked, check all children // If parent is checked, check all children
if (e.target.checked && e.target.value === 'all') { if (e.target.checked && e.target.value === 'all') {
const localisationCheckboxes = const localisationCheckboxes = document.querySelectorAll('.localisation-checkbox');
document.querySelectorAll('.localisation-checkbox');
localisationCheckboxes.forEach((checkbox) => { localisationCheckboxes.forEach((checkbox) => {
checkbox.checked = true; checkbox.checked = true;
}); });
} }
if ( if (!e.target.checked && AlllocalisationsCheckboxes.checked === true) {
!e.target.checked &&
AlllocalisationsCheckboxes.checked === true
) {
AlllocalisationsCheckboxes.checked = false; AlllocalisationsCheckboxes.checked = false;
} }
if (e.target.checked && e.target.value !== 'all') { if (e.target.checked && e.target.value !== 'all') {
@ -236,16 +171,10 @@ function handleLocalisationCheckboxBehaviour(e) {
function handleFormChange(e) { function handleFormChange(e) {
e.preventDefault(); e.preventDefault();
if ( if (e.target.type === 'checkbox' && e.target.classList.contains('taxonomy-checkbox')) {
e.target.type === 'checkbox' &&
e.target.classList.contains('taxonomy-checkbox')
) {
handleHierarchicalTaxonomyCheckboxRelation(e); handleHierarchicalTaxonomyCheckboxRelation(e);
} }
if ( if (e.target.type === 'checkbox' && e.target.classList.contains('localisation-checkbox')) {
e.target.type === 'checkbox' &&
e.target.classList.contains('localisation-checkbox')
) {
handleLocalisationCheckboxBehaviour(e); handleLocalisationCheckboxBehaviour(e);
} }
const form = e.target.closest('form'); const form = e.target.closest('form');
@ -258,53 +187,38 @@ function handleFormChange(e) {
function handleSearchSubmit(e) { function handleSearchSubmit(e) {
e.preventDefault(); e.preventDefault();
const searchBy = document.querySelector( const searchBy = document.querySelector('.metier-patrimoine-searchbar__search-by');
'.metier-patrimoine-searchbar__search-by' const elementsBatimentsCheckbox = document.querySelector('#elements_batiments_checkbox');
); const metiersCheckbox = document.querySelector('#metiers_checkbox');
const elementsBatimentsCheckbox = document.querySelector(
'#elements_batiments_checkbox'
);
const metiersCheckbox = document.querySelector(
'#metiers_checkbox'
);
metiersCheckbox.checked = false; metiersCheckbox.checked = false;
elementsBatimentsCheckbox.checked = false; elementsBatimentsCheckbox.checked = false;
const form = e.target.closest('form'); const form = e.target.closest('form');
const searchValue = const searchValue = form.querySelector('#search-input').value;
form.querySelector('#search-input').value;
hydrateSearch(searchValue); hydrateSearch(searchValue);
const artisanPosts = document.querySelector( const artisanPosts = document.querySelector('.artisans-posts');
'.artisans-posts'
);
if (!artisanPosts) return; if (!artisanPosts) return;
artisanPosts.scrollIntoView({ behavior: 'smooth' }); artisanPosts.scrollIntoView({ behavior: 'smooth' });
} }
export default function dynamicSearch() { export default function dynamicSearch() {
const form = document.querySelector( const form = document.querySelector('.metier-patrimoine-searchform');
'.metier-patrimoine-searchform'
);
if (!form) { if (!form) {
return; return;
} }
form.addEventListener('change', handleFormChange); form.addEventListener('change', handleFormChange);
const searchRadioCards = document.querySelectorAll( const searchRadioCards = document.querySelectorAll('.search-radio-card');
'.search-radio-card'
);
searchRadioCards.forEach((card) => { searchRadioCards.forEach((card) => {
handleRadioCardClick(card); handleRadioCardClick(card);
}); });
const searchForm = document.querySelector( const searchForm = document.querySelector('.artisan-search-bar');
'.artisan-search-bar'
);
searchForm.addEventListener('submit', handleSearchSubmit); searchForm.addEventListener('submit', handleSearchSubmit);
observeSearchResetButton(); observeSearchResetButton();