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

🖥️ wip: Update javascript and template for configurable post types and taxonomies

Browse Source
This commit is contained in:
Keith Solomon
2025-02-13 20:55:21 -06:00
parent 74e38ca3f5
commit c79becb430
4 changed files with 321 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
assets/script-bak.js Normal file
View File

@@ -0,0 +1,177 @@
jQuery(document).ready(function ($) {
/** Triggers filtering and pagination of resources based on the current form state.
*
* @param {number} [paged=1] - The page number to query.
*/
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 selectedSubjects = $('input[name="resource_subject[]"]:checked')
.map(function () {
return $(this).closest('label').text().trim();
})
.get();
let appliedFilters = [];
// Search Term
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>`
);
}
// Resource Types
$('input[name="resource_type[]"]:checked').each(function () {
const slug = $(this).val(); // Get the slug
const name = $(this).closest('label').text().trim(); // Get the name
appliedFilters.push(
`<span class="filter-item" data-type="resource_type" data-value="${slug}">
<strong>Type:</strong> ${name}
<button class="remove-filter" aria-label="Remove Type ${name}">×</button>
</span>`
);
});
// Resource Subjects
selectedSubjects.forEach(function (subject) {
appliedFilters.push(
`<span class="filter-item" data-type="resource_subject" data-value="${subject}">
<strong>Subject:</strong> ${subject}
<button class="remove-filter" aria-label="Remove Subject ${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(),
paged: paged,
};
$.post(resourceFilterAjax.ajaxurl, formData, function (response) {
response = JSON.parse(response);
$('#resource-results').html(response.html);
$('#result-count').text(response.count);
// Update pagination
if (response.pagination && response.pagination.length > 0) {
// Clear and update pagination container
if (!$('.pagination').length) {
$('#resource-results').after('<div class="pagination"></div>');
}
$('.pagination').html(response.pagination.join(''));
} else {
$('.pagination').html(''); // Clear pagination if no links are needed
}
});
}
// 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');
// Remove the corresponding filter
if (filterType === 'search') {
$('#search').val('');
} else if (filterType === 'resource_type') {
$('input[name="resource_type[]"]:checked').each(function () {
if ($(this).val() === filterValue) { // Match the slug, not the name
$(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();
});
// Handle sort order change
$('#sort-order').on('change', function () {
triggerFiltering();
});
// Handle pagination click
$(document).on('click', '.pagination a', function (e) {
e.preventDefault();
// Extract the page number from the link
let pagedMatch = $(this).attr('href').match(/paged=(\d+)/);
let paged = pagedMatch ? pagedMatch[1] : 1; // Default to page 1 if no match is found
// Trigger filtering for the selected page
triggerFiltering(paged);
});
});
document.addEventListener('DOMContentLoaded', function () {
// Toggle dropdown visibility
document.querySelectorAll('.custom-dropdown .dropdown-toggle').forEach(function (button) {
button.addEventListener('click', function () {
const dropdown = this.parentElement;
// Close all other dropdowns
document.querySelectorAll('.custom-dropdown').forEach(function (otherDropdown) {
if (otherDropdown !== dropdown) {
otherDropdown.classList.remove('open');
}
});
// Toggle the current dropdown
dropdown.classList.toggle('open');
});
});
// Close dropdowns when clicking outside
document.addEventListener('click', function (event) {
if (!event.target.closest('.custom-dropdown')) {
document.querySelectorAll('.custom-dropdown').forEach(function (dropdown) {
dropdown.classList.remove('open');
});
}
});
});

207
assets/script.js
View File

@@ -1,26 +1,47 @@
jQuery(document).ready(function ($) {
/** Triggers filtering and pagination of resources based on the current form state.
/**
* Trigger filtering for resources.
* Handles collecting form data, updating the "Filters Used" section,
* and sending an AJAX request to fetch filtered results.
*
* @param {number} [paged=1] - The page number to query.
* @param {number} paged The current page number (default is 1).
*/
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 selectedSubjects = $('input[name="resource_subject[]"]:checked')
.map(function () {
return $(this).closest('label').text().trim();
})
.get();
let appliedFilters = [];
let formData = {
action: 'filter_resources',
nonce: resourceFilterAjax.nonce,
search: searchTerm,
paged: paged,
sort_order: $('#sort-order').val(),
taxonomies: {}, // Store selected taxonomy terms
};
// Search Term
// Dynamically handle all taxonomy inputs
$('.taxonomy-filter').each(function () {
let taxonomy = $(this).data('taxonomy');
let selectedTerms = $(this).find('input:checked').map(function () {
return this.value;
}).get();
if (selectedTerms.length > 0) {
formData.taxonomies[taxonomy] = selectedTerms;
// Add to applied filters
selectedTerms.forEach(function (term) {
appliedFilters.push(
`<span class="filter-item" data-type="taxonomy" data-taxonomy="${taxonomy}" data-value="${term}">
<strong>${taxonomy}:</strong> ${term}
<button class="remove-filter" aria-label="Remove ${taxonomy} ${term}">×</button>
</span>`
);
});
}
});
// Include search term in applied filters
if (searchTerm) {
appliedFilters.push(
`<span class="filter-item" data-type="search" data-value="${searchTerm}">
@@ -30,148 +51,64 @@ jQuery(document).ready(function ($) {
);
}
// Resource Types
$('input[name="resource_type[]"]:checked').each(function () {
const slug = $(this).val(); // Get the slug
const name = $(this).closest('label').text().trim(); // Get the name
appliedFilters.push(
`<span class="filter-item" data-type="resource_type" data-value="${slug}">
<strong>Type:</strong> ${name}
<button class="remove-filter" aria-label="Remove Type ${name}">×</button>
</span>`
);
});
// Resource Subjects
selectedSubjects.forEach(function (subject) {
appliedFilters.push(
`<span class="filter-item" data-type="resource_subject" data-value="${subject}">
<strong>Subject:</strong> ${subject}
<button class="remove-filter" aria-label="Remove Subject ${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(),
paged: paged,
};
// Update "Filters Used" section
$('#applied-filters').html(appliedFilters.length ? appliedFilters.join(' ') : 'None');
// Perform AJAX request
$.post(resourceFilterAjax.ajaxurl, formData, function (response) {
response = JSON.parse(response);
$('#resource-results').html(response.html);
$('#result-count').text(response.count);
$('#result-count').text(response.count || 0);
// Update pagination
if (response.pagination && response.pagination.length > 0) {
// Clear and update pagination container
if (!$('.pagination').length) {
$('#resource-results').after('<div class="pagination"></div>');
}
$('.pagination').html(response.pagination.join(''));
} else {
$('.pagination').html(''); // Clear pagination if no links are needed
$('.pagination').html('');
}
});
}
// Handle filter removal
$(document).on('click', '.remove-filter', function (e) {
/**
* Handle form submission for filtering resources.
*/
$('#resource-filter').on('submit', function (e) {
e.preventDefault();
triggerFiltering(1); // Start at page 1 on new form submission
});
/**
* Handle pagination link clicks.
*/
$(document).on('click', '.pagination a', function (e) {
e.preventDefault();
let pagedMatch = $(this).attr('href').match(/paged=(\d+)/);
let paged = pagedMatch ? parseInt(pagedMatch[1], 10) : 1;
triggerFiltering(paged);
});
/**
* Handle removing individual filters from the "Filters Used" section.
*/
$(document).on('click', '.remove-filter', function () {
let $filter = $(this).closest('.filter-item');
let filterType = $filter.data('type');
let filterValue = $filter.data('value');
// Remove the corresponding filter
if (filterType === 'search') {
if (filterType === 'taxonomy') {
let taxonomy = $filter.data('taxonomy');
$(`.taxonomy-filter[data-taxonomy="${taxonomy}"] input:checked`).each(function () {
if ($(this).val() === filterValue) {
$(this).prop('checked', false);
}
});
} else if (filterType === 'search') {
$('#search').val('');
} else if (filterType === 'resource_type') {
$('input[name="resource_type[]"]:checked').each(function () {
if ($(this).val() === filterValue) { // Match the slug, not the name
$(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();
});
// Handle sort order change
$('#sort-order').on('change', function () {
triggerFiltering();
});
// Handle pagination click
$(document).on('click', '.pagination a', function (e) {
e.preventDefault();
// Extract the page number from the link
let pagedMatch = $(this).attr('href').match(/paged=(\d+)/);
let paged = pagedMatch ? pagedMatch[1] : 1; // Default to page 1 if no match is found
// Trigger filtering for the selected page
triggerFiltering(paged);
});
});
document.addEventListener('DOMContentLoaded', function () {
// Toggle dropdown visibility
document.querySelectorAll('.custom-dropdown .dropdown-toggle').forEach(function (button) {
button.addEventListener('click', function () {
const dropdown = this.parentElement;
// Close all other dropdowns
document.querySelectorAll('.custom-dropdown').forEach(function (otherDropdown) {
if (otherDropdown !== dropdown) {
otherDropdown.classList.remove('open');
}
});
// Toggle the current dropdown
dropdown.classList.toggle('open');
});
});
// Close dropdowns when clicking outside
document.addEventListener('click', function (event) {
if (!event.target.closest('.custom-dropdown')) {
document.querySelectorAll('.custom-dropdown').forEach(function (dropdown) {
dropdown.classList.remove('open');
});
}
triggerFiltering(1); // Refresh results starting at page 1
});
});

48
templates/filter-form-bak.php Normal file
View File

@@ -0,0 +1,48 @@
<?php
if (!defined('ABSPATH')) { exit; } // Prevent direct access
$resource_types = get_terms(['taxonomy' => 'resource_type', 'hide_empty' => true]);
$resource_subjects = get_terms(['taxonomy' => 'resource_subject', 'hide_empty' => true]);
?>
<!-- Theme override -->
<form id="resource-filter">
<!-- Search Field-->
<div class="search-text">
<input class="full-width" type="text" id="search" name="search" placeholder="Search resources..." value="<?php echo isset($search) ? esc_attr($search) : ''; ?>">
<button type="reset" id="clear-search">&times;</button>
<button type="submit">Filter</button>
</div>
<div class="search-tax">
<!-- Resource Type Filters -->
<details>
<summary>Resource Type</summary>
<div class="filter-options">
<?php foreach ($resource_types as $type) : ?>
<label>
<input type="checkbox" name="resource_type[]" value="<?php echo esc_attr($type->slug); ?>"
<?php echo (isset($_POST['resource_type']) && $_POST['resource_type'] === $type->slug) ? 'checked' : ''; ?>>
<?php echo esc_html($type->name); ?>
</label>
<?php endforeach; ?>
</div>
</details>
<!-- Resource Subject Filters -->
<details>
<summary>Resource Subject</summary>
<div class="filter-options">
<?php foreach ($resource_subjects as $subject) : ?>
<label>
<input type="checkbox" name="resource_subject[]" value="<?php echo esc_attr($subject->slug); ?>">
<?php echo esc_html($subject->name); ?>
</label>
<?php endforeach; ?>
</div>
</details>
</div>
</form>

53
templates/filter-form.php
View File

@@ -1,11 +1,10 @@
<?php
if (!defined('ABSPATH')) { exit; } // Prevent direct access
$resource_types = get_terms(['taxonomy' => 'resource_type', 'hide_empty' => true]);
$resource_subjects = get_terms(['taxonomy' => 'resource_subject', 'hide_empty' => true]);
// Get configured taxonomies from the admin settings
$configured_taxonomies = get_option('content_filter_taxonomies', []);
?>
<!-- Theme override -->
<form id="resource-filter">
<!-- Search Field-->
<div class="search-text">
@@ -16,33 +15,29 @@ $resource_subjects = get_terms(['taxonomy' => 'resource_subject', 'hide_empty' =
</div>
<div class="search-tax">
<!-- Resource Type Filters -->
<details>
<summary>Resource Type</summary>
<?php if (!empty($configured_taxonomies)) : ?>
<?php foreach ($configured_taxonomies as $taxonomy) :
$taxonomy_obj = get_taxonomy($taxonomy);
<div class="filter-options">
<?php foreach ($resource_types as $type) : ?>
<label>
<input type="checkbox" name="resource_type[]" value="<?php echo esc_attr($type->slug); ?>"
<?php echo (isset($_POST['resource_type']) && $_POST['resource_type'] === $type->slug) ? 'checked' : ''; ?>>
<?php echo esc_html($type->name); ?>
</label>
<?php endforeach; ?>
</div>
</details>
if ($taxonomy_obj) :
$terms = get_terms(['taxonomy' => $taxonomy, 'hide_empty' => true]);
<!-- Resource Subject Filters -->
<details>
<summary>Resource Subject</summary>
<div class="filter-options">
<?php foreach ($resource_subjects as $subject) : ?>
<label>
<input type="checkbox" name="resource_subject[]" value="<?php echo esc_attr($subject->slug); ?>">
<?php echo esc_html($subject->name); ?>
</label>
<?php endforeach; ?>
</div>
</details>
if (!empty($terms)) : ?>
<details class="taxonomy-filter" data-taxonomy="<?php echo esc_attr($taxonomy); ?>">
<summary><?php echo esc_html($taxonomy_obj->labels->singular_name); ?></summary>
<div class="filter-options">
<?php foreach ($terms as $term) : ?>
<label>
<input type="checkbox" name="<?php echo esc_attr($taxonomy); ?>[]" value="<?php echo esc_attr($term->slug); ?>"
<?php echo (isset($_POST[$taxonomy]) && in_array($term->slug, (array)$_POST[$taxonomy])) ? 'checked' : ''; ?>>
<?php echo esc_html($term->name); ?>
</label>
<?php endforeach; ?>
</div>
</details>
<?php endif; ?>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
</div>
</form>