From 9c264433773da85dad9a13bb8fa90700fe25f565 Mon Sep 17 00:00:00 2001 From: Keith Solomon Date: Wed, 12 Feb 2025 08:27:45 -0600 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feature:=20Add=20filter=20removal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 +- assets/script.js | 133 ++++++++++++++++++++++++++++++++++------------- assets/style.css | 24 +++++++++ 3 files changed, 122 insertions(+), 38 deletions(-) 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 {