MediaWiki:CustomFiltered.js - Revision history

Noeth at 10:09, 30 April 2026

2026-04-30T10:09:35Z

← Older revision		Revision as of 10:09, 30 April 2026
Line 6:		Line 6:
	var $bar = $('<div>', {		var $bar = $('<div>', {
	id: 'smw-filter-bar',		id: 'smw-filter-bar',
	class: 'd-flex justify-content-~~between~~ align-items-center w-100 mb-2'		class: 'd-flex justify-content-end align-items-center w-100 mb-2'
	});		});

Noeth at 22:48, 27 February 2026

2026-02-27T22:48:11Z

← Older revision		Revision as of 22:48, 27 February 2026
Line 9:		Line 9:
	});		});

	var $searchInput = $('<input>', {		// var $searchInput = $('<input>', {
	type: 'text',		// type: 'text',
	id: 'smw-search-input',		// id: 'smw-search-input',
	placeholder: 'Search all columns…',		// placeholder: 'Search all columns…',
	class: 'form-control w-auto'		// class: 'form-control w-auto'
	});		// });

	var $counter = $('<span>', {		var $counter = $('<span>', {
Line 21:		Line 21:
	});		});

	$bar.append($searchInput, $counter);		// $bar.append($searchInput, $counter);
			$bar.append($counter);
	$container.before($bar);		$container.before($bar);

Line 31:		Line 32:

	function applySearch() {		function applySearch() {
	var term = $.trim($searchInput.val()).toLowerCase();		// var term = $.trim($searchInput.val()).toLowerCase();
	var total = 0;		var total = 0;
	var visible = 0;		var visible = 0;
Line 47:		Line 48:
	$row.show();		$row.show();

	if (term && $row.text().toLowerCase().indexOf(term) === -1) {		// if (term && $row.text().toLowerCase().indexOf(term) === -1) {
	$row.hide();		// $row.hide();
	} else {		// } else {
	visible++;		visible++;
	}		// }
	});		});

Line 79:		Line 80:
	});		});

	$searchInput.on('input keyup', function () {		// $searchInput.on('input keyup', function () {
	applySearch();		// applySearch();
	});		// });

	snapshotSMW();		snapshotSMW();

Noeth at 16:19, 27 February 2026

2026-02-27T16:19:22Z

← Older revision		Revision as of 16:19, 27 February 2026
Line 26:		Line 26:
	function snapshotSMW() {		function snapshotSMW() {
	$container.find('tr.filtered-table-item').each(function () {		$container.find('tr.filtered-table-item').each(function () {
	~~var inlineDisplay = this.style.display;~~		$(this).data('smw-hidden', this.style.display === 'none');
	$(this).data('smw-hidden', ~~inlineDisplay~~ === 'none');
	});		});
	}		}
Line 45:		Line 44:
	}		}

	if (!term \|\| $row.text().toLowerCase().indexOf(term) !== -1) {		// Reset to visible first, then hide if it doesn't match
	$row.~~show~~();		$row.show();

			if (term && $row.text().toLowerCase().indexOf(term) === -1) {
			$row.hide();
			} else {
	visible++;		visible++;
	~~} else {~~
	~~$row.hide();~~
	}		}
	});		});

Noeth at 16:17, 27 February 2026

2026-02-27T16:17:35Z

← Older revision		Revision as of 16:17, 27 February 2026
Line 6:		Line 6:
	var $bar = $('<div>', {		var $bar = $('<div>', {
	id: 'smw-filter-bar',		id: 'smw-filter-bar',
	~~css: { marginBottom: '10px', display~~: 'flex~~', gap: '16px', alignItems: '~~center'~~, flexWrap: 'wrap' }~~		class: 'd-flex justify-content-between align-items-center w-100 mb-2'
	});		});

