feat: wire up feed filter — All content / Journal / Stories
Added JavaScript to the trip.html.twig template that: - Adds event listeners to filter buttons (.trip-filter-btn) - Shows/hides article cards based on data-type attribute (journal/story) - Manages active state of filter buttons - Displays empty state message when no results match the filter - Uses ES5 syntax (no arrow functions, const/let, or template literals) Also added hidden feed-filter-empty element to display appropriate empty messages for each filter type. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RB86BaJBG3eGiMdfhmHRrQ
This commit is contained in:
@@ -137,6 +137,7 @@
|
|||||||
{% else %}
|
{% else %}
|
||||||
<p class="feed-empty">No entries yet. The journey is about to begin.</p>
|
<p class="feed-empty">No entries yet. The journey is about to begin.</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
<p id="feed-filter-empty" class="feed-empty" style="display:none;"></p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -189,5 +190,38 @@ if (TRIP_ENTRIES.length === 0) {
|
|||||||
map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
|
map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
|
||||||
}
|
}
|
||||||
setTimeout(function() { map.invalidateSize(); }, 100);
|
setTimeout(function() { map.invalidateSize(); }, 100);
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var filterBtns = document.querySelectorAll('.trip-filter-btn');
|
||||||
|
var cards = document.querySelectorAll('[data-type]');
|
||||||
|
var filterEmpty = document.getElementById('feed-filter-empty');
|
||||||
|
|
||||||
|
filterBtns.forEach(function(btn) {
|
||||||
|
btn.addEventListener('click', function() {
|
||||||
|
filterBtns.forEach(function(b) { b.classList.remove('is-active'); });
|
||||||
|
btn.classList.add('is-active');
|
||||||
|
|
||||||
|
var filter = btn.getAttribute('data-filter');
|
||||||
|
var visible = 0;
|
||||||
|
|
||||||
|
cards.forEach(function(card) {
|
||||||
|
var show = filter === 'all' || card.getAttribute('data-type') === filter;
|
||||||
|
card.style.display = show ? '' : 'none';
|
||||||
|
if (show) visible++;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (filterEmpty) {
|
||||||
|
if (visible === 0) {
|
||||||
|
filterEmpty.textContent = filter === 'story'
|
||||||
|
? 'No stories yet for this trip.'
|
||||||
|
: 'No entries yet.';
|
||||||
|
filterEmpty.style.display = '';
|
||||||
|
} else {
|
||||||
|
filterEmpty.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user