73 lines
2.5 KiB
HTML
73 lines
2.5 KiB
HTML
{{ define "main" }}
|
|
<div class="tabs" id="tabs" data-current-section-title="{{ .Title }}">
|
|
{{ $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);
|
|
const currentSectionTitle = tabsContainer.getAttribute('data-current-section-title');
|
|
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) {
|
|
// 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
|
|
allCards.forEach(card => {
|
|
if (selectedCategory === 'all') {
|
|
card.style.display = '';
|
|
} else {
|
|
const cardCategory = card.getAttribute('data-category');
|
|
card.style.display = (cardCategory === selectedCategory) ? '' : 'none';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Determine initial category to display
|
|
let initialCategoryToDisplay = 'all';
|
|
if (currentSectionTitle && knownCategories.includes(currentSectionTitle)) {
|
|
initialCategoryToDisplay = currentSectionTitle;
|
|
}
|
|
|
|
// 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 }}
|