MediaWiki:Common.js - Revision history

Dweller at 00:37, 29 March 2026

2026-03-29T00:37:13Z

← Older revision		Revision as of 19:37, 28 March 2026
Line 34:		Line 34:
	// });		// });

	~~let~~ isDragging = ~~false~~;		carousel.addEventListener('mousedown', (e) => {
	~~let~~ startX;		isDragging = true;
	~~let scrollStart~~;		carousel.classList.add('dragging');
	~~let movedEnough = false~~;		startX = e.pageX - carousel.offsetLeft;
			scrollLeft = carousel.scrollLeft;
			// Prevent default behavior to avoid triggering link during drag start
			e.preventDefault();
			});

	~~carousel~~.addEventListener(~~"pointerdown"~~, ~~function~~ (e) {		document.addEventListener('mouseup', () => {
	isDragging ~~= true;~~		isDragging = false;
	~~movedEnough~~ = false;		carousel.classList.remove('dragging');
	carousel.classList.~~add~~("dragging~~");~~
	~~startX = e.pageX;~~
	~~scrollStart = carousel.scrollLeft;~~
	~~carousel.setPointerCapture(e.pointerId);~~
	~~e.preventDefault(~~);
	});		});

	carousel.addEventListener(~~"pointermove"~~, ~~function~~ (e) {		carousel.addEventListener('mousemove', (e) => {
	if (!isDragging) return;		if (!isDragging) return;
	~~const x = e.pageX;~~
	~~const walk = (x - startX) * 0.75;~~
	~~if (Math.abs(walk) > 5) movedEnough = true;~~
	~~carousel.scrollLeft = scrollStart - walk;~~
	e.preventDefault();		e.preventDefault();
			const x = e.pageX - carousel.offsetLeft;
			const walk = (x - startX); // The distance moved
			carousel.scrollLeft = scrollLeft - walk;
	});		});

	~~const endDrag = () => {~~
	~~isDragging = false;~~
	~~carousel.classList.remove("dragging");~~
	};

	carousel.addEventListener("pointerup", endDrag);		// let isDragging = false;
	carousel.addEventListener("pointerleave", endDrag);		// let startX;
			// let scrollStart;
			// let movedEnough = false;

			// carousel.addEventListener("pointerdown", function (e) {
			// isDragging = true;
			// movedEnough = false;
			// carousel.classList.add("dragging");
			// startX = e.pageX;
			// scrollStart = carousel.scrollLeft;
			// carousel.setPointerCapture(e.pointerId);
			// e.preventDefault();
			// });

			// carousel.addEventListener("pointermove", function (e) {
			// if (!isDragging) return;
			// const x = e.pageX;
			// const walk = (x - startX) * 0.75;
			// if (Math.abs(walk) > 5) movedEnough = true;
			// carousel.scrollLeft = scrollStart - walk;
			// e.preventDefault();
			// });

			// const endDrag = () => {
			// isDragging = false;
			// carousel.classList.remove("dragging");
			// };

			// carousel.addEventListener("pointerup", endDrag);
			// carousel.addEventListener("pointerleave", endDrag);

	// Block clicks if drag occurred		// // Block clicks if drag occurred
	carousel.addEventListener("click", function (e) {		// carousel.addEventListener("click", function (e) {
	if (movedEnough) {		// if (movedEnough) {
	e.preventDefault();		// e.preventDefault();
	e.stopImmediatePropagation();		// e.stopImmediatePropagation();
	}		// }
	}, true); // useCapture = true		// }, true); // useCapture = true

	// Solution: Prevent the click if a drag occurred		// Solution: Prevent the click if a drag occurred

Dweller at 00:31, 29 March 2026

2026-03-29T00:31:50Z

