diff --git a/README.md b/README.md
index 62c1b3b..b1264d3 100644
--- a/README.md
+++ b/README.md
@@ -39,11 +39,10 @@ The plugin is designed to work out of the box with minimal configuration. Howeve
- **Taxonomies**: Ensure your WordPress site has the `resource_type` and `resource_subject` taxonomies set up for the `resource` post type.
## Roadmap
-- tag close functionality
+- ~~tag close functionality~~
- general reset button
- pagination
-
## Changelog
### 1.2.0 - 2025-02-05
- Name change to reflect future ability to filter any content, not just `resources`
diff --git a/assets/script.js b/assets/script.js
index e127ae3..9e1076e 100644
--- a/assets/script.js
+++ b/assets/script.js
@@ -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(`Search: "${searchTerm}"`);
- if (selectedTypes.length > 0) appliedFilters.push(`Type: ${selectedTypes.join(', ')}`);
- if (selectedSubjects.length > 0) appliedFilters.push(`Subject: ${selectedSubjects.join(', ')}`);
+ if (searchTerm) {
+ appliedFilters.push(
+ `
+ Search: "${searchTerm}"
+
+ `
+ );
+ }
- $('#applied-filters').html(appliedFilters.length ? appliedFilters.join('
') : 'None');
+ if (selectedTypes.length > 0) {
+ appliedFilters.push(
+ `
+ Type: ${selectedTypes.join(', ')}
+
+ `
+ );
+ }
+
+ if (selectedSubjects.length > 0) {
+ appliedFilters.push(
+ `
+ Subject: ${selectedSubjects.join(', ')}
+
+ `
+ );
+ }
+
+ $('#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 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);
});
});
diff --git a/assets/style.css b/assets/style.css
index 807e5c1..0ce543b 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -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 {