filteroptions.js

document.addEventListener("DOMContentLoaded", () => { 
  	
	function filterOptionsQuote(str) {
		return str.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&" );
	};

	document.getElementById("filterOptionsInput").addEventListener("input", (event) => {
		
		let eV = event.currentTarget.value;

		if (eV.length > 0) {
			
			/* Make all tabs and tabs content active so the searched parameters can be displayed from all tabs */
			document.querySelectorAll('#configTabs li, .nav-tabs li, #configContent div.tab-pane, #config-document div.tab-pane').forEach((elem) => {elem.classList.add('active')});
			
			/* Hide some specific parts which are not neccessary to display in search results */
			document.querySelectorAll('.field-spacer, .tab-description, fieldset legend, #sendtestmail').forEach((elem) => {elem.style.display = "none";});
			/* Hide specific component parts like headers */
			document.querySelectorAll('.tab-header').forEach((elem) => {elem.parentElement.parentElement.style.display = "none";});
			
			/*
			 * Hide tab items which cannot be filtered, for example:
			 * #page-permissions - Global Configuration
			 * #permissions - Component Options
			*/
			document.querySelectorAll('#page-filters, #page-permissions, #permissions').forEach((elem) => {elem.style.display = "none";});

			/* Foreach each item and check if it fits criteria. If yes, display it */
			document.querySelectorAll('.control-group .control-label label').forEach((elem) => {
				let ePP	= elem.parentElement.parentElement;
				let item = elem.innerHTML;
				ePP.style.display = "none";
				
				if (item && typeof item == "string") {
					let re = new RegExp(filterOptionsQuote(eV), "i");
					let res = item.match(re);
					
					if (res) {
						ePP.style.display = "block";
					}
				}
			});
			return;
		} /*else {*/
		
			/* Remove active class from all tabs when nothing is searched more = input field is empty */
			document.querySelectorAll('#configTabs li.active, .nav-tabs li, #configContent div.tab-pane.active, #config-document div.tab-pane.active').forEach((elem) => {elem.classList.remove('active')});
	
			/* Make first tab in component options active */
			if(document.querySelector('#configTabs li')) {
				document.querySelector('#configTabs li').classList.add('active');
			}
			
			/* Make first tab in global configuration options active */
			if(document.querySelector('.nav-tabs li')) {
				document.querySelector('.nav-tabs li').classList.add('active');
			}

			/* Make first tab CONTENT in global configuration options active */
			if(document.querySelector('#configContent div.tab-pane')) {
				document.querySelector('#configContent div.tab-pane').classList.add('active');
			}
			
			/* Make first tab CONTENT in global configuration options active */
			if(document.querySelector('#config-document div.tab-pane')) {
				document.querySelector('#config-document div.tab-pane').classList.add('active');
			}
			
			/* Display all hidden parts back - undo the changes we've made when searching */
			document.querySelectorAll('.field-spacer, .tab-description, .control-group, fieldset legend, #sendtestmail').forEach((elem) => {elem.style.display = "block";});
			
			/* Display specific component parts like headers - undo the changes we've made when searching */ 
			document.querySelectorAll('.tab-header').forEach((elem) => {elem.parentElement.parentElement.style.display = "block";});
			
			/* Display items which cannot be filtered - undo the changes we've made when searching */
			document.querySelectorAll('#page-filters, #page-permissions, #permissions').forEach((elem) => {elem.style.display = "block";});
		/*}*/
	});
});