MediaWiki:Common.js

const messageElement = document.createElement('div');
messageElement.style.display = 'flex';
messageElement.style.position = 'fixed';
messageElement.style.zIndex = '100';
messageElement.style.top = '50px';
messageElement.style.marginInline = '40px';
messageElement.style.justifyContent = 'center';
messageElement.style.backgroundColor = 'rgba(128, 2, 14, 0.8)';
messageElement.style.padding = '10px';
messageElement.style.border = '1px solid rgba(255, 0, 0, 0.4)';
messageElement.style.boxSizing = 'border-box';
messageElement.style.width = 'calc(100% - 80px)';
messageElement.style.borderRadius = '4px';
messageEelement.style.color = '#f1778e';
messageElement.style.boxShadow = '0 4px 10px rgba(0, 0, 0, 0.4)';
messageElement.style.backdropFilter = 'blur(1px)';
messageElement.innerText = 'Recipe templates may appear broken as the Wiki is currently undergoing updates';
document.body.appendChild(messageElement);

function overrideSourceEdit() {
	var sourceEdit = document.getElementById('ca-edit');
	if (sourceEdit) {
	 var url = sourceEdit.getAttribute('href');
	 sourceEdit.setAttribute('href', url.split('&section')[0]);
	}
}

function getDarkModePreference() {
	return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

function applyDarkMode() {
	var body = document.querySelector('body');
	if (getDarkModePreference()) {
		if (!body.classList.contains('dark-mode')) { body.classList.add('dark-mode'); }
		document.documentElement.setAttribute('theme', 'dark');
	} else {
		if (body.classList.contains('dark-mode')) { body.classList.remove('dark-mode'); }
    	document.documentElement.setAttribute('theme', 'light');
	}
}

function advanceInfoboxImage(infoboxImageRow, infoboxImageCount) {
	var transformStyle = infoboxImageRow.style.transform;
	var offset = 0;
	if (transformStyle) {
		var currentOffset = parseInt(transformStyle.replace('translateX(','').replace('%)',''));
		offset = (currentOffset <= (infoboxImageCount - 1) * -100) ? 0 : (currentOffset - 100);
	}
	infoboxImageRow.style.transform = 'translateX(' + offset + '%)';
}

function startInfoboxImageScroll() {
	var elements = document.getElementsByClassName('infobox-image-row');
	if (elements.length > 0) {
		for (var i = 0; i < elements.length; i++) {
			var infoboxImageRow = elements[i];
			var infoboxImageCount = infoboxImageRow.getElementsByClassName('image').length;
			if (infoboxImageCount > 1) {
				advanceInfoboxImage(infoboxImageRow, infoboxImageCount);
				setInterval(advanceInfoboxImage, 1500, infoboxImageRow, infoboxImageCount);
			}
		}
	}
	var body = document.querySelector('body');
	if (getDarkModePreference()) {
		if (!body.classList.contains('dark-mode')) { body.classList.add('dark-mode'); }
		document.documentElement.setAttribute('theme', 'dark');
	} else {
		if (body.classList.contains('dark-mode')) { body.classList.remove('dark-mode'); }
    	document.documentElement.setAttribute('theme', 'light');
	}
}

function advanceSequenceImage(rowContainer, imageRowCount, width) {
	var transformStyle = rowContainer.style.transform;
	var offset = 0;
	if (transformStyle) {
		var currentOffset = parseInt(transformStyle.replace('translateX(','').replace('px)',''));
		offset = (currentOffset <= (imageRowCount - 1) * -width) ? 0 : (currentOffset - width);
	}
	rowContainer.style.transform = 'translateX(' + offset + 'px)';
}

function startSequenceImageScroll() {
	var elements = document.getElementsByClassName('image-sequence');
	if (elements.length > 0) {
		for (var i = 0; i < elements.length; i++) {
			var element = elements[i];
			var styleAttribute = element.getAttribute('style');
			var rowContainer = element.querySelector('.image-sequence-group');

			var width = null;
			if (styleAttribute) {
				var widthStyle = styleAttribute.match(/width\s*:\s*([^;]+);?/i);
				if (widthStyle) {
					width = parseFloat(widthStyle[1].trim());
				}
			}

			if (width && rowContainer) {
				var imageRowCount = rowContainer.querySelectorAll(':scope > a').length;
				if (imageRowCount > 1) {
					advanceSequenceImage(rowContainer, imageRowCount, width);
					setInterval(advanceSequenceImage, 1500, rowContainer, imageRowCount, width);
				}
			}
		}
	}
}

// applyDarkMode();
overrideSourceEdit();
startInfoboxImageScroll();
startSequenceImageScroll();