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:
parent
85b03c0701
commit
116199ce0d
1 changed files with 68 additions and 34 deletions
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue