Very minimal search input for icons list

fix #1302
This commit is contained in:
Yohan Boniface 2023-09-05 10:55:01 +02:00
parent ce7575c5eb
commit d72ae3fc34

View file

@ -575,7 +575,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
img = L.DomUtil.create('img', '', container) img = L.DomUtil.create('img', '', container)
img.src = value img.src = value
if (pictogram.name && pictogram.attribution) { if (pictogram.name && pictogram.attribution) {
img.title = `${pictogram.name} — © ${pictogram.attribution}` container.title = `${pictogram.name} — © ${pictogram.attribution}`
} }
L.DomEvent.on( L.DomEvent.on(
container, container,
@ -598,9 +598,22 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
this.udpatePreview() this.udpatePreview()
}, },
search: function (e) {
const icons = [...this.parentNode.querySelectorAll('.umap-icon-choice')],
search = this.searchInput.value.toLowerCase()
icons.forEach((el) => {
if (el.title.toLowerCase().indexOf(search) != -1) el.style.display = 'block'
else el.style.display = 'none'
})
},
buildIconList: function (data) { buildIconList: function (data) {
this.pictogramsContainer.innerHTML = '' 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')
L.DomEvent.on(this.searchInput, 'input', this.search, this)
for (const idx in data.pictogram_list) { for (const idx in data.pictogram_list) {
this.addIconPreview(data.pictogram_list[idx]) this.addIconPreview(data.pictogram_list[idx])
} }