MediaWiki:Template:MainPageInfopush.js: Difference between revisions

From VRChat Wiki
No edit summary
No edit summary
Line 1: Line 1:
$(
$(
(function () {
(function () {
const visibleContentIds = [];
const visibleContent = new Map();
for (const infopush of document.querySelectorAll(".tpl-infopush")) {
for (const infopush of document.querySelectorAll(".tpl-infopush")) {
try {
try {
const entries = Object.entries(
JSON.parse(atob(infopush.dataset.entries))
);
const content = infopush.querySelector(".tpl-infopush-content");
const content = infopush.querySelector(".tpl-infopush-content");
 
const total = content.querySelectorAll("img").length;
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 navigation = infopush.querySelector(".tpl-infopush-navigation");
const action = navigation.querySelector(".tpl-infopush-action");


let currentOffset = 0;
let currentOffset = 0;
function showSlide(index) {
function showSlide(index) {
currentOffset = (index + visibleContentIds.length) % visibleContentIds.length;
currentOffset = (index + total) % total;
 
content.style.transform = `translateX(-${currentOffset * 100}%)`;
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");
}
}
}



Revision as of 01:04, 3 August 2024

$(
	(function () {
		for (const infopush of document.querySelectorAll(".tpl-infopush")) {
			try {
				const content = infopush.querySelector(".tpl-infopush-content");
				const total = content.querySelectorAll("img").length;
				
				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);
				}

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

				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
				);
			}
		}
	})()
);