Line 13:		Line 13:
	id: 'smw-search-input',		id: 'smw-search-input',
	placeholder: 'Search all columns…',		placeholder: 'Search all columns…',
	~~css: { padding: '5px 10px', fontSize: '14px', border: '1px solid #ccc', borderRadius: '4px', minWidth~~: '~~250px~~' }		class: 'form-control w-auto'
	});		});

	var $counter = $('<span>', {		var $counter = $('<span>', {
	id: 'smw-filter-counter',		id: 'smw-filter-counter',
	~~css: { fontSize: '14px', color~~: '~~#555~~' }		class: 'text-muted'
	});		});

Noeth at 15:22, 27 February 2026

2026-02-27T15:22:38Z

← Older revision		Revision as of 15:22, 27 February 2026
Line 23:		Line 23:
	$bar.append($searchInput, $counter);		$bar.append($searchInput, $counter);
	$container.before($bar);		$container.before($bar);

	~~// Track whether SMW is currently changing things, not us~~
	~~var smwChanging = false;~~

	function snapshotSMW() {		function snapshotSMW() {
	$container.find('tr.filtered-table-item').each(function () {		$container.find('tr.filtered-table-item').each(function () {
	~~// Temporarily show the row to read SMW's intended state~~
	~~// SMW stores its hidden state via inline style directly~~
	var inlineDisplay = this.style.display;		var inlineDisplay = this.style.display;
	$(this).data('smw-hidden', inlineDisplay === 'none');		$(this).data('smw-hidden', inlineDisplay === 'none');
Line 61:		Line 56:
	}		}

	~~// Use a flag + timeout approach: when mutations fire, set a flag,~~
	~~// wait a tick for all SMW batch changes to settle, then snapshot + apply~~
	var smwTimer = null;		var smwTimer = null;
	~~var observing = true;~~

	var observer = new MutationObserver(function (mutations) {		var observer = new MutationObserver(function (mutations) {
	~~// Check if any mutation came from a filtered-table-item row~~
	~~// If yes, it's SMW changing things — snapshot after it settles~~
	var smwMutation = mutations.some(function (m) {		var smwMutation = mutations.some(function (m) {
	return $(m.target).hasClass('filtered-table-item');		return $(m.target).hasClass('filtered-table-item');
Line 88:		Line 78:
	});		});

	$searchInput.on('input', function () {		$searchInput.on('input keyup', function () {
	applySearch();		applySearch();
	});		});

Noeth at 15:19, 27 February 2026

2026-02-27T15:19:03Z

← Older revision		Revision as of 15:19, 27 February 2026
Line 24:		Line 24:
	$container.before($bar);		$container.before($bar);

	var ~~$rows~~ = ~~$container.find('tr.filtered-table-item')~~;		// Track whether SMW is currently changing things, not us
			var smwChanging = false;

	~~// Use a real HTML attribute (not jQuery .data()) so we can always~~
	~~// distinguish SMW state from our own display manipulation~~
	function snapshotSMW() {		function snapshotSMW() {
	$~~rows~~.each(function () {		$container.find('tr.filtered-table-item').each(function () {
	// ~~Read~~ the ~~raw~~ inline style ~~before we touch anything~~		// Temporarily show the row to read SMW's intended state
	$(this).~~attr~~('~~data-~~smw-hidden', ~~this.style.display~~ === 'none~~' ? '1' : '0~~');		// SMW stores its hidden state via inline style directly
			var inlineDisplay = this.style.display;
			$(this).data('smw-hidden', inlineDisplay === 'none');
	});		});
	}		}
Line 37:		Line 38:
	function applySearch() {		function applySearch() {
	var term = $.trim($searchInput.val()).toLowerCase();		var term = $.trim($searchInput.val()).toLowerCase();
	var total = ~~$rows.length~~;		var total = 0;
	var visible = 0;		var visible = 0;

	$~~rows~~.each(function () {		$container.find('tr.filtered-table-item').each(function () {
	var $row = $(this);		var $row = $(this);
			total++;

	if ($row.~~attr~~('~~data-~~smw-hidden') ~~=== '1'~~) {		if ($row.data('smw-hidden')) {
	~~// Restore SMW's hidden state without triggering observer~~		$row.hide();
	~~this~~.~~style.display = 'none'~~;
	return;		return;
	}		}

	if (!term \|\| $row.text().toLowerCase().indexOf(term) !== -1) {		if (!term \|\| $row.text().toLowerCase().indexOf(term) !== -1) {
	~~this~~.~~style.display = ''~~;		$row.show();
	visible++;		visible++;
	} else {		} else {
	~~this~~.~~style.display = 'none'~~;		$row.hide();
	}		}
	});		});
Line 60:		Line 61:
	}		}

			// Use a flag + timeout approach: when mutations fire, set a flag,
			// wait a tick for all SMW batch changes to settle, then snapshot + apply
	var smwTimer = null;		var smwTimer = null;
			var observing = true;

	var observer = new MutationObserver(function (mutations) {		var observer = new MutationObserver(function (mutations) {
	var ~~relevantChange~~ = mutations.some(function (m) {		// Check if any mutation came from a filtered-table-item row
	return ~~m.target.hasAttribute && m.target.hasAttribute('data-smw-hidden') === false~~		// If yes, it's SMW changing things — snapshot after it settles
	&& $(m.target).hasClass('filtered-table-item');		var smwMutation = mutations.some(function (m) {
			return $(m.target).hasClass('filtered-table-item');
	});		});

	if (!~~relevantChange~~) return;		if (!smwMutation) return;

	~~// Pause observer, snapshot raw SMW state, then reapply search~~
	~~observer.disconnect()~~;

	clearTimeout(smwTimer);		clearTimeout(smwTimer);
Line 77:		Line 79:
	snapshotSMW();		snapshotSMW();
	applySearch();		applySearch();
	~~observer.observe($container[0], observerConfig);~~
	}, 50);		}, 50);
	});		});

	~~var observerConfig =~~ {		observer.observe($container[0], {
	subtree: true,		subtree: true,
	attributes: true,		attributes: true,
	attributeFilter: ['style']		attributeFilter: ['style']
	};		});

	~~// Initial snapshot before observer starts~~
	~~snapshotSMW();~~
	~~applySearch();~~

	~~observer.observe($container[0], observerConfig~~);

	$searchInput.on('input', function () {		$searchInput.on('input', function () {
	applySearch();		applySearch();
	});		});

			snapshotSMW();
			applySearch();
	}		}

Noeth at 15:17, 27 February 2026

2026-02-27T15:17:35Z

← Older revision		Revision as of 15:17, 27 February 2026
Line 24:		Line 24:
	$container.before($bar);		$container.before($bar);

	~~// Track whether SMW is currently changing things, not us~~		var $rows = $container.find('tr.filtered-table-item');
	var ~~smwChanging~~ = ~~false~~;

			// Use a real HTML attribute (not jQuery .data()) so we can always
			// distinguish SMW state from our own display manipulation
	function snapshotSMW() {		function snapshotSMW() {
	$~~container.find('tr.filtered-table-item')~~.each(function () {		$rows.each(function () {
	// ~~Temporarily show~~ the ~~row to read SMW's intended state~~		// Read the raw inline style before we touch anything
	~~// SMW stores its hidden state via~~ inline style ~~directly~~		$(this).attr('data-smw-hidden', this.style.display === 'none' ? '1' : '0');
	~~var inlineDisplay = this.style.display;~~
	$(this).~~data~~('smw-hidden', ~~inlineDisplay~~ === 'none');
	});		});
	}		}
Line 38:		Line 37:
	function applySearch() {		function applySearch() {
	var term = $.trim($searchInput.val()).toLowerCase();		var term = $.trim($searchInput.val()).toLowerCase();
	var total = 0;		var total = $rows.length;
	var visible = 0;		var visible = 0;

	$~~container.find('tr.filtered-table-item')~~.each(function () {		$rows.each(function () {
	var $row = $(this);		var $row = $(this);
	~~total++;~~

	if ($row.~~data~~('smw-hidden')) {		if ($row.attr('data-smw-hidden') === '1') {
	~~$row~~.~~hide()~~;		// Restore SMW's hidden state without triggering observer
			this.style.display = 'none';
	return;		return;
	}		}

	if (!term \|\| $row.text().toLowerCase().indexOf(term) !== -1) {		if (!term \|\| $row.text().toLowerCase().indexOf(term) !== -1) {
	~~$row~~.~~show()~~;		this.style.display = '';
	visible++;		visible++;
	} else {		} else {
	~~$row~~.~~hide()~~;		this.style.display = 'none';
	}		}
	});		});
Line 61:		Line 60:
	}		}

	~~// Use a flag + timeout approach: when mutations fire, set a flag,~~
	~~// wait a tick for all SMW batch changes to settle, then snapshot + apply~~
	var smwTimer = null;		var smwTimer = null;
	~~var observing = true;~~

	var observer = new MutationObserver(function (mutations) {		var observer = new MutationObserver(function (mutations) {
	~~// Check if any mutation came from a filtered-table-item row~~		var relevantChange = mutations.some(function (m) {
	~~// If yes, it's SMW changing things — snapshot after it settles~~		return m.target.hasAttribute && m.target.hasAttribute('data-smw-hidden') === false
	var ~~smwMutation~~ = mutations.some(function (m) {		&& $(m.target).hasClass('filtered-table-item');
	return $(m.target).hasClass('filtered-table-item');
	});		});

	if (!~~smwMutation~~) return;		if (!relevantChange) return;

			// Pause observer, snapshot raw SMW state, then reapply search
			observer.disconnect();

	clearTimeout(smwTimer);		clearTimeout(smwTimer);
Line 79:		Line 77:
	snapshotSMW();		snapshotSMW();
	applySearch();		applySearch();
			observer.observe($container[0], observerConfig);
	}, 50);		}, 50);
	});		});

	~~observer.observe($container[0],~~ {		var observerConfig = {
	subtree: true,		subtree: true,
	attributes: true,		attributes: true,
	attributeFilter: ['style']		attributeFilter: ['style']
	});		};

			// Initial snapshot before observer starts
			snapshotSMW();
			applySearch();

			observer.observe($container[0], observerConfig);

	$searchInput.on('input', function () {		$searchInput.on('input', function () {
	applySearch();		applySearch();
	});		});

	~~snapshotSMW();~~
	~~applySearch();~~
	}		}

