Added search bar

js/index.js

@@ -20,6 +20,21 @@ function createFileEntry(fileObject, element){
 		</div>
 	`;
 
+	function setDataset(){
+		file.dataset.id = info.id;
+		file.dataset.type = info.type;
+		file.dataset.enabled = info.enabled;
+		file.dataset.name = info.name;
+		file.dataset.links = info.links ? file.dataset.links = info.links.map(url => {
+			try{
+				return (new URL(url)).hostname;
+			}catch(exc){
+				return "";
+			}
+		}).join(" ") : "";
+	}
+	setDataset();
+
 	let fileName = file.querySelector(".file-name");
 	let fileType = file.querySelector(".file-type");
 	let fileEnable = file.querySelector("input");
@@ -50,6 +65,7 @@ function createFileEntry(fileObject, element){
 	fileObject.onChange = function(info){
 		fileEnable.checked = info.enabled;
 		fileName.textContent = info.name;
+		setDataset();
 	}
 
 	function edit(){
@@ -67,6 +83,7 @@ File.loadAll().then(function(files){
 	for(let i=0;i<files.length;i++){
 		createFileEntry(files[i], filesElement);
 	}
+	updateSearchBarResults(searchBar.value);
 });
 
 let newFileJS = document.getElementById("new-js");
@@ -147,3 +164,61 @@ inputFile.addEventListener("change", () => {
 
 let newFileUp = document.getElementById("new-up");
 newFileUp.addEventListener("click", () => { inputFile.click(); });
+
+const resultNumberSpan = document.querySelector("#result-number");
+function updateSearchBarResults(query){
+	let q = query.toLowerCase();
+	let siteFilters = [];
+	let typeFilters = [];
+	function parseTag(regex){
+		const match = q.match(regex);
+		if(match){
+			q = q.replace(regex, "").trim();
+			return match;
+		}
+		return [];
+	}
+	do{
+		var siteFilter = parseTag(/\B@((\w+\.)*\w+\.\w+)\b/g).pop();
+		if(siteFilter)
+			siteFilters.push(siteFilter.slice(1));
+		var typeFilter = parseTag(/\B:(JS|CSS)\b/i).pop();
+		if(typeFilter)
+			typeFilters.push(typeFilter);
+	} while(siteFilter || typeFilter);
+
+	fileLoop: for(file of filesElement.querySelectorAll(".file")){
+		file.classList.remove("filtered");
+		if(query.length > 0){
+			const links = file.dataset.links.toLowerCase();
+			const type = file.dataset.type.toLowerCase();
+			for(siteFilter of siteFilters){
+				if(!links.includes(siteFilter)){
+					file.classList.add("filtered");
+					continue fileLoop;
+				}
+			}
+			for(typeFilter of typeFilters){
+				if(type !== typeFilter){
+					file.classList.add("filtered");
+					continue fileLoop;
+				}
+			}
+			if(!file.dataset.name.toLowerCase().includes(q))
+				file.classList.add("filtered");
+		}
+	}
+	const nHidden = filesElement.querySelectorAll(".file.filtered").length;
+	const nVisible = filesElement.querySelectorAll(".file:not(.filtered)").length;
+	if(nVisible == 0 && nHidden == 0)
+		resultNumberSpan.innerText = "Nothing here ¯\_(ツ)_/¯";
+	else if(nHidden > 0)
+		resultNumberSpan.innerText = `( ${nHidden} filtered )`;
+	else
+		resultNumberSpan.innerText = "";
+}
+
+const searchBar = document.querySelector("#search-bar");
+searchBar.addEventListener("input", ev => updateSearchBarResults(searchBar.value));
+chrome.storage.onChanged.addListener(() => updateSearchBarResults(searchBar.value));
+