From e20eeba89ad1c3d0e87523ff6ba92107369d1ce9 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yb@enix.org>
Date: Wed, 27 Jun 2018 22:12:45 +0200
Subject: [PATCH] Reflect data browser filter in displayed features

fix #550
---
 umap/static/umap/js/umap.controls.js | 11 +++++++++--
 umap/static/umap/js/umap.js          |  4 ++++
 umap/static/umap/js/umap.layer.js    |  4 ++++
 umap/static/umap/map.css             |  3 ++-
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index 3d61102d..5fe1c986 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -648,9 +648,10 @@ L.U.Map.include({
             filter = L.DomUtil.create('input', '', browserContainer),
             filterValue = '',
             featuresContainer = L.DomUtil.create('div', 'umap-browse-features', browserContainer),
-            filterKeys = (this.options.filterKey || this.options.sortKey || 'name').split(',');
+            filterKeys = this.getFilterKeys();
         filter.type = 'text';
         filter.placeholder = L._('Filter…');
+        filter.value = this.options.filter || '';
 
         var addFeature = function (feature) {
             var feature_li = L.DomUtil.create('li', feature.getClassName() + ' feature'),
@@ -709,14 +710,20 @@ L.U.Map.include({
         };
 
         var appendAll = function () {
+            this.options.filter = filterValue = filter.value;
             featuresContainer.innerHTML = '';
-            filterValue = filter.value;
             this.eachBrowsableDataLayer(function (datalayer) {
                 append(datalayer);
             });
         };
+        var resetLayers = function () {
+            this.eachBrowsableDataLayer(function (datalayer) {
+                datalayer.resetLayer(true);
+            });
+        }
         L.bind(appendAll, this)();
         L.DomEvent.on(filter, 'input', appendAll, this);
+        L.DomEvent.on(filter, 'input', resetLayers, this);
         var link = L.DomUtil.create('li', '');
         L.DomUtil.create('i', 'umap-icon-16 umap-caption', link);
         var label = L.DomUtil.create('span', '', link);
diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js
index 28602bac..e8dc0d12 100644
--- a/umap/static/umap/js/umap.js
+++ b/umap/static/umap/js/umap.js
@@ -1637,6 +1637,10 @@ L.U.Map.include({
 
     search: function () {
         if (this._controls.search) this._controls.search.openPanel(this);
+    },
+
+    getFilterKeys: function () {
+        return (this.options.filterKey || this.options.sortKey || 'name').split(',');
     }
 
 });
diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js
index 23f190db..79994308 100644
--- a/umap/static/umap/js/umap.layer.js
+++ b/umap/static/umap/js/umap.layer.js
@@ -228,10 +228,14 @@ L.U.DataLayer = L.Class.extend({
         if (this.layer && this.options.type === this.layer._type && !force) return;
         var visible = this.isVisible();
         if (this.layer) this.layer.clearLayers();
+        // delete this.layer?
         if (visible) this.map.removeLayer(this.layer);
         var Class = L.U.Layer[this.options.type] || L.U.Layer.Default;
         this.layer = new Class(this);
+        var filterKeys = this.map.getFilterKeys(),
+            filter = this.map.options.filter;
         this.eachLayer(function (layer) {
+            if (filter && !layer.matchFilter(filter, filterKeys)) return;
             this.layer.addLayer(layer);
         });
         if (visible) this.map.addLayer(this.layer);
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 955988ec..361210bf 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -855,6 +855,7 @@ a.add-datalayer:hover,
     background-image: url('./img/16.png');
     display: inline;
     padding: 0 10px;
+    vertical-align: middle;
 }
 .umap-add {
     background-position: -12px -49px;
@@ -866,7 +867,7 @@ a.add-datalayer:hover,
     background-position: -92px -168px;
 }
 .umap-caption {
-    background-position: -170px -49px;
+    background-position: -170px -52px;
 }
 
 /* ********************************* */