Hermes
3a0f595a17
Audit 2026-10-27 fixes (46-finding sweep, AUDIT-2026-10-27.md): - P0-2: all 6 calendar API calls via secureFetch — raw fetch sent no X-CSRF-Token so every mutation (save/toggle/delete/test) was rejected 403 [DC-100]; GETs gain the standard 15s timeout - P0-6: refresh() catch called nonexistent errorHandler.log() — the error path itself threw; now logError(context, error) - P0-7: modal sizing off inline min-width:560px onto .cal-modal-content with 768px override (inline style beat the mobile media query) - refresh coalescing via _pendingForce (forced refreshes were dropped mid-flight); single fetch sequence on modal open; toggle/delete get resp.ok + try/catch + toast + disabled-during-flight - modal on class-based .show: click-outside, Escape, focus move/return on all three dismissal paths (judge polish applied) - chip honors Enter/Space (role=button); poll skips hidden tabs - --cal-chip-when/--cal-when/--cal-dot re-scoped to :root (were scoped to elements that are never ancestors of .cal-dot — DC-168 WCAG dot colors never rendered) - calendar-cache eventKey no longer throws RangeError on invalid start Bundles rebuilt (sw dashcaddy-shell-7fc13e7762). status suite 68/68. Judge B (polish items applied pre-commit): urn:ump:dbxmyhvr7cpkeu3mbfdevrco7utsok743udjsj7atih6qk4frdiq
479 lines
23 KiB
JavaScript
479 lines
23 KiB
JavaScript
// ========== CALENDAR WIDGET (DC-161 + DC-168) ==========
|
||
// Zero-config for calendars deployed through DashCaddy (Radicale auto-wiring);
|
||
// manual CalDAV/ICS sources via the ⚙️ settings modal. Weather-widget pattern:
|
||
// compact top-bar display + weather-modal shell + server-backed settings.
|
||
//
|
||
// DC-168 (owner requirements):
|
||
// 1. Empty → chip says "No upcoming appointments" (calendar IS connected).
|
||
// 2. With events → chip shows the next appointment (title + day/time).
|
||
// 3. Modal → month GRID with appointment days highlighted (+ times in
|
||
// tooltip and the Upcoming list), not just a flat list.
|
||
// 4. Chip stays weather-widget size (CSS keeps padding/font identical).
|
||
// 5. Everything styled with CSS variables + [data-theme] overrides in
|
||
// dashboard.css — correct across all themes and user themes.
|
||
(function() {
|
||
const errorHandler = new ErrorHandler();
|
||
|
||
injectModal('calendar-modal', `<div id="calendar-modal" class="weather-modal">
|
||
<div class="weather-modal-content cal-modal-content" role="dialog" aria-modal="true" aria-labelledby="calendar-modal-title">
|
||
<h3 id="calendar-modal-title">📅 Calendar</h3>
|
||
<div class="cal-monthbar">
|
||
<button id="cal-prev" class="cal-nav-btn" aria-label="Previous month">‹</button>
|
||
<span id="cal-month-label" class="cal-month-label"></span>
|
||
<button id="cal-next" class="cal-nav-btn" aria-label="Next month">›</button>
|
||
</div>
|
||
<div id="cal-grid" class="cal-grid"></div>
|
||
<div id="calendar-upcoming" style="margin:12px 0 14px;">
|
||
<div style="font-size:0.8rem;color:var(--muted);margin-bottom:6px;">Upcoming appointments</div>
|
||
<div id="calendar-upcoming-list" class="cal-list">
|
||
<div class="cal-empty">No upcoming appointments.</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top:14px;padding-top:12px;border-top:1px solid var(--border);">
|
||
<label style="display:block;font-weight:600;color:var(--fg);margin-bottom:8px;">Calendars</label>
|
||
<div id="calendar-sources-list" style="display:flex;flex-direction:column;gap:6px;margin-bottom:10px;"></div>
|
||
<details id="calendar-add-details">
|
||
<summary style="cursor:pointer;font-size:0.85rem;color:var(--accent);">+ Add a calendar (CalDAV URL or ICS feed)</summary>
|
||
<div style="margin-top:10px;display:flex;flex-direction:column;gap:8px;">
|
||
<div style="display:flex;gap:8px;">
|
||
<label style="font-size:0.82rem;">Type
|
||
<select id="cal-add-type" style="margin-left:6px;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:4px;">
|
||
<option value="caldav">CalDAV</option>
|
||
<option value="ics">ICS feed (read-only)</option>
|
||
</select>
|
||
</label>
|
||
<label style="font-size:0.82rem;flex:1;">Name
|
||
<input type="text" id="cal-add-name" placeholder="Work calendar" maxlength="120" style="width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:4px 8px;">
|
||
</label>
|
||
</div>
|
||
<label style="font-size:0.82rem;">URL
|
||
<input type="text" id="cal-add-url" placeholder="https://calendar.example.com/user/calendar/" style="width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:4px 8px;">
|
||
</label>
|
||
<div style="display:flex;gap:8px;">
|
||
<label style="font-size:0.82rem;flex:1;">User
|
||
<input type="text" id="cal-add-user" autocomplete="off" style="width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:4px 8px;">
|
||
</label>
|
||
<label style="font-size:0.82rem;flex:1;">Password
|
||
<input type="password" id="cal-add-pass" autocomplete="new-password" style="width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:4px;padding:4px 8px;">
|
||
</label>
|
||
</div>
|
||
<div style="display:flex;gap:8px;justify-content:flex-end;">
|
||
<button id="cal-add-test">Test connection</button>
|
||
<button id="cal-add-save">Save</button>
|
||
</div>
|
||
<div id="cal-add-status" style="font-size:0.8rem;color:var(--muted);min-height:1em;"></div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<div class="weather-modal-buttons"><button id="calendar-close">Close</button></div>
|
||
</div></div>`);
|
||
|
||
function escapeHtml(s) {
|
||
return String(s == null ? '' : s)
|
||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||
.replace(/"/g, '"').replace(/'/g, ''');
|
||
}
|
||
|
||
const widgetEls = () => ({
|
||
icon: document.querySelector('.calendar-widget-icon'),
|
||
text: document.querySelector('.calendar-widget-text'),
|
||
});
|
||
|
||
function fmtWhen(start, allDay) {
|
||
const d = new Date(start);
|
||
const today = new Date(); today.setHours(0, 0, 0, 0);
|
||
const day = new Date(d); day.setHours(0, 0, 0, 0);
|
||
const days = Math.round((day - today) / 86400000);
|
||
const dayLabel = days === 0 ? 'Today' : days === 1 ? 'Tomorrow' :
|
||
d.toLocaleDateString(undefined, { weekday: 'short', month: 'short', day: 'numeric' });
|
||
const timeLabel = allDay ? 'all-day' : d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
|
||
return `${dayLabel} ${timeLabel}`;
|
||
}
|
||
|
||
function fmtTime(start, allDay) {
|
||
if (allDay) return 'all-day';
|
||
return new Date(start).toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
|
||
}
|
||
|
||
function dayKey(d) {
|
||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||
}
|
||
|
||
// Event cache keyed by identity: uid + start (recurring instances share a
|
||
// UID but differ per occurrence; events without UID fall back to
|
||
// start+title). On each fetch, entries whose start falls INSIDE the fetched
|
||
// window are REPLACED by the server response (authoritative for that
|
||
// window — deletions/reschedules propagate); entries outside it survive.
|
||
// DC-168: cache semantics live in calendar-cache.js (same file bundled
|
||
// ahead of this one) so tests can exercise them directly.
|
||
const cache = (typeof window !== 'undefined' && window.CalendarCache)
|
||
? window.CalendarCache.createCache() : null;
|
||
function mergeEvents(body, range) {
|
||
if (cache) return cache.merge(body, range);
|
||
// fallback if the helper somehow failed to load: naive passthrough
|
||
return body;
|
||
}
|
||
// Loaded range: the union of [start,end] windows already fetched. Navigating
|
||
// the grid outside it triggers a refetch for the missing month (judge r1:
|
||
// "refetch when navigating outside the loaded range"; judge r2: merge by
|
||
// event identity so month navigation never drops prior months).
|
||
// fetched intervals as a disjoint list — a gap between two fetched windows
|
||
// is NEVER reported covered (judge r6).
|
||
let loadedIntervals = []; // [{start: Date, end: Date}] sorted, disjoint
|
||
function windowFor(view) {
|
||
// Anchor on the visible month: that month ± padding for the chip's
|
||
// "next appointment" (1 day back for in-progress, 2 months forward).
|
||
const base = view || new Date();
|
||
const start = new Date(base.getFullYear(), base.getMonth() - 1, 1, 0, 0, 0, 0);
|
||
const end = new Date(base.getFullYear(), base.getMonth() + 2, 0, 23, 59, 59, 999);
|
||
return { start, end };
|
||
}
|
||
function covers(range) {
|
||
// covered only if SOME single fetched interval fully contains the range
|
||
return loadedIntervals.some(iv =>
|
||
iv.start.getTime() <= range.start.getTime() &&
|
||
iv.end.getTime() >= range.end.getTime());
|
||
}
|
||
function mergeRange(range) {
|
||
// insert + merge overlapping/adjacent intervals, keeping the list disjoint
|
||
const ivs = loadedIntervals.filter(iv =>
|
||
iv.end.getTime() >= range.start.getTime() && iv.start.getTime() <= range.end.getTime());
|
||
const rest = loadedIntervals.filter(iv => !ivs.includes(iv));
|
||
if (ivs.length) {
|
||
range = {
|
||
start: new Date(Math.min(range.start.getTime(), ...ivs.map(i => i.start.getTime()))),
|
||
end: new Date(Math.max(range.end.getTime(), ...ivs.map(i => i.end.getTime()))),
|
||
};
|
||
}
|
||
loadedIntervals = rest.concat([range]).sort((a, b) => a.start - b.start);
|
||
}
|
||
let viewMonth = null; // first day of visible month (hoisted early: used by fetch)
|
||
let lastCached = { events: [] };
|
||
async function fetchCalendar(force) {
|
||
const range = windowFor(viewMonth);
|
||
if (!force && covers(range)) return lastCached;
|
||
const resp = await secureFetch(`/api/v1/calendar/events?start=${range.start.toISOString()}&end=${range.end.toISOString()}`, { cache: 'no-store' });
|
||
if (resp.status === 404) return { notConfigured: true };
|
||
if (!resp.ok) throw new Error(`Calendar API HTTP ${resp.status}`);
|
||
const body = await resp.json();
|
||
lastCached = mergeEvents(body, range);
|
||
mergeRange(range);
|
||
return lastCached;
|
||
}
|
||
|
||
function renderWidget(body) {
|
||
const els = widgetEls();
|
||
if (!els.icon || !els.text) return;
|
||
const upcoming = upcomingOnly((body && Array.isArray(body.events)) ? body.events : []);
|
||
if (!upcoming.length) {
|
||
els.icon.textContent = '📅';
|
||
els.text.innerHTML = '<span class="cal-chip-muted">No upcoming appointments</span>';
|
||
return;
|
||
}
|
||
const next = upcoming[0];
|
||
els.icon.textContent = next.allDay ? '🗓️' : '⏰';
|
||
els.text.innerHTML = `<span class="cal-chip-title">${escapeHtml(next.title || 'Untitled')}</span>` +
|
||
`<span class="cal-chip-when">· ${escapeHtml(fmtWhen(next.start, next.allDay))}</span>`;
|
||
}
|
||
|
||
// ---- Month grid ----
|
||
function eventMap(body) {
|
||
const map = {};
|
||
for (const ev of ((body && Array.isArray(body.events)) ? body.events : [])) {
|
||
const k = dayKey(new Date(ev.start));
|
||
(map[k] = map[k] || []).push(ev);
|
||
}
|
||
return map;
|
||
}
|
||
|
||
function renderGrid(body) {
|
||
const grid = document.getElementById('cal-grid');
|
||
const label = document.getElementById('cal-month-label');
|
||
if (!grid || !label) return;
|
||
if (!viewMonth) { viewMonth = new Date(); viewMonth.setDate(1); }
|
||
const y = viewMonth.getFullYear(), m = viewMonth.getMonth();
|
||
label.textContent = viewMonth.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
|
||
const byDay = eventMap(body);
|
||
const todayKey = dayKey(new Date());
|
||
const firstDow = new Date(y, m, 1).getDay();
|
||
const daysIn = new Date(y, m + 1, 0).getDate();
|
||
let html = ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map(d => `<div class="cal-dow">${d}</div>`).join('');
|
||
for (let i = 0; i < firstDow; i++) html += '<div class="cal-day cal-pad"></div>';
|
||
for (let day = 1; day <= daysIn; day++) {
|
||
const key = `${y}-${String(m + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
|
||
const dayEvents = byDay[key] || [];
|
||
const cls = ['cal-day'];
|
||
if (key === todayKey) cls.push('cal-today');
|
||
if (dayEvents.length) cls.push('cal-has-events');
|
||
const dots = dayEvents.slice(0, 3).map((e) =>
|
||
`<span class="cal-dot" title="${escapeHtml(fmtTime(e.start, e.allDay))}"></span>`).join('');
|
||
const tip = dayEvents.map(e => `${fmtTime(e.start, e.allDay)} — ${e.title || 'Untitled'}`).join('\n');
|
||
html += `<div class="${cls.join(' ')}" title="${escapeHtml(tip || key)}">` +
|
||
`<span class="cal-daynum">${day}</span>${dots ? `<span class="cal-dots">${dots}</span>` : ''}</div>`;
|
||
}
|
||
grid.innerHTML = html;
|
||
}
|
||
|
||
function upcomingOnly(events) {
|
||
const now = Date.now();
|
||
return (Array.isArray(events) ? events : [])
|
||
.filter(e => {
|
||
const endT = e.end ? new Date(e.end).getTime() : new Date(e.start).getTime();
|
||
return endT >= now; // ongoing appointments still qualify
|
||
})
|
||
.sort((a, b) => new Date(a.start) - new Date(b.start));
|
||
}
|
||
|
||
function renderUpcoming(body) {
|
||
const list = document.getElementById('calendar-upcoming-list');
|
||
if (!list) return;
|
||
const events = upcomingOnly((body && Array.isArray(body.events)) ? body.events : []);
|
||
if (!events.length) {
|
||
list.innerHTML = '<div class="cal-empty">No upcoming appointments.</div>';
|
||
return;
|
||
}
|
||
list.innerHTML = events.slice(0, 12).map(ev =>
|
||
`<div class="cal-row">
|
||
<span class="cal-when">${escapeHtml(fmtWhen(ev.start, ev.allDay))}</span>
|
||
<span class="cal-evtitle">${escapeHtml(ev.title || 'Untitled')}</span>
|
||
${ev.location ? `<span class="cal-loc">${escapeHtml(ev.location)}</span>` : ''}
|
||
</div>`).join('');
|
||
}
|
||
|
||
async function renderSources() {
|
||
const listEl = document.getElementById('calendar-sources-list');
|
||
if (!listEl) return;
|
||
let sources = [];
|
||
try {
|
||
const resp = await secureFetch('/api/v1/calendar/sources', { cache: 'no-store' });
|
||
if (resp.ok) {
|
||
const body = await resp.json();
|
||
sources = (body && Array.isArray(body.sources)) ? body.sources
|
||
: (Array.isArray(body) ? body : []);
|
||
}
|
||
} catch (e) { /* modal still usable */ }
|
||
if (!sources.length) {
|
||
listEl.innerHTML = '<div class="cal-empty">No calendars connected. Deploy Radicale from the App Selector to auto-connect one, or add a CalDAV/ICS URL below.</div>';
|
||
return;
|
||
}
|
||
listEl.innerHTML = sources.map(s => `
|
||
<div class="cal-row cal-src-row">
|
||
<span class="cal-evtitle">${escapeHtml(s.name || s.id)}
|
||
<span class="cal-loc">· ${escapeHtml(s.type)}${s.autoProvisioned ? ' · auto-wired' : ''}</span></span>
|
||
<button class="cal-src-toggle cal-btn" data-id="${escapeHtml(s.id)}" data-enabled="${s.enabled !== false ? '1' : '0'}">${s.enabled !== false ? '✓ on' : 'off'}</button>
|
||
<button class="cal-src-del cal-btn cal-btn-danger" data-id="${escapeHtml(s.id)}">remove</button>
|
||
</div>`).join('');
|
||
listEl.querySelectorAll('.cal-src-toggle').forEach(btn => btn.addEventListener('click', async () => {
|
||
const id = btn.dataset.id;
|
||
const enable = btn.dataset.enabled !== '1';
|
||
btn.disabled = true;
|
||
try {
|
||
const resp = await secureFetch(`/api/v1/calendar/sources/${encodeURIComponent(id)}`, {
|
||
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ enabled: enable })
|
||
});
|
||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
|
||
renderSources(); refresh(true);
|
||
} catch (e) {
|
||
showNotification(`Calendar source update failed: ${e.message}`, 'error');
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
}));
|
||
listEl.querySelectorAll('.cal-src-del').forEach(btn => btn.addEventListener('click', async () => {
|
||
const id = btn.dataset.id;
|
||
btn.disabled = true;
|
||
try {
|
||
const resp = await secureFetch(`/api/v1/calendar/sources/${encodeURIComponent(id)}`, { method: 'DELETE' });
|
||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
|
||
renderSources(); refresh(true);
|
||
} catch (e) {
|
||
showNotification(`Calendar source removal failed: ${e.message}`, 'error');
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
}));
|
||
}
|
||
|
||
let lastBody = null;
|
||
async function refresh(force) {
|
||
// Coalesce instead of dropping (audit 2026-10-27): a forced refresh that
|
||
// lands while another is mid-flight previously vanished, leaving the
|
||
// chip/grid stale until the next 5-minute tick.
|
||
if (refresh._inFlight) { if (force) refresh._pendingForce = true; return; }
|
||
refresh._inFlight = true;
|
||
try {
|
||
// force=true (periodic tick, source mutations): bypass the covered-
|
||
// window cache so server-side deletions/reschedules propagate.
|
||
let body = await fetchCalendar(!!force);
|
||
if (force && viewMonth) {
|
||
// navigated view: ALSO refresh the now-window so the chip can't go
|
||
// stale, then the view window so the grid can't go stale. The CHIP
|
||
// always renders from the now-window (r14: a viewed future/past month
|
||
// must never replace the real next appointment).
|
||
const saved = viewMonth;
|
||
viewMonth = null;
|
||
const nowBody = await fetchCalendar(true);
|
||
viewMonth = saved;
|
||
const viewBody = await fetchCalendar(true);
|
||
renderWidget(nowBody); // chip = actual next appointment
|
||
renderGrid(viewBody); // grid = navigated month
|
||
renderUpcoming(nowBody); // list = upcoming only
|
||
lastBody = nowBody;
|
||
refresh._inFlight = false;
|
||
return;
|
||
}
|
||
if (viewMonth) {
|
||
// r15: non-forced refresh with a navigated viewMonth — same guarantee:
|
||
// chip from the NOW-window, grid from the view-window.
|
||
const saved = viewMonth;
|
||
viewMonth = null;
|
||
const nowBody = await fetchCalendar(false);
|
||
viewMonth = saved;
|
||
const viewBody = await fetchCalendar(false);
|
||
renderWidget(nowBody);
|
||
renderGrid(viewBody);
|
||
renderUpcoming(nowBody);
|
||
lastBody = nowBody;
|
||
refresh._inFlight = false;
|
||
return;
|
||
}
|
||
lastBody = body;
|
||
renderWidget(body);
|
||
if (document.getElementById('calendar-modal').classList.contains('show')) {
|
||
renderGrid(body);
|
||
renderUpcoming(body);
|
||
}
|
||
} catch (e) {
|
||
errorHandler.logError('calendar-widget', e); // was errorHandler.log() — which never existed (only logError does), so the catch itself threw
|
||
const els = widgetEls();
|
||
if (els.text) els.text.innerHTML = '<span class="cal-chip-muted">Calendar offline</span>';
|
||
} finally {
|
||
refresh._inFlight = false;
|
||
if (refresh._pendingForce) {
|
||
refresh._pendingForce = false;
|
||
refresh(true);
|
||
}
|
||
}
|
||
}
|
||
|
||
// ---- Modal wiring (class-based .show like every other modal, so
|
||
// click-outside via wireModal + Escape + focus management all work) ----
|
||
let calLastFocus = null;
|
||
function openModal() {
|
||
calLastFocus = document.activeElement;
|
||
const modal = document.getElementById('calendar-modal');
|
||
modal.classList.add('show');
|
||
renderGrid(lastBody || { events: [] });
|
||
renderUpcoming(lastBody || { events: [] });
|
||
renderSources();
|
||
// refresh() renders grid+upcoming itself once the modal is showing — one
|
||
// fetch sequence, not two racing ones (audit 2026-10-27).
|
||
refresh();
|
||
document.getElementById('calendar-close').focus();
|
||
}
|
||
function closeModal() {
|
||
document.getElementById('calendar-modal').classList.remove('show');
|
||
if (calLastFocus && typeof calLastFocus.focus === 'function') calLastFocus.focus();
|
||
}
|
||
|
||
function formCreds() {
|
||
return {
|
||
type: document.getElementById('cal-add-type').value,
|
||
name: document.getElementById('cal-add-name').value.trim(),
|
||
url: document.getElementById('cal-add-url').value.trim(),
|
||
user: document.getElementById('cal-add-user').value.trim(),
|
||
pass: document.getElementById('cal-add-pass').value,
|
||
};
|
||
}
|
||
|
||
function setStatus(msg) {
|
||
document.getElementById('cal-add-status').textContent = msg;
|
||
}
|
||
|
||
document.getElementById('cal-add-test').addEventListener('click', async () => {
|
||
const f = formCreds();
|
||
if (!f.url) { setStatus('Enter a URL first.'); return; }
|
||
setStatus('Testing…');
|
||
try {
|
||
const resp = await secureFetch('/api/v1/calendar/discover', {
|
||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ url: f.url, user: f.user, pass: f.pass })
|
||
});
|
||
const body = await resp.json();
|
||
const p = body && body.probe;
|
||
if (p && p.ok) setStatus(`✓ Reachable (${p.server || 'server'})${p.looksLikeCalendar ? ' — looks like a calendar' : ''}`);
|
||
else setStatus(`✗ ${p && p.error ? p.error : 'Not reachable'}`);
|
||
} catch (e) {
|
||
setStatus(`✗ ${e.message}`);
|
||
}
|
||
});
|
||
|
||
document.getElementById('cal-add-save').addEventListener('click', async () => {
|
||
const f = formCreds();
|
||
if (!f.name || !f.url) { setStatus('Name and URL are required.'); return; }
|
||
try {
|
||
const resp = await secureFetch('/api/v1/calendar/sources', {
|
||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ name: f.name, type: f.type, url: f.url, user: f.user, pass: f.pass })
|
||
});
|
||
if (!resp.ok) {
|
||
const body = await resp.json().catch(() => ({}));
|
||
setStatus(`✗ ${body.error || body.message || `HTTP ${resp.status}`}`);
|
||
return;
|
||
}
|
||
setStatus('Saved.');
|
||
document.getElementById('cal-add-details').open = false;
|
||
['cal-add-name', 'cal-add-url', 'cal-add-user', 'cal-add-pass'].forEach(id => { document.getElementById(id).value = ''; });
|
||
renderSources(); refresh(true);
|
||
} catch (e) {
|
||
setStatus(`✗ ${e.message}`);
|
||
}
|
||
});
|
||
|
||
const calBtn = document.getElementById('calendar-widget');
|
||
if (calBtn) {
|
||
calBtn.addEventListener('click', openModal);
|
||
// role="button" + tabindex=0 promise keyboard support — honor it
|
||
// (audit 2026-10-27: Enter/Space previously did nothing).
|
||
calBtn.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar') {
|
||
e.preventDefault();
|
||
openModal();
|
||
}
|
||
});
|
||
}
|
||
const calSettings = document.getElementById('calendar-settings');
|
||
if (calSettings) calSettings.addEventListener('click', (e) => { e.stopPropagation(); openModal(); });
|
||
const calModalEl = document.getElementById('calendar-modal');
|
||
if (calModalEl) {
|
||
// All three dismissal paths (Close button, backdrop click, Escape) route
|
||
// through closeModal so focus returns to the widget every time (judge
|
||
// polish, urn:ump:dbxmyhvr7cpkeu3mbfdevrco7utsok743udjsj7atih6qk4frdiq —
|
||
// wireModal's own handlers bypass focus restore, so they're not used here).
|
||
document.getElementById('calendar-close').addEventListener('click', closeModal);
|
||
calModalEl.addEventListener('click', (e) => { if (e.target === calModalEl) closeModal(); });
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape' && calModalEl.classList.contains('show')) closeModal();
|
||
});
|
||
}
|
||
async function navigate(delta) {
|
||
if (!viewMonth) { viewMonth = new Date(); viewMonth.setDate(1); }
|
||
viewMonth = new Date(viewMonth.getFullYear(), viewMonth.getMonth() + delta, 1);
|
||
const body = await fetchCalendar(false).catch(() => lastBody);
|
||
renderGrid(body || { events: [] });
|
||
}
|
||
const calPrev = document.getElementById('cal-prev');
|
||
if (calPrev) calPrev.addEventListener('click', () => { navigate(-1); });
|
||
const calNext = document.getElementById('cal-next');
|
||
if (calNext) calNext.addEventListener('click', () => { navigate(1); });
|
||
|
||
window.refreshCalendarWidget = refresh;
|
||
|
||
const POLL = (typeof DC !== 'undefined' && DC.POLL && DC.POLL.CALENDAR) || 300000;
|
||
// Skip ticks in hidden tabs; catch up once on return (audit 2026-10-27).
|
||
setInterval(() => { if (!document.hidden) refresh(true); }, POLL); // forced: catch server-side deletions
|
||
document.addEventListener('visibilitychange', () => { if (!document.hidden) refresh(true); });
|
||
setTimeout(refresh, 400);
|
||
})();
|