Greg/MyFavStuff5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement category tabs with filtering for content listing page

Browse Source
This commit is contained in:
Greg 2025-05-25 21:03:25 +02:00
parent 4d6d55dd9f
commit f802501888
1 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
layouts/_default/list.html
View File

@ -1,5 +1,17 @@
{{ define "main" }}
<div class="tabs" id="tabs" data-current-section-title="{{ .Title }}">
{{/* Pass the current section to the JavaScript via data attributes */}}
{{/* Also add a data attribute mapping section names to category names */}}
<div class="tabs" id="tabs"
data-current-section="{{ .Section }}"
data-section-mappings='{
"books": "Books",
"movies": "Movies",
"tvseries": "TV Series",
"recipes": "Recipes",
"youtube": "YouTube",
"music": "Music",
"concerts": "Concerts"
}'>
{{ $categories := slice "Books" "Movies" "TV Series" "Recipes" "YouTube" "Music" "Concerts" }}
{{ range $i, $cat := $categories }}
<div class="tab" data-tab="{{ $cat }}">{{ $cat }}</div>
@ -19,7 +31,20 @@ document.addEventListener('DOMContentLoaded', function() {
const originalTabs = Array.from(tabsContainer.querySelectorAll('.tab')); // Tabs defined in HTML
const cardsContainer = document.getElementById('cards');
const allCards = Array.from(cardsContainer.children);
const currentSectionTitle = tabsContainer.getAttribute('data-current-section-title');
// Get the current section and section-to-category mappings
const currentSection = tabsContainer.getAttribute('data-current-section');
let sectionMappings = {};
try {
sectionMappings = JSON.parse(tabsContainer.getAttribute('data-section-mappings'));
} catch (e) {
console.error('Error parsing section mappings:', e);
}
// Map the current section to its corresponding category
const currentCategory = sectionMappings[currentSection] || null;
// Get all category values from the tabs
const knownCategories = originalTabs.map(tab => tab.getAttribute('data-tab'));
// Create and prepend the "All" tab
@ -31,6 +56,8 @@ document.addEventListener('DOMContentLoaded', function() {
// Function to activate a tab and filter cards
function activateTabAndFilter(selectedCategory) {
console.log('Filtering by category:', selectedCategory);
// Update active state for all tabs
document.querySelectorAll('#tabs .tab').forEach(t => {
if (t.getAttribute('data-tab') === selectedCategory) {
@ -41,20 +68,30 @@ document.addEventListener('DOMContentLoaded', function() {
});
// Filter cards
let visibleCount = 0;
allCards.forEach(card => {
if (selectedCategory === 'all') {
card.style.display = '';
visibleCount++;
} else {
const cardCategory = card.getAttribute('data-category');
card.style.display = (cardCategory === selectedCategory) ? '' : 'none';
console.log('Card category:', cardCategory, 'Selected:', selectedCategory);
const isVisible = (cardCategory === selectedCategory);
card.style.display = isVisible ? '' : 'none';
if (isVisible) visibleCount++;
}
});
console.log('Visible cards after filtering:', visibleCount);
}
// Determine initial category to display
let initialCategoryToDisplay = 'all';
if (currentSectionTitle && knownCategories.includes(currentSectionTitle)) {
initialCategoryToDisplay = currentSectionTitle;
// If we're on a section page and we have a mapping for this section,
// use the corresponding category
if (currentSection && currentCategory && knownCategories.includes(currentCategory)) {
initialCategoryToDisplay = currentCategory;
console.log('Initial category set to', initialCategoryToDisplay, 'based on section', currentSection);
}
// Attach click listeners to all tabs (including the new "All" tab)