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;
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 {
clear: both;
}

View file

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