MediaWiki:Template:MainPageInfopush.js

$(
	(function () {
		const visibleContentIds = [];
		const visibleContent = new Map();
		
		for (const infopush of document.querySelectorAll(".tpl-infopush")) {
			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) {
					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)
		}
	})()
);