Add toggle link to show/hide iconUrl raw input

This commit is contained in:
Yohan Boniface 2023-09-05 10:14:24 +02:00
parent 91e71eccda
commit c5084c4332
2 changed files with 11 additions and 28 deletions

View file

@ -501,13 +501,6 @@ i.info {
margin-top: -8px; margin-top: -8px;
padding: 0 5px; padding: 0 5px;
} }
.umap-form-iconfield {
position: relative;
overflow: hidden;
padding-bottom: 5px;
padding-top: 5px;
line-height: 30px;
}
.umap-icon-list, .umap-pictogram-list { .umap-icon-list, .umap-pictogram-list {
clear: both; clear: both;
} }

View file

@ -513,25 +513,16 @@ L.FormBuilder.BlurInput.include({
}) })
L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
type: function () {
return 'hidden'
},
build: function () { build: function () {
L.FormBuilder.BlurInput.prototype.build.call(this) L.FormBuilder.BlurInput.prototype.build.call(this)
this.parentContainer = L.DomUtil.create( // Try to guess if the icon content has been customized, and if yes
'div', // directly display the field
'umap-form-iconfield', this.input.type = this.value() && !this.value().startsWith('/') ? 'text' : 'hidden'
this.parentNode
)
this.buttonsContainer = L.DomUtil.create('div', '', this.parentContainer)
this.pictogramsContainer = L.DomUtil.create(
'div',
'umap-pictogram-list',
this.parentContainer
)
this.input.type = 'hidden'
this.input.placeholder = L._('Symbol or url') this.input.placeholder = L._('Symbol or url')
this.buttonsContainer = L.DomUtil.create('div', '')
this.pictogramsContainer = L.DomUtil.create('div', 'umap-pictogram-list')
L.DomUtil.before(this.input, this.buttonsContainer)
L.DomUtil.before(this.input, this.pictogramsContainer)
this.udpatePreview() this.udpatePreview()
this.on('define', this.fetchIconList) this.on('define', this.fetchIconList)
}, },
@ -624,7 +615,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
this this
) )
const customButton = L.DomUtil.create('a', '', this.pictogramsContainer) const customButton = L.DomUtil.create('a', '', this.pictogramsContainer)
customButton.textContent = "> " + L._('Free content (advanced)') customButton.textContent = L._('Toggle direct input (advanced)')
customButton.href = '#' customButton.href = '#'
customButton.style.display = 'block' customButton.style.display = 'block'
customButton.style.clear = 'both' customButton.style.clear = 'both'
@ -633,8 +624,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
customButton, customButton,
'click', 'click',
function (e) { function (e) {
this.input.type = 'text' this.input.type = this.input.type === 'text' ? 'hidden' : 'text'
this.pictogramsContainer.innerHTML = ''
}, },
this this
) )
@ -691,7 +681,7 @@ L.FormBuilder.FacetSearch = L.FormBuilder.Element.extend({
}, },
buildLabel: function () { buildLabel: function () {
this.label = L.DomUtil.add('h5', '', this.parentNode, this.options.label); this.label = L.DomUtil.add('h5', '', this.parentNode, this.options.label)
}, },
buildLi: function (value) { buildLi: function (value) {
@ -708,7 +698,7 @@ L.FormBuilder.FacetSearch = L.FormBuilder.Element.extend({
}, },
toJS: function () { toJS: function () {
return [...this.ul.querySelectorAll('input:checked')].map(i => i.dataset.value) return [...this.ul.querySelectorAll('input:checked')].map((i) => i.dataset.value)
}, },
}) })