support appending multiple files by clicking targets

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) }  

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