refactor: auto-prompt for notification permission, drop OT alerts button
Browsers already gate Notification.requestPermission behind a native prompt, so a dedicated button was redundant UI clutter. Prompting on load (only when permission state is "default") keeps the flow and clears space in the banner for future notification types. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
+5
-24
@@ -394,29 +394,10 @@ function maybeNotifyOT(data) {
|
||||
if (changed) persistSeenOT(seen);
|
||||
}
|
||||
|
||||
function wireOTButton() {
|
||||
const btn = document.querySelector('.banner-notify');
|
||||
if (!btn) return;
|
||||
if (!('Notification' in window)) {
|
||||
btn.disabled = true;
|
||||
btn.title = 'Notifications not supported in this browser';
|
||||
return;
|
||||
}
|
||||
reflectOTPermission(btn);
|
||||
btn.addEventListener('click', async () => {
|
||||
if (Notification.permission === 'default') {
|
||||
await Notification.requestPermission();
|
||||
}
|
||||
reflectOTPermission(btn);
|
||||
});
|
||||
}
|
||||
|
||||
function reflectOTPermission(btn) {
|
||||
const state = Notification.permission;
|
||||
btn.dataset.perm = state;
|
||||
if (state === 'granted') btn.title = 'OT alerts enabled';
|
||||
else if (state === 'denied') btn.title = 'OT alerts blocked in browser settings';
|
||||
else btn.title = 'Enable OT alerts';
|
||||
function requestNotificationPermission() {
|
||||
if (!('Notification' in window)) return;
|
||||
if (Notification.permission !== 'default') return;
|
||||
Notification.requestPermission().catch(() => {});
|
||||
}
|
||||
|
||||
// ── Init ─────────────────────────────────────────────
|
||||
@@ -427,7 +408,7 @@ function autoRefresh() {
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
wireOTButton();
|
||||
requestNotificationPermission();
|
||||
autoRefresh();
|
||||
setInterval(tickClocks, 1000);
|
||||
if ('serviceWorker' in navigator) {
|
||||
|
||||
@@ -453,37 +453,6 @@ main {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.banner-notify {
|
||||
background: rgba(212, 175, 55, 0.08);
|
||||
border: 1px solid var(--cup-gold-dim);
|
||||
color: var(--cup-gold-2);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.45rem 0.7rem;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: background 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
|
||||
.banner-notify:hover {
|
||||
background: rgba(212, 175, 55, 0.18);
|
||||
border-color: var(--cup-gold-1);
|
||||
}
|
||||
|
||||
.banner-notify[data-perm="granted"] {
|
||||
background: rgba(212, 175, 55, 0.2);
|
||||
border-color: var(--cup-gold-1);
|
||||
color: var(--cup-gold-2);
|
||||
}
|
||||
|
||||
.banner-notify[data-perm="denied"] {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.playoff-banner {
|
||||
padding: 1.125rem 2rem;
|
||||
|
||||
Reference in New Issue
Block a user