diff --git a/css/common.css b/css/common.css index 0c0a645..06b1819 100644 --- a/css/common.css +++ b/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; +} + diff --git a/css/index.css b/css/index.css index bfce17b..839980d 100644 --- a/css/index.css +++ b/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; +} diff --git a/css/settings.css b/css/settings.css index 2016088..a955f0f 100644 --- a/css/settings.css +++ b/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; -} - - diff --git a/index.html b/index.html index b160446..4fb1d5a 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,13 @@ +
+ +
+
+ +
diff --git a/js/index.js b/js/index.js index ddb827f..d1191f1 100644 --- a/js/index.js +++ b/js/index.js @@ -20,6 +20,21 @@ function createFileEntry(fileObject, element){ `; + 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 { 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)); +