Rename advancedFilters to facet search
This commit is contained in:
parent
9abbfbc01e
commit
81a7bdcd6a
9 changed files with 42 additions and 52 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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.'),
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue