Merge pull request #20 from Illusion26781/main

Added a counter for the filters
ForwardFeed · Apr 26, 2024 · a97bbdd · a97bbdd
2 parents 4f17ccf + 95f6fad
commit a97bbdd
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 5 deletions.
diff --git a/static/css/core.css b/static/css/core.css
@@ -325,3 +325,16 @@ span{
     }
 }
 
+#filter-counter{
+    display: none;
+    position: relative;
+    height: fit-content;
+    bottom: 10px;
+    font-size: large;
+    align-self: flex-end;
+    right: 39%;
+    padding: 2px; 
+    background-color: red;
+    border-radius: 100px;
+}
+
diff --git a/static/index.html b/static/index.html
@@ -39,7 +39,10 @@
         <span class="main-title">
             Elite Redux Nextdex
         </span>
-        <img id="filter-icon" src="./icons/filter.png" alt="">
+        <div style="display: flex;">
+            <img id="filter-icon" src="./icons/filter.png" alt="">
+            <div id="filter-counter"></div> 
+        </div>
         <img id="settings-btn" src="./icons/settings.png" alt="settings panel">
 
     </div>

diff --git a/static/js/filters.js b/static/js/filters.js
@@ -3,6 +3,9 @@ import { e, JSHAC, clickOutsideToHide, setLongClickSelection } from "./utils.js"
 import { setAllMoves } from "./panels/species/species_panel.js"
 import { capitalizeFirstLetter } from "./utils.js"
 // Sync it with search.js => panelUpdatesTable
+
+let filtersCounter = 0
+
 export const filterDatas = [
     {
         name: "Species",
@@ -136,10 +139,9 @@ export function activateSearch(callback){
         search.updateQueue = false
     }
     search.updateGuard = false
-}
-
-
+} 
 export function appendFilter(panelID, initKey = "", initData = ""){ 
+    incFiltersCounter()
     const divField = e("div", "filter-field")
 
     const divNot = e("div", "filter-not", "¿?")
@@ -231,6 +233,7 @@ export function appendFilter(panelID, initKey = "", initData = ""){
     divRemove.onclick = ()=>{
         divField.remove()
         filterDatas[panelID].modify()
+        decFiltersCounter()
         spinOnRemoveFilter()
 
     }
@@ -241,6 +244,28 @@ export function appendFilter(panelID, initKey = "", initData = ""){
     return divField
 }
 
+function incFiltersCounter()
+{
+    if(filtersCounter==0)
+    $("#filter-counter").css("display","block")
+    filtersCounter++ 
+    $("#filter-counter").text(filtersCounter)
+
+}
+function decFiltersCounter()
+{
+    filtersCounter--
+    if(filtersCounter==0) 
+    $("#filter-counter").css("display","none")
+    else    
+        $("#filter-counter").text(filtersCounter)
+}
+function resetFiltersCounter()
+{
+    filtersCounter = 0
+    $("#filter-counter").css("display","none")
+}
+
 /**
  * 
  * @callback searchAssertion - compare the data from the query and the data from the data
@@ -630,6 +655,7 @@ export function queryFilter3(query, datas, keymap, prefixedTree = {} , entrypoin
 function removeAllFilters(){
     $('#filter-frame').find('.filter-field').remove()
     spinOnRemoveFilter()
+    resetFiltersCounter()
     activateSearch()
 }
 
@@ -691,7 +717,7 @@ export function setupFilters(){
 export function longClickToFilter(panelID, node, key, data = ()=>{return node.innerText}, callback = false){
     let filterDiv, color
     let extendableDiv = setLongClickSelection(node, () => {
-        if (hasFilter(key, data(), panelID)) {
+        if (hasFilter(key, data(), panelID)) {  
             if (!filterDiv){
                 $('.filter-search').each((index, val)=>{
                     if (val.value === data()){
@@ -700,6 +726,7 @@ export function longClickToFilter(panelID, node, key, data = ()=>{return node.in
                 })
             } else {
                 filterDiv.remove()
+                decFiltersCounter()
             }
             spinOnRemoveFilter()
             color = "green";