some improvements on tag browser
This commit is contained in:
parent
2ee76ed5d3
commit
15be47ace9
4 changed files with 82 additions and 27 deletions
8
html_resources/favicon.svg
Normal file
8
html_resources/favicon.svg
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 750">
|
||||||
|
<style>
|
||||||
|
#styled { stroke: #153a51 }
|
||||||
|
@media (prefers-color-scheme: dark) { #styled { stroke: #fff } }
|
||||||
|
</style>
|
||||||
|
<path id="styled" d="m41 373c49-115.5 97.5-231 153-231 111 0 195 463 306 462.5s195-462.5 106-462.5" stroke-linecap="round" stroke-width="115" fill="none"/>
|
||||||
|
<path d="m41 373c49-115.5 97.5-231 153-231 111 0 195 463 306 462.5s195-462.5 106-462.5" stroke="#f00" stroke-linecap="round" stroke-width="40" fill="none"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 496 B |
|
@ -9,7 +9,7 @@ body{background-color: rgb(60,50,70); color: silver; margin: 0px }
|
||||||
background-color: rgb(60,60,70);
|
background-color: rgb(60,60,70);
|
||||||
max-height: 100vh;
|
max-height: 100vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
min-width: 18ch
|
min-width: 22ch
|
||||||
}
|
}
|
||||||
|
|
||||||
.categoryList.blurred{
|
.categoryList.blurred{
|
||||||
|
@ -28,9 +28,10 @@ body{background-color: rgb(60,50,70); color: silver; margin: 0px }
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
background-color: rgb(60,60,70);
|
background-color: rgb(60,60,70);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
box-shadow: 0 0 26px 0 black;
|
||||||
}
|
}
|
||||||
|
|
||||||
a{ color: rgb(100,150,200); margin-inline-start: 1ch }
|
a{ color: rgb(100,150,200); margin-inline-end: 0.4ch }
|
||||||
pre a{ margin: 0 }
|
pre a{ margin: 0 }
|
||||||
a:visited{ color: rgb(150,100,200) }
|
a:visited{ color: rgb(150,100,200) }
|
||||||
a:hover{ color: rgb(200,150,100) }
|
a:hover{ color: rgb(200,150,100) }
|
||||||
|
@ -41,7 +42,7 @@ pre:empty{ display: none }
|
||||||
.currentCategory,
|
.currentCategory,
|
||||||
.category:hover{ background-color: grey }
|
.category:hover{ background-color: grey }
|
||||||
|
|
||||||
.currentCategory::before{ content: "»" }
|
.currentCategory::before{ content: "» " }
|
||||||
|
|
||||||
.target{
|
.target{
|
||||||
margin: 0.1em;
|
margin: 0.1em;
|
||||||
|
@ -49,13 +50,16 @@ pre:empty{ display: none }
|
||||||
padding: 0.3em;
|
padding: 0.3em;
|
||||||
border: 1px solid rgb(40,40,40);
|
border: 1px solid rgb(40,40,40);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
max-width: 50ch;
|
max-width: 30%;
|
||||||
cursor: pointer
|
cursor: pointer;
|
||||||
|
white-space:nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.target > a{
|
.target > a{
|
||||||
content: "";
|
display:inline-block;
|
||||||
width: 1.2em;
|
width: 1.2em;
|
||||||
height: 1.3em;
|
height: 80%;
|
||||||
background-image: url("ext.svg");
|
background-image: url("ext.svg");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
|
@ -74,22 +78,26 @@ pre{
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
margin: 1em;
|
margin: 1em;
|
||||||
border: 2px inset;
|
border: 2px inset;
|
||||||
padding: 0.5em;
|
padding: 0 0 0 2em;
|
||||||
background-color: rgb(40,50,50)
|
background-color: rgb(30,30,40);
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > div{
|
||||||
|
background-color: rgb(40,37,43);;
|
||||||
|
padding: 1em 0.5em;
|
||||||
|
border-inline-start: 1px solid rgb(90,90,90)
|
||||||
}
|
}
|
||||||
|
|
||||||
.categoryList:not(.blurred)+.categoryList,
|
.categoryList:not(.blurred)+.categoryList,
|
||||||
.hidden{ display: none !important }
|
.hidden{ display: none !important }
|
||||||
|
|
||||||
.target{ display: flex; justify-content: space-between }
|
|
||||||
|
|
||||||
.comment{ color: rgb(50,180,20) }
|
.comment{ color: rgb(50,180,20) }
|
||||||
.selector{ color: violet }
|
.selector{ color: palegoldenrod }
|
||||||
.pseudo{ color: silver }
|
.pseudo{ color: silver }
|
||||||
.id{ color: lightcoral }
|
.id{ color: lightcoral }
|
||||||
.class{ color: lightgreen }
|
.class{ color: lightgreen }
|
||||||
.attribute{ color: cyan }
|
.attribute{ color: cyan }
|
||||||
.atrule{ color: royalblue }
|
.atrule{ color: mediumslateblue }
|
||||||
.atvalue{ color: lightblue }
|
.atvalue{ color: lightblue }
|
||||||
.property{ color: orange }
|
.property{ color: orange }
|
||||||
.value{ color: skyblue }
|
.value{ color: skyblue }
|
||||||
|
|
|
@ -70,7 +70,6 @@ let currentCategory = new (function(){
|
||||||
currentTopLevelFileNames = DB.query(t.textContent);
|
currentTopLevelFileNames = DB.query(t.textContent);
|
||||||
}
|
}
|
||||||
|
|
||||||
//this.fileNames = DB.query(t.textContent,secondary?this.fileNames:null);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.getFileNames = function(node,secondary){
|
this.getFileNames = function(node,secondary){
|
||||||
|
@ -83,7 +82,7 @@ let currentCategory = new (function(){
|
||||||
})()
|
})()
|
||||||
|
|
||||||
function getText(node){
|
function getText(node){
|
||||||
return `${node.childNodes[0].textContent}.css`
|
return `${node.textContent}.css`
|
||||||
}
|
}
|
||||||
|
|
||||||
function getSecondaryCategories(list){
|
function getSecondaryCategories(list){
|
||||||
|
@ -115,10 +114,7 @@ function clearCodeBlock(){
|
||||||
function onCategoryClicked(categoryNode,isSecondary = false){
|
function onCategoryClicked(categoryNode,isSecondary = false){
|
||||||
|
|
||||||
clearCodeBlock();
|
clearCodeBlock();
|
||||||
|
|
||||||
currentCategory.set(categoryNode,isSecondary);
|
currentCategory.set(categoryNode,isSecondary);
|
||||||
// Using textContent is bad but meh
|
|
||||||
//let names = DB.query(categoryNode.textContent);
|
|
||||||
|
|
||||||
let secondaryCategoriesNode = document.querySelector("#secondaryCategories");
|
let secondaryCategoriesNode = document.querySelector("#secondaryCategories");
|
||||||
let fileNames = currentCategory.getFileNames(categoryNode,isSecondary);
|
let fileNames = currentCategory.getFileNames(categoryNode,isSecondary);
|
||||||
|
@ -129,11 +125,8 @@ function onCategoryClicked(categoryNode,isSecondary = false){
|
||||||
for(let child of Array.from(secondaryCategoriesNode.children)){
|
for(let child of Array.from(secondaryCategoriesNode.children)){
|
||||||
matchingSecondaries.includes(child.textContent) ? child.classList.remove("hidden") : child.classList.add("hidden")
|
matchingSecondaries.includes(child.textContent) ? child.classList.remove("hidden") : child.classList.add("hidden")
|
||||||
}
|
}
|
||||||
|
|
||||||
//secondaryCategoriesNode.classList.remove("hidden");
|
|
||||||
document.getElementById("categories").classList.add("blurred");
|
document.getElementById("categories").classList.add("blurred");
|
||||||
}else{
|
}else{
|
||||||
//secondaryCategoriesNode.classList.add("hidden");
|
|
||||||
document.getElementById("categories").classList.remove("blurred");
|
document.getElementById("categories").classList.remove("blurred");
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -145,9 +138,13 @@ function onCategoryClicked(categoryNode,isSecondary = false){
|
||||||
document.getElementById("targets").setAttribute("style",`--grid-rows:${Math.ceil(fileNames.length/3)}`)
|
document.getElementById("targets").setAttribute("style",`--grid-rows:${Math.ceil(fileNames.length/3)}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onTargetClicked(targetNode){
|
async function onTargetClicked(target){
|
||||||
const codeBlock = document.querySelector("pre");
|
const codeBlock = document.querySelector("pre");
|
||||||
fetchWithType(`chrome/${getText(targetNode)}`)
|
const text = typeof target === "string"
|
||||||
|
? target
|
||||||
|
: getText(target);
|
||||||
|
|
||||||
|
fetchWithType(`chrome/${text}`)
|
||||||
//.then(text => (codeBlock.textContent = text))
|
//.then(text => (codeBlock.textContent = text))
|
||||||
.then(text => Highlighter.parse(codeBlock,text))
|
.then(text => Highlighter.parse(codeBlock,text))
|
||||||
.catch(e => console.log(e))
|
.catch(e => console.log(e))
|
||||||
|
@ -185,12 +182,15 @@ function createCategories(){
|
||||||
let node = document.createElement("div");
|
let node = document.createElement("div");
|
||||||
node.classList.add(type);
|
node.classList.add(type);
|
||||||
if(type === "target"){
|
if(type === "target"){
|
||||||
node.textContent = name.substring(0,name.lastIndexOf("."));
|
|
||||||
let link = node.appendChild(document.createElement("a"));
|
let link = node.appendChild(document.createElement("a"));
|
||||||
node.classList.add("hidden");
|
node.classList.add("hidden");
|
||||||
link.href = `https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/${name}`;
|
link.href = `https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/${name}`;
|
||||||
link.title = "See on Github";
|
link.title = "See on Github";
|
||||||
link.target = "_blank";
|
link.target = "_blank";
|
||||||
|
const content = name.substring(0,name.lastIndexOf("."));
|
||||||
|
node.append(content);
|
||||||
|
node.setAttribute("title",content);
|
||||||
}else{
|
}else{
|
||||||
node.textContent = name.name;
|
node.textContent = name.name;
|
||||||
name.value > 0 && node.setAttribute("data-value",name.value);
|
name.value > 0 && node.setAttribute("data-value",name.value);
|
||||||
|
@ -436,11 +436,49 @@ const Highlighter = new(function(){
|
||||||
return this
|
return this
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
function handleSearchQuery(){
|
||||||
|
let params = (new URL(document.location)).searchParams;
|
||||||
|
let param = params.get("tag");
|
||||||
|
if(param){
|
||||||
|
let cats = document.querySelectorAll("#categories > .category");
|
||||||
|
for(let cat of cats){
|
||||||
|
if(cat.textContent === param){
|
||||||
|
onCategoryClicked(cat);
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
param = params.get("file");
|
||||||
|
if(param){
|
||||||
|
if(DB.keys.includes(param)){
|
||||||
|
onTargetClicked(param)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
document.onreadystatechange = (function () {
|
document.onreadystatechange = (function () {
|
||||||
|
|
||||||
if (document.readyState === "complete") {
|
if (document.readyState === "complete") {
|
||||||
|
function linkClicked(ev){
|
||||||
|
if(ev.target instanceof HTMLAnchorElement){
|
||||||
|
let ref = ev.target.href;
|
||||||
|
if(!ref){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let fileName = ref.slice(ref.lastIndexOf("/"));
|
||||||
|
if(fileName.endsWith(".css")){
|
||||||
|
onTargetClicked(fileName);
|
||||||
|
ev.preventDefault();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.getElementById("previewBox").addEventListener("click",linkClicked);
|
||||||
|
|
||||||
fetchWithType("html_resources/tagmap.json")
|
fetchWithType("html_resources/tagmap.json")
|
||||||
.then(response=>(initDB(response)))
|
.then(initDB)
|
||||||
.then(()=>createCategories())
|
.then(createCategories)
|
||||||
|
.then(handleSearchQuery)
|
||||||
.catch(e=>{console.log(e);document.getElementById("ui").textContent = "FAILURE, Database could not be loaded"});
|
.catch(e=>{console.log(e);document.getElementById("ui").textContent = "FAILURE, Database could not be loaded"});
|
||||||
}
|
}
|
||||||
});
|
});
|
|
@ -1,11 +1,12 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>firefox-csshacks selector</title>
|
|
||||||
<meta name="viewport" content="width=device-width"/>
|
<meta name="viewport" content="width=device-width"/>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
<title>firefox-csshacks tag browser</title>
|
||||||
<script type="text/javascript" src="html_resources/selector.js"></script>
|
<script type="text/javascript" src="html_resources/selector.js"></script>
|
||||||
<link href="html_resources/main.css" rel="stylesheet" type="text/css"/>
|
<link href="html_resources/main.css" rel="stylesheet" type="text/css"/>
|
||||||
|
<link rel="icon" href="html_resources/favicon.svg" type="image/svg+xml">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="ui">
|
<div id="ui">
|
||||||
|
|
Loading…
Reference in a new issue