handling localisation checkbox behaviour

This commit is contained in:
Antoine M 2024-11-26 10:24:49 +01:00
parent 1fabb25f97
commit 74eda13e56
2 changed files with 37 additions and 12 deletions

View File

@ -51,7 +51,7 @@ async function hydrateFields(formObjectDatas) {
// ); // );
} }
function handleHierarchicalCheckboxRelation(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.checked &&
@ -99,6 +99,30 @@ function handleHierarchicalCheckboxRelation(e) {
} }
} }
function handleLocalisationCheckboxBehaviour(e) {
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');
localisationCheckboxes.forEach((checkbox) => {
checkbox.checked = true;
});
}
if (
!e.target.checked &&
AlllocalisationsCheckboxes.checked === true
) {
AlllocalisationsCheckboxes.checked = false;
}
if (e.target.checked && e.target.value !== 'all') {
AlllocalisationsCheckboxes.checked = false;
}
}
function handleFormChange(e) { function handleFormChange(e) {
e.preventDefault(); e.preventDefault();
@ -106,7 +130,13 @@ function handleFormChange(e) {
e.target.type === 'checkbox' && e.target.type === 'checkbox' &&
e.target.classList.contains('taxonomy-checkbox') e.target.classList.contains('taxonomy-checkbox')
) { ) {
handleHierarchicalCheckboxRelation(e); handleHierarchicalTaxonomyCheckboxRelation(e);
}
if (
e.target.type === 'checkbox' &&
e.target.classList.contains('localisation-checkbox')
) {
handleLocalisationCheckboxBehaviour(e);
} }
const form = e.target.closest('form'); const form = e.target.closest('form');
const formData = new FormData(form); const formData = new FormData(form);

View File

@ -154,7 +154,6 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
</ul> </ul>
</fieldset> </fieldset>
<fieldset class="metier-patrimoine-searchbar__geographic-filters"> <fieldset class="metier-patrimoine-searchbar__geographic-filters">
<div class="fieldset-titling"> <div class="fieldset-titling">
@ -164,27 +163,23 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
<ul> <ul>
<li class="checkbox-choice"> <li class="checkbox-choice">
<input type="checkbox" name="localisation[]" value="all"> <input class="localisation-checkbox" type="checkbox" name="localisation[]" value="all" checked>
<label> <?php echo __("Toute la Belgique", "metiers-patrimoine-theme") ?></label> <label> <?php echo __("Toute la Belgique", "metiers-patrimoine-theme") ?></label>
</li> </li>
<li class="checkbox-choice"> <li class="checkbox-choice">
<input type="checkbox" name="localisation[]" value="wallonia"> <input class="localisation-checkbox" type="checkbox" name="localisation[]" value="wallonia" checked>
<label> <?php echo __("Wallonie", "metiers-patrimoine-theme") ?></label> <label><?php echo __("Wallonie", "metiers-patrimoine-theme") ?></label>
</li> </li>
<li class="checkbox-choice"> <li class="checkbox-choice">
<input type="checkbox" name="localisation[]" value="brussels" checked> <input class="localisation-checkbox" type="checkbox" name="localisation[]" value="brussels" checked>
<label> <?php echo __("Bruxelles", "metiers-patrimoine-theme") ?></label> <label> <?php echo __("Bruxelles", "metiers-patrimoine-theme") ?></label>
</li> </li>
<li class="checkbox-choice"> <li class="checkbox-choice">
<input type="checkbox" name="localisation[]" value="flanders"> <input class="localisation-checkbox" type="checkbox" name="localisation[]" value="flanders" checked>
<label> <?php echo __("Flandre", "metiers-patrimoine-theme") ?></label> <label> <?php echo __("Flandre", "metiers-patrimoine-theme") ?></label>
</li> </li>
</ul> </ul>
</fieldset> </fieldset>
<!-- <button type="submit">submit</button> -->
</form> </form>
</aside> </aside>