add secondary categories selection

html_resources/main.css

@@ -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);

html_resources/selector.js

@@ -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"));
   }
   
 }

html_resources/tagmap.json

@@ -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"],

index.html

@@ -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">

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