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

✨refactor: Update resource filter templates and styles; remove unused files and add new styles

Browse Source
This commit is contained in:
Keith Solomon
2025-03-26 15:51:55 -05:00
parent 22b6e37331
commit a983351446
7 changed files with 2 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
assets/script-bak.js
View File

@@ -1,176 +0,0 @@
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');
});
}
});
});

171
assets/style.css
View File

@@ -1,171 +0,0 @@
.search-text {
display: flex;
gap: 0;
margin-bottom: 1.25rem;
.full-width {
border: 1px solid #ccc;
border-right: none;
font-size: 1rem;
padding: .5rem;
width: 100%;
}
button {
border: 1px solid #ccc;
font-size: 1rem;
padding: .5rem 1rem;
}
}
.search-tax {
align-items: flex-start;
display: flex;
gap: 1rem;
margin-bottom: 1.25rem;
position: relative;
.filter-options { padding-top: .5rem; }
.filter-options label {
display: block;
margin-bottom: 5px;
}
/* Dropdown Container */
.custom-dropdown {
display: inline-block;
position: relative;
width: 100%;
}
/* Dropdown Button */
.custom-dropdown .dropdown-toggle {
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
padding: 10px 15px;
}
/* Dropdown Menu (Hidden by Default) */
.custom-dropdown .dropdown-menu {
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: none;
left: 0;
max-height: fit-content;
overflow-y: auto;
padding: 10px;
position: absolute;
top: 100%;
width: 100%;
z-index: 10;
}
/* Show Dropdown Menu */
.custom-dropdown.open .dropdown-menu {
display: grid;
gap: .5rem;
grid-template-columns: repeat(auto-fill, minmax(15ch, 1fr));
}
/* Checkbox Labels */
.dropdown-menu label {
display: block;
margin-bottom: 8px;
}
.dropdown-menu input[type="checkbox"] {
margin-right: 8px;
}
}
#resource-filter-summary {
display: flex;
gap: .5rem;
justify-content: space-between;
margin-bottom: 1.25rem;
width: 100%;
p { margin: 0; padding: 0; }
}
#resource-results {
display: grid;
gap: 1rem;
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; }
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination ul {
list-style: none;
display: flex;
gap: 8px;
padding: 0;
}
.pagination a,
.pagination span {
margin: 0 5px;
padding: 8px 12px;
text-decoration: none;
color: #0073aa;
border: 1px solid #ddd;
border-radius: 4px;
}
.pagination a:hover {
background: #0073aa;
color: #fff;
}
.pagination .current {
background: #0073aa;
color: #fff;
border-color: #0073aa;
}
@media (min-width: 768px) { /* Tailwind 'md' breakpoint */
#resource-results {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) { /* Tailwind 'lg' breakpoint */
#resource-results {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}