Refactor icon search

This commit is contained in:
Yohan Boniface 2023-11-09 08:31:24 +01:00
parent e509687956
commit d63d81fec3
2 changed files with 27 additions and 29 deletions

View file

@ -612,22 +612,21 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
addIconPreview: function (pictogram, parent) { addIconPreview: function (pictogram, parent) {
const baseClass = 'umap-pictogram-choice visible', const baseClass = 'umap-pictogram-choice visible',
value = pictogram.src, value = pictogram.src,
className = value === this.value() ? `${baseClass} selected` : baseClass, search = this.searchInput.value.toLowerCase(),
title = pictogram.attribution ? `${pictogram.name} — © ${pictogram.attribution}` : pictogram.name
if (search && title.toLowerCase().indexOf(search) === -1) return
const className = value === this.value() ? `${baseClass} selected` : baseClass,
container = L.DomUtil.create('div', className, parent), container = L.DomUtil.create('div', className, parent),
img = L.DomUtil.create('img', '', container) img = L.DomUtil.create('img', '', container)
img.src = value img.src = value
if (pictogram.name && pictogram.attribution) { container.title = title
container.title = `${pictogram.name} — © ${pictogram.attribution}`
} else if (pictogram.name) {
container.title = pictogram.name
}
L.DomEvent.on( L.DomEvent.on(
container, container,
'click', 'click',
function (e) { function (e) {
this.input.value = value this.input.value = value
this.sync() this.sync()
this.unselectAll(this.pictogramsContainer) this.unselectAll(this.gridContainer)
L.DomUtil.addClass(container, 'selected') L.DomUtil.addClass(container, 'selected')
}, },
this this
@ -642,19 +641,11 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
this.udpatePreview() this.udpatePreview()
}, },
search: function (e) {
const icons = [...this.parentNode.querySelectorAll('.umap-pictogram-choice')],
search = this.searchInput.value.toLowerCase()
icons.forEach((el) => {
L.DomUtil.classIf(el, 'visible', el.title.toLowerCase().indexOf(search) !== -1)
})
},
addCategory: function (category, items) { addCategory: function (category, items) {
const parent = L.DomUtil.create( const parent = L.DomUtil.create(
'div', 'div',
'umap-pictogram-category', 'umap-pictogram-category',
this.pictogramsContainer this.gridContainer
), ),
title = L.DomUtil.add('h6', '', parent, category), title = L.DomUtil.add('h6', '', parent, category),
grid = L.DomUtil.create('div', 'umap-pictogram-grid', parent) grid = L.DomUtil.create('div', 'umap-pictogram-grid', parent)
@ -663,14 +654,11 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
} }
}, },
buildSymbolsList: function (data) { buildSymbolsList: function () {
this.searchInput = L.DomUtil.create('input', '', this.pictogramsContainer) this.gridContainer.innerHTML = ''
this.searchInput.type = 'search'
this.searchInput.placeholder = L._('Search')
L.DomEvent.on(this.searchInput, 'input', this.search, this)
const categories = {} const categories = {}
let category let category
for (const props of data.pictogram_list) { for (const props of this.pictogram_list) {
category = props.category || L._('Generic') category = props.category || L._('Generic')
categories[category] = categories[category] || [] categories[category] = categories[category] || []
categories[category].push(props) categories[category].push(props)
@ -710,13 +698,23 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
showSymbols: function () { showSymbols: function () {
this.input.type = 'hidden' this.input.type = 'hidden'
// Clean parent element before calling ajax, to prevent blinking
this.pictogramsContainer.innerHTML = ''
this.buttonsContainer.innerHTML = '' this.buttonsContainer.innerHTML = ''
this.searchInput = L.DomUtil.create('input', '', this.pictogramsContainer)
this.searchInput.type = 'search'
this.searchInput.placeholder = L._('Search')
this.gridContainer = L.DomUtil.create('div', '', this.pictogramsContainer)
L.DomEvent.on(this.searchInput, 'input', this.buildSymbolsList, this)
if (this.pictogram_list) {
this.buildSymbolsList()
} else {
this.builder.map.get(this.builder.map.options.urls.pictogram_list_json, { this.builder.map.get(this.builder.map.options.urls.pictogram_list_json, {
callback: this.buildSymbolsList, callback: (data) => {
this.pictogram_list = data.pictogram_list
this.buildSymbolsList()
},
context: this, context: this,
}) })
}
}, },
showURL: function () { showURL: function () {

View file

@ -57,7 +57,7 @@ def test_can_change_picto_at_map_level(map, live_server, page, pictos):
expect(define).to_be_visible() expect(define).to_be_visible()
expect(undefine).to_be_hidden() expect(undefine).to_be_hidden()
define.click() define.click()
symbols = page.locator(".umap-pictogram-choice.visible") symbols = page.locator(".umap-pictogram-choice")
expect(symbols).to_have_count(2) expect(symbols).to_have_count(2)
search = page.locator(".umap-pictogram-list input") search = page.locator(".umap-pictogram-list input")
search.type("star") search.type("star")