wip: add a badge on filters title and datalayers icon when active

umap/static/umap/base.css

@@ -323,6 +323,27 @@ fieldset legend {
     padding: 0 5px;
 }
 
+[data-badge] {
+    position: relative;
+}
+[data-badge]:after {
+    position: absolute;
+    right: -8px;
+    top: -8px;
+    min-width: 8px;
+    min-height: 8px;
+    line-height: 8px;
+    padding: 2px;
+    font-weight: bold;
+    background-color: var(--color-flashyGreen);
+    color: var(--color-darkBlue);
+    text-align: center;
+    font-size: .75rem;
+    border-radius: 50%;
+    content: attr(data-badge);
+    border: solid .5px var(--color-darkBlue);
+}
+
 /* Switch */
 input.switch:empty {
     display: none;

umap/static/umap/js/modules/browser.js

@@ -114,6 +114,8 @@ export default class Browser {
       datalayer.resetLayer(true)
       this.updateDatalayer(datalayer)
     })
+    U.Utils.toggleBadge(this.filtersTitle, this.hasFilters())
+    U.Utils.toggleBadge('.umap-control-browse', this.hasFilters())
   }
 
   redraw() {
@@ -124,6 +126,10 @@ export default class Browser {
     return !!document.querySelector('.umap-browser')
   }
 
+  hasFilters() {
+    return !!this.options.filter || this.map.facets.isActive()
+  }
+
   onMoveEnd() {
     if (!this.isOpen()) return
     const isListDynamic = this.options.inBbox
@@ -157,6 +163,8 @@ export default class Browser {
       className: 'filters',
       icon: 'icon-filters',
     })
+    this.filtersTitle = container.querySelector('summary')
+    U.Utils.toggleBadge(this.filtersTitle, this.hasFilters())
     this.dataContainer = DomUtil.create('div', '', container)
 
     let fields = [

umap/static/umap/js/modules/facets.js

@@ -56,8 +56,16 @@ export default class Facets {
     return properties
   }
 
-  build() {
+  isActive() {
+    for (let { type, min, max, choices } of Object.values(this.selected)) {
+      if (min !== undefined || max != undefined || choices?.length) {
+        return true
+      }
+    }
+    return false
+  }
 
+  build() {
     const defined = this.getDefined()
     const names = Object.keys(defined)
     const facetProperties = this.compute(names, defined)

umap/static/umap/js/modules/utils.js

@@ -362,3 +362,11 @@ export function parseNaiveDate(value) {
   // Let's pretend naive date are UTC, and remove time…
   return new Date(Date.UTC(naive.getFullYear(), naive.getMonth(), naive.getDate()))
 }
+
+export function toggleBadge(element, value) {
+  if (!element.nodeType) element = document.querySelector(element)
+  if (!element) return
+  // True means simple badge, without content
+  if (value) element.dataset.badge = value === true ? ' ' : value
+  else delete element.dataset.badge
+}

umap/static/umap/js/umap.controls.js

@@ -496,8 +496,11 @@ L.Control.Button = L.Control.extend({
       this
     )
     L.DomEvent.on(button, 'dblclick', L.DomEvent.stopPropagation)
+    this.afterAdd(container)
     return container
   },
+
+  afterAdd: function (container) {},
 })
 
 U.DataLayersControl = L.Control.Button.extend({
@@ -507,6 +510,10 @@ U.DataLayersControl = L.Control.Button.extend({
     title: L._('See layers'),
   },
 
+  afterAdd: function (container) {
+    U.Utils.toggleBadge(container, this.map.browser.hasFilters())
+  },
+
   onClick: function () {
     this.map.openBrowser()
   },

umap/static/umap/vars.css

@@ -5,6 +5,7 @@
     --color-lightGray: #ddd;
     --color-darkGray: #323737;
     --color-light: white;
+    --color-flashyGreen: #b9f5d2;
 
     --background-color: var(--color-light);