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;
		}
	} );
} );