From 15be47ace97b7acdf3e063a48aa8eb73c4a83bd9 Mon Sep 17 00:00:00 2001 From: MrOtherGuy Date: Sun, 9 May 2021 13:36:27 +0300 Subject: [PATCH] some improvements on tag browser --- html_resources/favicon.svg | 8 +++++ html_resources/main.css | 34 ++++++++++++-------- html_resources/selector.js | 64 ++++++++++++++++++++++++++++++-------- index.html | 3 +- 4 files changed, 82 insertions(+), 27 deletions(-) create mode 100644 html_resources/favicon.svg diff --git a/html_resources/favicon.svg b/html_resources/favicon.svg new file mode 100644 index 0000000..15b582e --- /dev/null +++ b/html_resources/favicon.svg @@ -0,0 +1,8 @@ + + + + + \ No newline at end of file diff --git a/html_resources/main.css b/html_resources/main.css index 8a961ef..1525475 100644 --- a/html_resources/main.css +++ b/html_resources/main.css @@ -9,7 +9,7 @@ body{background-color: rgb(60,50,70); color: silver; margin: 0px } background-color: rgb(60,60,70); max-height: 100vh; overflow-y: auto; - min-width: 18ch + min-width: 22ch } .categoryList.blurred{ @@ -28,9 +28,10 @@ body{background-color: rgb(60,50,70); color: silver; margin: 0px } z-index: 2; background-color: rgb(60,60,70); 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 } a:visited{ color: rgb(150,100,200) } a:hover{ color: rgb(200,150,100) } @@ -41,7 +42,7 @@ pre:empty{ display: none } .currentCategory, .category:hover{ background-color: grey } -.currentCategory::before{ content: "»" } +.currentCategory::before{ content: "» " } .target{ margin: 0.1em; @@ -49,13 +50,16 @@ pre:empty{ display: none } padding: 0.3em; border: 1px solid rgb(40,40,40); border-radius: 4px; - max-width: 50ch; - cursor: pointer + max-width: 30%; + cursor: pointer; + white-space:nowrap; + overflow: hidden; + text-overflow: ellipsis; } .target > a{ - content: ""; + display:inline-block; width: 1.2em; - height: 1.3em; + height: 80%; background-image: url("ext.svg"); background-repeat: no-repeat; background-size: contain; @@ -74,22 +78,26 @@ pre{ white-space: pre-wrap; margin: 1em; border: 2px inset; - padding: 0.5em; - background-color: rgb(40,50,50) + padding: 0 0 0 2em; + 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, .hidden{ display: none !important } -.target{ display: flex; justify-content: space-between } - .comment{ color: rgb(50,180,20) } -.selector{ color: violet } +.selector{ color: palegoldenrod } .pseudo{ color: silver } .id{ color: lightcoral } .class{ color: lightgreen } .attribute{ color: cyan } -.atrule{ color: royalblue } +.atrule{ color: mediumslateblue } .atvalue{ color: lightblue } .property{ color: orange } .value{ color: skyblue } diff --git a/html_resources/selector.js b/html_resources/selector.js index 57903e3..3499e4a 100644 --- a/html_resources/selector.js +++ b/html_resources/selector.js @@ -70,7 +70,6 @@ let currentCategory = new (function(){ currentTopLevelFileNames = DB.query(t.textContent); } - //this.fileNames = DB.query(t.textContent,secondary?this.fileNames:null); }; this.getFileNames = function(node,secondary){ @@ -83,7 +82,7 @@ let currentCategory = new (function(){ })() function getText(node){ - return `${node.childNodes[0].textContent}.css` + return `${node.textContent}.css` } function getSecondaryCategories(list){ @@ -115,10 +114,7 @@ function clearCodeBlock(){ function onCategoryClicked(categoryNode,isSecondary = false){ clearCodeBlock(); - currentCategory.set(categoryNode,isSecondary); - // Using textContent is bad but meh - //let names = DB.query(categoryNode.textContent); let secondaryCategoriesNode = document.querySelector("#secondaryCategories"); let fileNames = currentCategory.getFileNames(categoryNode,isSecondary); @@ -129,11 +125,8 @@ function onCategoryClicked(categoryNode,isSecondary = false){ for(let child of Array.from(secondaryCategoriesNode.children)){ matchingSecondaries.includes(child.textContent) ? child.classList.remove("hidden") : child.classList.add("hidden") } - - //secondaryCategoriesNode.classList.remove("hidden"); document.getElementById("categories").classList.add("blurred"); }else{ - //secondaryCategoriesNode.classList.add("hidden"); 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)}`) } -async function onTargetClicked(targetNode){ +async function onTargetClicked(target){ 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 => Highlighter.parse(codeBlock,text)) .catch(e => console.log(e)) @@ -185,12 +182,15 @@ function createCategories(){ let node = document.createElement("div"); node.classList.add(type); if(type === "target"){ - node.textContent = name.substring(0,name.lastIndexOf(".")); + let link = node.appendChild(document.createElement("a")); node.classList.add("hidden"); link.href = `https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/${name}`; link.title = "See on Github"; link.target = "_blank"; + const content = name.substring(0,name.lastIndexOf(".")); + node.append(content); + node.setAttribute("title",content); }else{ node.textContent = name.name; name.value > 0 && node.setAttribute("data-value",name.value); @@ -436,11 +436,49 @@ const Highlighter = new(function(){ 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 () { + 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") - .then(response=>(initDB(response))) - .then(()=>createCategories()) + .then(initDB) + .then(createCategories) + .then(handleSearchQuery) .catch(e=>{console.log(e);document.getElementById("ui").textContent = "FAILURE, Database could not be loaded"}); } }); \ No newline at end of file diff --git a/index.html b/index.html index d8e600d..dcfcc1d 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,12 @@ - firefox-csshacks selector + firefox-csshacks tag browser +