mobile-config-firefox/html_resources/selector.js

446 lines
No EOL
12 KiB
JavaScript

'use strict';
let DB = null;
function initDB(obj){
DB = obj;
Object.defineProperty(DB,"query",{value:function (q,list){
let nlist = [];
for(let key of list || this.keys){
if(this[key].includes(q)){
nlist.push(key)
}
}
return nlist
}});
Object.defineProperty(DB,"keys",{value:(Object.keys(DB).sort())});
Object.defineProperty(DB,"getTagsForFile",{value:function(name){return this[name]}});
return true
}
function fetchWithType(url){
return new Promise((resolve,reject)=>{
const ext = url.substring(url.lastIndexOf(".")+1);
let expected = (ext === "json") ? "application/json" : (ext === "css") ? "text/css" : null;
if(!expected){
reject("unsupported file extension");
}
fetch(url)
.then(response =>{
const contentType = response.headers.get('content-type');
if (!contentType || !contentType.includes(expected)) {
reject(`Oops, we got ${contentType} but expected ${expected}`);
}
if(ext === "json"){
response.json()
.then(r=>resolve(r))
}else{
response.text()
.then(r=>resolve(r))
}
},except => reject(except))
});
}
let currentCategory = new (function(){
let currentPrimaryNode = null;
let currentSecondaryNode = null;
// TODO make filenames store ONLY the top level fileNames
//
let currentTopLevelFileNames = null;
this.set = function(t,secondary){
if(secondary){
currentSecondaryNode && currentSecondaryNode.classList.remove("currentCategory");
currentSecondaryNode = t;
currentSecondaryNode.classList.add("currentCategory");
}else{
currentPrimaryNode && currentPrimaryNode.classList.remove("currentCategory");
currentPrimaryNode = t;
currentPrimaryNode.classList.add("currentCategory");
currentSecondaryNode && currentSecondaryNode.classList.remove("currentCategory");
currentSecondaryNode = null;
}
if(!secondary){
currentTopLevelFileNames = DB.query(t.textContent);
}
//this.fileNames = DB.query(t.textContent,secondary?this.fileNames:null);
};
this.getFileNames = function(node,secondary){
if(secondary){
return DB.query(node.textContent,currentTopLevelFileNames)
}
return currentTopLevelFileNames
}
return this
})()
function getText(node){
return `${node.childNodes[0].textContent}.css`
}
function getSecondaryCategories(list){
let a = [];
for (let file of list){
a.push(DB.getTagsForFile(file));
}
a = a.flat();
a.sort();
let ret = [];
let i = 0;
ret[0] = a[0];
for(let f of a){
if(ret[i] != f){
ret[++i] = f
}
}
return ret
}
function clearCodeBlock(){
const pre = document.getElementById("previewBox");
for(let el of Array.from(pre.childNodes)){
pre.removeChild(el)
}
return
}
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);
if(!isSecondary){
if(fileNames.length > 9){
let matchingSecondaries = getSecondaryCategories(fileNames);
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");
}
}
for(let c of Array.from(document.querySelectorAll(".target"))){
fileNames.includes(getText(c)) ? c.classList.remove("hidden") : c.classList.add("hidden");
}
document.getElementById("targets").setAttribute("style",`--grid-rows:${Math.ceil(fileNames.length/3)}`)
}
async function onTargetClicked(targetNode){
const codeBlock = document.querySelector("pre");
fetchWithType(`chrome/${getText(targetNode)}`)
//.then(text => (codeBlock.textContent = text))
.then(text => Highlighter.parse(codeBlock,text))
.catch(e => console.log(e))
}
function onSomeClicked(e){
let cl = e.target.parentNode.id;
switch(cl){
case "categories":
onCategoryClicked(e.target);
break;
case "secondaryCategories":
onCategoryClicked(e.target,true/* isSecondary */);
break;
case "targets":
onTargetClicked(e.target);
break;
default:
break;
}
}
function createCategories(){
const CAT_PARENT = document.getElementById("categories");
const CAT_SECOND = document.getElementById("secondaryCategories");
CAT_PARENT.addEventListener("click",onSomeClicked,{passive:true});
CAT_SECOND.addEventListener("click",onSomeClicked,{passive:true});
const TAR_PARENT = document.getElementById("targets");
TAR_PARENT.addEventListener("click",onSomeClicked,{passive:true});
const createNode = function(name,type){
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";
}else{
node.textContent = name.name;
name.value > 0 && node.setAttribute("data-value",name.value);
}
return node;
}
const createCategory = name => createNode(name,"category");
const createTarget = name => createNode(name,"target");
const CAT_NAMES = (function(){
let list = [];
for(let key of Object.keys(DB)){
TAR_PARENT.appendChild(createNode(key,"target"));
let things = DB[key];
for(let t of things){
list.push(t)
}
}
list.sort();
let ret = [];
let ns = [0];
ret[0] = list[0];
let i = 0;
for(let item of list){
if(ret[i]!=item){
ret[++i]=item;
ns[i]=0;
}else{
ns[i] += (item === "legacy" ? -1 : 1);
}
}
let map = ret.map((a,i)=>({name:a,value:ns[i]+1}))
return map
//return map.sort((a,b)=>(a.value > b.value?-1:a.value < b.value ? 1:0))
})();
for(let cat of CAT_NAMES){
// CAT_PARENT.appendChild(createCategory(cat.name))
CAT_PARENT.appendChild(createNode(cat,"category"));
CAT_SECOND.appendChild(createNode(cat,"category"));
}
}
const Highlighter = new(function(){
const state = new (function(){
let current = 0;
let previous = 0;
this.now = ()=>current;
this.previous = ()=>previous;
this.set = function(a){ previous = current; current = a; return}
})();
let pointer = 0;
let token = "";
const selectorToClassMap = new Map([
[":","pseudo"],
["#","id"],
[".","class"],
["[","attribute"]]);
this.parse = function(targetNode,text){
clearCodeBlock();
let node = document.createElement("div");
function createElementFromToken(type,c){
if(token.length === 0 && !c){
return
}
let n = document.createElement("span");
if(type==="selector"){
let parts = token.split(/([\.#:\[]\w[\w-_"'=\]]*|\s\w[\w-_"'=\]]*)/);
for(let part of parts){
if(part.length === 0){
continue
}
let c = part[0];
switch (c){
case ":":
case "#":
case "[":
case ".":
let p = n.appendChild(document.createElement("span"));
p.className = selectorToClassMap.get(c);
p.textContent = part;
break;
default:
n.append(part);
}
}
} else if(type === "comment"){
let linksToFile = token.match(/[\w-\.]+\.css/g);
if(linksToFile && linksToFile.length){
let linkIdx = 0;
let fromIdx = 0;
while(linkIdx < linksToFile.length){
let part = linksToFile[linkIdx++];
let idx = token.indexOf(part);
n.append(token.substring(fromIdx,idx));
let link = document.createElement("a");
link.textContent = part;
link.href = `https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/${part}`;
link.target = "_blank";
n.appendChild(link);
fromIdx = idx + part.length;
}
n.append(token.substring(fromIdx));
}else{
n.textContent = c || token
}
}
else{
n.textContent = c || token;
}
n.className = (`token ${type}`);
token = "";
node.appendChild(n);
return
}
let c;
let curly = false;
while(pointer < text.length){
c = text[pointer];
const currentState = state.now();
curly = currentState != 2 && (c === "{" || c === "}");
if(!curly){
token+=c;
}
switch(currentState){
case 0:
switch(c){
case "/":
if(text[pointer+1] === "*"){
state.set(2);
if(token.length > 1){
token = token.slice(0,-1);
createElementFromToken("selector");
token += "/"
}
}
break;
case "{":
state.set(3);
createElementFromToken("selector");
break;
case "}":
createElementFromToken("text");
break;
case "@":
state.set(5);
}
break;
case 2:
switch(c){
case "*":
if(text[pointer+1] === "/"){
token += "/";
pointer++;
state.set(state.previous());
createElementFromToken("comment");
}
}
break;
case 3:
switch(c){
case "/":
if(text[pointer+1] === "*"){
state.set(2);
}
break;
case ":":
createElementFromToken("property");
state.set(4);
break;
case "}":
createElementFromToken("text");
state.set(0);
}
break;
case 4:
switch(c){
case ";":
createElementFromToken("value");
state.set(3);
break;
case "}":
createElementFromToken("value");
state.set(0);
}
break;
case 5:
switch(c){
case " ":
createElementFromToken("atrule");
state.set(6);
}
break;
case 6:
switch(c){
case ";":
case "{":
createElementFromToken("atvalue");
state.set(0);
}
break
default:
false
}
curly && createElementFromToken("curly",c);
pointer++
}
createElementFromToken("text");
token = "";
state.set(0);
pointer = 0;
targetNode.appendChild(node);
return
}
return this
})();
document.onreadystatechange = (function () {
if (document.readyState === "complete") {
fetchWithType("html_resources/tagmap.json")
.then(response=>(initDB(response)))
.then(()=>createCategories())
.catch(e=>{console.log(e);document.getElementById("ui").textContent = "FAILURE, Database could not be loaded"});
}
});