${e.status === 401 ? 'Sign in to see your notifications' : 'Could not load notifications'}${e.status === 401 ? '' : 'Check your connection and try again.'}
`;
} finally { if (seq === v.seq) v.loading = false; }
}
async function loadMore(v) {
if (v.loading || !v.hasMore) return;
const seq = v.seq; v.loading = true;
const more = v.root.querySelector('.openvibe-nv-more'); if (more) more.innerHTML = '';
try {
const data = await fetchPage(v, v.offset);
if (seq !== v.seq) return;
const fresh = (data.notifications || []).filter(n => !v.ids.has(String(n.id)));
fresh.forEach(n => v.ids.add(String(n.id)));
v.items = v.items.concat(fresh); v.hasMore = !!data.has_more; v.offset += (data.notifications || []).length; v.total = data.total ?? v.total;
// Re-render only the tail to keep the scroll position.
const old = v.root.querySelector('.openvibe-nv-more'); if (old) old.remove();
if (fresh.length) { const tail = { ...v, items: fresh }; renderItems(tail, { append: true }); v.lastDay = tail.lastDay; }
else if (v.hasMore) { const list = v.root.querySelector('[data-role="list"]'); list.insertAdjacentHTML('beforeend', ''); list.querySelector('[data-act="more"]').addEventListener('click', () => loadMore(v)); }
const st = v.root.querySelector('[data-role="status"]');
if (st) st.textContent = v.total != null ? `${v.items.length} of ${v.total}${v.unread ? ' unread' : ''}` : '';
} catch { /* keep what we have */ }
finally { v.loading = false; }
}
function applyReadLocally(v, ids, all) {
const set = new Set((ids || []).map(String));
for (const n of v.items) if (all || set.has(String(n.id))) n.is_read = 1;
v.root.querySelectorAll('.openvibe-notif-item.unread').forEach(el => {
const elIds = (el.dataset.ids || el.dataset.id || '').split(',');
if (all || elIds.some(x => set.has(x))) { el.classList.remove('unread'); el.querySelector('.unread-dot')?.remove(); el.querySelector('[data-row="read"]')?.remove(); }
});
}
// The counts on the tabs (Network GET /api/notifications/unread-by-tab, 4.30.0): read when a list loads, after a read
// or a clear, and when the badge changes with a list showing; a Network without the route shows none.
let _tabCounts = null, _tabAt = 0;
function loadTabCounts(force) {
if (!hasSession() || !_views.size) return;
if (!force && Date.now() - _tabAt < 4000) return;
_tabAt = Date.now();
apiJson('/api/notifications/unread-by-tab').then((d) => { _tabCounts = (d && d.tabs) || null; paintTabCounts(); }).catch(() => { _tabCounts = null; paintTabCounts(); });
}
function paintTabCounts() {
for (const v of _views.values()) {
for (const [id, label] of TABS) {
const el = v.root.querySelector(`[data-n="${id}"]`);
if (!el) continue;
const n = id === 'all' || !_tabCounts ? 0 : Math.max(0, Number(_tabCounts[id]) || 0);
el.textContent = n ? (n > 99 ? '99+' : String(n)) : '';
el.parentNode.setAttribute('aria-label', n ? `${label}, ${n} unread` : label);
}
}
}
function listShowing() { return [..._views.values()].some((v) => v.mode !== 'panel' || (_panelEl && _panelEl.classList.contains('open'))); }
// ── Mutations ───────────────────────────────────────────
async function markRead(ids) {
ids = (ids || []).map(String).filter(Boolean);
if (!ids.length) return;
for (const v of _views.values()) applyReadLocally(v, ids, false);
broadcast({ type: 'read', ids });
try {
const data = ids.length === 1
? await apiJson(`/api/notifications/${encodeURIComponent(ids[0])}/read`, { method: 'POST' })
: await apiJson('/api/notifications/read-batch', { method: 'POST', body: { ids } });
if (data && typeof data.unread === 'number') setBadge(data.unread, { quiet: true }), broadcast({ type: 'unread', count: data.unread });
else pollUnread();
} catch { pollUnread(); }
loadTabCounts(true);
}
async function markAllRead() {
for (const v of _views.values()) applyReadLocally(v, [], true);
setBadge(0);
if (_tabCounts) { _tabCounts = Object.fromEntries(Object.keys(_tabCounts).map((k) => [k, 0])); paintTabCounts(); }
broadcast({ type: 'read', all: true });
try { await apiJson('/api/notifications/read-all', { method: 'POST', body: {} }); } catch { pollUnread(); }
loadTabCounts(true);
}
async function dismiss(v, id) {
const n = v.items.find(x => String(x.id) === String(id));
v.items = v.items.filter(x => String(x.id) !== String(id));
const row = v.root.querySelector(`.openvibe-notif-item[data-id="${CSS.escape(String(id))}"]`);
if (row) {
const rest = (row.dataset.ids || '').split(',').filter(x => x && x !== String(id));
if (rest.length) { row.dataset.ids = rest.join(','); row.dataset.id = rest[0]; const c = row.querySelector('.title .count'); if (c) { if (rest.length > 1) c.textContent = `×${rest.length}`; else c.remove(); } }
else row.remove();
}
if (v.total != null) v.total = Math.max(0, v.total - 1);
if (!v.items.length) renderItems(v);
try {
await apiJson(`/api/notifications/${encodeURIComponent(id)}/dismiss`, { method: 'POST' });
if (n && !isRead(n)) { setBadge(Math.max(0, _unreadCount - 1), { quiet: true }); loadTabCounts(true); }
} catch { /* */ }
}
// ── Polling / toasts ────────────────────────────────────
let _polling = false;
async function pollUnread() {
if (_polling || !hasSession()) return;
_polling = true;
_lastPoll = Date.now();
try {
const data = await apiJson('/api/notifications/unread-count');
const prev = _unreadCount;
const count = Number(data.count) || 0;
setBadge(count);
if (count > prev && _lastSeenAt) {
// Something new arrived: fetch what's newer than the last thing we saw.
const params = new URLSearchParams({ unread_only: '1', limit: '5', since: _lastSeenAt });
const nd = await apiJson(`/api/notifications?${params}`);
// Only what is unread and newer than the last thing seen, whatever the server answered.
const since = _lastSeenAt;
const fresh = (nd.notifications || []).filter(n => n && !n.is_read && (!since || String(n.created_at || '') > since)).slice().reverse();
for (const n of fresh) { showToast(n); playSound(n.priority); }
// Any open list should reflect the new items too.
for (const v of _views.values()) if (v.mode === 'inbox' || (_panelEl && _panelEl.classList.contains('open'))) reload(v);
}
const newest = await newestCreatedAt();
if (newest) _lastSeenAt = newest;
} catch { /* offline / signed out — try again next tick */ }
finally { _polling = false; }
}
async function newestCreatedAt() {
try { const d = await apiJson('/api/notifications/newest'); const c = d.notification && d.notification.created_at; return c ? String(c) : null; } catch { return null; }
}
function startPolling() {
stopPolling();
if (!hasSession()) return;
newestCreatedAt().then(c => { _lastSeenAt = c || new Date().toISOString(); pollUnread(); });
_pollTimer = setInterval(() => { if (!liveOpen() || Date.now() - _lastPoll >= REALTIME_POLL) pollUnread(); }, POLL_INTERVAL);
}
function stopPolling() { if (_pollTimer) clearInterval(_pollTimer); _pollTimer = null; }
// notification-live.js's content hash (scripts/sibling-revs.js writes it), so a release gives it a new URL.
const NOTIFY_REV = { 'notification-live.js': 'cd2d64cc77d0' };
// ── Realtime (notification-live.js) ─────────────────────
function liveOpen() { return !!(_live && _live.state().state === 'open'); }
/** One re-read for a burst of events (a go-live fan-out, a replay after a reconnect); a gap re-reads open lists too. */
function soon(all) {
_soonAll = _soonAll || all;
if (_soon) return;
_soon = setTimeout(() => {
_soon = null;
if (_polling) { soon(false); return; } // a poll in flight may predate the event: read again after it
const lists = _soonAll; _soonAll = false;
pollUnread();
if (lists) for (const v of _views.values()) reload(v);
}, 300);
}
function liveSrc() {
if (_config.liveSrc) return _config.liveSrc;
const m = /^(https?:\/\/[^?#]*\/)notification-ui\.js(?:[?#]|$)/.exec(SELF_SRC);
return `${m ? m[1] : 'https://openvibe.network/shared/'}notification-live.js${NOTIFY_REV['notification-live.js'] ? `?v=${NOTIFY_REV['notification-live.js']}` : ''}`;
}
let _liveLoading = null;
function loadLive() {
if (root.OVNotificationLive) return Promise.resolve(root.OVNotificationLive);
return _liveLoading || (_liveLoading = new Promise((ok) => {
const sc = document.createElement('script');
sc.src = liveSrc(); sc.async = true;
sc.onload = () => ok(root.OVNotificationLive || null);
sc.onerror = () => { _liveLoading = null; ok(null); };
document.head.appendChild(sc);
}));
}
function startRealtime() {
if (!_config.realtime || !hasSession() || typeof root.EventSource !== 'function') return;
if (_live) { _live.restart(); return; }
loadLive().then((L) => {
if (!L || _live || !_config.realtime || !hasSession()) return;
_live = L.create({
ticketUrl: `${_config.apiBase}/api/v1/realtime/ticket`,
token: () => tokenValue(),
credentials: isCrossOrigin() ? 'omit' : 'include',
onNotification: () => soon(false),
onGap: () => soon(true),
});
_live.start();
});
}
function stopRealtime() { if (_live) _live.stop(); }
document.addEventListener('visibilitychange', () => { if (!document.hidden) pollUnread(); });
// ── Panel ───────────────────────────────────────────────
function createPanel() {
const panel = document.createElement('div');
panel.className = 'openvibe-notif-panel';
panel.setAttribute('role', 'dialog'); panel.setAttribute('aria-label', 'Notifications');
document.body.appendChild(panel);
buildView(panel, { mode: 'panel' });
attachSheetDrag(panel);
document.addEventListener('click', (e) => {
if (panel.classList.contains('open') && !panel.contains(e.target) && !(_bellEl && _bellEl.contains(e.target))) closePanel();
});
document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && panel.classList.contains('open')) closePanel(); });
_panelEl = panel;
return panel;
}
function closePanel() {
if (_panelEl && _panelEl.contains(document.activeElement) && _bellEl) { try { _bellEl.focus({ preventScroll: true }); } catch { /* */ } }
_panelEl?.classList.remove('open'); _bellEl?.classList.remove('open'); _bellEl?.setAttribute('aria-expanded', 'false');
if (_panelEl) _panelEl.style.transform = '';
document.documentElement.classList.remove('ovn-sheet-open');
syncLayer();
}
/** Phones: the sheet's head drags down; past 110 px it closes, short of that it springs back. */
function attachSheetDrag(panel) {
const head = panel.querySelector('.openvibe-nv-head');
if (!head || typeof root.PointerEvent !== 'function') return;
let y0 = null, dy = 0;
head.addEventListener('pointerdown', (e) => {
if (!isPhone() || e.pointerType === 'mouse' || e.target.closest('button, a')) return;
y0 = e.clientY; dy = 0; panel.style.transition = 'none';
try { head.setPointerCapture(e.pointerId); } catch { /* */ }
});
head.addEventListener('pointermove', (e) => { if (y0 == null) return; dy = Math.max(0, e.clientY - y0); panel.style.transform = `translateY(${dy}px)`; });
const end = () => {
if (y0 == null) return;
y0 = null;
panel.style.transition = 'transform .2s ease';
if (dy > 110) closePanel(); else panel.style.transform = '';
setTimeout(() => { panel.style.transition = ''; }, 220);
};
head.addEventListener('pointerup', end);
head.addEventListener('pointercancel', end);
}
function togglePanel() {
if (!_panelEl) createPanel();
const opening = !_panelEl.classList.contains('open');
if (opening && window.OpenVibePanels && !_panelEl.__registered) { _panelEl.__registered = true; window.OpenVibePanels.register({ el: _panelEl, openClass: 'open', id: 'notifications', close: () => { if (_panelEl.classList.contains('open')) togglePanel(); } }); window.OpenVibePanels.closeAll(_panelEl); }
if (opening) {
// Sit directly under the site's navbar, whatever its height (sticky bars, banners, safe areas).
const bar = _bellEl && _bellEl.closest('nav, header, .navbar');
const bottom = bar ? bar.getBoundingClientRect().bottom : (_bellEl ? _bellEl.getBoundingClientRect().bottom : 56);
_panelEl.style.setProperty('--ovn-top', Math.max(8, Math.round(bottom) + 6) + 'px');
if (!_panelEl.__esc) { _panelEl.__esc = (e) => { if (e.key === 'Escape' && _panelEl.classList.contains('open')) togglePanel(); }; document.addEventListener('keydown', _panelEl.__esc); }
}
if (!opening) { closePanel(); return; }
_panelEl.classList.add('open');
_bellEl?.classList.add('open');
_bellEl?.setAttribute('aria-expanded', 'true');
document.documentElement.classList.toggle('ovn-sheet-open', isPhone());
syncLayer();
reload(_views.get(_panelEl)); refreshPushButton(_views.get(_panelEl)); pollUnread();
// Focus the chosen tab, so the keyboard starts in the panel (Escape and the bell bring it back).
setTimeout(() => { try { _panelEl.querySelector('[role="tab"][aria-selected="true"]')?.focus({ preventScroll: true }); } catch { /* */ } }, 0);
}
// ── Web Push ────────────────────────────────────────────
function pushSupported() { return typeof window !== 'undefined' && 'serviceWorker' in navigator && 'PushManager' in window && 'Notification' in window && window.isSecureContext; }
function urlBase64ToUint8Array(b64) {
const padding = '='.repeat((4 - (b64.length % 4)) % 4);
const base64 = (b64 + padding).replace(/-/g, '+').replace(/_/g, '/');
const raw = window.atob(base64); const out = new Uint8Array(raw.length);
for (let i = 0; i < raw.length; i++) out[i] = raw.charCodeAt(i);
return out;
}
async function currentSubscription() {
if (!pushSupported()) return null;
try { const reg = await navigator.serviceWorker.getRegistration(_config.swPath); return reg ? await reg.pushManager.getSubscription() : null; } catch { return null; }
}
async function pushStatus() {
const supported = pushSupported();
const sub = supported ? await currentSubscription() : null;
return { supported, permission: supported ? Notification.permission : 'unsupported', subscribed: !!sub };
}
async function enablePush() {
if (!pushSupported()) throw new Error('This browser does not support push notifications');
if (!hasSession()) throw new Error('Sign in first');
const perm = await Notification.requestPermission();
if (perm !== 'granted') throw new Error(perm === 'denied' ? 'Notifications are blocked for this site in your browser settings' : 'Permission not granted');
const reg = await navigator.serviceWorker.register(_config.swPath, { scope: '/' });
await navigator.serviceWorker.ready;
const { publicKey } = await apiJson('/api/push/vapid-key');
if (!publicKey) throw new Error('Push is not configured on the server');
let sub = await reg.pushManager.getSubscription();
if (!sub) sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlBase64ToUint8Array(publicKey) });
await apiJson('/api/push/subscribe', { method: 'POST', body: { subscription: { ...sub.toJSON(), userAgent: navigator.userAgent.slice(0, 200) } } });
try { localStorage.setItem('ov_push_enabled', '1'); } catch { /* */ }
return true;
}
async function disablePush() {
const sub = await currentSubscription();
if (sub) {
try { await apiJson('/api/push/unsubscribe', { method: 'POST', body: { endpoint: sub.endpoint } }); } catch { /* */ }
try { await sub.unsubscribe(); } catch { /* */ }
}
try { localStorage.removeItem('ov_push_enabled'); } catch { /* */ }
return true;
}
async function refreshPushButton(v) {
const btn = v && v.root.querySelector('[data-act="push"]');
if (!btn) return;
const st = await pushStatus();
if (!st.supported) { btn.style.display = 'none'; return; }
btn.style.display = '';
btn.classList.toggle('on', st.subscribed);
btn.innerHTML = st.subscribed ? `${svg(ICON.bellOn)}Push on` : `${svg(ICON.bellOff)}Enable push`;
btn.title = st.subscribed ? 'Push alerts are on for this device: select to turn off' : (st.permission === 'denied' ? 'Notifications are blocked in your browser settings' : 'Get alerts on this device even when the site is closed');
btn.disabled = st.permission === 'denied' && !st.subscribed;
}
async function togglePush(v) {
const note = v.root.querySelector('[data-role="note"]');
const say = (msg, ms = 4000) => { if (!note) return; note.textContent = msg; note.style.display = ''; clearTimeout(note._t); note._t = setTimeout(() => { note.style.display = 'none'; }, ms); };
try {
const st = await pushStatus();
if (st.subscribed) { await disablePush(); say('Push alerts are off for this device.'); }
else { await enablePush(); say('Push alerts are on: you\'ll get them here even when this site is closed.'); }
} catch (e) { say(e.message || 'Could not change push setting', 6000); }
for (const view of _views.values()) refreshPushButton(view);
}
// ── Public API ──────────────────────────────────────────
const OpenVibeNotifications = {
init(opts = {}) {
Object.assign(_config, opts);
_quietAt = 0; loadQuiet(); // quiet hours before the first notice can arrive
injectStyles();
if (opts.preferences) Object.assign(_preferences, opts.preferences);
channel();
startPolling();
startRealtime();
// If the user enabled push on this device before, make sure the worker is registered.
try { if (pushSupported() && localStorage.getItem('ov_push_enabled') === '1') navigator.serviceWorker.register(_config.swPath, { scope: '/' }).catch(() => {}); } catch { /* */ }
},
destroy() {
stopPolling();
stopRealtime();
_toastContainer?.remove(); _panelEl?.remove();
_toastContainer = null; if (_panelEl) _views.delete(_panelEl); _panelEl = null; _queue.length = 0;
},
/** What a tap on the bell does instead of its own panel: fn() returns true when it handled it (navbar.js: the Dock). */
setBellAction(fn) { _bellAction = typeof fn === 'function' ? fn : null; },
/** New messages, counted on the bell with the notifications (navbar.js): 0 takes them off. */
setMessages(count) { const prev = _msgs; _msgs = Math.max(0, Number(count) || 0); paintBell(_msgs > prev); },
/** How many notifications are unread (not counting messages). */
unread() { return _unreadCount; },
/** Create and inject the bell icon. Returns the DOM element. */
createBell(container) {
injectStyles();
const bell = createBellEl();
if (container && _config.actions !== false && !container.querySelector('.openvibe-actions-btn')) container.appendChild(createActionsEl());
if (container) container.appendChild(bell);
pollUnread();
return bell;
},
/** Open the Action Center (the ✦) from a site's own control. */
openActions(anchor) { injectStyles(); openActions(anchor || null); },
/** Full-page inbox (same list, filters, search, infinite scroll) rendered into a container. */
renderInbox(container, opts = {}) {
injectStyles();
if (!container) return null;
container.classList.add('openvibe-notif-inbox');
const v = buildView(container, { mode: 'inbox' });
if (opts.tab) { v.tab = opts.tab; container.querySelectorAll('[data-tab]').forEach(b => { b.classList.toggle('active', b.dataset.tab === opts.tab); b.setAttribute('aria-selected', String(b.dataset.tab === opts.tab)); }); }
reload(v);
return v;
},
/** The You tab's preview (4.211.0): the newest three, no tools; Show all opens the whole list in place. */
renderMenuNotifications(container, onCount) {
injectStyles();
if (!container) return null;
container.classList.add('openvibe-notif-dock', 'is-preview');
const v = buildView(container, { mode: 'dock' });
v.pageSize = 3; v.onCount = onCount;
reload(v);
return { showAll() { container.classList.remove('is-preview'); v.pageSize = PAGE_SIZE; reload(v); } };
},
unmountDock(container) {
const v = _views.get(container);
if (!v || v.mode !== 'dock') return;
if (v.destroy) v.destroy();
_views.delete(container);
container.classList.remove('openvibe-notif-dock');
},
/** Programmatically show a toast (real-time events). Marks nothing on the server. */
push(notification) {
showToast(notification);
playSound(notification.priority);
if (!notification.id) return;
setBadge(_unreadCount + 1);
},
/** Re-fetch the badge and any open lists (call after an in-page action). */
refresh() { pollUnread(); for (const v of _views.values()) reload(v); },
markRead(ids) { return markRead(Array.isArray(ids) ? ids : [ids]); },
markAllRead,
setPreferences(prefs) { Object.assign(_preferences, prefs); },
setToken(token) {
_config.token = token;
if (token || !isCrossOrigin()) { startPolling(); startRealtime(); } else { stopPolling(); stopRealtime(); setBadge(0, { quiet: true }); }
},
/** The realtime feed's state ({ state: 'off' | 'ticket' | 'connecting' | 'open' | 'backoff' | 'hidden' | 'blocked' | 'failed' | 'signed-out' | 'unavailable', … }), or null when off. */
realtimeState() { return _live ? _live.state() : null; },
/** How a notification reads (title, message, chips, tone, glyph, group key): the same for toasts and the list. */
present,
togglePanel, closePanel,
enablePush, disablePush, pushStatus,
get unreadCount() { return _unreadCount; },
};
if (typeof module !== 'undefined' && module.exports) module.exports = OpenVibeNotifications;
else root.OpenVibeNotifications = OpenVibeNotifications;
})(typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : this);