Hi Ernesto @ GiantFocal
Thank you for your reply. The code has seperated out the topics in the dropdown. When I check one of the options in the dropdown rather than filtering the results nothing is shown
Here is the script for the page:
<script>
window.addEventListener('DOMContentLoaded', function() {
var labels = document.querySelectorAll('.labels');
labels.forEach(function(label) {
label.addEventListener('click', function() {
this.classList.toggle('toggled');
});
});
});
document.addEventListener('DOMContentLoaded', function() {
document.body.addEventListener('click', function(event) {
var target = event.target;
if (!target.closest('#category_filter_data') && !target.closest('#type_filter_data') && !target.closest('#business_outcomes_filter_data') && !target.closest('.labels')) {
hideFilterData('category_filter_data');
hideFilterData('type_filter_data');
hideFilterData('business_outcomes_filter_data');
}
});
function hideFilterData(filterId) {
var filterData = document.getElementById(filterId);
filterData.style.maxHeight = '0';
filterData.style.opacity = '0';
filterData.style.overflow = 'hidden';
}
hideFilterData('category_filter_data');
var categoryLabel = document.getElementById('category_label');
categoryLabel.addEventListener('click', function() {
toggleFilterData('category_filter_data');
});
hideFilterData('type_filter_data');
var typeLabel = document.getElementById('type_label');
typeLabel.addEventListener('click', function() {
toggleFilterData('type_filter_data');
});
hideFilterData('business_outcomes_filter_data');
var business_outcomesLabel = document.getElementById('business_outcomes_label');
business_outcomesLabel.addEventListener('click', function() {
toggleFilterData('business_outcomes_filter_data');
});
function toggleFilterData(filterId) {
var filterData = document.getElementById(filterId);
if (filterData.style.maxHeight === '0px') {
filterData.style.maxHeight = filterData.scrollHeight + 'px';
filterData.style.opacity = '1';
filterData.style.padding = '10px'; //Added Line of Code JW
filterData.style.maxHeight = 'fit-content'; //Added Line of Code JW
} else {
filterData.style.maxHeight = '0';
filterData.style.opacity = '0';
filterData.style.padding = '0px'; //Added Line of Code JW
}
}
});
function filterResources() {
var selectedCategories = Array.from(document.querySelectorAll('input[name="category"]:checked')).map(function(checkbox) {
return checkbox.value;
});
var selectedTypes = Array.from(document.querySelectorAll('input[name="type"]:checked')).map(function(checkbox) {
return checkbox.value;
});
var selectedBusinessOutcomes = Array.from(document.querySelectorAll('input[name="business_outcomes"]:checked')).map(function(checkbox) {
return checkbox.value;
});
updateAppliedFilters(selectedCategories, selectedTypes, selectedBusinessOutcomes);
var contents = document.querySelectorAll('.content');
contents.forEach(function(content) {
var category = content.dataset.category;
var type = content.dataset.type;
var business_outcomes = content.dataset.business_outcomes;
if ((selectedCategories.length === 0 || selectedCategories.includes(category)) && (selectedTypes.length === 0 || selectedTypes.includes(type)) && (selectedBusinessOutcomes.length === 0 || selectedBusinessOutcomes.includes(business_outcomes))) {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
updatePagination();
}
function updateAppliedFilters(categories, types, business_outcomes) {
var appliedFilters = document.getElementById('appliedFilters');
appliedFilters.innerHTML = '';
categories.forEach(function(category) {
var filterBadge = createFilterBadge(category, 'category');
appliedFilters.appendChild(filterBadge);
});
types.forEach(function(type) {
var filterBadge = createFilterBadge(type, 'type');
appliedFilters.appendChild(filterBadge);
});
business_outcomes.forEach(function(business_outcomes) {
var filterBadge = createFilterBadge(business_outcomes, 'business_outcomes');
appliedFilters.appendChild(filterBadge);
});
}
function createFilterBadge(value, filterType) {
var label = "";
if (filterType === 'category') {
label = "{{ module.other_text.category_label }}"
} else if (filterType === 'type') {
label = "{{ module.other_text.type_label }}"
} else if (filterType === 'business_outcomes') {
label = "{{ module.other_text.business_outcomes_label }}"
}
var filterBadge = document.createElement('div');
filterBadge.classList.add('badge', 'me-2', 'mb-2');
filterBadge.textContent = "".concat(label, ": ").concat(value);
var closeButton = document.createElement('button');
closeButton.classList.add('btn-close', 'btn-close-dark', 'ms-2');
closeButton.setAttribute('aria-label', 'Close');
closeButton.addEventListener('click', function() {
removeFilter(value, filterType)
});
filterBadge.appendChild(closeButton);
return filterBadge;
}
function removeFilter(value, filterType) {
var checkboxes = document.querySelectorAll('input[name="' + filterType + '"][value="' + value + '"]');
checkboxes.forEach(function(checkbox) {
checkbox.checked = false;
});
filterResources();
}
function debounce(func, delay) {
let timeoutId;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(context, args)
}, delay);
}
}
const debouncedSearch = debounce(searchResources, 300);
var searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', function() {
debouncedSearch()
});
function highlightText(element, searchTerm) {
var innerHTML = element.innerHTML;
var regex = new RegExp('(' + searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
var tempDiv = document.createElement('div');
tempDiv.innerHTML = innerHTML;
function recursiveHighlight(node) {
if (node.nodeType === 3) { // Text node
var text = node.nodeValue;
if (regex.test(text)) {
var highlightedText = text.replace(regex, '<span class="highlight">$1</span>');
var span = document.createElement('span');
span.innerHTML = highlightedText;
node.parentNode.replaceChild(span, node);
}
} else { // Element node
for (var i = 0; i < node.childNodes.length; i++) {
recursiveHighlight(node.childNodes[i]);
}
}
}
recursiveHighlight(tempDiv);
element.innerHTML = tempDiv.innerHTML;
}
function removeHighlights(element) {
function recursiveRemoveHighlight(node) {
if (node.nodeType === 1) { // Element node
if (node.classList.contains('highlight')) {
var parent = node.parentNode;
while (node.firstChild) {
parent.insertBefore(node.firstChild, node);
}
parent.removeChild(node);
} else {
for (var i = 0; i < node.childNodes.length; i++) {
recursiveRemoveHighlight(node.childNodes[i]);
}
}
}
}
recursiveRemoveHighlight(element);
}
function searchResources() {
var searchTerm = searchInput.value.trim().toLowerCase();
var contents = document.querySelectorAll('.content');
contents.forEach(function(content) {
var headlineElement = content.querySelector('.headline a'); // Select the anchor tag directly
var descriptionElement = content.querySelector('.description_outer');
var headlineText = headlineElement.textContent.trim().toLowerCase();
var descriptionText = descriptionElement.textContent.trim().toLowerCase();
if (searchTerm === '') {
content.style.display = 'block';
removeHighlights(headlineElement);
removeHighlights(descriptionElement);
} else {
removeHighlights(headlineElement); // Clear existing highlights
removeHighlights(descriptionElement); // Clear existing highlights
if (headlineText.includes(searchTerm) || descriptionText.includes(searchTerm)) {
highlightText(headlineElement, searchTerm);
highlightText(descriptionElement, searchTerm);
content.style.display = 'block';
} else {
content.style.display = 'none';
}
}
});
updatePagination();
}
function updatePagination() {
var visibleContents = document.querySelectorAll('.content:not([style*="display: none"])');
var paginationArea = document.querySelector('.pagination_area');
var totalPages = Math.ceil(visibleContents.length / {{ module.style.contents.contents_to_display_at_a_time }});
var currentPage = 1;
paginationArea.innerHTML = '';
for (var i = 1; i <= totalPages; i++) {
var pageLink = document.createElement('a');
pageLink.href = '#';
pageLink.textContent = i;
pageLink.dataset.page = i;
pageLink.addEventListener('click', function(e) {
e.preventDefault();
var pageNum = parseInt(this.dataset.page);
currentPage = pageNum;
showPage(pageNum, visibleContents);
highlightActivePage(currentPage);
});
paginationArea.appendChild(pageLink);
}
var previousLink = document.createElement('a');
previousLink.href = '#';
previousLink.textContent = "{{ module.other_text.pagination_previous_button_text }}";
previousLink.addEventListener('click', function(e) {
e.preventDefault();
if (currentPage > 1) {
currentPage--;
showPage(currentPage, visibleContents);
highlightActivePage(currentPage);
}
});
paginationArea.insertBefore(previousLink, paginationArea.firstChild);
var nextLink = document.createElement('a');
nextLink.href = '#';
nextLink.textContent = "{{ module.other_text.pagination_next_button_text }}";
nextLink.addEventListener('click', function(e) {
e.preventDefault();
if (currentPage < totalPages) {
currentPage++;
showPage(currentPage, visibleContents);
highlightActivePage(currentPage);
}
});
paginationArea.appendChild(nextLink);
showPage(1, visibleContents);
highlightActivePage(1);
}
function highlightActivePage(currentPageNum) {
var pageLinks = document.querySelectorAll('.pagination_area a');
pageLinks.forEach(function(link) {
var pageNum = parseInt(link.dataset.page);
if (pageNum === currentPageNum) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}
function showPage(pageNum, visibleContents) {
var startIndex = (pageNum - 1) * {{ module.style.contents.contents_to_display_at_a_time }};
var endIndex = startIndex + {{ module.style.contents.contents_to_display_at_a_time }};
visibleContents.forEach(function(content, index) {
if (index >= startIndex && index < endIndex) {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
}
window.addEventListener('DOMContentLoaded', function() {
updatePagination();
});
document.querySelectorAll('input[name="category"], input[name="type"], input[name="business_outcomes"]').forEach(function(checkbox) {
checkbox.addEventListener('change', filterResources);
});
</script>
As we are now extracting each tag (topic) individually is there anything in the script that I need to update, so that the filter checks against the entry in the database and displays if tagged with the topic?
Thanks
