feat(trip): add ascending/descending sort toggle button
Button sits in the right filter group alongside Stats/Cycling. Default state: ascending (↑ Oldest first, no highlight). Toggled state: descending (↓ Newest first, is-active pill style). DOM reversal uses insertBefore against the anchored #feed-filter-empty so the empty-state message stays last regardless of sort direction. Interacts safely with the type filter (show/hide by data-type). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
@@ -132,6 +132,7 @@
|
||||
{% if has_gpx %}
|
||||
<button class="trip-stats-btn" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling</button>
|
||||
{% endif %}
|
||||
<button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -327,6 +328,23 @@ setTimeout(function () { tripMap.resize(); }, 100);
|
||||
});
|
||||
})();
|
||||
|
||||
(function() {
|
||||
var sortBtn = document.getElementById('trip-sort-toggle');
|
||||
if (!sortBtn) return;
|
||||
var feed = document.querySelector('.feed');
|
||||
var emptyMsg = document.getElementById('feed-filter-empty');
|
||||
var ascending = true;
|
||||
|
||||
sortBtn.addEventListener('click', function() {
|
||||
ascending = !ascending;
|
||||
var entries = Array.from(feed.querySelectorAll('[data-type]'));
|
||||
entries.reverse().forEach(function(el) { feed.insertBefore(el, emptyMsg); });
|
||||
sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
|
||||
sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
|
||||
sortBtn.classList.toggle('is-active', !ascending);
|
||||
});
|
||||
})();
|
||||
|
||||
var STATS_GPS = {{ gps_points|json_encode|raw }};
|
||||
var HAS_GPX = {{ has_gpx ? 'true' : 'false' }};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user