mailwolt/resources/js/utils/events.js

277 lines
10 KiB
JavaScript

// import { showToast } from '../ui/toast.js'
// — Livewire-Hooks (global)
// document.addEventListener('livewire:init', () => {
// if (window.Livewire?.on) {
// window.Livewire.on('toast', (payload = {}) => showToast(payload))
// }
// })
document.addEventListener('livewire:init', () => {
// Neu: Livewire v3 Browser-Events
window.addEventListener('toast', (e) => {
const d = e?.detail || {};
showToastGlass(d);
});
// Optional: Update/Dismiss/Clear per Event
window.addEventListener('toast.update', (e) => {
const d = e?.detail || {};
if (d.id) window.toastraGlass?.update(d.id, d);
});
window.addEventListener('toast.clear', (e) => {
window.toastraGlass?.clear(e?.detail?.position);
});
});
// Adapter: normalisiert Payload und ruft toastraGlass
function showToastGlass({
id,
type, state, // "success" | "warning" | "error" ODER "done" | "failed" | "running"
text, message, title, // Textquellen
badge, domain,
position = 'bottom-right',
duration = 0, // 0 = stehen lassen; bei done/failed auto auf 6000ms
} = {}) {
// Map: type -> state
const t = (type || state || 'done').toLowerCase();
const map = { success: 'done', ok: 'done', error: 'failed', danger: 'failed', info: 'queued', warning: 'queued' };
const st = ['done','failed','running','queued'].includes(t) ? t : (map[t] || 'queued');
const msg = message || text || title || '';
const _id = id || ('toast-' + Date.now());
if (window.toastraGlass?.show) {
window.toastraGlass.show({
id: _id,
state: st, // queued|running|done|failed → färbt Badge/Icon
badge, // z.B. "DNS", "Signup"
domain, // optional: kleine Überschrift rechts
message: msg,
position,
duration, // 0 = stehen lassen; sonst ms
});
} else if (window.toastr) {
// Fallback: alte toastr API
const level = (type || (st === 'failed' ? 'error' : st === 'done' ? 'success' : 'info'));
window.toastr[level](msg, badge || domain || '');
} else {
// Minimal-Fallback
const box = document.createElement('div');
box.className = 'fixed top-4 right-4 z-[9999] rounded-xl bg-emerald-500/90 text-white px-4 py-3 backdrop-blur shadow-lg border border-white/10';
box.textContent = msg || 'OK';
document.body.appendChild(box);
setTimeout(() => box.remove(), 3500);
}
return _id;
}
// — Session-Flash vom Backend (einmal pro Page-Load)
function bootstrapFlashFromLayout() {
const el = document.getElementById('__flash')
if (!el) return
try {
const data = JSON.parse(el.textContent || '{}')
if (data?.toast) showToast(data.toast)
} catch {}
}
document.addEventListener('DOMContentLoaded', bootstrapFlashFromLayout)
// — Optional: Echo/WebSocket-Kanal für „Push-Toasts“
function setupEchoToasts() {
if (!window.Echo) return
// userId wird im Layout in das JSON injiziert (siehe unten)
const el = document.getElementById('__flash')
let uid = null
try { uid = JSON.parse(el?.textContent || '{}')?.userId ?? null } catch {}
if (!uid) return
window.Echo.private(`users.${uid}`)
.listen('.ToastPushed', (e) => {
// e: { type, text, title }
showToast(e)
})
}
document.addEventListener('DOMContentLoaded', setupEchoToasts)
// — Optional: global machen, falls du manuell aus JS/Blade rufen willst
// window.showToast = showToast
// document.addEventListener('livewire:init', () => {
// Livewire.on('toastra:show', (payload) => {
// // optionaler "mute" pro Nutzer lokal:
// if (localStorage.getItem('toast:hide:' + payload.id)) return;
//
// const id = window.toastraGlass.show({
// id: payload.id,
// state: payload.state, // queued|running|done|failed
// badge: payload.badge,
// domain: payload.domain,
// message: payload.message,
// position: payload.position || 'bottom-center',
// duration: payload.duration ?? 0,
// close: payload.close !== false,
// });
//
// // Wenn der User X klickt, markiere lokal als verborgen:
// window.addEventListener('toastra:closed:' + id, () => {
// localStorage.setItem('toast:hide:' + id, '1');
// }, { once: true });
// });
// });
// document.addEventListener('livewire:init', () => {
// Livewire.on('notify', (payload) => {
// const o = Array.isArray(payload) ? payload[0] : payload;
// window.toastraGlass?.show({
// id: o.id, state: o.state, badge: o.badge, domain: o.domain,
// message: o.message, position: o.position || 'bottom-right',
// duration: Number(o.duration ?? 0), close: o.close !== false,
// finalNote: (o.state === 'done' || o.state === 'failed')
// ? 'Diese Meldung verschwindet automatisch.' : ''
// });
// });
// });
// document.addEventListener('livewire:init', () => {
// Livewire.on('notify', (payload) => {
// // Livewire liefert das Event als Array mit einem Objekt
// const o = Array.isArray(payload) ? payload[0] : payload;
//
// // Ein Aufruf reicht: gleiche id => ersetzt bestehenden Toast
// window.toastraGlass?.show({
// id: o.id,
// state: o.state, // queued|running|done|failed
// badge: o.badge, // z.B. CERTBOT
// domain: o.domain, // z.B. mail.example.com
// message: o.message,
// position: o.position || 'bottom-right',
// duration: Number(o.duration ?? 0),
// close: o.close !== false,
// // optional kannst du finalNote je nach state setzen:
// finalNote: (o.state === 'done' || o.state === 'failed')
// ? 'Diese Meldung verschwindet automatisch.'
// : ''
// });
// });
// });
// document.addEventListener('livewire:init', () => {
// Livewire.on('notify', (payload) => {
// const e = Array.isArray(payload) ? payload[0] : payload;
//
// // e.state: 'queued'|'running'|'done'|'failed'
// window.toastraGlass.show({
// id: e.id || ('toast-'+Date.now()),
// state: e.state || 'queued',
// badge: e.badge || (e.type ? String(e.type).toUpperCase() : null),
// domain: e.domain || '',
// message: e.message ?? e.text ?? '',
// position: e.position || 'bottom-right',
// duration: typeof e.duration === 'number' ? e.duration : (['done','failed'].includes(e.state) ? 6000 : 0),
// close: e.close ?? true,
// finalNote: (['done','failed'].includes(e.state) ? 'Diese Meldung verschwindet nach Aktualisierung automatisch.' : '')
// });
// });
// });
// document.addEventListener('livewire:init', () => {
// Livewire.on('notify', (event) => {
// const p = Array.isArray(event) ? event[0] : event;
//
// window.toastraGlass.show({
// id: p.id || ('toast-'+Date.now()),
// state: (p.type || 'info'), // info|update|success|warning|error
// title: p.title || '',
// domain: p.domain || '',
// message: p.message ?? p.text ?? '',
// badge: p.badge || null,
// duration: (typeof p.duration === 'number' ? p.duration : 0), // 0 = bleibt
// position: p.position || 'bottom-center', // top-left|top-center|top-right|bottom-*
// close: (p.close ?? true),
// });
// });
// });
// document.addEventListener('livewire:init', () => {
// // 1) Events aus PHP/Livewire-Komponenten
// Livewire.on('notify', (payload) => {
// const e = payload[0] || payload;
// toastra.notify({
// id: e.id,
// badge: e.badge || null,
// replace: true,
// title: e.title,
// text: e.text,
// subtitle: e.subtitle || null,
// type: e.type,
// // classname: e.classname,
// duration: e.duration ?? 0,
// close: e.close ?? true,
// icon: e.icon || null,
// });
// });
//
// document.addEventListener('notify', (e) => {
// console.log(e.detail);
// });
// // 2) Reine Browser-Events (für Konsole/JS)
// // window.addEventListener('notify', (ev) => {
// // const e = ev.detail || {};
// // toastra.notify({
// // id: e.id, replace: true,
// // title: e.title, text: e.message,
// // type: e.type, duration: e.duration ?? 0,
// // close: e.close ?? true, icon: e.icon || null,
// // });
// // });
// });
//
// // document.addEventListener('notify', (e) => {
// // const d = e.detail;
// // toastra.notify({
// // id: d.id,
// // title: d.title,
// // text: d.text || d.message || '', // fallback
// // type: d.type,
// // duration: d.duration ?? 0,
// // close: d.close ?? true,
// // });
// // });
//
// // document.addEventListener('livewire:init', () => {
// // // Livewire.on('notify', (event) => {
// // // toastra.notify({
// // // title: event[0].title,
// // // text: event[0].message,
// // // type: event[0].type,
// // // duration: event[0].duration,
// // // close: event[0].close
// // // });
// // // });
// //
// // Livewire.on('notify', (payload) => {
// // const e = payload[0] || payload;
// // toastra.notify({
// // id: e.id,
// // replace: true,
// // title: e.title,
// // text: e.message,
// // type: e.type,
// // duration: e.duration ?? 0,
// // close: e.close ?? true,
// // icon: e.icon || null
// // });
// // });
// //
// // Livewire.on('notify-replace', (event) => {
// // const opts = event[0] || {};
// // const wrap = document.getElementById('notification');
// // if (wrap) wrap.innerHTML = '';
// // toastra.notify(opts);
// // });
// //
// // });