Add editable follow alert starter

2026-10-25 05:52:51 +01:00
parent 6792544c16
commit 7df188b3fd
1 changed files with 3 additions and 3 deletions
@@ -979,9 +979,9 @@
    selectedOverlayId = '';
    overlayName = 'New Overlay';
    overlaySlug = `overlay-${Date.now()}`;
-    overlayHtml = '<div class="alert">Hello ${username}</div>';
-    overlayCss = '.alert { color: white; font: 32px sans-serif; }';
-    overlayJavascript = '';
+    overlayHtml = '<div id="trixie-follow-alert" class="alert" role="status" aria-live="polite"><span id="trixie-follow-name"></span> followed!</div>';
+    overlayCss = '.alert { opacity: 0; transform: translateY(12px); transition: opacity 180ms ease, transform 180ms ease; color: white; font: 700 32px sans-serif; padding: 18px 24px; border-radius: 8px; background: rgba(25, 18, 40, 0.92); } .alert.visible { opacity: 1; transform: translateY(0); }';
+    overlayJavascript = "const alertBox = document.getElementById('trixie-follow-alert'); const alertName = document.getElementById('trixie-follow-name'); window.addEventListener('trixie-alert', (event) => { const detail = event.detail || {}; const payload = detail.payload || {}; if (detail.event_type !== 'follow') return; alertName.textContent = String(payload.user_name || payload.user_login || 'Someone'); alertBox.classList.add('visible'); clearTimeout(window.trixieAlertTimer); window.trixieAlertTimer = setTimeout(() => alertBox.classList.remove('visible'), 6000); });";
    overlayEnabled = true;
    overlayDisabledDesign = 'transparent';
  }