110 lines
3.8 KiB
HTML
110 lines
3.8 KiB
HTML
{{ define "main" }}
|
|
{{/* 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>
|
|
{{ end }}
|
|
</div>
|
|
|
|
<div class="cards" id="cards">
|
|
{{ range .Site.RegularPages }}
|
|
{{ if not (eq .Params.draft true) }}
|
|
{{ partial "card.html" . }}
|
|
{{ end }}
|
|
{{ end }}
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tabsContainer = document.getElementById('tabs');
|
|
const originalTabs = Array.from(tabsContainer.querySelectorAll('.tab')); // Tabs defined in HTML
|
|
const cardsContainer = document.getElementById('cards');
|
|
const allCards = Array.from(cardsContainer.children);
|
|
|
|
// 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
|
|
const allTab = document.createElement('div');
|
|
allTab.className = 'tab'; // Will be set to active by activateTabAndFilter
|
|
allTab.textContent = 'All';
|
|
allTab.setAttribute('data-tab', 'all');
|
|
tabsContainer.prepend(allTab);
|
|
|
|
// 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) {
|
|
t.classList.add('active');
|
|
} else {
|
|
t.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Filter cards
|
|
let visibleCount = 0;
|
|
allCards.forEach(card => {
|
|
if (selectedCategory === 'all') {
|
|
card.style.display = '';
|
|
visibleCount++;
|
|
} else {
|
|
const cardCategory = card.getAttribute('data-category');
|
|
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 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)
|
|
document.querySelectorAll('#tabs .tab').forEach(tab => {
|
|
tab.addEventListener('click', function() {
|
|
const categoryToFilter = this.getAttribute('data-tab');
|
|
activateTabAndFilter(categoryToFilter);
|
|
});
|
|
});
|
|
|
|
// Initial filter and active tab setup
|
|
activateTabAndFilter(initialCategoryToDisplay);
|
|
});
|
|
</script>
|
|
{{ end }}
|