← Older revision		Revision as of 19:31, 28 March 2026
Line 5:		Line 5:
	$(function () {		$(function () {
	const carousels = document.querySelectorAll('.card-carousel');		const carousels = document.querySelectorAll('.card-carousel');
	~~const links = carousels.querySelectorAll('a');~~

	// let isDragging = false;		// let isDragging = false;
Line 11:		Line 11:

	carousels.forEach((carousel) => {		carousels.forEach((carousel) => {
			const links = carousel.querySelectorAll('a');
	// carousel.addEventListener('mousedown', (e) => {		// carousel.addEventListener('mousedown', (e) => {
	// isDragging = true;		// isDragging = true;
Line 72:		Line 73:
	}		}
	}, true); // useCapture = true		}, true); // useCapture = true

			// Solution: Prevent the click if a drag occurred
			links.forEach(link => {
			link.addEventListener('click', (e) => {
			// If we were dragging, prevent the link from being clicked
			if (isDragging) {
			e.preventDefault();
			}
			});
			});
	});		});

	~~// Solution: Prevent the click if a drag occurred~~
	~~links.forEach(link => {~~
	~~link.addEventListener('click', (e) => {~~
	~~// If we were dragging, prevent the link from being clicked~~
	~~if (isDragging) {~~
	~~e.preventDefault();~~
	}
	~~});~~
	~~});~~
	});		});
	});		});

Dweller at 00:24, 29 March 2026

2026-03-29T00:24:38Z

