add secondary categories selection
This commit is contained in:
parent
ad5c7889fe
commit
b68b14ca66
5 changed files with 63 additions and 18 deletions
|
@ -1,7 +1,7 @@
|
|||
body{background-color: rgb(60,50,70); color: silver; margin: 0px }
|
||||
#ui{ display: flex; }
|
||||
|
||||
#categories{
|
||||
.categoryList{
|
||||
padding-block: 1em;
|
||||
box-sizing: border-box;
|
||||
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:hover{ color: rgb(200,150,100) }
|
||||
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) ")"}
|
||||
|
||||
.currentCategory,
|
||||
.category:hover{ background-color: grey }
|
||||
|
||||
.currentCategory::before{ content: "»" }
|
||||
|
||||
.target{
|
||||
margin: 0.1em;
|
||||
background-color: rgb(60,60,70);
|
||||
|
|
|
@ -14,6 +14,9 @@ function initDB(obj){
|
|||
return nlist
|
||||
}});
|
||||
Object.defineProperty(DB,"keys",{value:(Object.keys(DB).sort())});
|
||||
|
||||
Object.defineProperty(DB,"getTagsForFile",{value:(name)=>(this[name])});
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
|
@ -56,11 +59,44 @@ function getText(node){
|
|||
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);
|
||||
|
||||
// Using textContent is bad but meh
|
||||
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"))){
|
||||
names.includes(getText(c)) ? c.classList.remove("hidden") : c.classList.add("hidden");
|
||||
}
|
||||
|
@ -79,6 +115,9 @@ function onSomeClicked(e){
|
|||
case "categories":
|
||||
onCategoryClicked(e.target);
|
||||
break;
|
||||
case "secondaryCategories":
|
||||
onCategoryClicked(e.target,true/* isSecondary */);
|
||||
break;
|
||||
case "targets":
|
||||
onTargetClicked(e.target);
|
||||
break;
|
||||
|
@ -91,7 +130,8 @@ function onSomeClicked(e){
|
|||
function createCategories(){
|
||||
|
||||
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");
|
||||
TAR_PARENT.addEventListener("click",onSomeClicked);
|
||||
|
@ -108,7 +148,7 @@ function createCategories(){
|
|||
link.target = "_blank";
|
||||
}else{
|
||||
node.textContent = name.name;
|
||||
node.setAttribute("data-value",name.value);
|
||||
name.value > 0 && node.setAttribute("data-value",name.value+1);
|
||||
}
|
||||
|
||||
return node;
|
||||
|
@ -148,7 +188,8 @@ function createCategories(){
|
|||
|
||||
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"));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
"minimal_toolbarbuttons_v3.css":["minimal","buttons"],
|
||||
"more_visible_tab_icon.css":["tab","icon"],
|
||||
"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_Fx66+.css":["legacy"],
|
||||
"multi-row_tabs_below_content.css":["multi-row","tabs","toolbars"],
|
||||
|
@ -56,10 +56,10 @@
|
|||
"multi-row_tabs_legacy.css":["legacy"],
|
||||
"multi-row_tabs_window_control_patch.css":["patch","multi-row","window-control"],
|
||||
"navbar_below_content.css":["nav-bar","toolbars"],
|
||||
"navbar_tabs_oneliner.css":["1-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_tabs_on_left.css":["1-line","minimal","tabs","nav-bar","toolbars"],
|
||||
"navbar_tabs_responsive_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":["one-line","minimal","tabs","nav-bar","toolbars","patch","menubar"],
|
||||
"navbar_tabs_oneliner_tabs_on_left.css":["one-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"],
|
||||
"numbered_tabs.css":["tabs"],
|
||||
"overlay_menubar.css":["menubar"],
|
||||
|
|
|
@ -9,7 +9,9 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="ui">
|
||||
<div id="categories">
|
||||
<div id="categories" class="categoryList">
|
||||
</div>
|
||||
<div id="secondaryCategories" class="categoryList hidden">
|
||||
</div>
|
||||
<div id="site">
|
||||
<div id="targets">
|
||||
|
|
10
tags.csv
10
tags.csv
|
@ -47,7 +47,7 @@ minimal_toolbarbuttons_v2.css,minimal,buttons
|
|||
minimal_toolbarbuttons_v3.css,minimal,buttons
|
||||
more_visible_tab_icon.css,tab,icon
|
||||
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_Fx66+.css,legacy
|
||||
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_window_control_patch.css,patch,multi-row,window-control
|
||||
navbar_below_content.css,nav-bar,toolbars
|
||||
navbar_tabs_oneliner.css,1-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_tabs_on_left.css,1-line,minimal,tabs,nav-bar,toolbars
|
||||
navbar_tabs_responsive_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,one-line,minimal,tabs,nav-bar,toolbars,patch,menubar
|
||||
navbar_tabs_oneliner_tabs_on_left.css,one-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
|
||||
numbered_tabs.css,tabs
|
||||
overlay_menubar.css,menubar
|
||||
|
|
|
Loading…
Reference in a new issue