MediaWiki:Gadget-listFilter.js

mw.loader.using( 'oojs-ui-core' ).done( function {	$(document).ready(function { // Render search text field elements. See Template:Search var searchContainers = document.getElementsByClassName('search-text-container'); // It's possible for the Search template to be used multiple times // So get all search text containers and loop through each of them. for (var i = 0; i < searchContainers.length; i++) { var dataKey = searchContainers[i].attributes['data-key'].value.toLowerCase; var placeholder = searchContainers[i].attributes['data-placeholder'].value; var search = new OO.ui.SearchInputWidget( {				placeholder: placeholder			} ); $( search.$element ).children("input").addClass( "search-text" ); $( search.$element ).children("input").attr( "data-key", dataKey ); // Hacky way to update the HTML value $( search.$element ).children("input").keyup(function {               $(this).attr('value', $(this).val);            } ); $( searchContainers[i] ).html( search.$element ); }		// Get the filters and search text fields on the page var filterButtons = document.getElementsByClassName('filter-button'); var searchFields = document.getElementsByClassName('search-text'); // Add the event listeners to the filters and search text fields for (var i = 0; i < filterButtons.length; i++) { filterButtons[i].addEventListener("click", function(e) {				// Toggle the select class				if (this.classList.contains('filter-button-selected')) {					this.classList.remove('filter-button-selected');				} else {					this.classList.add('filter-button-selected');				}				filter;			}); }		for (var i = 0; i < searchFields.length; i++) { searchFields[i].addEventListener("keyup", function(e) {				filter;				}); }		function filter { //Get all filter groups on the page var filterGroups = document.getElementsByClassName('mw-ui-button-group'); var searchFields = document.getElementsByClassName('search-text'); //Get filter list var list = document.getElementsByClassName('filter-element'); for (var i = 0; i < list.length; i++) { list[i].style.display = 'none'; }			//Loop through all filter groups for (var i = 0; i < filterGroups.length; i++) { var selectedFilters = filterGroups[i].getElementsByClassName('filter-button-selected'); list = filterList(selectedFilters, list); }			// Loop through all the searches for (var i = 0; i < searchFields.length; i++) { list = searchList(searchFields[i], list); }			// Go through and display the elements still in the filtered list for (var i = 0; i < list.length; i++) { list[i].style.display = ''; }		}		function filterList(selectedFilters, list) { if (!list.length || !selectedFilters.length) { return list; }			var dataKey = ''; var selectedFilterValues = []; for (var i = 0; i < selectedFilters.length; i++) { var dataKey = selectedFilters[i].attributes['data-key'].value; var filterValue = String(selectedFilters[i].dataset.value).toLowerCase; selectedFilterValues.push(filterValue); }			var filteredList = []; for (var i = 0; i < list.length; i++) { var elementDataValue = String(list[i].dataset[dataKey]).toLowerCase; if (elementDataValue.includes(',')) { for (var count = 0; count < selectedFilterValues.length; count++) { if (elementDataValue.includes(selectedFilterValues[count])) { filteredList.push(list[i]); continue; }					}				} else { if (selectedFilterValues.includes(elementDataValue)) { filteredList.push(list[i]); }					}			}

return filteredList; }		function searchList(searchField, list) { var dataKey = searchField.attributes['data-key'].value; var searchText = searchField.value.toLowerCase; if (searchText.length <= 0) { return list; }			var filteredList = []; for (var i = 0; i < list.length; i++) { var elementDataValue = String(list[i].dataset[dataKey]).toLowerCase; if (elementDataValue.includes(searchText)) { filteredList.push(list[i]); }			}			return filteredList; }	} ); } );