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

feat: add list template with category tabs

Browse Source
This commit is contained in:
Greg 2025-05-25 21:08:44 +02:00
parent f802501888
commit 92783eb1b7
2 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
content/tvseries/arcane copy.md → content/tvseries/white-lotus.md
View File

32
layouts/_default/list.html
View File

@ -30,8 +30,8 @@ document.addEventListener('DOMContentLoaded', function() {
const tabsContainer = document.getElementById('tabs'); const tabsContainer = document.getElementById('tabs');
const originalTabs = Array.from(tabsContainer.querySelectorAll('.tab')); // Tabs defined in HTML const originalTabs = Array.from(tabsContainer.querySelectorAll('.tab')); // Tabs defined in HTML
const cardsContainer = document.getElementById('cards'); const cardsContainer = document.getElementById('cards');
const allCards = Array.from(cardsContainer.children); const allCards = Array.from(cardsContainer.children); // These are the <a> elements
// Get the current section and section-to-category mappings // Get the current section and section-to-category mappings
const currentSection = tabsContainer.getAttribute('data-current-section'); const currentSection = tabsContainer.getAttribute('data-current-section');
let sectionMappings = {}; let sectionMappings = {};
@ -40,16 +40,16 @@ document.addEventListener('DOMContentLoaded', function() {
} catch (e) { } catch (e) {
console.error('Error parsing section mappings:', e); console.error('Error parsing section mappings:', e);
} }
// Map the current section to its corresponding category // Map the current section to its corresponding category
const currentCategory = sectionMappings[currentSection] || null; const currentCategory = sectionMappings[currentSection] || null;
// Get all category values from the tabs // Get all category values from the tabs
const knownCategories = originalTabs.map(tab => tab.getAttribute('data-tab')); const knownCategories = originalTabs.map(tab => tab.getAttribute('data-tab'));
// Create and prepend the "All" tab // Create and prepend the "All" tab
const allTab = document.createElement('div'); const allTab = document.createElement('div');
allTab.className = 'tab'; // Will be set to active by activateTabAndFilter allTab.className = 'tab';
allTab.textContent = 'All'; allTab.textContent = 'All';
allTab.setAttribute('data-tab', 'all'); allTab.setAttribute('data-tab', 'all');
tabsContainer.prepend(allTab); tabsContainer.prepend(allTab);
@ -57,7 +57,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Function to activate a tab and filter cards // Function to activate a tab and filter cards
function activateTabAndFilter(selectedCategory) { function activateTabAndFilter(selectedCategory) {
console.log('Filtering by category:', selectedCategory); console.log('Filtering by category:', selectedCategory);
// Update active state for all tabs // Update active state for all tabs
document.querySelectorAll('#tabs .tab').forEach(t => { document.querySelectorAll('#tabs .tab').forEach(t => {
if (t.getAttribute('data-tab') === selectedCategory) { if (t.getAttribute('data-tab') === selectedCategory) {
@ -69,15 +69,23 @@ document.addEventListener('DOMContentLoaded', function() {
// Filter cards // Filter cards
let visibleCount = 0; let visibleCount = 0;
allCards.forEach(card => { allCards.forEach(cardLinkElement => { // Renamed 'card' to 'cardLinkElement' for clarity
const cardDiv = cardLinkElement.querySelector('.card'); // Get the nested <div class="card">
if (!cardDiv) {
console.warn('Card structure issue: .card div not found inside', cardLinkElement);
cardLinkElement.style.display = 'none'; // Hide if structure is wrong
return; // Skip this card
}
if (selectedCategory === 'all') { if (selectedCategory === 'all') {
card.style.display = ''; cardLinkElement.style.display = '';
visibleCount++; visibleCount++;
} else { } else {
const cardCategory = card.getAttribute('data-category'); const cardCategory = cardDiv.getAttribute('data-category'); // Get category from the .card div
console.log('Card category:', cardCategory, 'Selected:', selectedCategory); console.log('Card element:', cardLinkElement, 'Card div:', cardDiv, 'Card category:', cardCategory, 'Selected:', selectedCategory);
const isVisible = (cardCategory === selectedCategory); const isVisible = (cardCategory === selectedCategory);
card.style.display = isVisible ? '' : 'none'; cardLinkElement.style.display = isVisible ? '' : 'none';
if (isVisible) visibleCount++; if (isVisible) visibleCount++;
} }
}); });
@ -86,7 +94,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Determine initial category to display // Determine initial category to display
let initialCategoryToDisplay = 'all'; let initialCategoryToDisplay = 'all';
// If we're on a section page and we have a mapping for this section, // If we're on a section page and we have a mapping for this section,
// use the corresponding category // use the corresponding category
if (currentSection && currentCategory && knownCategories.includes(currentCategory)) { if (currentSection && currentCategory && knownCategories.includes(currentCategory)) {