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])) {
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}&current-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();