MediaWiki:Template:MainPageInfopush.js

From VRChat Wiki
Revision as of 00:50, 19 August 2024 by Arie² (talk | contribs)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
$(
	(async function () {
			for (const infopush of document.querySelectorAll(".tpl-infopush")) {
				try {
					const content = infopush.querySelector(".tpl-infopush-content");

					const items = content.querySelectorAll(".tpl-infopush-item");
					const total = items.length;

					for (const item of items) {
						const { articleId } = item.dataset;
						if (!articleId) return;

						item.addEventListener("click", () => console.log("showArticle(item)"));
					}

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

					let currentOffset = 0;
					function showSlide(index) {
						currentOffset = (index + total) % total;
						content.style.transform = `translateX(-${currentOffset * 100}%)`;
					}

					const autoAdvanceEvery = 5000;

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

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

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

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