tag-browser: make it possible to deselect specific styles

This patch adds a few features to tag browser. It makes it possible to
de-select a selected file, adds automatic construction of file query
parameter using history API and makes links in css source act like the
file selector buttons in the tag browser. In addition, this patch makes
adding files that end with "_support.css" (like window_control_placeholder_support) always be put it as the first
item in the preview.
This commit is contained in:
MrOtherGuy 2021-11-25 19:09:37 +02:00
parent 85b03c0701
commit 116199ce0d

View file

@ -3,7 +3,7 @@
let DB = null; let DB = null;
function initDB(obj){ function initDB(obj){
DB = obj; DB = obj.content;
Object.defineProperty(DB,"query",{value:function (q,list){ Object.defineProperty(DB,"query",{value:function (q,list){
let nlist = []; let nlist = [];
for(let key of list || this.keys){ for(let key of list || this.keys){
@ -35,10 +35,10 @@ function fetchWithType(url){
} }
if(ext === "json"){ if(ext === "json"){
response.json() response.json()
.then(resolve) .then((obj) => resolve({file:url,content:obj}));
}else{ }else{
response.text() response.text()
.then(resolve) .then((text) => resolve({file:url,content:text}))
} }
},except => reject(except)) },except => reject(except))
@ -111,11 +111,12 @@ function clearCodeBlock(){
return return
} }
function showMatchingTargets(fileNames){ function showMatchingTargets(fileNames,setSelected = false){
let bonus = 0; let bonus = 0;
for(let c of Array.from(document.querySelectorAll(".target"))){ for(let c of Array.from(document.querySelectorAll(".target"))){
if(fileNames.includes(getText(c))){ if(fileNames.includes(getText(c))){
c.classList.remove("hidden") c.classList.remove("hidden");
setSelected && selectedTarget.add(c)
}else{ }else{
if(c.classList.contains("selected")){ if(c.classList.contains("selected")){
bonus++ bonus++
@ -124,14 +125,12 @@ function showMatchingTargets(fileNames){
} }
} }
//fileNames.includes(getText(c)) ? c.classList.remove("hidden") : c.classList.add("hidden");
} }
document.getElementById("targets").setAttribute("style",`--grid-rows:${Math.ceil(fileNames.length/3)}`) document.getElementById("targets").setAttribute("style",`--grid-rows:${Math.ceil(fileNames.length/3)}`)
} }
function onCategoryClicked(categoryNode,isSecondary = false){ function onCategoryClicked(categoryNode,isSecondary = false){
//clearCodeBlock();
currentCategory.set(categoryNode,isSecondary); currentCategory.set(categoryNode,isSecondary);
let secondaryCategoriesNode = document.querySelector("#secondaryCategories"); let secondaryCategoriesNode = document.querySelector("#secondaryCategories");
@ -154,17 +153,40 @@ function onCategoryClicked(categoryNode,isSecondary = false){
} }
async function onTargetClicked(target,append = false){ async function onTargetClicked(target,append = false){
const codeBlock = document.querySelector("pre");
const text = typeof target === "string" const text = typeof target === "string"
? target ? target
: getText(target); : getText(target);
fetchWithType(`chrome/${text}`) fetchWithType(`chrome/${text}`)
//.then(text => (codeBlock.textContent = text)) .then(obj => Highlighter.parse(obj,append))
.then(text => Highlighter.parse(codeBlock,text,append))
.catch(e => console.log(e)) .catch(e => console.log(e))
} }
function onFilenameClicked(box,ctrlKey){
if(typeof box === "string"){
box = document.querySelector(`.target[title="${box}"]`);
}
if(!box){ return }
if(!box.classList.contains("selected")){
if(ctrlKey && selectedTarget.getIt()){
selectedTarget.add(box);
}else{
selectedTarget.set(box);
}
onTargetClicked(box,ctrlKey);
selectedTarget.setUrlSearchParams()
}else{
if(ctrlKey){
selectedTarget.deselect(box);
let preview = document.querySelector(`[data-filename="chrome/${box.getAttribute("title")}.css"]`);
if(preview){
preview.remove();
}
selectedTarget.setUrlSearchParams()
}
}
}
function onSomeClicked(e){ function onSomeClicked(e){
let cl = e.target.parentNode.id; let cl = e.target.parentNode.id;
switch(cl){ switch(cl){
@ -175,32 +197,29 @@ function onSomeClicked(e){
onCategoryClicked(e.target,true/* isSecondary */); onCategoryClicked(e.target,true/* isSecondary */);
break; break;
case "targets": case "targets":
if(!e.target.classList.contains("selected")){ onFilenameClicked(e.target,e.ctrlKey);
if(e.ctrlKey && selectedTarget.getIt()){
selectedTarget.add(e.target);
onTargetClicked(e.target,true);
}else{
selectedTarget.set(e.target);
onTargetClicked(e.target);
}
}
break; break;
default: default:
break; break;
} }
} }
const selectedTarget = new(function(){ const selectedTarget = new(function(){
const selected = new Set(); const selected = new Set();
const state_object = {};
this.set = (el) => { this.set = (el) => {
this.clear(); this.clear();
el.classList.add("selected"); el.classList.add("selected");
el.classList.remove("hidden");
selected.add(el); selected.add(el);
} }
this.getIt = () =>{ return selected.values().next().value }; this.getIt = () =>{ return selected.values().next().value };
this.add = (el) => { this.add = (el) => {
selected.add(el); selected.add(el);
el.classList.add("selected"); el.classList.add("selected");
el.classList.remove("hidden");
}; };
this.deselect = (el) => { this.deselect = (el) => {
el.classList.remove("selected"); el.classList.remove("selected");
@ -211,6 +230,13 @@ const selectedTarget = new(function(){
selected.clear(); selected.clear();
return true return true
} }
this.setUrlSearchParams = () => {
let t = [];
for(let value of selected.values()){
t.push(value.getAttribute("title")+".css")
}
history.replaceState(state_object,"",`?file=${t.join(",")}`);
}
})(); })();
function createCategories(){ function createCategories(){
@ -277,7 +303,6 @@ function createCategories(){
})(); })();
for(let cat of CAT_NAMES){ for(let cat of CAT_NAMES){
// CAT_PARENT.appendChild(createCategory(cat.name))
CAT_PARENT.appendChild(createNode(cat,"category")); CAT_PARENT.appendChild(createNode(cat,"category"));
CAT_SECOND.appendChild(createNode(cat,"category")); CAT_SECOND.appendChild(createNode(cat,"category"));
} }
@ -294,6 +319,8 @@ const Highlighter = new(function(){
this.set = function(a){ previous = current; current = a; return} this.set = function(a){ previous = current; current = a; return}
})(); })();
let pointer = 0; let pointer = 0;
let token = ""; let token = "";
@ -303,10 +330,14 @@ const Highlighter = new(function(){
[".","class"], [".","class"],
["[","attribute"]]); ["[","attribute"]]);
this.parse = function(targetNode,text,appendMode){ this.parse = function(info,appendMode){
const targetNode = document.getElementById("previewBox");
!appendMode && clearCodeBlock(); !appendMode && clearCodeBlock();
let node = appendMode ? targetNode.firstChild : document.createElement("div");
let node = document.createElement("div");
node.setAttribute("data-filename",info.file);
function createNewRuleset(){ function createNewRuleset(){
let ruleset = document.createElement("span"); let ruleset = document.createElement("span");
@ -400,8 +431,9 @@ const Highlighter = new(function(){
let c; let c;
let functionValueLevel = 0; let functionValueLevel = 0;
let curly = false; let curly = false;
while(pointer < text.length){
c = text[pointer]; while(pointer < info.content.length){
c = info.content[pointer];
const currentState = state.now(); const currentState = state.now();
curly = currentState != 2 && (c === "{" || c === "}"); curly = currentState != 2 && (c === "{" || c === "}");
@ -413,7 +445,7 @@ const Highlighter = new(function(){
case 0: case 0:
switch(c){ switch(c){
case "/": case "/":
if(text[pointer+1] === "*"){ if(info.content[pointer+1] === "*"){
state.set(2); state.set(2);
if(token.length > 1){ if(token.length > 1){
token = token.slice(0,-1); token = token.slice(0,-1);
@ -438,7 +470,7 @@ const Highlighter = new(function(){
case 2: case 2:
switch(c){ switch(c){
case "*": case "*":
if(text[pointer+1] === "/"){ if(info.content[pointer+1] === "/"){
token += "/"; token += "/";
pointer++; pointer++;
state.set(state.previous()); state.set(state.previous());
@ -450,7 +482,7 @@ const Highlighter = new(function(){
case 3: case 3:
switch(c){ switch(c){
case "/": case "/":
if(text[pointer+1] === "*"){ if(info.content[pointer+1] === "*"){
state.set(2); state.set(2);
} }
break; break;
@ -521,8 +553,11 @@ const Highlighter = new(function(){
state.set(0); state.set(0);
pointer = 0; pointer = 0;
targetNode.appendChild(node); if(info.file.endsWith("support.css")){
targetNode.prepend(node);
}else{
targetNode.appendChild(node);
}
return return
} }
return this return this
@ -548,14 +583,13 @@ async function handleSearchQuery(){
if(files.length === 0 ){ if(files.length === 0 ){
return return
} }
const codeBlock = document.querySelector("pre");
const promises = files.map(file=>fetchWithType(`chrome/${file}`).catch(e=>"")); const promises = files.map(file=>fetchWithType(`chrome/${file}`).catch(e=>""));
Promise.all(promises) Promise.all(promises)
.then(responses => { .then(responses => {
showMatchingTargets(files); showMatchingTargets(files,true);
Highlighter.parse(codeBlock,responses.join("\n\n/*************************************/\n\n")) responses.forEach(Highlighter.parse)
}); });
} }
@ -584,7 +618,7 @@ document.onreadystatechange = (function () {
} }
let fileName = ref.slice(ref.lastIndexOf("/")); let fileName = ref.slice(ref.lastIndexOf("/"));
if(fileName.endsWith(".css")){ if(fileName.endsWith(".css")){
onTargetClicked(fileName); onFilenameClicked(fileName.slice(1,-4),ev.ctrlKey);
ev.preventDefault(); ev.preventDefault();
} }
} }