add secondary categories selection

This commit is contained in:
MrOtherGuy 2020-07-18 08:39:34 +03:00
parent ad5c7889fe
commit b68b14ca66
5 changed files with 63 additions and 18 deletions

View file

@ -1,7 +1,7 @@
body{background-color: rgb(60,50,70); color: silver; margin: 0px } body{background-color: rgb(60,50,70); color: silver; margin: 0px }
#ui{ display: flex; } #ui{ display: flex; }
#categories{ .categoryList{
padding-block: 1em; padding-block: 1em;
box-sizing: border-box; box-sizing: border-box;
border-inline-end: 1px solid gold; border-inline-end: 1px solid gold;
@ -14,12 +14,14 @@ a{ color: rgb(100,150,200); margin-inline-start: 1ch }
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) }
pre:empty{ display: none } pre:empty{ display: none }
.category{ padding: 0.2em 1em; cursor: pointer } .category{ padding: 0.2em 1em; cursor: pointer; text-transform: capitalize }
.category::after{ content: " (" attr(data-value) ")"} .category::after{ content: " (" attr(data-value) ")"}
.currentCategory, .currentCategory,
.category:hover{ background-color: grey } .category:hover{ background-color: grey }
.currentCategory::before{ content: "»" }
.target{ .target{
margin: 0.1em; margin: 0.1em;
background-color: rgb(60,60,70); background-color: rgb(60,60,70);

View file

@ -14,6 +14,9 @@ function initDB(obj){
return nlist return nlist
}}); }});
Object.defineProperty(DB,"keys",{value:(Object.keys(DB).sort())}); Object.defineProperty(DB,"keys",{value:(Object.keys(DB).sort())});
Object.defineProperty(DB,"getTagsForFile",{value:(name)=>(this[name])});
return true return true
} }
@ -56,11 +59,44 @@ function getText(node){
return `${node.childNodes[0].textContent}.css` return `${node.childNodes[0].textContent}.css`
} }
async function onCategoryClicked(categoryNode){ function getSecondaryCategories(list){
let a = [];
for (file of list){
a.concat(DB.getTagsForFile(file));
}
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
}
async function onCategoryClicked(categoryNode,isSecondary = false){
previousCategory.set(categoryNode); previousCategory.set(categoryNode);
// Using textContent is bad but meh
let names = DB.query(categoryNode.textContent); let names = DB.query(categoryNode.textContent);
let secondaryCategoriesNode = document.querySelector("#secondaryCategories");
if(names.length > 9 && !isSecondary){
let matchingSecondaries = getSecondaryCategories(names);
for(let child of Array.from(secondaryCategories.children)){
matchingSecondaries.includes(child.textContent) ? child.classList.remove("hidden") : child.classList.add("hidden")
}
secondaryCategoriesNode.classList.remove("hidden");
}else{
secondaryCategoriesNode.classList.add("hidden");
}
for(let c of Array.from(document.querySelectorAll(".target"))){ for(let c of Array.from(document.querySelectorAll(".target"))){
names.includes(getText(c)) ? c.classList.remove("hidden") : c.classList.add("hidden"); names.includes(getText(c)) ? c.classList.remove("hidden") : c.classList.add("hidden");
} }
@ -79,6 +115,9 @@ function onSomeClicked(e){
case "categories": case "categories":
onCategoryClicked(e.target); onCategoryClicked(e.target);
break; break;
case "secondaryCategories":
onCategoryClicked(e.target,true/* isSecondary */);
break;
case "targets": case "targets":
onTargetClicked(e.target); onTargetClicked(e.target);
break; break;
@ -91,7 +130,8 @@ function onSomeClicked(e){
function createCategories(){ function createCategories(){
const CAT_PARENT = document.getElementById("categories"); const CAT_PARENT = document.getElementById("categories");
CAT_PARENT.addEventListener("click",onSomeClicked) const CAT_SECOND = document.getElementById("secondaryCategories");
CAT_PARENT.addEventListener("click",onSomeClicked);
const TAR_PARENT = document.getElementById("targets"); const TAR_PARENT = document.getElementById("targets");
TAR_PARENT.addEventListener("click",onSomeClicked); TAR_PARENT.addEventListener("click",onSomeClicked);
@ -108,7 +148,7 @@ function createCategories(){
link.target = "_blank"; link.target = "_blank";
}else{ }else{
node.textContent = name.name; node.textContent = name.name;
node.setAttribute("data-value",name.value); name.value > 0 && node.setAttribute("data-value",name.value+1);
} }
return node; return node;
@ -148,7 +188,8 @@ function createCategories(){
for(let cat of CAT_NAMES){ for(let cat of CAT_NAMES){
// CAT_PARENT.appendChild(createCategory(cat.name)) // CAT_PARENT.appendChild(createCategory(cat.name))
CAT_PARENT.appendChild(createNode(cat,"category")) CAT_PARENT.appendChild(createNode(cat,"category"));
CAT_SECOND.appendChild(createNode(cat,"category"));
} }
} }

View file

@ -48,7 +48,7 @@
"minimal_toolbarbuttons_v3.css":["minimal","buttons"], "minimal_toolbarbuttons_v3.css":["minimal","buttons"],
"more_visible_tab_icon.css":["tab","icon"], "more_visible_tab_icon.css":["tab","icon"],
"multi-row_bookmarks.css":["multi-row","bookmarks"], "multi-row_bookmarks.css":["multi-row","bookmarks"],
"multi-row_oneliner_combo_patch.css":["multi-row","patch","1-line","minimal"], "multi-row_oneliner_combo_patch.css":["multi-row","patch","one-line","minimal"],
"multi-row_tabs.css":["tabs","multi-row","toolbars"], "multi-row_tabs.css":["tabs","multi-row","toolbars"],
"multi-row_tabs_Fx66+.css":["legacy"], "multi-row_tabs_Fx66+.css":["legacy"],
"multi-row_tabs_below_content.css":["multi-row","tabs","toolbars"], "multi-row_tabs_below_content.css":["multi-row","tabs","toolbars"],
@ -56,10 +56,10 @@
"multi-row_tabs_legacy.css":["legacy"], "multi-row_tabs_legacy.css":["legacy"],
"multi-row_tabs_window_control_patch.css":["patch","multi-row","window-control"], "multi-row_tabs_window_control_patch.css":["patch","multi-row","window-control"],
"navbar_below_content.css":["nav-bar","toolbars"], "navbar_below_content.css":["nav-bar","toolbars"],
"navbar_tabs_oneliner.css":["1-line","minimal","tabs","nav-bar","toolbars"], "navbar_tabs_oneliner.css":["one-line","minimal","tabs","nav-bar","toolbars"],
"navbar_tabs_oneliner_menu_buttons_on_right.css":["1-line","minimal","tabs","nav-bar","toolbars","patch","menubar"], "navbar_tabs_oneliner_menu_buttons_on_right.css":["one-line","minimal","tabs","nav-bar","toolbars","patch","menubar"],
"navbar_tabs_oneliner_tabs_on_left.css":["1-line","minimal","tabs","nav-bar","toolbars"], "navbar_tabs_oneliner_tabs_on_left.css":["one-line","minimal","tabs","nav-bar","toolbars"],
"navbar_tabs_responsive_oneliner.css":["1-line","minimal","tabs","nav-bar","toolbars"], "navbar_tabs_responsive_oneliner.css":["one-line","minimal","tabs","nav-bar","toolbars"],
"navigation_buttons_inside_urlbar.css":["navigation","buttons","urlbar"], "navigation_buttons_inside_urlbar.css":["navigation","buttons","urlbar"],
"numbered_tabs.css":["tabs"], "numbered_tabs.css":["tabs"],
"overlay_menubar.css":["menubar"], "overlay_menubar.css":["menubar"],

View file

@ -9,7 +9,9 @@
</head> </head>
<body> <body>
<div id="ui"> <div id="ui">
<div id="categories"> <div id="categories" class="categoryList">
</div>
<div id="secondaryCategories" class="categoryList hidden">
</div> </div>
<div id="site"> <div id="site">
<div id="targets"> <div id="targets">

View file

@ -47,7 +47,7 @@ minimal_toolbarbuttons_v2.css,minimal,buttons
minimal_toolbarbuttons_v3.css,minimal,buttons minimal_toolbarbuttons_v3.css,minimal,buttons
more_visible_tab_icon.css,tab,icon more_visible_tab_icon.css,tab,icon
multi-row_bookmarks.css,multi-row,bookmarks multi-row_bookmarks.css,multi-row,bookmarks
multi-row_oneliner_combo_patch.css,multi-row,patch,1-line,minimal multi-row_oneliner_combo_patch.css,multi-row,patch,one-line,minimal
multi-row_tabs.css,tabs,multi-row,toolbars multi-row_tabs.css,tabs,multi-row,toolbars
multi-row_tabs_Fx66+.css,legacy multi-row_tabs_Fx66+.css,legacy
multi-row_tabs_below_content.css,multi-row,tabs,toolbars multi-row_tabs_below_content.css,multi-row,tabs,toolbars
@ -55,10 +55,10 @@ multi-row_tabs_below_content_legacy.css,legacy
multi-row_tabs_legacy.css,legacy multi-row_tabs_legacy.css,legacy
multi-row_tabs_window_control_patch.css,patch,multi-row,window-control multi-row_tabs_window_control_patch.css,patch,multi-row,window-control
navbar_below_content.css,nav-bar,toolbars navbar_below_content.css,nav-bar,toolbars
navbar_tabs_oneliner.css,1-line,minimal,tabs,nav-bar,toolbars navbar_tabs_oneliner.css,one-line,minimal,tabs,nav-bar,toolbars
navbar_tabs_oneliner_menu_buttons_on_right.css,1-line,minimal,tabs,nav-bar,toolbars,patch,menubar navbar_tabs_oneliner_menu_buttons_on_right.css,one-line,minimal,tabs,nav-bar,toolbars,patch,menubar
navbar_tabs_oneliner_tabs_on_left.css,1-line,minimal,tabs,nav-bar,toolbars navbar_tabs_oneliner_tabs_on_left.css,one-line,minimal,tabs,nav-bar,toolbars
navbar_tabs_responsive_oneliner.css,1-line,minimal,tabs,nav-bar,toolbars navbar_tabs_responsive_oneliner.css,one-line,minimal,tabs,nav-bar,toolbars
navigation_buttons_inside_urlbar.css,navigation,buttons,urlbar navigation_buttons_inside_urlbar.css,navigation,buttons,urlbar
numbered_tabs.css,tabs numbered_tabs.css,tabs
overlay_menubar.css,menubar overlay_menubar.css,menubar

1 autohide_bookmarks_and_main_toolbars.css,autohide,bookmarks,toolbars,nav-bar
47 minimal_toolbarbuttons_v3.css,minimal,buttons
48 more_visible_tab_icon.css,tab,icon
49 multi-row_bookmarks.css,multi-row,bookmarks
50 multi-row_oneliner_combo_patch.css,multi-row,patch,1-line,minimal multi-row_oneliner_combo_patch.css,multi-row,patch,one-line,minimal
51 multi-row_tabs.css,tabs,multi-row,toolbars
52 multi-row_tabs_Fx66+.css,legacy
53 multi-row_tabs_below_content.css,multi-row,tabs,toolbars
55 multi-row_tabs_legacy.css,legacy
56 multi-row_tabs_window_control_patch.css,patch,multi-row,window-control
57 navbar_below_content.css,nav-bar,toolbars
58 navbar_tabs_oneliner.css,1-line,minimal,tabs,nav-bar,toolbars navbar_tabs_oneliner.css,one-line,minimal,tabs,nav-bar,toolbars
59 navbar_tabs_oneliner_menu_buttons_on_right.css,1-line,minimal,tabs,nav-bar,toolbars,patch,menubar navbar_tabs_oneliner_menu_buttons_on_right.css,one-line,minimal,tabs,nav-bar,toolbars,patch,menubar
60 navbar_tabs_oneliner_tabs_on_left.css,1-line,minimal,tabs,nav-bar,toolbars navbar_tabs_oneliner_tabs_on_left.css,one-line,minimal,tabs,nav-bar,toolbars
61 navbar_tabs_responsive_oneliner.css,1-line,minimal,tabs,nav-bar,toolbars navbar_tabs_responsive_oneliner.css,one-line,minimal,tabs,nav-bar,toolbars
62 navigation_buttons_inside_urlbar.css,navigation,buttons,urlbar
63 numbered_tabs.css,tabs
64 overlay_menubar.css,menubar