Jump to content

User:Daniel Quinlan/Scripts/FilterDiff.js

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
'use strict';

mw.loader.using(['mediawiki.util']).then(function () {
	if (mw.config.get('wgCanonicalSpecialPageName') != "AbuseFilter")
		return;
	const page = mw.config.get('wgPageName');
	const diffMatch = page.match(/\/history\/\d+\/diff\/\w+\/\w+/);
	if (!diffMatch)
		return;

	const context = 3;
	let displayFullContext = false;

	mw.loader.addStyleTag(`
		table.wikitable .diff-toggle-button-wrapper {
			position: relative;
		}
		table.wikitable .diff-toggle-button {
			position: absolute;
			right: 0em;
			top: 50%;
			transform: translateY(-50%);
			background: transparent;
			border: none;
			color: var(--color-subtle, gray);
			display: flex;
			padding: 0px;
			cursor: pointer;
		}
		table.wikitable .diff-toggle-button:hover,
		table.wikitable .diff-toggle-button:focus-visible {
			color: var(--color-base--hover, gray);
		}
		table.wikitable tr:not(.mw-abusefilter-diff-header) > th:first-child {
			display: none;
		}
		.diff col.diff-line-number { width: 3.5%; }
		.diff col.diff-marker { width: 1.5%; }
		.diff col.diff-content { width: 45%; }
		.diff td.diff-line-number { position: relative; }
		.diff td.diff-line-number::after {
			content: attr(data-line-number);
			position: absolute;
			right: 0.3em;
			top: 50%;
			transform: translateY(-50%);
			font-size: smaller;
			font-family: monospace;
			color: gray;
		}
		.diff td.diff-marker { font-size: 1em; }
		.diff:not(.diff-full-context) .context-separator-above td {
			border-bottom: 3px dotted var(--border-color-disabled, gray);
		}
		.diff:not(.diff-full-context) .context-separator-below td {
			border-top: 3px dotted var(--border-color-disabled, gray);
		}
		.diff:not(.diff-full-context) tr.context-distant { display: none; }
	`);

	function processDiffTable(diffTable, lineNumbering) {
		const rows = diffTable.querySelectorAll('tr');
		const types = [];

		// add columns
		const colgroup = diffTable.querySelector('colgroup');
		if (colgroup) {
			const markerCol = colgroup.querySelector('.diff-marker');
			const contentCol = colgroup.querySelector('.diff-content');
			if (markerCol) {
				const newCol = document.createElement('col');
				newCol.className = 'diff-line-number';
				colgroup.insertBefore(newCol, markerCol);
			}
			if (contentCol) {
				const newCol = document.createElement('col');
				newCol.className = 'diff-line-number';
				contentCol.after(newCol);
			}
		}

		// line numbering
		let lineNumberDeleted = 0;
		let lineNumberAdded = 0;

		for (const row of rows) {
			// add first line number as first column
			const tdDel = document.createElement('td');
			tdDel.className = 'diff-line-number';
			row.insertBefore(tdDel, row.firstChild);
			// add second line number as fourth column
			const tdAdd = document.createElement('td');
			let colCount = 0;
			for (const td of row.querySelectorAll('td')) {
				const colspan = parseInt(td.getAttribute('colspan') || '1', 10);
				colCount += colspan;
				if (colCount >= 3) {
					tdAdd.className = 'diff-line-number';
					td.after(tdAdd);
					break;
				}
			}

			// add line number attributes
			if (lineNumbering) {
				const deleted = row.querySelector('.diff-side-deleted');
				const added = row.querySelector('.diff-side-added');
				if (deleted && deleted.children.length > 0)
					tdDel.setAttribute('data-line-number', ++lineNumberDeleted);
				if (added && added.children.length > 0)
					tdAdd.setAttribute('data-line-number', ++lineNumberAdded);
			}

			// classify row
			let type = 'other';
			const sides = row.querySelectorAll('td.diff-side-deleted, td.diff-side-added');
			if (sides.length === 2) {
				const oldCell = sides[0];
				const newCell = sides[1];
				const oldExists = oldCell.children.length > 0;
				const newExists = newCell.children.length > 0;
				if (oldExists && newExists && oldCell.textContent === newCell.textContent)
					type = 'identical';
				else
					type = 'changed';
			}
			types.push(type);
		}

		// compute distances
		const n = rows.length;
		const distances = Array(n).fill(Infinity);
		let lastChanged = -Infinity;

		// forward pass
		for (let i = 0; i < n; i++) {
			if (types[i] === 'changed')
				lastChanged = i;
			else if (types[i] === 'identical')
				distances[i] = i - lastChanged;
		}

		// backward pass
		lastChanged = Infinity;
		for (let i = n - 1; i >= 0; i--) {
			if (types[i] === 'changed')
				lastChanged = i;
			else if (types[i] === 'identical')
				distances[i] = Math.min(distances[i], lastChanged - i);
		}

		// apply classes
		for (let i = 0; i < n; i++) {
			const row = rows[i];
			const distance = distances[i];

			if (types[i] === 'identical') {
				// add border classes as separators
				if (distance === context) {
					const prev = i > 0 ? distances[i - 1] : null;
					const next = i + 1 < n ? distances[i + 1] : null;
					if (prev === context + 1) row.classList.add('context-separator-below');
					if (next === context + 1) row.classList.add('context-separator-above');
				}
				// hide distant rows
				if (distance > context)
					row.classList.add('context-distant');
			}
		}
	}

	function addHeaderToggle(header, diffTable) {
		const expandIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><circle cx="2" cy="12" r="1"/><circle cx="6" cy="12" r="1"/><circle cx="10" cy="12" r="1"/><circle cx="14" cy="12" r="1"/><circle cx="18" cy="12" r="1"/><circle cx="22" cy="12" r="1"/></g><path d="M12 9V1M12 1L9 5M12 1L15 5M12 15V23M12 23L9 19M12 23L15 19" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"/></svg>';
		const collapseIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="currentColor"><circle cx="2" cy="1" r="1"/><circle cx="6" cy="1" r="1"/><circle cx="10" cy="1" r="1"/><circle cx="14" cy="1" r="1"/><circle cx="18" cy="1" r="1"/><circle cx="22" cy="1" r="1"/><circle cx="2" cy="23" r="1"/><circle cx="6" cy="23" r="1"/><circle cx="10" cy="23" r="1"/><circle cx="14" cy="23" r="1"/><circle cx="18" cy="23" r="1"/><circle cx="22" cy="23" r="1"/></g><path d="M12 3.25V10.5M12 10.5L9 6.5M12 10.5L15 6.5M12 20.75V13.5M12 13.5L9 17.5M12 13.5L15 17.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"/></svg>';
		const wrapper = document.createElement('div');
		wrapper.className = 'diff-toggle-button-wrapper';

		while (header.firstChild)
			wrapper.appendChild(header.firstChild);
		header.appendChild(wrapper);

		const button = document.createElement('button');
		button.className = 'diff-toggle-button';
		button.innerHTML = expandIcon;
		button.title = 'Expand';
		button.addEventListener('click', (e) => {
			e.stopPropagation();
			const expanded = diffTable.classList.toggle('diff-full-context');
			button.innerHTML = expanded ? collapseIcon : expandIcon;
			button.title = expanded ? 'Collapse' : 'Expand';
		});

		wrapper.appendChild(button);
	}

	for (const wikiTable of document.querySelectorAll('table.wikitable')) {
		const rows = wikiTable.querySelectorAll('tr');
		let header = null;
		for (const row of rows) {
			if (row.classList.contains('mw-abusefilter-diff-header')) {
				header = row.querySelector('th');
			}
			const diff = row.querySelector('table.diff');
			if (diff) {
				const labelText = row.querySelector('th:first-child')?.textContent || '';
				const lineNumbering = !/^(?:actions|description|flags)\b/i.test(labelText);
				processDiffTable(diff, lineNumbering);
				if (header && diff.querySelector('tr.context-distant')) {
					addHeaderToggle(header, diff);
					header = null;
				}
			}
		}
	}
});
Retrieved from "https://en.wikipedia.org/w/index.php?title=User:Daniel_Quinlan/Scripts/FilterDiff.js&oldid=1287599344"