From 3b4834a9ada36789621032a13825a64343de7c7b Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Fri, 11 Aug 2023 06:39:14 +0200 Subject: [PATCH] Allow to control facet labels --- umap/static/umap/js/umap.controls.js | 3 ++- umap/static/umap/js/umap.core.js | 2 +- umap/static/umap/js/umap.forms.js | 7 +++++-- umap/static/umap/js/umap.js | 6 +++++- umap/static/umap/map.css | 3 --- umap/static/umap/test/DataLayer.js | 13 +++++++++---- 6 files changed, 22 insertions(+), 12 deletions(-) diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index e8f0479d..1293ac5d 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -791,7 +791,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 = {} @@ -827,6 +827,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 c8c0e7ae..094d29c7 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -561,7 +561,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 dcbb909f..cdef085c 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -677,14 +677,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 35531706..aebc41ef 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -2097,6 +2097,10 @@ 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 + }, {}) }, }) 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 08ac3fcc..f1823378 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,8 +428,13 @@ 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') }) }) - })