diff --git a/html_resources/main.css b/html_resources/main.css
index 8cb6de0..cadcfaf 100644
--- a/html_resources/main.css
+++ b/html_resources/main.css
@@ -65,6 +65,7 @@ pre:empty{ display: none }
background-size: contain;
}
.target:hover{ background-color: rgb(80,80,90) }
+.target.selected{ background-color: rgb(80,80,120) }
.target > a:hover{ filter: drop-shadow(0 0 3px fuchsia) }
/*#targets{ display: grid; grid-template-columns: 1fr 1fr 1fr }*/
#targets{
@@ -92,8 +93,8 @@ pre > div{
.hidden{ display: none !important }
.comment{ color: rgb(50,180,90) }
-.selector{ color: silver }
-.pseudo{ color: violet }
+.selector{ color: lavenderblush }
+.pseudo{ color: rgb(200,180,250) }
.id{ color: rgb(240, 148, 138) }
.class{ color: skyblue }
.attribute{ color: rgb(120,230,170) }
diff --git a/html_resources/selector.js b/html_resources/selector.js
index ba9daa5..2540887 100644
--- a/html_resources/selector.js
+++ b/html_resources/selector.js
@@ -112,15 +112,26 @@ function clearCodeBlock(){
}
function showMatchingTargets(fileNames){
+ let bonus = 0;
for(let c of Array.from(document.querySelectorAll(".target"))){
- fileNames.includes(getText(c)) ? c.classList.remove("hidden") : c.classList.add("hidden");
+ if(fileNames.includes(getText(c))){
+ c.classList.remove("hidden")
+ }else{
+ if(c.classList.contains("selected")){
+ bonus++
+ }else{
+ c.classList.add("hidden");
+ }
+
+ }
+ //fileNames.includes(getText(c)) ? c.classList.remove("hidden") : c.classList.add("hidden");
}
document.getElementById("targets").setAttribute("style",`--grid-rows:${Math.ceil(fileNames.length/3)}`)
}
function onCategoryClicked(categoryNode,isSecondary = false){
- clearCodeBlock();
+ //clearCodeBlock();
currentCategory.set(categoryNode,isSecondary);
let secondaryCategoriesNode = document.querySelector("#secondaryCategories");
@@ -142,7 +153,7 @@ function onCategoryClicked(categoryNode,isSecondary = false){
return
}
-async function onTargetClicked(target){
+async function onTargetClicked(target,append = false){
const codeBlock = document.querySelector("pre");
const text = typeof target === "string"
? target
@@ -150,7 +161,7 @@ async function onTargetClicked(target){
fetchWithType(`chrome/${text}`)
//.then(text => (codeBlock.textContent = text))
- .then(text => Highlighter.parse(codeBlock,text))
+ .then(text => Highlighter.parse(codeBlock,text,append))
.catch(e => console.log(e))
}
@@ -164,13 +175,43 @@ function onSomeClicked(e){
onCategoryClicked(e.target,true/* isSecondary */);
break;
case "targets":
- onTargetClicked(e.target);
+ if(!e.target.classList.contains("selected")){
+ if(e.ctrlKey && selectedTarget.getIt()){
+ selectedTarget.add(e.target);
+ onTargetClicked(e.target,true);
+ }else{
+ selectedTarget.set(e.target);
+ onTargetClicked(e.target);
+ }
+ }
break;
default:
break;
}
}
+const selectedTarget = new(function(){
+ const selected = new Set();
+ this.set = (el) => {
+ this.clear();
+ el.classList.add("selected");
+ selected.add(el);
+ }
+ this.getIt = () =>{ return selected.values().next().value };
+ this.add = (el) => {
+ selected.add(el);
+ el.classList.add("selected");
+ };
+ this.deselect = (el) => {
+ el.classList.remove("selected");
+ return selected.delete(el)
+ };
+ this.clear = () => {
+ selected.forEach(el=>el.classList.remove("selected"));
+ selected.clear();
+ return true
+ }
+})();
function createCategories(){
@@ -262,10 +303,10 @@ const Highlighter = new(function(){
[".","class"],
["[","attribute"]]);
- this.parse = function(targetNode,text){
+ this.parse = function(targetNode,text,appendMode){
- clearCodeBlock();
- let node = document.createElement("div");
+ !appendMode && clearCodeBlock();
+ let node = appendMode ? targetNode.firstChild : document.createElement("div");
function createNewRuleset(){
let ruleset = document.createElement("span");