diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 63566a60..43260c1f 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -794,7 +794,7 @@ L.U.Map.include({ _openFacet: function () { const container = L.DomUtil.create('div', 'umap-facet-search'), title = L.DomUtil.add('h3', 'umap-filter-title', container, L._('Facet search')), - keys = this.getFacetKeys() + keys = Object.keys(this.getFacetKeys()) const knownValues = {} @@ -830,6 +830,7 @@ L.U.Map.include({ { handler: 'FacetSearch', choices: knownValues[current], + label: this.getFacetKeys()[current], }, ]) const builder = new L.U.FormBuilder(this, fields, { diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index 77afe2b2..f1827966 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -569,7 +569,7 @@ L.U.Help = L.Class.extend({ slugKey: L._('The name of the property to use as feature unique identifier.'), filterKey: L._('Comma separated list of properties to use when filtering features'), facetKey: L._( - 'Comma separated list of properties to use for facet search' + 'Comma separated list of properties to use for facet search (eg.: mykey,otherkey). To control label, add it after a | (eg.: mykey|My Key,otherkeyOther Key)' ), interactive: L._('If false, the polygon will act as a part of the underlying map.'), outlink: L._('Define link to open in a new window on polygon click.'), diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index e825d400..e3569a2d 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -686,14 +686,17 @@ L.FormBuilder.Switch = L.FormBuilder.CheckBox.extend({ L.FormBuilder.FacetSearch = L.FormBuilder.Element.extend({ build: function () { - this.container = L.DomUtil.create('div', 'property-container', this.parentNode) - this.headline = L.DomUtil.add('h5', '', this.container, this.name) + this.container = L.DomUtil.create('div', 'umap-facet', this.parentNode) this.ul = L.DomUtil.create('ul', '', this.container) const choices = this.options.choices choices.sort() choices.forEach((value) => this.buildLi(value)) }, + buildLabel: function () { + this.label = L.DomUtil.add('h5', '', this.parentNode, this.options.label); + }, + buildLi: function (value) { const property_li = L.DomUtil.create('li', '', this.ul), input = L.DomUtil.create('input', '', property_li), diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index 1412eb04..184e33e9 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -2104,7 +2104,11 @@ L.U.Map.include({ }, getFacetKeys: function () { - return (this.options.facetKey || '').split(',') + return (this.options.facetKey || '').split(',').reduce((acc, curr) => { + const els = curr.split("|") + acc[els[0]] = els[1] || els[0] + return acc + }, {}) }, getLayersBounds: function () { diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 4abeb02c..852e4bdc 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -853,9 +853,6 @@ a.add-datalayer:hover, .umap-browse-features .polygon .feature-color { background-position: -32px -16px; } -.umap-facet-search .property-container:not(:first-child) { - margin-top: 14px; -} .show-on-edit { display: none!important; } diff --git a/umap/static/umap/test/DataLayer.js b/umap/static/umap/test/DataLayer.js index db92bec6..85c91628 100644 --- a/umap/static/umap/test/DataLayer.js +++ b/umap/static/umap/test/DataLayer.js @@ -403,7 +403,7 @@ describe('L.U.DataLayer', function () { assert.ok(qs('path[fill="DarkGoldenRod"]')) }) }) - describe('#advanced-filters()', function () { + describe('#facet-search()', function () { before(function () { this.server.respondWith( /\/datalayer\/63\/\?.*/, @@ -413,7 +413,7 @@ describe('L.U.DataLayer', function () { this.map.createDataLayer(RESPONSES.datalayer63_GET._umap_options) this.server.respond() }) - it('should show non browsable layer', function () { + it('should not impact non browsable layer', function () { assert.ok(qs('path[fill="SteelBlue"]')) }) it('should allow advanced filter', function () { @@ -428,10 +428,15 @@ describe('L.U.DataLayer', function () { // This one comes from a non browsable layer // so it should not be affected by the filter assert.ok(qs('path[fill="SteelBlue"]')) - happen.click(qs('input[data-value="name poly"]')) // Undo + happen.click(qs('input[data-value="name poly"]')) // Undo + }) + it('should allow to control facet label', function () { + this.map.options.facetKey = 'name|Nom' + this.map.openFacet() + assert.ok(qs('div.umap-facet-search h5')) + assert.equal(qs('div.umap-facet-search h5').textContent, 'Nom') }) }) - describe('#zoomEnd', function () { it('should honour the fromZoom option', function () { this.map.setZoom(6, {animate: false}) @@ -453,5 +458,4 @@ describe('L.U.DataLayer', function () { assert.ok(qs('path[fill="none"]')) }) }) - })