diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index 32ddccdb..6e3828f7 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -481,7 +481,7 @@ i.info { .umap-datalayer-container, .umap-layer-properties-container, .umap-browse-data, -.umap-filter-data, +.umap-facet-search, .umap-browse-datalayers { padding: 0 10px; } diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 8550c098..63566a60 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -753,11 +753,7 @@ L.U.Map.include({ const build = () => { ul.innerHTML = '' datalayer.eachFeature((feature) => { - if ( - (filterValue && !feature.matchFilter(filterValue, filterKeys)) || - feature.properties.isVisible === false - ) - return + if (filterValue && !feature.matchFilter(filterValue, filterKeys)) return ul.appendChild(addFeature(feature)) }) } @@ -795,23 +791,16 @@ L.U.Map.include({ }) }, - _openFilter: function () { - const container = L.DomUtil.create('div', 'umap-filter-data'), - title = L.DomUtil.add('h3', 'umap-filter-title', container, this.options.name), - propertiesContainer = L.DomUtil.create( - 'div', - 'umap-filter-properties', - container - ), - keys = this.getAdvancedFilterKeys() + _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() const knownValues = {} - if (!this.options.advancedFilters) this.options.advancedFilters = {} keys.forEach((key) => { knownValues[key] = [] - if (!this.options.advancedFilters[key]) - this.options.advancedFilters[key] = [] + if (!this.facets[key]) this.facets[key] = [] }) this.eachBrowsableDataLayer((datalayer) => { @@ -833,13 +822,13 @@ L.U.Map.include({ }) // TODO: display a results counter in the panel instead. if (!found) - this.ui.alert({ content: L._('No results for these filters'), level: 'info' }) + this.ui.alert({ content: L._('No results for these facets'), level: 'info' }) } const fields = keys.map((current) => [ - `options.advancedFilters.${current}`, + `facets.${current}`, { - handler: 'AdvancedFilter', + handler: 'FacetSearch', choices: knownValues[current], }, ]) @@ -941,11 +930,11 @@ L.U.Map.include({ labelBrowser.textContent = labelBrowser.title = L._('Browse data') L.DomEvent.on(browser, 'click', this.openBrowser, this) const actions = [browser] - if (this.options.advancedFilterKey) { + if (this.options.facetKey) { const filter = L.DomUtil.create('li', '') L.DomUtil.create('i', 'umap-icon-16 umap-add', filter) const labelFilter = L.DomUtil.create('span', '', filter) - labelFilter.textContent = labelFilter.title = L._('Select data') + labelFilter.textContent = labelFilter.title = L._('Facet search') L.DomEvent.on(filter, 'click', this.openFilter, this) actions.push(filter) } diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index 910c4ae4..77afe2b2 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -568,8 +568,8 @@ 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'), - advancedFilterKey: L._( - 'Comma separated list of properties to use for checkbox filtering' + facetKey: L._( + 'Comma separated list of properties to use for facet search' ), 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.features.js b/umap/static/umap/js/umap.features.js index 2eddf185..b22e1491 100644 --- a/umap/static/umap/js/umap.features.js +++ b/umap/static/umap/js/umap.features.js @@ -474,9 +474,9 @@ L.U.FeatureMixin = { return false }, - matchAdvancedFilters: function () { - const filters = this.map.options.advancedFilters - for (const [property, expected] of Object.entries(filters)) { + matchFacets: function () { + const facets = this.map.facets + for (const [property, expected] of Object.entries(facets)) { if (expected.length) { let value = this.properties[property] if (!value || !expected.includes(value)) return false diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index 5bf8eb32..e825d400 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -431,7 +431,7 @@ L.FormBuilder.OnLoadPanel = L.FormBuilder.Select.extend({ ['none', L._('None')], ['caption', L._('Caption')], ['databrowser', L._('Data browser')], - ['datafilters', L._('Data filters')], + ['facet', L._('Facet search')], ], }) @@ -684,7 +684,7 @@ L.FormBuilder.Switch = L.FormBuilder.CheckBox.extend({ }, }) -L.FormBuilder.AdvancedFilter = L.FormBuilder.Element.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) diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index 10f82db3..1412eb04 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -151,12 +151,14 @@ L.U.Map.include({ this.options.slideshow.active === undefined ) this.options.slideshow.active = true + if (this.options.advancedFilterKey) this.options.facetKey = this.options.advancedFilterKey // Global storage for retrieving datalayers and features this.datalayers = {} this.datalayers_index = [] this.dirty_datalayers = [] this.features_index = {} + this.facets = {} if (this.options.hash) this.addHash() this.initControls() @@ -250,7 +252,7 @@ L.U.Map.include({ if (L.Util.queryString('share')) this.renderShareBox() else if (this.options.onLoadPanel === 'databrowser') this.openBrowser() else if (this.options.onLoadPanel === 'caption') this.displayCaption() - else if (this.options.onLoadPanel === 'datafilters') this.openFilter() + else if (this.options.onLoadPanel === 'facet' || this.options.onLoadPanel === 'datafilters') this.openFacet() }) this.onceDataLoaded(function () { const slug = L.Util.queryString('feature') @@ -953,9 +955,9 @@ L.U.Map.include({ }) }, - openFilter: function () { + openFacet: function () { this.onceDatalayersLoaded(function () { - this._openFilter() + this._openFacet() }) }, @@ -1067,7 +1069,7 @@ L.U.Map.include({ 'sortKey', 'labelKey', 'filterKey', - 'advancedFilterKey', + 'facetKey', 'slugKey', 'showLabel', 'labelDirection', @@ -1394,13 +1396,12 @@ L.U.Map.include({ }, ], [ - 'options.advancedFilterKey', + 'options.facetKey', { handler: 'Input', - helpEntries: 'advancedFilterKey', + helpEntries: 'facetKey', placeholder: L._('Example: key1,key2,key3'), - label: L._('Advanced filter keys'), - inheritable: true, + label: L._('Facet keys') }, ], [ @@ -1785,7 +1786,7 @@ L.U.Map.include({ this.openBrowser, this ) - if (this.options.advancedFilterKey) { + if (this.options.facetKey) { const filter = L.DomUtil.add( 'a', 'umap-open-filter-link', @@ -1796,7 +1797,7 @@ L.U.Map.include({ L.DomEvent.on(filter, 'click', L.DomEvent.stop).on( filter, 'click', - this.openFilter, + this.openFacet, this ) } @@ -2014,10 +2015,10 @@ L.U.Map.include({ text: L._('Browse data'), callback: this.openBrowser, }) - if (this.options.advancedFilterKey) { + if (this.options.facetKey) { items.push({ - text: L._('Select data'), - callback: this.openFilter, + text: L._('Facet search'), + callback: this.openFacet, }) } items.push( @@ -2102,8 +2103,8 @@ L.U.Map.include({ return (this.options.filterKey || this.options.sortKey || 'name').split(',') }, - getAdvancedFilterKeys: function () { - return (this.options.advancedFilterKey || '').split(',') + getFacetKeys: function () { + return (this.options.facetKey || '').split(',') }, getLayersBounds: function () { diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js index 68a42837..f6aecced 100644 --- a/umap/static/umap/js/umap.layer.js +++ b/umap/static/umap/js/umap.layer.js @@ -301,7 +301,7 @@ L.U.DataLayer = L.Evented.extend({ filter = this.map.options.filter this.eachLayer(function (layer) { if (filter && !layer.matchFilter(filter, filterKeys)) return - if (!layer.matchAdvancedFilters()) return + if (!layer.matchFacets()) 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 ef430474..ceacc7e9 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -805,7 +805,7 @@ a.add-datalayer:hover, margin-bottom: 14px; border-radius: 2px; } -.umap-browse-features h5, .umap-filter-data h5 { +.umap-browse-features h5, .umap-facet-search h5 { margin-bottom: 0; overflow: hidden; padding-left: 5px; @@ -822,7 +822,7 @@ a.add-datalayer:hover, .umap-browse-features li { padding: 2px 0; } -.umap-browse-features li, .umap-filter-data li { +.umap-browse-features li, .umap-facet-search li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -855,7 +855,7 @@ a.add-datalayer:hover, .umap-browse-features .polygon .feature-color { background-position: -32px -16px; } -.umap-filter-data .property-container:not(:first-child) { +.umap-facet-search .property-container:not(:first-child) { margin-top: 14px; } .show-on-edit { diff --git a/umap/static/umap/test/DataLayer.js b/umap/static/umap/test/DataLayer.js index 59d9b1ad..db92bec6 100644 --- a/umap/static/umap/test/DataLayer.js +++ b/umap/static/umap/test/DataLayer.js @@ -409,7 +409,7 @@ describe('L.U.DataLayer', function () { /\/datalayer\/63\/\?.*/, JSON.stringify(RESPONSES.datalayer63_GET) ) - this.map.options.advancedFilterKey = 'name' + this.map.options.facetKey = 'name' this.map.createDataLayer(RESPONSES.datalayer63_GET._umap_options) this.server.respond() }) @@ -417,8 +417,8 @@ describe('L.U.DataLayer', function () { assert.ok(qs('path[fill="SteelBlue"]')) }) it('should allow advanced filter', function () { - this.map.openFilter() - assert.ok(qs('div.umap-filter-properties')) + this.map.openFacet() + assert.ok(qs('div.umap-facet-search')) // This one if from the normal datalayer // it's name is "test", so it should be hidden // by the filter