U:54212577/notification.js

"use strict";
(() => {
	mw.loader.using("mediawiki.api");
	const api = new mw.Api();
	if (Notification.permission !== "denied") Notification.requestPermission();
	window.addEventListener("storage", e => {
		if (e.key !== "notified") return;
		if (e.newValue) localStorage.setItem("notified", e.newValue);
		else localStorage.removeItem("notified");
	});
	const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
	Object.entries({
		viewBox: "0 0 24 24",
		width: "24",
		height: "24",
		fill: "none",
		stroke: "currentColor",
		"stroke-width": "2",
		"stroke-linecap": "round",
		"stroke-linejoin": "round",
	}).forEach(([k, v]) => svg.setAttribute(k, v));
	svg.style.color =
		getComputedStyle(document.body).getPropertyValue(
			"--theme-button-color"
		) || "#25B449";
	const main = () =>
		api
			.get({
				action: "query",
				meta: "notifications",
				formatversion: 2,
				notfilter: "!read",
				notprop: "list",
				notformat: "model",
				notlimit: "max",
			})
			.done(d => {
				let notified = new Set(
					localStorage.getItem("notified")?.split(",")
				);
				if (d.query.notifications.list.length) {
					for (
						let i = 0;
						i < d.query.notifications.list.length;
						i++
					) {
						const n = d.query.notifications.list[i];
						if (notified.has(n.id.toString())) continue;
						notified.add(n.id);
						const title = document.createElement("p");
						title.innerHTML = n["*"].compactHeader;
						const _svg = svg.cloneNode(false);
						switch (n.type) {
							case "mention":
								_svg.innerHTML =
									'<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path><path d="M16 12v1.5a2.5 2.5 0 0 0 5 0v-1.5a9 9 0 1 0 -5.5 8.28"></path>';
								break;
							case "page-linked":
								_svg.innerHTML =
									'<path d="M9 15l6 -6"></path><path d="M11 6l.463 -.536a5 5 0 0 1 7.072 0a4.993 4.993 0 0 1 -.001 7.072"></path><path d="M12.603 18.534a5.07 5.07 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path><path d="M16 19h6"></path><path d="M19 16v6"></path>';
								break;
							case "edit-user-talk":
								_svg.innerHTML =
									'<path d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12z"></path><path d="M11 8l-3 3l3 3"></path><path d="M16 11h-8"></path>';
								break;
							case "user-rights":
								_svg.innerHTML =
									'<path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path><path d="M6 21v-2a4 4 0 0 1 4 -4h2.5"></path><path d="M19.001 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path><path d="M19.001 15.5v1.5"></path><path d="M19.001 21v1.5"></path><path d="M22.032 17.25l-1.299 .75"></path><path d="M17.27 20l-1.3 .75"></path><path d="M15.97 17.25l1.3 .75"></path><path d="M20.733 20l1.3 .75"></path>';
								break;
							case "edit-thank":
							default:
								_svg.innerHTML =
									'<path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4"></path><path d="M12 11l0 .01"></path><path d="M8 11l0 .01"></path><path d="M16 11l0 .01"></path>';
								break;
						}
						new Notification(title.innerText, {
							body: n["*"].body,
							icon: `data:image/svg+xml;base64,${window.btoa(
								new XMLSerializer().serializeToString(_svg)
							)}`,
						});
					}
					localStorage.setItem("notified", [...notified]);
				} else localStorage.removeItem("notified");
			});
	if (window.requestIdleCallback)
		setInterval(() => requestIdleCallback(main), 300000);
	else setInterval(main, 300000);
})();