diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 9a97c3a..3e105fb 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -8,15 +8,162 @@ + + +
+
- ☰ + ☰

My Favorite Stuff

{{ block "main" . }}{{ end }}
+
+ + diff --git a/layouts/_default/index.html b/layouts/_default/index.html index d27da57..020e234 100644 --- a/layouts/_default/index.html +++ b/layouts/_default/index.html @@ -59,6 +59,10 @@ document.addEventListener('DOMContentLoaded', function() { }); console.log('FUNC activateTabAndFilter (index.html): Active states updated for tabs.'); + // Get the consumed filter status from window global + const consumedFilter = window.currentConsumedFilter || 'consumed'; + console.log('FUNC activateTabAndFilter (index.html): Current consumed filter is:', consumedFilter); + let visibleCount = 0; allCards.forEach(cardLinkElement => { const cardDiv = cardLinkElement.querySelector('.card'); @@ -68,23 +72,45 @@ document.addEventListener('DOMContentLoaded', function() { return; } + // Check category visibility first + let categoryVisible = false; if (selectedCategory === 'all') { - cardLinkElement.style.display = ''; - visibleCount++; + categoryVisible = true; } else { const cardCategoryAttr = cardDiv.getAttribute('data-category'); - const sCat = selectedCategory ? selectedCategory : 'null_or_empty'; - const cCat = cardCategoryAttr ? cardCategoryAttr : 'null_or_empty'; - console.log( - `FUNC activateTabAndFilter (index.html): Comparing: cardCategory='${cCat}' (length ${cCat.length})` + - ` vs selectedCategory='${sCat}' (length ${sCat.length})` + - ` for card titled: '${cardDiv.querySelector('.card-title') ? cardDiv.querySelector('.card-title').textContent.trim() : 'N/A'}'` - ); - const isVisible = (cardCategoryAttr === selectedCategory); - cardLinkElement.style.display = isVisible ? '' : 'none'; - if (isVisible) visibleCount++; + categoryVisible = (cardCategoryAttr === selectedCategory); } + + // Now check consumed status + const cardData = cardLinkElement.querySelector('meta[name="card-data"]'); + let consumedStatus; + if (cardData) { + try { + const cardDataObj = JSON.parse(cardData.getAttribute('content')); + consumedStatus = cardDataObj.consumed; + } catch (e) { + console.warn('FUNC activateTabAndFilter (index.html): Error parsing card data:', e); + } + } + + // Determine visibility based on consumed filter + let consumedVisible = true; // Default to true if no consumed status is specified + + if (consumedFilter === 'consumed') { + // Show only consumed=true or consumed not specified + consumedVisible = (consumedStatus !== false); + } else if (consumedFilter === 'not-consumed') { + // Show only consumed=false + consumedVisible = (consumedStatus === false); + } + // If consumedFilter is 'all', then consumedVisible remains true + + // Final visibility is the combination of both filters + const isVisible = categoryVisible && consumedVisible; + cardLinkElement.style.display = isVisible ? '' : 'none'; + if (isVisible) visibleCount++; }); + console.log('FUNC activateTabAndFilter (index.html): Visible cards after filtering:', visibleCount); } @@ -114,6 +140,14 @@ document.addEventListener('DOMContentLoaded', function() { activateTabAndFilter(initialCategoryToDisplay); console.log('SCRIPT (index.html): Initial page load filtering complete.'); + // Listen for consumed filter changes from the sidebar + document.addEventListener('consumedFilterChanged', function(event) { + console.log('EVENT (index.html): consumedFilterChanged received with filterType:', event.detail.filterType); + // Re-apply the current category filter when the consumed filter changes + const currentCategory = document.querySelector('#tabs .tab.active').getAttribute('data-tab'); + activateTabAndFilter(currentCategory); + }); + }); {{ end }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index d7bb488..d02afb7 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -89,6 +89,10 @@ document.addEventListener('DOMContentLoaded', function() { }); console.log('FUNC activateTabAndFilter: Active states updated for tabs.'); + // Get the consumed filter status from window global + const consumedFilter = window.currentConsumedFilter || 'consumed'; + console.log('FUNC activateTabAndFilter: Current consumed filter is:', consumedFilter); + let visibleCount = 0; allCards.forEach(cardLinkElement => { const cardDiv = cardLinkElement.querySelector('.card'); @@ -98,23 +102,45 @@ document.addEventListener('DOMContentLoaded', function() { return; } + // Check category visibility first + let categoryVisible = false; if (selectedCategory === 'all') { - cardLinkElement.style.display = ''; - visibleCount++; + categoryVisible = true; } else { const cardCategoryAttr = cardDiv.getAttribute('data-category'); - const sCat = selectedCategory ? selectedCategory : 'null_or_empty'; - const cCat = cardCategoryAttr ? cardCategoryAttr : 'null_or_empty'; - console.log( - `FUNC activateTabAndFilter: Comparing: cardCategory='${cCat}' (length ${cCat.length})` + - ` vs selectedCategory='${sCat}' (length ${sCat.length})` + - ` for card titled: '${cardDiv.querySelector('.card-title') ? cardDiv.querySelector('.card-title').textContent.trim() : 'N/A'}'` - ); - const isVisible = (cardCategoryAttr === selectedCategory); - cardLinkElement.style.display = isVisible ? '' : 'none'; - if (isVisible) visibleCount++; + categoryVisible = (cardCategoryAttr === selectedCategory); } + + // Now check consumed status + const cardData = cardLinkElement.querySelector('meta[name="card-data"]'); + let consumedStatus; + if (cardData) { + try { + const cardDataObj = JSON.parse(cardData.getAttribute('content')); + consumedStatus = cardDataObj.consumed; + } catch (e) { + console.warn('FUNC activateTabAndFilter: Error parsing card data:', e); + } + } + + // Determine visibility based on consumed filter + let consumedVisible = true; // Default to true if no consumed status is specified + + if (consumedFilter === 'consumed') { + // Show only consumed=true or consumed not specified + consumedVisible = (consumedStatus !== false); + } else if (consumedFilter === 'not-consumed') { + // Show only consumed=false + consumedVisible = (consumedStatus === false); + } + // If consumedFilter is 'all', then consumedVisible remains true + + // Final visibility is the combination of both filters + const isVisible = categoryVisible && consumedVisible; + cardLinkElement.style.display = isVisible ? '' : 'none'; + if (isVisible) visibleCount++; }); + console.log('FUNC activateTabAndFilter: Visible cards after filtering:', visibleCount); } @@ -146,6 +172,14 @@ document.addEventListener('DOMContentLoaded', function() { activateTabAndFilter(initialCategoryToDisplay); console.log('SCRIPT: Initial page load filtering complete.'); + // Listen for consumed filter changes from the sidebar + document.addEventListener('consumedFilterChanged', function(event) { + console.log('EVENT: consumedFilterChanged received in list.html with filterType:', event.detail.filterType); + // Re-apply the current category filter when the consumed filter changes + const currentCategory = document.querySelector('#tabs .tab.active').getAttribute('data-tab'); + activateTabAndFilter(currentCategory); + }); + }); {{ end }} diff --git a/layouts/partials/card.html b/layouts/partials/card.html index aef41ba..9fcf444 100644 --- a/layouts/partials/card.html +++ b/layouts/partials/card.html @@ -1,13 +1,11 @@ +
{{ with .Params.image }} {{ $.Title }} cover {{ else }} {{ $.Title }} - No cover available {{ end }} - {{ if eq .Params.consumed false }} -
Not {{ if eq .Params.category "Books" }}Read{{ else if eq .Params.category "Movies" }}Watched{{ else if eq .Params.category "TV Series" }}Watched{{ else if eq .Params.category "Restaurants" }}Visited{{ else if eq .Params.category "Recipes" }}Made{{ else if eq .Params.category "Concerts" }}Attended{{ else }}Experienced{{ end }} Yet
- {{ end }}
{{ .Title }}
{{ with .Params.rating }}
{{ partial "stars.html" (dict "rating" .) }} {{ . }}
{{ end }} {{ with .Params.likes }}
👍 {{ . }}
{{ end }}