mhl-sunrise
commented
2 years ago Solved it, here is my solution, just for the case somebody else deals with the same situation
add_shortcode('employees_filter', function(){
/** Get list of cities */
$terms = get_terms(array(
'taxonomy' => 'city',
'hide_empty' => true,
));
/** Render list of cities */
?>
<div>
<input
type="radio"
id="employee-city-all"
name="employee-city"
onchange="updateEmployees('all')"
checked
>
<label for="employee-city-all">
<span>All</span>
</label>
</div>
<?php
foreach ($terms as $term) { ?>
<div>
<input
type="radio"
id="employee-city-<?= $term->term_id ?>"
name="employee-city"
onchange="updateEmployees('<?= $term->slug ?>')"
>
<label for="employee-city-<?= $term->term_id ?>">
<span><?= $term->name ?></span>
</label>
</div>
<?php }
?>
<!-- Script for adding interactivity feature -->
<script >
/** Prepare variable for original content*/
var originalContent = null;
/** Store original content after Masonry was loaded */
window.addEventListener('DOMContentLoaded', (event) => {
originalContent = document.querySelectorAll('.ecs-posts')[0].innerHTML;
});
/** On changing taxonomy, remove unneeded employees */
function updateEmployees(slug) {
let selectedCity = event.target.getAttribute("slug");
let employees = document.querySelectorAll(".elementor-post.type-employees");
if(slug == "all") {
document.querySelectorAll('.ecs-posts')[0].innerHTML = originalContent;
window.dispatchEvent(new Event('resize'));
} else {
let copy = (' ' + originalContent).slice(1);
document.querySelectorAll('.ecs-posts')[0].innerHTML = copy;
employees.forEach(function(employee){
let singleEmployee = employee;
let singleEmployeeClassList = employee.classList;
if(!singleEmployeeClassList.contains('city-' + slug)) {
let id = singleEmployee.getAttribute('id');
document.getElementById(id).remove();
}
window.dispatchEvent(new Event('resize'));
});
}
}
</script> <?php
});
Hi @dudaster, is there some easy way to force Masonry recalculation on demand? Some function I can call, maybe? I made an additional filter allowing me to conditionally hide posts based on custom taxonomy (city), but after hiding some of the posts, the grid keeps old styling and breaks (obviously).
By the way - you did an AWESOME job with this plugin!