-
-
-
-
+
+
+
+
+
@@ -670,6 +687,39 @@
localStorage.setItem('live-feed-hidden', 'false');
});
+ // Legend toggle for mobile (#60)
+ const legendEl = document.getElementById('liveLegend');
+ const legendToggleBtn = document.getElementById('legendToggleBtn');
+ if (legendToggleBtn && legendEl) {
+ legendToggleBtn.addEventListener('click', () => {
+ const isHidden = legendEl.classList.toggle('legend-mobile-hidden');
+ legendToggleBtn.setAttribute('aria-label', isHidden ? 'Show legend' : 'Hide legend');
+ legendToggleBtn.textContent = isHidden ? '🎨' : '✕';
+ });
+ }
+
+ // Feed panel resize handle (#27)
+ const savedFeedWidth = localStorage.getItem('live-feed-width');
+ if (savedFeedWidth) feedEl.style.width = savedFeedWidth + 'px';
+ const resizeHandle = document.createElement('div');
+ resizeHandle.className = 'feed-resize-handle';
+ resizeHandle.setAttribute('aria-label', 'Resize feed panel');
+ feedEl.appendChild(resizeHandle);
+ let feedResizing = false;
+ resizeHandle.addEventListener('mousedown', (e) => {
+ feedResizing = true; e.preventDefault();
+ });
+ document.addEventListener('mousemove', (e) => {
+ if (!feedResizing) return;
+ const newWidth = Math.max(200, Math.min(800, e.clientX - feedEl.getBoundingClientRect().left));
+ feedEl.style.width = newWidth + 'px';
+ });
+ document.addEventListener('mouseup', () => {
+ if (!feedResizing) return;
+ feedResizing = false;
+ localStorage.setItem('live-feed-width', parseInt(feedEl.style.width));
+ });
+
// Save/restore map view
const savedView = localStorage.getItem('live-map-view');
if (savedView) {
@@ -696,8 +746,9 @@
// Scope buttons
document.querySelectorAll('.vcr-scope-btn').forEach(btn => {
btn.addEventListener('click', () => {
- document.querySelectorAll('.vcr-scope-btn').forEach(b => b.classList.remove('active'));
+ document.querySelectorAll('.vcr-scope-btn').forEach(b => { b.classList.remove('active'); b.setAttribute('aria-checked', 'false'); });
btn.classList.add('active');
+ btn.setAttribute('aria-checked', 'true');
VCR.timelineScope = parseInt(btn.dataset.scope);
fetchTimelineTimestamps().then(() => updateTimeline());
});
@@ -720,6 +771,20 @@
});
timelineEl.addEventListener('mouseleave', () => { timeTooltip.classList.add('hidden'); });
+ // Touch tooltip for timeline (#19)
+ timelineEl.addEventListener('touchmove', (e) => {
+ if (!VCR.dragging) return;
+ const touch = e.touches[0];
+ const rect = timelineEl.getBoundingClientRect();
+ const pct = Math.max(0, Math.min(1, (touch.clientX - rect.left) / rect.width));
+ const ts = Date.now() - VCR.timelineScope + pct * VCR.timelineScope;
+ const d = new Date(ts);
+ timeTooltip.textContent = d.toLocaleTimeString([], {hour:'2-digit',minute:'2-digit',second:'2-digit'});
+ timeTooltip.style.left = (touch.clientX - rect.left) + 'px';
+ timeTooltip.classList.remove('hidden');
+ });
+ timelineEl.addEventListener('touchend', () => { timeTooltip.classList.add('hidden'); });
+
// Drag scrubbing on timeline
VCR.dragging = false;
VCR.dragPct = 0;
@@ -788,14 +853,38 @@
if (VCR.mode === 'LIVE') updateVCRClock(Date.now());
}, 1000);
- // Auto-hide nav
+ // Auto-hide nav with pin toggle (#62)
const topNav = document.querySelector('.top-nav');
if (topNav) { topNav.style.position = 'fixed'; topNav.style.width = '100%'; topNav.style.zIndex = '1100'; }
- _navCleanup = { timeout: null, fn: null };
+ _navCleanup = { timeout: null, fn: null, pinned: false };
+ // Add pin button to nav
+ if (topNav) {
+ const pinBtn = document.createElement('button');
+ pinBtn.id = 'navPinBtn';
+ pinBtn.className = 'nav-pin-btn';
+ pinBtn.setAttribute('aria-label', 'Pin navigation open');
+ pinBtn.setAttribute('title', 'Pin navigation open');
+ pinBtn.textContent = '📌';
+ pinBtn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ _navCleanup.pinned = !_navCleanup.pinned;
+ pinBtn.classList.toggle('pinned', _navCleanup.pinned);
+ pinBtn.setAttribute('aria-pressed', _navCleanup.pinned);
+ if (_navCleanup.pinned) {
+ clearTimeout(_navCleanup.timeout);
+ topNav.classList.remove('nav-autohide');
+ } else {
+ _navCleanup.timeout = setTimeout(() => { topNav.classList.add('nav-autohide'); }, 4000);
+ }
+ });
+ topNav.appendChild(pinBtn);
+ }
function showNav() {
if (topNav) topNav.classList.remove('nav-autohide');
clearTimeout(_navCleanup.timeout);
- _navCleanup.timeout = setTimeout(() => { if (topNav) topNav.classList.add('nav-autohide'); }, 4000);
+ if (!_navCleanup.pinned) {
+ _navCleanup.timeout = setTimeout(() => { if (topNav) topNav.classList.add('nav-autohide'); }, 4000);
+ }
}
_navCleanup.fn = showNav;
const livePage = document.querySelector('.live-page');