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 }
|
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);
|
||||||
|
|
|
@ -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"));
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"],
|
||||||
|
|
|
@ -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">
|
||||||
|
|
10
tags.csv
10
tags.csv
|
@ -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
|
||||||
|
|
|
Loading…
Reference in a new issue