MediaWiki:Template:MainPageInfopush.js

$(
	(function () {
		const visibleContentIds = [];
		const visibleContent = new Map();

		for (const infopush of document.querySelectorAll(".tpl-infopush")) {
			try {
				const entries = Object.entries(
					JSON.parse(atob(infopush.dataset.entries))
				);
				const content = infopush.querySelector(".tpl-infopush-content");

				entries.map(([id, value], index) => {
					const { image: imageUrl, url } = value;

					const image = document.createElement("img");

					image.dataset.id = id;
					image.src = imageUrl;
					image.style.width = "100%";
					image.style.flexShrink = "0";

					content.append(image);

					visibleContentIds.push(id);
					visibleContent.set(id, value);
				});

				const navigation = infopush.querySelector(".tpl-infopush-navigation");

				const action = navigation.querySelector(".tpl-infopush-action");

				let currentOffset = 0;
				function showSlide(index) {
					if (index < 0) {
						currentOffset = content.children.length - 1;
					} else if (index >= content.children.length - 1) {
						currentOffset = 0;
					}

					content.style.transform = `translateX(-${currentOffset * 100}%)`;
					action.classList.add("tpl-infopush-action-none");

					const { url } = visibleContent.get(visibleContentIds[currentOffset]);
					if (url) {
						action.classList.remove("tpl-infopush-action-none");
					}
				}

				const autoAdvanceEvery = 5000;

				let autoAdvanceInterval;
				function resetAutoAdvance() {
					if (autoAdvanceInterval) clearInterval(autoAdvanceInterval);
					autoAdvanceInterval = setInterval(function () {
						showSlide(currentOffset++);
					}, autoAdvanceEvery);
				}

				action.addEventListener("click", () => {
					const { url } = visibleContent.get(visibleContentIds[currentOffset]);
					if (url) open(url);
				});

				navigation
					.querySelector(".tpl-infopush-navigation-previous")
					.addEventListener("click", () => {
						showSlide(currentOffset--);
						resetAutoAdvance();
					});

				navigation
					.querySelector(".tpl-infopush-navigation-next")
					.addEventListener("click", () => {
						showSlide(currentOffset++);
						resetAutoAdvance();
					});

				resetAutoAdvance();
				showSlide(0);
			} catch (reason) {
				console.warn(
					"Template:MainPageInfopush",
					"Couldn't initialize infopush.",
					reason
				);
			}
		}
	})()
);