✨feature: Add filter removal

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`

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(`<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);
   });
 });

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 {