keith/WP_Content_Filter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Add filter removal

Browse Source
This commit is contained in:
Keith Solomon
2025-02-12 08:27:45 -06:00
parent f74fb57358
commit 9c26443377
3 changed files with 122 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
assets/script.js
View File

@@ -1,70 +1,131 @@
jQuery(document).ready(function ($) {
function triggerFiltering() {
function triggerFiltering(paged = 1) {
let searchTerm = $('#search').val();
let selectedTypes = $('input[name="resource_type[]"]:checked').map(function () {
return $(this).closest('label').text().trim();
}).get();
let selectedTypes = $('input[name="resource_type[]"]:checked')
.map(function () {
return $(this).closest('label').text().trim();
})
.get();
let selectedSubjects = $('input[name="resource_subject[]"]:checked').map(function () {
return $(this).closest('label').text().trim();
}).get();
let selectedSubjects = $('input[name="resource_subject[]"]:checked')
.map(function () {
return $(this).closest('label').text().trim();
})
.get();
let appliedFilters = [];
if (searchTerm) appliedFilters.push(`<strong>Search:</strong> "${searchTerm}"`);
if (selectedTypes.length > 0) appliedFilters.push(`<strong>Type:</strong> ${selectedTypes.join(', ')}`);
if (selectedSubjects.length > 0) appliedFilters.push(`<strong>Subject:</strong> ${selectedSubjects.join(', ')}`);
if (searchTerm) {
appliedFilters.push(
`<span class="filter-item" data-type="search" data-value="${searchTerm}">
<strong>Search:</strong> "${searchTerm}"
<button class="remove-filter" aria-label="Remove Search">×</button>
</span>`
);
}
$('#applied-filters').html(appliedFilters.length ? appliedFilters.join('<br>') : 'None');
if (selectedTypes.length > 0) {
appliedFilters.push(
`<span class="filter-item" data-type="resource_type" data-value="${selectedTypes.join(
', '
)}">
<strong>Type:</strong> ${selectedTypes.join(', ')}
<button class="remove-filter" aria-label="Remove Type">×</button>
</span>`
);
}
if (selectedSubjects.length > 0) {
appliedFilters.push(
`<span class="filter-item" data-type="resource_subject" data-value="${selectedSubjects.join(
', '
)}">
<strong>Subject:</strong> ${selectedSubjects.join(', ')}
<button class="remove-filter" aria-label="Remove Subject">×</button>
</span>`
);
}
$('#applied-filters').html(
appliedFilters.length ? appliedFilters.join(' ') : 'None'
);
let formData = {
action: 'filter_resources',
nonce: resourceFilterAjax.nonce,
search: $('#search').val(),
resource_type: $('input[name="resource_type[]"]:checked').map(function () {
return this.value;
}).get(),
resource_subject: $('input[name="resource_subject[]"]:checked').map(function () {
return this.value;
}).get(),
sort_order: $('#sort-order').val() // Pass sorting option
resource_type: $('input[name="resource_type[]"]:checked')
.map(function () {
return this.value;
})
.get(),
resource_subject: $('input[name="resource_subject[]"]:checked')
.map(function () {
return this.value;
})
.get(),
sort_order: $('#sort-order').val(),
paged: paged,
};
$.post(resourceFilterAjax.ajaxurl, formData, function (response) {
response = JSON.parse(response);
$('#resource-results').html(response.html);
$('#result-count').text(response.count);
if (response.count !== undefined) {
$('#result-count').text(response.count);
} else {
$('#result-count').text($('#result-count').text()); // Keep initial count
if (response.pagination) {
$('.pagination').html(response.pagination.join(''));
}
// Update sort order label
let sortText = $('#sort-order option:selected').text();
$('#sort-label').text(sortText);
});
}
// Handle filter removal
$(document).on('click', '.remove-filter', function (e) {
e.preventDefault();
let $filter = $(this).closest('.filter-item');
let filterType = $filter.data('type');
let filterValue = $filter.data('value');
// Clear the relevant filter
if (filterType === 'search') {
$('#search').val('');
} else if (filterType === 'resource_type') {
$('input[name="resource_type[]"]:checked').each(function () {
if ($(this).closest('label').text().trim() === filterValue) {
$(this).prop('checked', false);
}
});
} else if (filterType === 'resource_subject') {
$('input[name="resource_subject[]"]:checked').each(function () {
if ($(this).closest('label').text().trim() === filterValue) {
$(this).prop('checked', false);
}
});
}
// Re-trigger filtering after removing the filter
triggerFiltering(1);
});
// Handle form submission
$('#resource-filter').on('submit', function (e) {
e.preventDefault();
triggerFiltering();
triggerFiltering(1);
});
// Handle sorting change
// Handle sort order change
$('#sort-order').on('change', function () {
triggerFiltering();
triggerFiltering(1);
});
});
// Close <details> elements when clicking outside
jQuery(document).on('click', function (event) {
jQuery('details[open]').each(function () {
if (!jQuery(this).is(event.target) && jQuery(this).has(event.target).length === 0) {
jQuery(this).removeAttr('open');
}
// Handle pagination
$(document).on('click', '.pagination a', function (e) {
e.preventDefault();
let paged = $(this).attr('href').match(/paged=(\d+)/)[1];
triggerFiltering(paged);
});
});

24
assets/style.css
View File

@@ -70,6 +70,30 @@
grid-template-columns: repeat(1, minmax(0, 1fr));
}
#applied-filters {
margin-top: 15px;
font-size: 14px;
}
.filter-item {
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 20px;
display: inline-block;
margin: 5px;
padding: 5px 10px;
}
.filter-item button.remove-filter {
background: none;
border: none;
color: #0073aa;
cursor: pointer;
font-size: 16px;
margin-left: 5px;
}
.filter-item button.remove-filter:hover { color: #d63638; }
@media (min-width: 768px) { /* Tailwind 'md' breakpoint */
#resource-results {