Added search bar

css/common.css

@@ -65,3 +65,16 @@ body{
 .check.small{
 	font-size:17px;
 }
+
+input[type="text"], input[type="password"]{
+	display: block;
+	width: 100%;
+	background: #222;
+	color: white;
+	outline: none;
+	border: none;
+	font-size: 1.1em;
+	padding: 2px;
+	margin-bottom: 5px;
+}
+

css/index.css

@@ -149,4 +149,21 @@ header #new-file .btn-svg svg {
 .file-type[data-type="CSS"]{
 	color: #15a0dc
 }
+.file.filtered{
+	display: none;
+}
+
+#search-bar-container{
+	margin: 8px;
+}
+#search-bar{
+	padding: 10px;
+}
+
+#result-number-container{
+	width: 100%;
+	text-align: center;
+	margin-top: 20px;
+	color: #ccc;
+}
 

css/settings.css

@@ -4,16 +4,3 @@ main{
 	margin: 10px;
 }
 
-input[type="text"], input[type="password"]{
-	display: block;
-	width: 100%;
-	background: #222;
-	color: white;
-	outline: none;
-	border: none;
-	font-size: 1.1em;
-	padding: 2px;
-	margin-bottom: 5px;
-}
-
-

index.html

@@ -33,7 +33,13 @@
 				</span>
 			</span>
 		</header>
+		<div id="search-bar-container">
+			<input id="search-bar" type="text" placeholder="Filter... term / :type / @site.tld"></input>
+		</div>
 		<section id="files"></section>
+		<div id="result-number-container">
+			<span id="result-number"></span>
+		</div>
 	</body>
 	<script src="js/storage.js"></script>
 	<script src="js/file.js"></script>

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