jeff/umap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

A11Y: switch from links to buttons when pertinent

Browse source
This commit is contained in:
David Larlet 2023-08-29 15:06:43 -04:00
parent 3c234ead5b
commit 688ef19c04
No known key found for this signature in database
GPG key ID: 3E2953A359E7E7BD
9 changed files with 322 additions and 332 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

292
umap/static/umap/js/umap.controls.js
View file

@ -319,15 +319,11 @@ L.U.EditControl = L.Control.extend({
}, },
onAdd: function (map) { onAdd: function (map) {
const container = L.DomUtil.create('div', 'leaflet-control-edit-enable'), const container = L.DomUtil.create('div', 'leaflet-control-edit-enable')
edit = L.DomUtil.create('a', '', container) L.DomUtil.createButton(
edit.href = '#' '',
edit.title = `${L._('Enable editing')} (Ctrl+E)` container,
edit.textContent = L._('Edit') `${L._('Enable editing')} (Ctrl+E)`,
L.DomEvent.addListener(edit, 'click', L.DomEvent.stop).addListener(
edit,
'click',
map.enableEdit, map.enableEdit,
map map
) )
@ -343,15 +339,14 @@ L.Control.Embed = L.Control.extend({
onAdd: function (map) { onAdd: function (map) {
const container = L.DomUtil.create('div', 'leaflet-control-embed umap-control') const container = L.DomUtil.create('div', 'leaflet-control-embed umap-control')
const shareButton = L.DomUtil.createButton(
const link = L.DomUtil.create('a', '', container) '',
link.href = '#' container,
link.title = L._('Embed and share this map') L._('Embed and share this map'),
map.renderShareBox,
L.DomEvent.on(link, 'click', L.DomEvent.stop) map
.on(link, 'click', map.renderShareBox, map) )
.on(link, 'dblclick', L.DomEvent.stopPropagation) L.DomEvent.on(shareButton, 'dblclick', L.DomEvent.stopPropagation)
return container return container
}, },
}) })
@ -362,19 +357,21 @@ L.U.MoreControls = L.Control.extend({
}, },
onAdd: function () { onAdd: function () {
const container = L.DomUtil.create('div', 'umap-control-text'), const container = L.DomUtil.create('div', 'umap-control-text')
more = L.DomUtil.create('a', 'umap-control-more', container), const moreButton = L.DomUtil.createButton(
less = L.DomUtil.create('a', 'umap-control-less', container) 'umap-control-more',
more.href = '#' container,
more.title = L._('More controls') L._('More controls'),
this.toggle,
L.DomEvent.on(more, 'click', L.DomEvent.stop).on(more, 'click', this.toggle, this) this
)
less.href = '#' const lessButton = L.DomUtil.createButton(
less.title = L._('Hide controls') 'umap-control-less',
container,
L.DomEvent.on(less, 'click', L.DomEvent.stop).on(less, 'click', this.toggle, this) L._('Hide controls'),
this.toggle,
this
)
return container return container
}, },
@ -452,23 +449,21 @@ L.U.DataLayersControl = L.Control.extend({
actions actions
) )
const link = L.DomUtil.create('a', 'umap-browse-link', actions) L.DomUtil.createButton(
link.href = '#' 'umap-browse-link',
link.title = link.textContent = L._('Browse data') actions,
L._('Browse data'),
const toggle = L.DomUtil.create('a', 'umap-browse-toggle', container)
toggle.href = '#'
toggle.title = L._('See data layers')
L.DomEvent.on(toggle, 'click', L.DomEvent.stop)
L.DomEvent.on(link, 'click', L.DomEvent.stop).on(
link,
'click',
map.openBrowser, map.openBrowser,
map map
) )
const toggleButton = L.DomUtil.createButton(
'umap-browse-toggle',
container,
L._('See data layers')
)
L.DomEvent.on(toggleButton, 'click', L.DomEvent.stop)
map.whenReady(function () { map.whenReady(function () {
this.update() this.update()
}, this) }, this)
@ -489,8 +484,8 @@ L.U.DataLayersControl = L.Control.extend({
) )
} else { } else {
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation) L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation)
L.DomEvent.on(toggle, 'click', L.DomEvent.stop).on( L.DomEvent.on(toggleButton, 'click', L.DomEvent.stop).on(
toggle, toggleButton,
'click', 'click',
this.expand, this.expand,
this this
@ -580,14 +575,11 @@ L.U.DataLayersControl = L.Control.extend({
this this
) )
const bar = L.DomUtil.create('div', 'button-bar', container), const bar = L.DomUtil.create('div', 'button-bar', container)
add = L.DomUtil.create('a', 'show-on-edit block add-datalayer button', bar) L.DomUtil.createButton(
add.href = '#' 'show-on-edit block add-datalayer button',
add.textContent = add.title = L._('Add a layer') bar,
L._('Add a layer'),
L.DomEvent.on(add, 'click', L.DomEvent.stop).on(
add,
'click',
this.newDataLayer, this.newDataLayer,
this this
) )
@ -677,7 +669,6 @@ L.U.DataLayer.addInitHook(function () {
}) })
L.U.Map.include({ L.U.Map.include({
_openFacet: function () { _openFacet: function () {
const container = L.DomUtil.create('div', 'umap-facet-search'), const container = L.DomUtil.create('div', 'umap-facet-search'),
title = L.DomUtil.add('h3', 'umap-filter-title', container, L._('Facet search')), title = L.DomUtil.add('h3', 'umap-filter-title', container, L._('Facet search')),
@ -781,9 +772,13 @@ L.U.Map.include({
'', '',
credits, credits,
`${L._('Map user content has been published under licence')} ` `${L._('Map user content has been published under licence')} `
), )
link = L.DomUtil.add('a', '', licence, this.options.licence.name) L.DomUtil.createLink(
link.href = this.options.licence.url '',
licence,
this.options.licence.name,
this.options.licence.url
)
} else { } else {
L.DomUtil.add('p', '', credits, L._('No licence has been set')) L.DomUtil.add('p', '', credits, L._('No licence has been set'))
} }
@ -868,75 +863,72 @@ L.U.Map.include({
'div', 'div',
'umap-main-edit-toolbox with-transition dark', 'umap-main-edit-toolbox with-transition dark',
this._controlContainer this._controlContainer
), )
logo = L.DomUtil.add('a', 'logo', container), L.DomUtil.createLink('logo', container, '/')
name = L.DomUtil.create('a', 'map-name', container), const nameButton = L.DomUtil.createButton(
share_status = L.DomUtil.create('a', 'share-status', container), 'map-name',
update = () => { container,
'',
this.edit,
this
)
const shareStatusButton = L.DomUtil.createButton(
'share-status',
container,
'',
this.permissions.edit,
this.permissions
)
const update = () => {
const status = this.permissions.getShareStatusDisplay() const status = this.permissions.getShareStatusDisplay()
name.textContent = this.getDisplayName() nameButton.textContent = this.getDisplayName()
// status is not set until map is saved once // status is not set until map is saved once
if (status) if (status) {
share_status.textContent = L._('Visibility: {status}', { shareStatusButton.textContent = L._('Visibility: {status}', {
status: status, status: status,
}) })
} }
}
update() update()
this.once('saved', L.bind(update, this)) this.once('saved', L.bind(update, this))
logo.href = '/'
if (this.options.editMode === 'advanced') { if (this.options.editMode === 'advanced') {
name.href = '#' L.DomEvent.on(nameButton, 'click', this.edit, this)
share_status.href = '#' L.DomEvent.on(shareStatusButton, 'click', this.permissions.edit, this.permissions)
L.DomEvent.on(name, 'click', this.edit, this)
L.DomEvent.on(share_status, 'click', this.permissions.edit, this.permissions)
} }
this.on('postsync', L.bind(update, this)) this.on('postsync', L.bind(update, this))
const save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container) L.DomUtil.createButton(
save.href = '#' 'leaflet-control-edit-save button',
save.title = `${L._('Save current edits')} (Ctrl+S)`
save.textContent = L._('Save')
const cancel = L.DomUtil.create('a', 'leaflet-control-edit-cancel', container)
cancel.href = '#'
cancel.title = `${L._('Cancel edits')} (Ctrl+Z)`
cancel.textContent = L._('Cancel all')
const disable = L.DomUtil.create('a', 'leaflet-control-edit-disable', container)
disable.href = '#'
disable.textContent = L._('Disable editing')
disable.title = `${disable.textContent} (Ctrl+E)`
this.help.link(container, 'edit')
if (this.options.user) {
const userLabel = L.DomUtil.add(
'a',
'umap-user',
container, container,
L._(`My Dashboard ({username})`, { username: this.options.user.name }) `${L._('Save current edits')} (Ctrl+S)`,
this.save,
this
) )
userLabel.href = this.options.user.url L.DomUtil.createButton(
} 'leaflet-control-edit-cancel',
container,
L.DomEvent.addListener(disable, 'click', L.DomEvent.stop).addListener( `${L._('Cancel edits')} (Ctrl+Z)`,
disable, this.askForReset,
'click', this
)
L.DomUtil.createButton(
'leaflet-control-edit-disable',
container,
`${L._('Disable editing')} (Ctrl+E)`,
function (e) { function (e) {
this.disableEdit(e) this.disableEdit(e)
this.ui.closePanel() this.ui.closePanel()
}, },
this this
) )
this.help.link(container, 'edit')
L.DomEvent.addListener(save, 'click', L.DomEvent.stop).addListener( if (this.options.user) {
save, L.DomUtil.createLink(
'click', 'umap-user',
this.save, container,
this L._(`My Dashboard ({username})`, { username: this.options.user.name }),
) this.options.user.url
L.DomEvent.addListener(cancel, 'click', L.DomEvent.stop).addListener(
cancel,
'click',
this.askForReset,
this
) )
}
}, },
renderShareBox: function () { renderShareBox: function () {
@ -1020,12 +1012,19 @@ L.U.Map.include({
} }
} }
toggleCaveat() toggleCaveat()
const download = L.DomUtil.create('a', 'button', container) L.DomUtil.createButton(
download.textContent = L._('Download data') 'button',
L.DomEvent.on(download, 'click', () => { container,
if (typeInput.value === 'umap') this.fullDownload() L._('Download data'),
else this.download(typeInput.value) () => {
}) if (typeInput.value === 'umap') {
this.fullDownload()
} else {
this.download(typeInput.value)
}
},
this
)
this.ui.openPanel({ data: { html: container } }) this.ui.openPanel({ data: { html: container } })
}, },
@ -1171,15 +1170,14 @@ L.U.TileLayerControl = L.Control.extend({
onAdd: function () { onAdd: function () {
const container = L.DomUtil.create('div', 'leaflet-control-tilelayers umap-control') const container = L.DomUtil.create('div', 'leaflet-control-tilelayers umap-control')
const changeMapBackgroundButton = L.DomUtil.createButton(
const link = L.DomUtil.create('a', '', container) '',
link.href = '#' container,
link.title = L._('Change map background') L._('Change map background'),
this.openSwitcher,
L.DomEvent.on(link, 'click', L.DomEvent.stop) this
.on(link, 'click', this.openSwitcher, this) )
.on(link, 'dblclick', L.DomEvent.stopPropagation) L.DomEvent.on(changeMapBackgroundButton, 'dblclick', L.DomEvent.stopPropagation)
return container return container
}, },
@ -1236,7 +1234,12 @@ L.U.AttributionControl = L.Control.Attribution.extend({
// Use our how container, so we can hide/show on small screens // Use our how container, so we can hide/show on small screens
const credits = this._container.innerHTML const credits = this._container.innerHTML
this._container.innerHTML = '' this._container.innerHTML = ''
const container = L.DomUtil.add('div', 'attribution-container', this._container, credits) const container = L.DomUtil.add(
'div',
'attribution-container',
this._container,
credits
)
if (this._map.options.shortCredit) { if (this._map.options.shortCredit) {
L.DomUtil.add( L.DomUtil.add(
'span', 'span',
@ -1253,8 +1256,7 @@ L.U.AttributionControl = L.Control.Attribution.extend({
} }
if (window.top === window.self && this._map.options.captionMenus) { if (window.top === window.self && this._map.options.captionMenus) {
// We are not in iframe mode // We are not in iframe mode
const home = L.DomUtil.add('a', '', container, ` — ${L._('Home')}`) L.DomUtil.createLink('', container, ` — ${L._('Home')}`, '/')
home.href = '/'
} }
if (this._map.options.captionMenus) { if (this._map.options.captionMenus) {
const poweredBy = L.DomUtil.add( const poweredBy = L.DomUtil.add(
@ -1279,14 +1281,15 @@ L.U.StarControl = L.Control.extend({
const container = L.DomUtil.create( const container = L.DomUtil.create(
'div', 'div',
`leaflet-control-star umap-control${status}` `leaflet-control-star umap-control${status}`
), )
link = L.DomUtil.create('a', '', container) const starMapButton = L.DomUtil.createButton(
link.href = '#' '',
link.title = L._('Star this map') container,
L.DomEvent.on(link, 'click', L.DomEvent.stop) L._('Star this map'),
.on(link, 'click', map.star, map) map.star,
.on(link, 'dblclick', L.DomEvent.stopPropagation) map
)
L.DomEvent.on(starMapButton, 'dblclick', L.DomEvent.stopPropagation)
return container return container
}, },
}) })
@ -1346,17 +1349,18 @@ L.U.SearchControl = L.Control.extend({
}, },
onAdd: function (map) { onAdd: function (map) {
const container = L.DomUtil.create('div', 'leaflet-control-search umap-control'), const container = L.DomUtil.create('div', 'leaflet-control-search umap-control')
self = this
L.DomEvent.disableClickPropagation(container) L.DomEvent.disableClickPropagation(container)
const link = L.DomUtil.create('a', '', container) L.DomUtil.createButton(
link.href = '#' '',
link.title = L._('Search a place name') container,
L.DomEvent.on(link, 'click', (e) => { L._('Search a place name'),
(e) => {
L.DomEvent.stop(e) L.DomEvent.stop(e)
self.openPanel(map) this.openPanel(map)
}) },
this
)
return container return container
}, },
@ -1562,7 +1566,7 @@ L.U.Editable = L.Editable.extend({
return new L.U.Marker(this.map, latlng, this._getDefaultProperties()) return new L.U.Marker(this.map, latlng, this._getDefaultProperties())
}, },
_getDefaultProperties: function() { _getDefaultProperties: function () {
const result = {} const result = {}
if (this.map.options.featuresHaveOwner && this.map.options.hasOwnProperty('user')) { if (this.map.options.featuresHaveOwner && this.map.options.hasOwnProperty('user')) {
result.geojson = { properties: { owner: this.map.options.user.id } } result.geojson = { properties: { owner: this.map.options.user.id } }

34
umap/static/umap/js/umap.core.js
View file

@ -314,14 +314,25 @@ L.DomUtil.createFieldset = (container, legend, options) => {
} }
L.DomUtil.createButton = (className, container, content, callback, context) => { L.DomUtil.createButton = (className, container, content, callback, context) => {
// TODO: actually switch to buttons’ elements.
const el = L.DomUtil.add('a', className, container, content) const el = L.DomUtil.add('a', className, container, content)
el.href = '#' el.href = '#'
// const el = L.DomUtil.add('button', className, container, content)
if (callback) { if (callback) {
L.DomEvent.on(el, 'click', L.DomEvent.stop).on(el, 'click', callback, context) L.DomEvent.on(el, 'click', L.DomEvent.stop).on(el, 'click', callback, context)
} }
return el return el
} }
L.DomUtil.createLink = (className, container, content, url, target) => {
const el = L.DomUtil.add('a', className, container, content)
el.href = url
if (target) {
el.target = target
}
return el
}
L.DomUtil.classIf = (el, className, bool) => { L.DomUtil.classIf = (el, className, bool) => {
if (bool) L.DomUtil.addClass(el, className) if (bool) L.DomUtil.addClass(el, className)
else L.DomUtil.removeClass(el, className) else L.DomUtil.removeClass(el, className)
@ -418,13 +429,17 @@ L.U.Help = L.Class.extend({
'umap-help-box with-transition dark', 'umap-help-box with-transition dark',
document.body document.body
) )
const closeLink = L.DomUtil.create('a', 'umap-close-link', this.box) const closeButton = L.DomUtil.createButton(
closeLink.href = '#' 'umap-close-link',
L.DomUtil.add('i', 'umap-close-icon', closeLink) this.box,
const label = L.DomUtil.create('span', '', closeLink) '',
this.hide,
this
)
L.DomUtil.add('i', 'umap-close-icon', closeButton)
const label = L.DomUtil.create('span', '', closeButton)
label.title = label.textContent = L._('Close') label.title = label.textContent = L._('Close')
this.content = L.DomUtil.create('div', 'umap-help-content', this.box) this.content = L.DomUtil.create('div', 'umap-help-content', this.box)
L.DomEvent.on(closeLink, 'click', this.hide, this)
}, },
onKeyDown: function (e) { onKeyDown: function (e) {
@ -457,8 +472,11 @@ L.U.Help = L.Class.extend({
}, },
button: function (container, entries, classname) { button: function (container, entries, classname) {
const helpButton = L.DomUtil.create('a', classname || 'umap-help-button', container) const helpButton = L.DomUtil.createButton(
helpButton.href = '#' classname || 'umap-help-button',
container,
L._('Help')
)
if (entries) { if (entries) {
L.DomEvent.on(helpButton, 'click', L.DomEvent.stop).on( L.DomEvent.on(helpButton, 'click', L.DomEvent.stop).on(
helpButton, helpButton,
@ -475,7 +493,7 @@ L.U.Help = L.Class.extend({
link: function (container, entries) { link: function (container, entries) {
const helpButton = this.button(container, entries, 'umap-help-link') const helpButton = this.button(container, entries, 'umap-help-link')
helpButton.textContent = L._("Help") helpButton.textContent = L._('Help')
return helpButton return helpButton
}, },

32
umap/static/umap/js/umap.features.js
View file

@ -130,12 +130,10 @@ L.U.FeatureMixin = {
}, },
getAdvancedEditActions: function (container) { getAdvancedEditActions: function (container) {
const deleteLink = L.DomUtil.create('a', 'button umap-delete', container) const deleteButton = L.DomUtil.createButton(
deleteLink.href = '#' 'button umap-delete',
deleteLink.textContent = L._('Delete') container,
L.DomEvent.on( L._('Delete'),
deleteLink,
'click',
function (e) { function (e) {
L.DomEvent.stop(e) L.DomEvent.stop(e)
if (this.confirmDelete()) this.map.ui.closePanel() if (this.confirmDelete()) this.map.ui.closePanel()
@ -1017,10 +1015,13 @@ L.U.Polyline = L.Polyline.extend({
getAdvancedEditActions: function (container) { getAdvancedEditActions: function (container) {
L.U.FeatureMixin.getAdvancedEditActions.call(this, container) L.U.FeatureMixin.getAdvancedEditActions.call(this, container)
const toPolygon = L.DomUtil.create('a', 'button umap-to-polygon', container) const toPolygon = L.DomUtil.createButton(
toPolygon.href = '#' 'button umap-to-polygon',
toPolygon.textContent = L._('Transform to polygon') container,
L.DomEvent.on(toPolygon, 'click', this.toPolygon, this) L._('Transform to polygon'),
this.toPolygon,
this
)
}, },
_mergeShapes: function (from, to) { _mergeShapes: function (from, to) {
@ -1164,10 +1165,13 @@ L.U.Polygon = L.Polygon.extend({
getAdvancedEditActions: function (container) { getAdvancedEditActions: function (container) {
L.U.FeatureMixin.getAdvancedEditActions.call(this, container) L.U.FeatureMixin.getAdvancedEditActions.call(this, container)
const toPolyline = L.DomUtil.create('a', 'button umap-to-polyline', container) const toPolyline = L.DomUtil.createButton(
toPolyline.href = '#' 'button umap-to-polyline',
toPolyline.textContent = L._('Transform to lines') container,
L.DomEvent.on(toPolyline, 'click', this.toPolyline, this) L._('Transform to lines'),
this.toPolyline,
this
)
}, },
isMulti: function () { isMulti: function () {

40
umap/static/umap/js/umap.forms.js
View file

@ -557,12 +557,10 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
L.DomEvent.on(el, 'click', this.fetchIconList, this) L.DomEvent.on(el, 'click', this.fetchIconList, this)
} }
} }
this.button = L.DomUtil.create('a', 'button action-button', this.buttonsContainer) this.button = L.DomUtil.createButton(
this.button.textContent = this.value() ? L._('Change') : L._('Add') 'button action-button',
this.button.href = '#' this.buttonsContainer,
L.DomEvent.on(this.button, 'click', L.DomEvent.stop).on( this.value() ? L._('Change') : L._('Add'),
this.button,
'click',
this.fetchIconList, this.fetchIconList,
this this
) )
@ -616,34 +614,30 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
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])
} }
const closeButton = L.DomUtil.create('a', 'button action-button', this.pictogramsContainer) const cancelButton = L.DomUtil.createButton(
closeButton.textContent = L._('Close') 'button action-button',
closeButton.href = '#' this.pictogramsContainer,
closeButton.style.display = 'block' L._('Close'),
closeButton.style.clear = 'both'
L.DomEvent.on(closeButton, 'click', L.DomEvent.stop).on(
closeButton,
'click',
function (e) { function (e) {
this.pictogramsContainer.innerHTML = '' this.pictogramsContainer.innerHTML = ''
this.udpatePreview() this.udpatePreview()
}, },
this this
) )
const customButton = L.DomUtil.create('a', '', this.pictogramsContainer) cancelButton.style.display = 'block'
customButton.textContent = L._('Toggle direct input (advanced)') cancelButton.style.clear = 'both'
customButton.href = '#' const customButton = L.DomUtil.createButton(
customButton.style.display = 'block' '',
customButton.style.clear = 'both' this.pictogramsContainer,
this.builder.map.help.button(customButton, 'formatIconSymbol') L._('Toggle direct input (advanced)'),
L.DomEvent.on(customButton, 'click', L.DomEvent.stop).on(
customButton,
'click',
function (e) { function (e) {
this.input.type = this.input.type === 'text' ? 'hidden' : 'text' this.input.type = this.input.type === 'text' ? 'hidden' : 'text'
}, },
this this
) )
customButton.style.display = 'block'
customButton.style.clear = 'both'
this.builder.map.help.button(customButton, 'formatIconSymbol')
}, },
fetchIconList: function (e) { fetchIconList: function (e) {

101
umap/static/umap/js/umap.js
View file

@ -1532,16 +1532,10 @@ L.U.Map.include({
}) })
limitBounds.appendChild(boundsBuilder.build()) limitBounds.appendChild(boundsBuilder.build())
const boundsButtons = L.DomUtil.create('div', 'button-bar half', limitBounds) const boundsButtons = L.DomUtil.create('div', 'button-bar half', limitBounds)
const setCurrentButton = L.DomUtil.add( L.DomUtil.createButton(
'a',
'button', 'button',
boundsButtons, boundsButtons,
L._('Use current bounds') L._('Use current bounds'),
)
setCurrentButton.href = '#'
L.DomEvent.on(
setCurrentButton,
'click',
function () { function () {
const bounds = this.getBounds() const bounds = this.getBounds()
this.options.limitBounds.south = L.Util.formatNum(bounds.getSouth()) this.options.limitBounds.south = L.Util.formatNum(bounds.getSouth())
@ -1554,11 +1548,10 @@ L.U.Map.include({
}, },
this this
) )
const emptyBounds = L.DomUtil.add('a', 'button', boundsButtons, L._('Empty')) L.DomUtil.createButton(
emptyBounds.href = '#' 'button',
L.DomEvent.on( boundsButtons,
emptyBounds, L._('Empty'),
'click',
function () { function () {
this.options.limitBounds.south = null this.options.limitBounds.south = null
this.options.limitBounds.west = null this.options.limitBounds.west = null
@ -1650,34 +1643,39 @@ L.U.Map.include({
const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions')) const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions) const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
if (this.permissions.isOwner()) { if (this.permissions.isOwner()) {
const del = L.DomUtil.create('a', 'button umap-delete', advancedButtons) L.DomUtil.createButton(
del.href = '#' 'button umap-delete',
del.title = L._('Delete map') advancedButtons,
del.textContent = L._('Delete') L._('Delete'),
L.DomEvent.on(del, 'click', L.DomEvent.stop).on(del, 'click', this.del, this) this.del,
const empty = L.DomUtil.create('a', 'button umap-empty', advancedButtons) this
empty.href = '#' )
empty.textContent = L._('Empty') L.DomUtil.createButton(
empty.title = L._('Delete all layers') 'button umap-empty',
L.DomEvent.on(empty, 'click', L.DomEvent.stop).on( advancedButtons,
empty, L._('Empty'),
'click',
this.empty, this.empty,
this this
) )
} }
const clone = L.DomUtil.create('a', 'button umap-clone', advancedButtons) L.DomUtil.createButton(
clone.href = '#' 'button umap-clone',
clone.textContent = L._('Clone') advancedButtons,
clone.title = L._('Clone this map') L._('Clone this map'),
L.DomEvent.on(clone, 'click', L.DomEvent.stop).on(clone, 'click', this.clone, this) this.clone,
const download = L.DomUtil.create('a', 'button umap-download', advancedButtons) this
download.href = '#' )
download.textContent = L._('Download') L.DomUtil.createButton(
download.title = L._('Open download panel') 'button umap-empty',
L.DomEvent.on(download, 'click', L.DomEvent.stop).on( advancedButtons,
download, L._('Delete all layers'),
'click', this.empty,
this
)
L.DomUtil.createButton(
'button umap-download',
advancedButtons,
L._('Open download panel'),
this.renderShareBox, this.renderShareBox,
this this
) )
@ -1739,38 +1737,25 @@ L.U.Map.include({
L.DomEvent.disableClickPropagation(container) L.DomEvent.disableClickPropagation(container)
this.permissions.addOwnerLink('span', container) this.permissions.addOwnerLink('span', container)
if (this.options.captionMenus) { if (this.options.captionMenus) {
const about = L.DomUtil.add( L.DomUtil.createButton(
'a',
'umap-about-link', 'umap-about-link',
container, container,
` — ${L._('About')}` ` — ${L._('About')}`,
this.displayCaption,
this
) )
about.href = '#' L.DomUtil.createButton(
L.DomEvent.on(about, 'click', this.displayCaption, this)
const browser = L.DomUtil.add(
'a',
'umap-open-browser-link', 'umap-open-browser-link',
container, container,
` | ${L._('Browse data')}` ` | ${L._('Browse data')}`,
)
browser.href = '#'
L.DomEvent.on(browser, 'click', L.DomEvent.stop).on(
browser,
'click',
this.openBrowser, this.openBrowser,
this this
) )
if (this.options.facetKey) { if (this.options.facetKey) {
const filter = L.DomUtil.add( L.DomUtil.createButton(
'a',
'umap-open-filter-link', 'umap-open-filter-link',
container, container,
` | ${L._('Select data')}` ` | ${L._('Select data')}`,
)
filter.href = '#'
L.DomEvent.on(filter, 'click', L.DomEvent.stop).on(
filter,
'click',
this.openFacet, this.openFacet,
this this
) )

55
umap/static/umap/js/umap.layer.js
View file

@ -1272,16 +1272,10 @@ L.U.DataLayer = L.Evented.extend({
const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions')) const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions) const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
const deleteLink = L.DomUtil.create( const deleteLink = L.DomUtil.createButton(
'a',
'button delete_datalayer_button umap-delete', 'button delete_datalayer_button umap-delete',
advancedButtons advancedButtons,
) L._('Delete'),
deleteLink.textContent = L._('Delete')
deleteLink.href = '#'
L.DomEvent.on(deleteLink, 'click', L.DomEvent.stop).on(
deleteLink,
'click',
function () { function () {
this._delete() this._delete()
this.map.ui.closePanel() this.map.ui.closePanel()
@ -1289,22 +1283,18 @@ L.U.DataLayer = L.Evented.extend({
this this
) )
if (!this.isRemoteLayer()) { if (!this.isRemoteLayer()) {
const emptyLink = L.DomUtil.create('a', 'button umap-empty', advancedButtons) const emptyLink = L.DomUtil.createButton(
emptyLink.textContent = L._('Empty') 'button umap-empty',
emptyLink.href = '#' advancedButtons,
L.DomEvent.on(emptyLink, 'click', L.DomEvent.stop).on( L._('Empty'),
emptyLink,
'click',
this.empty, this.empty,
this this
) )
} }
const cloneLink = L.DomUtil.create('a', 'button umap-clone', advancedButtons) const cloneLink = L.DomUtil.createButton(
cloneLink.textContent = L._('Clone') 'button umap-clone',
cloneLink.href = '#' advancedButtons,
L.DomEvent.on(cloneLink, 'click', L.DomEvent.stop).on( L._('Clone'),
cloneLink,
'click',
function () { function () {
const datalayer = this.clone() const datalayer = this.clone()
datalayer.edit() datalayer.edit()
@ -1312,10 +1302,13 @@ L.U.DataLayer = L.Evented.extend({
this this
) )
if (this.umap_id) { if (this.umap_id) {
const download = L.DomUtil.create('a', 'button umap-download', advancedButtons) const download = L.DomUtil.createLink(
download.textContent = L._('Download') 'button umap-download',
download.href = this._dataUrl() advancedButtons,
download.target = '_blank' L._('Download'),
this._dataUrl(),
'_blank'
)
} }
this.map.ui.openPanel({ data: { html: container }, className: 'dark' }) this.map.ui.openPanel({ data: { html: container }, className: 'dark' })
}, },
@ -1343,16 +1336,14 @@ L.U.DataLayer = L.Evented.extend({
const date = new Date(parseInt(data.at, 10)) const date = new Date(parseInt(data.at, 10))
const content = `${date.toLocaleString(L.lang)} (${parseInt(data.size) / 1000}Kb)` const content = `${date.toLocaleString(L.lang)} (${parseInt(data.size) / 1000}Kb)`
const el = L.DomUtil.create('div', 'umap-datalayer-version', versionsContainer) const el = L.DomUtil.create('div', 'umap-datalayer-version', versionsContainer)
const a = L.DomUtil.create('a', '', el) const a = L.DomUtil.createButton(
L.DomUtil.add('span', '', el, content) '',
a.href = '#' el,
a.title = L._('Restore this version') L._('Restore this version'),
L.DomEvent.on(a, 'click', L.DomEvent.stop).on(
a,
'click',
() => this.restore(data.name), () => this.restore(data.name),
this this
) )
L.DomUtil.add('span', '', el, content)
} }
const versionsContainer = L.DomUtil.createFieldset(container, L._('Versions'), { const versionsContainer = L.DomUtil.createFieldset(container, L._('Versions'), {

22
umap/static/umap/js/umap.permissions.js
View file

@ -116,12 +116,10 @@ L.U.MapPermissions = L.Class.extend({
L._('Advanced actions') L._('Advanced actions')
) )
const advancedButtons = L.DomUtil.create('div', 'button-bar', advancedActions) const advancedButtons = L.DomUtil.create('div', 'button-bar', advancedActions)
const download = L.DomUtil.create('a', 'button', advancedButtons) const download = L.DomUtil.createButton(
download.href = '#' 'button',
download.textContent = L._('Attach the map to my account') advancedButtons,
L.DomEvent.on(download, 'click', L.DomEvent.stop).on( L._('Attach the map to my account'),
download,
'click',
this.attach, this.attach,
this this
) )
@ -192,11 +190,13 @@ L.U.MapPermissions = L.Class.extend({
'umap-map-owner', 'umap-map-owner',
container, container,
` ${L._('by')} ` ` ${L._('by')} `
), )
owner = L.DomUtil.create('a') L.DomUtil.createLink(
owner.href = this.options.owner.url '',
owner.textContent = this.options.owner.name ownerContainer,
ownerContainer.appendChild(owner) this.options.owner.name,
this.options.owner.url
)
} }
}, },

2
umap/static/umap/js/umap.popup.js
View file

@ -107,7 +107,7 @@ L.U.PopupTemplate.Default = L.Class.extend({
properties properties
) )
content = L.Util.greedyTemplate(template, properties) content = L.Util.greedyTemplate(template, properties)
content = L.Util.toHTML(content, {target: target}) content = L.Util.toHTML(content, { target: target })
container.innerHTML = content container.innerHTML = content
return container return container
}, },

28
umap/static/umap/js/umap.ui.js
View file

@ -93,17 +93,16 @@ L.U.UI = L.Evented.extend({
if (timeoutID) window.clearTimeout(timeoutID) if (timeoutID) window.clearTimeout(timeoutID)
this.popAlert() this.popAlert()
} }
const closeLink = L.DomUtil.create('a', 'umap-close-link', this._alert) const closeButton = L.DomUtil.createButton(
closeLink.href = '#' 'umap-close-link',
L.DomUtil.add('i', 'umap-close-icon', closeLink) this._alert,
const label = L.DomUtil.create('span', '', closeLink) '',
label.title = label.textContent = L._('Close')
L.DomEvent.on(closeLink, 'click', L.DomEvent.stop).on(
closeLink,
'click',
close, close,
this this
) )
L.DomUtil.add('i', 'umap-close-icon', closeButton)
const label = L.DomUtil.create('span', '', closeButton)
label.title = label.textContent = L._('Close')
L.DomUtil.add('div', '', this._alert, e.content) L.DomUtil.add('div', '', this._alert, e.content)
if (e.actions) { if (e.actions) {
let action, el, input let action, el, input
@ -116,18 +115,13 @@ L.U.UI = L.Evented.extend({
this._alert this._alert
) )
} }
el = L.DomUtil.element('a', { className: 'umap-action' }, this._alert) el = L.DomUtil.createButton(
el.href = '#' { className: 'umap-action' },
el.textContent = action.label this._alert,
L.DomEvent.on(el, 'click', L.DomEvent.stop) action.label,
if (action.callback) {
L.DomEvent.on(
el,
'click',
action.callback, action.callback,
action.callbackContext || this.map action.callbackContext || this.map
) )
}
L.DomEvent.on(el, 'click', close, this) L.DomEvent.on(el, 'click', close, this)
} }
} }