← Older revision		Revision as of 19:24, 28 March 2026
Line 5:		Line 5:
	$(function () {		$(function () {
	const carousels = document.querySelectorAll('.card-carousel');		const carousels = document.querySelectorAll('.card-carousel');
	const links = ~~carousel~~.querySelectorAll('a');		const links = carousels.querySelectorAll('a');

	// let isDragging = false;		// let isDragging = false;

Dweller: Undo revision 944 by Dweller (talk)

2026-03-29T00:21:24Z

Undo revision 944 by Dweller (talk)

← Older revision		Revision as of 19:21, 28 March 2026
Line 38:		Line 38:
	let movedEnough = false;		let movedEnough = false;

	carousel.addEventListener("pointerdown", function (e) {		carousel.addEventListener("pointerdown", function (e) {
	~~// Skip custom drag if user is clicking on the scrollbar~~		isDragging = true;
	~~const isScrollbarClick = (~~		movedEnough = false;
	~~e.offsetY > carousel.clientHeight \|\|~~		carousel.classList.add("dragging");
	~~e.offsetY < 0~~		startX = e.pageX;
	);		scrollStart = carousel.scrollLeft;
	~~if (isScrollbarClick) return;~~		carousel.setPointerCapture(e.pointerId);
			e.preventDefault();
	isDragging = true;		});
	movedEnough = false;
	carousel.classList.add("dragging");
	startX = e.pageX;
	scrollStart = carousel.scrollLeft;
	carousel.setPointerCapture(e.pointerId);
	e.preventDefault();
	});

	carousel.addEventListener("pointermove", function (e) {		carousel.addEventListener("pointermove", function (e) {

Dweller at 00:19, 29 March 2026

2026-03-29T00:19:33Z

← Older revision		Revision as of 19:19, 28 March 2026
Line 4:		Line 4:
	mw.loader.using('jquery', function () {		mw.loader.using('jquery', function () {
	$(function () {		$(function () {
	// const carousels = document.querySelectorAll('.card-carousel');		const carousels = document.querySelectorAll('.card-carousel');
	// const links = carousel.querySelectorAll('a');		const links = carousel.querySelectorAll('a');

	// let isDragging = false;		// let isDragging = false;
	// let startX, scrollLeft;		// let startX, scrollLeft;

	// carousels.forEach((carousel) => {		carousels.forEach((carousel) => {
	// carousel.addEventListener('mousedown', (e) => {		// carousel.addEventListener('mousedown', (e) => {
	// isDragging = true;		// isDragging = true;
Line 79:		Line 79:
	}		}
	}, true); // useCapture = true		}, true); // useCapture = true
	// });		});

	// Solution: Prevent the click if a drag occurred		// Solution: Prevent the click if a drag occurred

Dweller at 00:18, 29 March 2026

2026-03-29T00:18:42Z

← Older revision		Revision as of 19:18, 28 March 2026
Line 4:		Line 4:
	mw.loader.using('jquery', function () {		mw.loader.using('jquery', function () {
	$(function () {		$(function () {
	const carousels = document.querySelectorAll('.card-carousel');		// const carousels = document.querySelectorAll('.card-carousel');
	const links = carousel.querySelectorAll('a');		// const links = carousel.querySelectorAll('a');

			// let isDragging = false;
			// let startX, scrollLeft;

			// carousels.forEach((carousel) => {
			// carousel.addEventListener('mousedown', (e) => {
			// isDragging = true;
			// carousel.classList.add('dragging');
			// startX = e.pageX - carousel.offsetLeft;
			// scrollLeft = carousel.scrollLeft;
			// // Prevent default behavior to avoid triggering link during drag start
			// e.preventDefault();
			// });

	~~carousels.forEach((carousel) => {~~		// document.addEventListener('mouseup', () => {
	~~carousel~~.addEventListener('~~mousedown~~', (e) => {		// isDragging = false;
	isDragging = ~~true~~;		// carousel.classList.remove('dragging');
	carousel.classList.~~add~~('dragging');		// });
	~~startX = e.pageX - carousel.offsetLeft;~~
	~~scrollLeft = carousel.scrollLeft;~~
	// ~~Prevent default behavior to avoid triggering link during drag start~~
	~~e.preventDefault();~~
	});

	~~document~~.addEventListener('~~mouseup~~', () => {		// carousel.addEventListener('mousemove', (e) => {
	isDragging ~~= false~~;		// if (!isDragging) return;
	carousel.~~classList.remove~~(~~'dragging'~~);		// e.preventDefault();
	});		// const x = e.pageX - carousel.offsetLeft;
			// const walk = (x - startX); // The distance moved
			// carousel.scrollLeft = scrollLeft - walk;
			// });

	~~carousel.addEventListener('mousemove', (e) => {~~		let isDragging = false;
	~~if (!~~isDragging~~) return~~;		let startX;
	~~e.preventDefault();~~		let scrollStart;
	~~const x = e.pageX - carousel.offsetLeft~~;		let movedEnough = false;
	~~const walk = (x - startX)~~; ~~// The distance moved~~
	~~carousel.scrollLeft~~ = ~~scrollLeft - walk;~~
	});

	~~// let isDragging = false;~~		carousel.addEventListener("pointerdown", function (e) {
	~~// let startX;~~		// Skip custom drag if user is clicking on the scrollbar
	~~// let scrollStart;~~		const isScrollbarClick = (
	~~// let movedEnough = false;~~		e.offsetY > carousel.clientHeight \|\|
			e.offsetY < 0
	// carousel.addEventListener("pointerdown", function (e) {		);
	// // Skip custom drag if user is clicking on the scrollbar		if (isScrollbarClick) return;
	// const isScrollbarClick = (
	// e.offsetY > carousel.clientHeight \|\|
	// e.offsetY < 0
	// );
	// if (isScrollbarClick) return;

	// isDragging = true;		isDragging = true;
	// movedEnough = false;		movedEnough = false;
	// carousel.classList.add("dragging");		carousel.classList.add("dragging");
	// startX = e.pageX;		startX = e.pageX;
	// scrollStart = carousel.scrollLeft;		scrollStart = carousel.scrollLeft;
	// carousel.setPointerCapture(e.pointerId);		carousel.setPointerCapture(e.pointerId);
	// e.preventDefault();		e.preventDefault();
	// });		});

	// carousel.addEventListener("pointermove", function (e) {		carousel.addEventListener("pointermove", function (e) {
	// if (!isDragging) return;		if (!isDragging) return;
	// const x = e.pageX;		const x = e.pageX;
	// const walk = (x - startX) * 0.75;		const walk = (x - startX) * 0.75;
	// if (Math.abs(walk) > 5) movedEnough = true;		if (Math.abs(walk) > 5) movedEnough = true;
	// carousel.scrollLeft = scrollStart - walk;		carousel.scrollLeft = scrollStart - walk;
	// e.preventDefault();		e.preventDefault();
	// });		});

	// const endDrag = () => {		const endDrag = () => {
	// isDragging = false;		isDragging = false;
	// carousel.classList.remove("dragging");		carousel.classList.remove("dragging");
	// };		};

	// carousel.addEventListener("pointerup", endDrag);		carousel.addEventListener("pointerup", endDrag);
	// carousel.addEventListener("pointerleave", endDrag);		carousel.addEventListener("pointerleave", endDrag);

	// // Block clicks if drag occurred		// Block clicks if drag occurred
	// carousel.addEventListener("click", function (e) {		carousel.addEventListener("click", function (e) {
	// if (movedEnough) {		if (movedEnough) {
	// e.preventDefault();		e.preventDefault();
	// e.stopImmediatePropagation();		e.stopImmediatePropagation();
	// }		}
	// }, true); // useCapture = true		}, true); // useCapture = true
	});		// });

	// Solution: Prevent the click if a drag occurred		// Solution: Prevent the click if a drag occurred

Dweller at 00:14, 29 March 2026

2026-03-29T00:14:58Z

@@ Line 7: / Line 7: @@
      const links = carousel.querySelectorAll('a');
      carousels.forEach((carousel) => {
@@ Line 88: / Line 78: @@
      //     }
      //   }, true); // useCapture = true
      });
    });
 });

Dweller at 00:12, 29 March 2026

2026-03-29T00:12:09Z

← Older revision		Revision as of 19:12, 28 March 2026
Line 5:		Line 5:
	$(function () {		$(function () {
	const carousels = document.querySelectorAll('.card-carousel');		const carousels = document.querySelectorAll('.card-carousel');
			const links = carousel.querySelectorAll('a');

			// Solution: Prevent the click if a drag occurred
			links.forEach(link => {
			link.addEventListener('click', (e) => {
			// If we were dragging, prevent the link from being clicked
			if (isDragging) {
			e.preventDefault();
			}
			});
			});



	carousels.forEach((carousel) => {		carousels.forEach((carousel) => {
	~~let~~ isDragging = ~~false~~;		carousel.addEventListener('mousedown', (e) => {
	~~let~~ startX;		isDragging = true;
	~~let scrollStart~~;		carousel.classList.add('dragging');
	~~let movedEnough = false~~;		startX = e.pageX - carousel.offsetLeft;
			scrollLeft = carousel.scrollLeft;
			// Prevent default behavior to avoid triggering link during drag start
			e.preventDefault();
			});

	carousel.addEventListener("pointerdown", function (e) {		document.addEventListener('mouseup', () => {
	// Skip custom drag if user is clicking on the scrollbar		isDragging = false;
	const isScrollbarClick = (		carousel.classList.remove('dragging');
	e.offsetY > carousel.clientHeight \|\|		});
	e.offsetY < 0
	);		carousel.addEventListener('mousemove', (e) => {
	if (isScrollbarClick) return;		if (!isDragging) return;
			e.preventDefault();
			const x = e.pageX - carousel.offsetLeft;
			const walk = (x - startX); // The distance moved
			carousel.scrollLeft = scrollLeft - walk;
			});

			// let isDragging = false;
			// let startX;
			// let scrollStart;
			// let movedEnough = false;

			// carousel.addEventListener("pointerdown", function (e) {
			// // Skip custom drag if user is clicking on the scrollbar
			// const isScrollbarClick = (
			// e.offsetY > carousel.clientHeight \|\|
			// e.offsetY < 0
			// );
			// if (isScrollbarClick) return;

	isDragging = true;		// isDragging = true;
	movedEnough = false;		// movedEnough = false;
	carousel.classList.add("dragging");		// carousel.classList.add("dragging");
	startX = e.pageX;		// startX = e.pageX;
	scrollStart = carousel.scrollLeft;		// scrollStart = carousel.scrollLeft;
	carousel.setPointerCapture(e.pointerId);		// carousel.setPointerCapture(e.pointerId);
	e.preventDefault();		// e.preventDefault();
	});		// });

	carousel.addEventListener("pointermove", function (e) {		// carousel.addEventListener("pointermove", function (e) {
	if (!isDragging) return;		// if (!isDragging) return;
	const x = e.pageX;		// const x = e.pageX;
	const walk = (x - startX) * 0.75;		// const walk = (x - startX) * 0.75;
	if (Math.abs(walk) > 5) movedEnough = true;		// if (Math.abs(walk) > 5) movedEnough = true;
	carousel.scrollLeft = scrollStart - walk;		// carousel.scrollLeft = scrollStart - walk;
	e.preventDefault();		// e.preventDefault();
	});		// });

	const endDrag = () => {		// const endDrag = () => {
	isDragging = false;		// isDragging = false;
	carousel.classList.remove("dragging");		// carousel.classList.remove("dragging");
	};		// };

	carousel.addEventListener("pointerup", endDrag);		// carousel.addEventListener("pointerup", endDrag);
	carousel.addEventListener("pointerleave", endDrag);		// carousel.addEventListener("pointerleave", endDrag);

	// Block clicks if drag occurred		// // Block clicks if drag occurred
	carousel.addEventListener("click", function (e) {		// carousel.addEventListener("click", function (e) {
	if (movedEnough) {		// if (movedEnough) {
	e.preventDefault();		// e.preventDefault();
	e.stopImmediatePropagation();		// e.stopImmediatePropagation();
	}		// }
	}, true); // useCapture = true		// }, true); // useCapture = true
	});		});
	});		});
	});		});

Dweller at 21:05, 30 May 2025

2025-05-30T21:05:24Z

← Older revision		Revision as of 16:05, 30 May 2025
Line 12:		Line 12:
	let movedEnough = false;		let movedEnough = false;

	carousel.addEventListener("pointerdown", function (e) {		carousel.addEventListener("pointerdown", function (e) {
	isDragging = true;		// Skip custom drag if user is clicking on the scrollbar
	movedEnough = false;		const isScrollbarClick = (
	carousel.classList.add("dragging");		e.offsetY > carousel.clientHeight \|\|
	startX = e.pageX;		e.offsetY < 0
	scrollStart = carousel.scrollLeft;		);
	carousel.setPointerCapture(e.pointerId);		if (isScrollbarClick) return;
	e.preventDefault();
	});		isDragging = true;
			movedEnough = false;
			carousel.classList.add("dragging");
			startX = e.pageX;
			scrollStart = carousel.scrollLeft;
			carousel.setPointerCapture(e.pointerId);
			e.preventDefault();
			});

	carousel.addEventListener("pointermove", function (e) {		carousel.addEventListener("pointermove", function (e) {

Dweller at 20:55, 30 May 2025

2025-05-30T20:55:42Z

← Older revision		Revision as of 15:55, 30 May 2025
Line 4:		Line 4:
	mw.loader.using('jquery', function () {		mw.loader.using('jquery', function () {
	$(function () {		$(function () {
	const ~~carousel~~ = document.~~querySelector~~('.card-carousel');		const carousels = document.querySelectorAll('.card-carousel');
	~~if (!carousel) return~~;

	let isDragging = false;		carousels.forEach((carousel) => {
	let startX;		let isDragging = false;
	let scrollStart;		let startX;
	let movedEnough = false;		let scrollStart;
			let movedEnough = false;

	carousel.addEventListener("pointerdown", function (e) {		carousel.addEventListener("pointerdown", function (e) {
	isDragging = true;		isDragging = true;
	movedEnough = false;		movedEnough = false;
	carousel.classList.add("dragging");		carousel.classList.add("dragging");
	startX = e.pageX;		startX = e.pageX;
	scrollStart = carousel.scrollLeft;		scrollStart = carousel.scrollLeft;
	carousel.setPointerCapture(e.pointerId);		carousel.setPointerCapture(e.pointerId);
	e.preventDefault();		e.preventDefault();
	});		});

			carousel.addEventListener("pointermove", function (e) {
			if (!isDragging) return;
			const x = e.pageX;
			const walk = (x - startX) * 0.75;
			if (Math.abs(walk) > 5) movedEnough = true;
			carousel.scrollLeft = scrollStart - walk;
			e.preventDefault();
			});

	~~carousel.addEventListener("pointermove", function (e) {~~		const endDrag = () => {
	~~if (!isDragging) return;~~		isDragging = false;
	~~const x = e.pageX;~~		carousel.classList.remove("dragging");
	const ~~walk~~ = (~~x - startX~~) * 1;		};
	~~if (Math.abs(walk) > 5) movedEnough~~ = ~~true~~;
	carousel.~~scrollLeft = scrollStart - walk;~~
	e.~~preventDefault~~();
	});

	carousel.addEventListener("pointerup", ~~function (~~) {		carousel.addEventListener("pointerup", endDrag);
	~~isDragging = false~~;		carousel.addEventListener("pointerleave", endDrag);
	carousel.~~classList.remove~~("~~dragging~~");
	});

	carousel.addEventListener("~~pointerleave~~", function () {		// Block clicks if drag occurred
	~~isDragging = false~~;		carousel.addEventListener("click", function (e) {
	~~carousel.classList~~.~~remove~~(~~"dragging"~~);		if (movedEnough) {
			e.preventDefault();
			e.stopImmediatePropagation();
			}
			}, true); // useCapture = true
	});		});

	~~// Block link clicks if a drag occurred~~
	~~carousel.addEventListener("click", function (e) {~~
	~~if (movedEnough) {~~
	~~e.preventDefault();~~
	~~e.stopImmediatePropagation();~~
	}
	~~}, true); // capture phase~~
	});		});
	});		});