Noeth at 15:16, 27 February 2026

2026-02-27T15:16:24Z

← Older revision		Revision as of 15:16, 27 February 2026
Line 23:		Line 23:
	$bar.append($searchInput, $counter);		$bar.append($searchInput, $counter);
	$container.before($bar);		$container.before($bar);

			// Track whether SMW is currently changing things, not us
			var smwChanging = false;

	function snapshotSMW() {		function snapshotSMW() {
	$container.find('tr.filtered-table-item').each(function () {		$container.find('tr.filtered-table-item').each(function () {
	$(this).data('smw-hidden', ~~$(this).css('display')~~ === 'none');		// Temporarily show the row to read SMW's intended state
			// SMW stores its hidden state via inline style directly
			var inlineDisplay = this.style.display;
			$(this).data('smw-hidden', inlineDisplay === 'none');
	});		});
	}		}
Line 55:		Line 61:
	}		}

	// ~~Disconnect observer while applySearch runs so our own~~		// Use a flag + timeout approach: when mutations fire, set a flag,
	// ~~display changes don't trigger~~ a ~~false~~ SMW snapshot		// wait a tick for all SMW batch changes to settle, then snapshot + apply
	var observer = new MutationObserver(function () {		var smwTimer = null;
	~~observer~~.~~disconnect~~();		var observing = true;
	snapshotSMW();
	applySearch();		var observer = new MutationObserver(function (mutations) {
	~~observer.observe($container[0]~~, ~~observerConfig~~);		// Check if any mutation came from a filtered-table-item row
			// If yes, it's SMW changing things — snapshot after it settles
			var smwMutation = mutations.some(function (m) {
			return $(m.target).hasClass('filtered-table-item');
			});

			if (!smwMutation) return;

			clearTimeout(smwTimer);
			smwTimer = setTimeout(function () {
			snapshotSMW();
			applySearch();
			}, 50);
	});		});

	~~var observerConfig =~~ {		observer.observe($container[0], {
	subtree: true,		subtree: true,
	attributes: true,		attributes: true,
	attributeFilter: ['style']		attributeFilter: ['style']
	};		});

	~~observer.observe($container[0], observerConfig~~);

	$searchInput.on('input', function () {		$searchInput.on('input', function () {

Noeth at 15:13, 27 February 2026

2026-02-27T15:13:49Z

← Older revision		Revision as of 15:13, 27 February 2026
Line 4:		Line 4:
	if (!$container.length) return;		if (!$container.length) return;

	~~// --- Build UI bar ---~~
	var $bar = $('<div>', {		var $bar = $('<div>', {
	id: 'smw-filter-bar',		id: 'smw-filter-bar',
Line 25:		Line 24:
	$container.before($bar);		$container.before($bar);

	~~// --- Snapshot SMW's own visibility on each row ---~~
	function snapshotSMW() {		function snapshotSMW() {
	$container.find('tr.filtered-table-item').each(function () {		$container.find('tr.filtered-table-item').each(function () {
Line 32:		Line 30:
	}		}

	~~// --- Apply text search on top of SMW filtering ---~~
	function applySearch() {		function applySearch() {
	var term = $.trim($searchInput.val()).toLowerCase();		var term = $.trim($searchInput.val()).toLowerCase();
Line 58:		Line 55:
	}		}

	// ~~--- Watch for~~ SMW ~~filter changes ---~~		// Disconnect observer while applySearch runs so our own
			// display changes don't trigger a false SMW snapshot
	var observer = new MutationObserver(function () {		var observer = new MutationObserver(function () {
			observer.disconnect();
	snapshotSMW();		snapshotSMW();
	applySearch();		applySearch();
			observer.observe($container[0], observerConfig);
	});		});

	~~observer.observe($container[0],~~ {		var observerConfig = {
	subtree: true,		subtree: true,
	attributes: true,		attributes: true,
	attributeFilter: ['style']		attributeFilter: ['style']
	});		};

			observer.observe($container[0], observerConfig);

	~~// --- Search input handler ---~~
	$searchInput.on('input', function () {		$searchInput.on('input', function () {
	applySearch();		applySearch();
	});		});

	~~// --- Init ---~~
	snapshotSMW();		snapshotSMW();
	applySearch();		applySearch();

Noeth: Created page with "(function ($) { function init() { var $container = $('.filtered-views-container'); if (!$container.length) return; // --- Build UI bar --- var $bar = $('
', { id: 'smw-filter-bar', css: { marginBottom: '10px', display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' } }); var $searchInput = $('', { type: 'text', id: 'smw-search-input', placeholder: 'Search all columns…', css: { paddi..."

2026-02-27T15:12:23Z

Created page with "(function ($) { function init() { var $container = $('.filtered-views-container'); if (!$container.length) return; // --- Build UI bar --- var $bar = $('<div>', { id: 'smw-filter-bar', css: { marginBottom: '10px', display: 'flex', gap: '16px', alignItems: 'center', flexWrap: 'wrap' } }); var $searchInput = $('<input>', { type: 'text', id: 'smw-search-input', placeholder: 'Search all columns…', css: { paddi..."

New page