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) {
const container = L.DomUtil.create('div', 'leaflet-control-edit-enable'),
edit = L.DomUtil.create('a', '', container)
edit.href = '#'
edit.title = `${L._('Enable editing')} (Ctrl+E)`
edit.textContent = L._('Edit')
L.DomEvent.addListener(edit, 'click', L.DomEvent.stop).addListener(
edit,
'click',
const container = L.DomUtil.create('div', 'leaflet-control-edit-enable')
L.DomUtil.createButton(
'',
container,
`${L._('Enable editing')} (Ctrl+E)`,
map.enableEdit,
map
)
@ -343,15 +339,14 @@ L.Control.Embed = L.Control.extend({
onAdd: function (map) {
const container = L.DomUtil.create('div', 'leaflet-control-embed umap-control')
const link = L.DomUtil.create('a', '', container)
link.href = '#'
link.title = L._('Embed and share this map')
L.DomEvent.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', map.renderShareBox, map)
.on(link, 'dblclick', L.DomEvent.stopPropagation)
const shareButton = L.DomUtil.createButton(
'',
container,
L._('Embed and share this map'),
map.renderShareBox,
map
)
L.DomEvent.on(shareButton, 'dblclick', L.DomEvent.stopPropagation)
return container
},
})
@ -362,19 +357,21 @@ L.U.MoreControls = L.Control.extend({
},
onAdd: function () {
const container = L.DomUtil.create('div', 'umap-control-text'),
more = L.DomUtil.create('a', 'umap-control-more', container),
less = L.DomUtil.create('a', 'umap-control-less', container)
more.href = '#'
more.title = L._('More controls')
L.DomEvent.on(more, 'click', L.DomEvent.stop).on(more, 'click', this.toggle, this)
less.href = '#'
less.title = L._('Hide controls')
L.DomEvent.on(less, 'click', L.DomEvent.stop).on(less, 'click', this.toggle, this)
const container = L.DomUtil.create('div', 'umap-control-text')
const moreButton = L.DomUtil.createButton(
'umap-control-more',
container,
L._('More controls'),
this.toggle,
this
)
const lessButton = L.DomUtil.createButton(
'umap-control-less',
container,
L._('Hide controls'),
this.toggle,
this
)
return container
},
@ -452,23 +449,21 @@ L.U.DataLayersControl = L.Control.extend({
actions
)
const link = L.DomUtil.create('a', 'umap-browse-link', actions)
link.href = '#'
link.title = link.textContent = 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',
L.DomUtil.createButton(
'umap-browse-link',
actions,
L._('Browse data'),
map.openBrowser,
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 () {
this.update()
}, this)
@ -489,8 +484,8 @@ L.U.DataLayersControl = L.Control.extend({
)
} else {
L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation)
L.DomEvent.on(toggle, 'click', L.DomEvent.stop).on(
toggle,
L.DomEvent.on(toggleButton, 'click', L.DomEvent.stop).on(
toggleButton,
'click',
this.expand,
this
@ -580,14 +575,11 @@ L.U.DataLayersControl = L.Control.extend({
this
)
const bar = L.DomUtil.create('div', 'button-bar', container),
add = L.DomUtil.create('a', 'show-on-edit block add-datalayer button', bar)
add.href = '#'
add.textContent = add.title = L._('Add a layer')
L.DomEvent.on(add, 'click', L.DomEvent.stop).on(
add,
'click',
const bar = L.DomUtil.create('div', 'button-bar', container)
L.DomUtil.createButton(
'show-on-edit block add-datalayer button',
bar,
L._('Add a layer'),
this.newDataLayer,
this
)
@ -677,7 +669,6 @@ L.U.DataLayer.addInitHook(function () {
})
L.U.Map.include({
_openFacet: function () {
const container = L.DomUtil.create('div', 'umap-facet-search'),
title = L.DomUtil.add('h3', 'umap-filter-title', container, L._('Facet search')),
@ -781,9 +772,13 @@ L.U.Map.include({
'',
credits,
`${L._('Map user content has been published under licence')} `
),
link = L.DomUtil.add('a', '', licence, this.options.licence.name)
link.href = this.options.licence.url
)
L.DomUtil.createLink(
'',
licence,
this.options.licence.name,
this.options.licence.url
)
} else {
L.DomUtil.add('p', '', credits, L._('No licence has been set'))
}
@ -868,75 +863,72 @@ L.U.Map.include({
'div',
'umap-main-edit-toolbox with-transition dark',
this._controlContainer
),
logo = L.DomUtil.add('a', 'logo', container),
name = L.DomUtil.create('a', 'map-name', container),
share_status = L.DomUtil.create('a', 'share-status', container),
update = () => {
)
L.DomUtil.createLink('logo', container, '/')
const nameButton = L.DomUtil.createButton(
'map-name',
container,
'',
this.edit,
this
)
const shareStatusButton = L.DomUtil.createButton(
'share-status',
container,
'',
this.permissions.edit,
this.permissions
)
const update = () => {
const status = this.permissions.getShareStatusDisplay()
name.textContent = this.getDisplayName()
nameButton.textContent = this.getDisplayName()
// status is not set until map is saved once
if (status)
share_status.textContent = L._('Visibility: {status}', {
if (status) {
shareStatusButton.textContent = L._('Visibility: {status}', {
status: status,
})
}
}
update()
this.once('saved', L.bind(update, this))
logo.href = '/'
if (this.options.editMode === 'advanced') {
name.href = '#'
share_status.href = '#'
L.DomEvent.on(name, 'click', this.edit, this)
L.DomEvent.on(share_status, 'click', this.permissions.edit, this.permissions)
L.DomEvent.on(nameButton, 'click', this.edit, this)
L.DomEvent.on(shareStatusButton, 'click', this.permissions.edit, this.permissions)
}
this.on('postsync', L.bind(update, this))
const save = L.DomUtil.create('a', 'leaflet-control-edit-save button', container)
save.href = '#'
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',
L.DomUtil.createButton(
'leaflet-control-edit-save button',
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.DomEvent.addListener(disable, 'click', L.DomEvent.stop).addListener(
disable,
'click',
L.DomUtil.createButton(
'leaflet-control-edit-cancel',
container,
`${L._('Cancel edits')} (Ctrl+Z)`,
this.askForReset,
this
)
L.DomUtil.createButton(
'leaflet-control-edit-disable',
container,
`${L._('Disable editing')} (Ctrl+E)`,
function (e) {
this.disableEdit(e)
this.ui.closePanel()
},
this
)
L.DomEvent.addListener(save, 'click', L.DomEvent.stop).addListener(
save,
'click',
this.save,
this
)
L.DomEvent.addListener(cancel, 'click', L.DomEvent.stop).addListener(
cancel,
'click',
this.askForReset,
this
this.help.link(container, 'edit')
if (this.options.user) {
L.DomUtil.createLink(
'umap-user',
container,
L._(`My Dashboard ({username})`, { username: this.options.user.name }),
this.options.user.url
)
}
},
renderShareBox: function () {
@ -1020,12 +1012,19 @@ L.U.Map.include({
}
}
toggleCaveat()
const download = L.DomUtil.create('a', 'button', container)
download.textContent = L._('Download data')
L.DomEvent.on(download, 'click', () => {
if (typeInput.value === 'umap') this.fullDownload()
else this.download(typeInput.value)
})
L.DomUtil.createButton(
'button',
container,
L._('Download data'),
() => {
if (typeInput.value === 'umap') {
this.fullDownload()
} else {
this.download(typeInput.value)
}
},
this
)
this.ui.openPanel({ data: { html: container } })
},
@ -1171,15 +1170,14 @@ L.U.TileLayerControl = L.Control.extend({
onAdd: function () {
const container = L.DomUtil.create('div', 'leaflet-control-tilelayers umap-control')
const link = L.DomUtil.create('a', '', container)
link.href = '#'
link.title = L._('Change map background')
L.DomEvent.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', this.openSwitcher, this)
.on(link, 'dblclick', L.DomEvent.stopPropagation)
const changeMapBackgroundButton = L.DomUtil.createButton(
'',
container,
L._('Change map background'),
this.openSwitcher,
this
)
L.DomEvent.on(changeMapBackgroundButton, 'dblclick', L.DomEvent.stopPropagation)
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
const credits = 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) {
L.DomUtil.add(
'span',
@ -1253,8 +1256,7 @@ L.U.AttributionControl = L.Control.Attribution.extend({
}
if (window.top === window.self && this._map.options.captionMenus) {
// We are not in iframe mode
const home = L.DomUtil.add('a', '', container, ` — ${L._('Home')}`)
home.href = '/'
L.DomUtil.createLink('', container, ` — ${L._('Home')}`, '/')
}
if (this._map.options.captionMenus) {
const poweredBy = L.DomUtil.add(
@ -1279,14 +1281,15 @@ L.U.StarControl = L.Control.extend({
const container = L.DomUtil.create(
'div',
`leaflet-control-star umap-control${status}`
),
link = L.DomUtil.create('a', '', container)
link.href = '#'
link.title = L._('Star this map')
L.DomEvent.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', map.star, map)
.on(link, 'dblclick', L.DomEvent.stopPropagation)
)
const starMapButton = L.DomUtil.createButton(
'',
container,
L._('Star this map'),
map.star,
map
)
L.DomEvent.on(starMapButton, 'dblclick', L.DomEvent.stopPropagation)
return container
},
})
@ -1346,17 +1349,18 @@ L.U.SearchControl = L.Control.extend({
},
onAdd: function (map) {
const container = L.DomUtil.create('div', 'leaflet-control-search umap-control'),
self = this
const container = L.DomUtil.create('div', 'leaflet-control-search umap-control')
L.DomEvent.disableClickPropagation(container)
const link = L.DomUtil.create('a', '', container)
link.href = '#'
link.title = L._('Search a place name')
L.DomEvent.on(link, 'click', (e) => {
L.DomUtil.createButton(
'',
container,
L._('Search a place name'),
(e) => {
L.DomEvent.stop(e)
self.openPanel(map)
})
this.openPanel(map)
},
this
)
return container
},
@ -1562,7 +1566,7 @@ L.U.Editable = L.Editable.extend({
return new L.U.Marker(this.map, latlng, this._getDefaultProperties())
},
_getDefaultProperties: function() {
_getDefaultProperties: function () {
const result = {}
if (this.map.options.featuresHaveOwner && this.map.options.hasOwnProperty('user')) {
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) => {
// TODO: actually switch to buttons’ elements.
const el = L.DomUtil.add('a', className, container, content)
el.href = '#'
// const el = L.DomUtil.add('button', className, container, content)
if (callback) {
L.DomEvent.on(el, 'click', L.DomEvent.stop).on(el, 'click', callback, context)
}
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) => {
if (bool) L.DomUtil.addClass(el, className)
else L.DomUtil.removeClass(el, className)
@ -418,13 +429,17 @@ L.U.Help = L.Class.extend({
'umap-help-box with-transition dark',
document.body
)
const closeLink = L.DomUtil.create('a', 'umap-close-link', this.box)
closeLink.href = '#'
L.DomUtil.add('i', 'umap-close-icon', closeLink)
const label = L.DomUtil.create('span', '', closeLink)
const closeButton = L.DomUtil.createButton(
'umap-close-link',
this.box,
'',
this.hide,
this
)
L.DomUtil.add('i', 'umap-close-icon', closeButton)
const label = L.DomUtil.create('span', '', closeButton)
label.title = label.textContent = L._('Close')
this.content = L.DomUtil.create('div', 'umap-help-content', this.box)
L.DomEvent.on(closeLink, 'click', this.hide, this)
},
onKeyDown: function (e) {
@ -457,8 +472,11 @@ L.U.Help = L.Class.extend({
},
button: function (container, entries, classname) {
const helpButton = L.DomUtil.create('a', classname || 'umap-help-button', container)
helpButton.href = '#'
const helpButton = L.DomUtil.createButton(
classname || 'umap-help-button',
container,
L._('Help')
)
if (entries) {
L.DomEvent.on(helpButton, 'click', L.DomEvent.stop).on(
helpButton,
@ -475,7 +493,7 @@ L.U.Help = L.Class.extend({
link: function (container, entries) {
const helpButton = this.button(container, entries, 'umap-help-link')
helpButton.textContent = L._("Help")
helpButton.textContent = L._('Help')
return helpButton
},

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

@ -130,12 +130,10 @@ L.U.FeatureMixin = {
},
getAdvancedEditActions: function (container) {
const deleteLink = L.DomUtil.create('a', 'button umap-delete', container)
deleteLink.href = '#'
deleteLink.textContent = L._('Delete')
L.DomEvent.on(
deleteLink,
'click',
const deleteButton = L.DomUtil.createButton(
'button umap-delete',
container,
L._('Delete'),
function (e) {
L.DomEvent.stop(e)
if (this.confirmDelete()) this.map.ui.closePanel()
@ -1017,10 +1015,13 @@ L.U.Polyline = L.Polyline.extend({
getAdvancedEditActions: function (container) {
L.U.FeatureMixin.getAdvancedEditActions.call(this, container)
const toPolygon = L.DomUtil.create('a', 'button umap-to-polygon', container)
toPolygon.href = '#'
toPolygon.textContent = L._('Transform to polygon')
L.DomEvent.on(toPolygon, 'click', this.toPolygon, this)
const toPolygon = L.DomUtil.createButton(
'button umap-to-polygon',
container,
L._('Transform to polygon'),
this.toPolygon,
this
)
},
_mergeShapes: function (from, to) {
@ -1164,10 +1165,13 @@ L.U.Polygon = L.Polygon.extend({
getAdvancedEditActions: function (container) {
L.U.FeatureMixin.getAdvancedEditActions.call(this, container)
const toPolyline = L.DomUtil.create('a', 'button umap-to-polyline', container)
toPolyline.href = '#'
toPolyline.textContent = L._('Transform to lines')
L.DomEvent.on(toPolyline, 'click', this.toPolyline, this)
const toPolyline = L.DomUtil.createButton(
'button umap-to-polyline',
container,
L._('Transform to lines'),
this.toPolyline,
this
)
},
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)
}
}
this.button = L.DomUtil.create('a', 'button action-button', this.buttonsContainer)
this.button.textContent = this.value() ? L._('Change') : L._('Add')
this.button.href = '#'
L.DomEvent.on(this.button, 'click', L.DomEvent.stop).on(
this.button,
'click',
this.button = L.DomUtil.createButton(
'button action-button',
this.buttonsContainer,
this.value() ? L._('Change') : L._('Add'),
this.fetchIconList,
this
)
@ -616,34 +614,30 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
for (const idx in data.pictogram_list) {
this.addIconPreview(data.pictogram_list[idx])
}
const closeButton = L.DomUtil.create('a', 'button action-button', this.pictogramsContainer)
closeButton.textContent = L._('Close')
closeButton.href = '#'
closeButton.style.display = 'block'
closeButton.style.clear = 'both'
L.DomEvent.on(closeButton, 'click', L.DomEvent.stop).on(
closeButton,
'click',
const cancelButton = L.DomUtil.createButton(
'button action-button',
this.pictogramsContainer,
L._('Close'),
function (e) {
this.pictogramsContainer.innerHTML = ''
this.udpatePreview()
},
this
)
const customButton = L.DomUtil.create('a', '', this.pictogramsContainer)
customButton.textContent = L._('Toggle direct input (advanced)')
customButton.href = '#'
customButton.style.display = 'block'
customButton.style.clear = 'both'
this.builder.map.help.button(customButton, 'formatIconSymbol')
L.DomEvent.on(customButton, 'click', L.DomEvent.stop).on(
customButton,
'click',
cancelButton.style.display = 'block'
cancelButton.style.clear = 'both'
const customButton = L.DomUtil.createButton(
'',
this.pictogramsContainer,
L._('Toggle direct input (advanced)'),
function (e) {
this.input.type = this.input.type === 'text' ? 'hidden' : 'text'
},
this
)
customButton.style.display = 'block'
customButton.style.clear = 'both'
this.builder.map.help.button(customButton, 'formatIconSymbol')
},
fetchIconList: function (e) {

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

@ -1532,16 +1532,10 @@ L.U.Map.include({
})
limitBounds.appendChild(boundsBuilder.build())
const boundsButtons = L.DomUtil.create('div', 'button-bar half', limitBounds)
const setCurrentButton = L.DomUtil.add(
'a',
L.DomUtil.createButton(
'button',
boundsButtons,
L._('Use current bounds')
)
setCurrentButton.href = '#'
L.DomEvent.on(
setCurrentButton,
'click',
L._('Use current bounds'),
function () {
const bounds = this.getBounds()
this.options.limitBounds.south = L.Util.formatNum(bounds.getSouth())
@ -1554,11 +1548,10 @@ L.U.Map.include({
},
this
)
const emptyBounds = L.DomUtil.add('a', 'button', boundsButtons, L._('Empty'))
emptyBounds.href = '#'
L.DomEvent.on(
emptyBounds,
'click',
L.DomUtil.createButton(
'button',
boundsButtons,
L._('Empty'),
function () {
this.options.limitBounds.south = null
this.options.limitBounds.west = null
@ -1650,34 +1643,39 @@ L.U.Map.include({
const advancedActions = L.DomUtil.createFieldset(container, L._('Advanced actions'))
const advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
if (this.permissions.isOwner()) {
const del = L.DomUtil.create('a', 'button umap-delete', advancedButtons)
del.href = '#'
del.title = L._('Delete map')
del.textContent = L._('Delete')
L.DomEvent.on(del, 'click', L.DomEvent.stop).on(del, 'click', this.del, this)
const empty = L.DomUtil.create('a', 'button umap-empty', advancedButtons)
empty.href = '#'
empty.textContent = L._('Empty')
empty.title = L._('Delete all layers')
L.DomEvent.on(empty, 'click', L.DomEvent.stop).on(
empty,
'click',
L.DomUtil.createButton(
'button umap-delete',
advancedButtons,
L._('Delete'),
this.del,
this
)
L.DomUtil.createButton(
'button umap-empty',
advancedButtons,
L._('Empty'),
this.empty,
this
)
}
const clone = L.DomUtil.create('a', 'button umap-clone', advancedButtons)
clone.href = '#'
clone.textContent = L._('Clone')
clone.title = L._('Clone this map')
L.DomEvent.on(clone, 'click', L.DomEvent.stop).on(clone, 'click', this.clone, this)
const download = L.DomUtil.create('a', 'button umap-download', advancedButtons)
download.href = '#'
download.textContent = L._('Download')
download.title = L._('Open download panel')
L.DomEvent.on(download, 'click', L.DomEvent.stop).on(
download,
'click',
L.DomUtil.createButton(
'button umap-clone',
advancedButtons,
L._('Clone this map'),
this.clone,
this
)
L.DomUtil.createButton(
'button umap-empty',
advancedButtons,
L._('Delete all layers'),
this.empty,
this
)
L.DomUtil.createButton(
'button umap-download',
advancedButtons,
L._('Open download panel'),
this.renderShareBox,
this
)
@ -1739,38 +1737,25 @@ L.U.Map.include({
L.DomEvent.disableClickPropagation(container)
this.permissions.addOwnerLink('span', container)
if (this.options.captionMenus) {
const about = L.DomUtil.add(
'a',
L.DomUtil.createButton(
'umap-about-link',
container,
` — ${L._('About')}`
` — ${L._('About')}`,
this.displayCaption,
this
)
about.href = '#'
L.DomEvent.on(about, 'click', this.displayCaption, this)
const browser = L.DomUtil.add(
'a',
L.DomUtil.createButton(
'umap-open-browser-link',
container,
` | ${L._('Browse data')}`
)
browser.href = '#'
L.DomEvent.on(browser, 'click', L.DomEvent.stop).on(
browser,
'click',
` | ${L._('Browse data')}`,
this.openBrowser,
this
)
if (this.options.facetKey) {
const filter = L.DomUtil.add(
'a',
L.DomUtil.createButton(
'umap-open-filter-link',
container,
` | ${L._('Select data')}`
)
filter.href = '#'
L.DomEvent.on(filter, 'click', L.DomEvent.stop).on(
filter,
'click',
` | ${L._('Select data')}`,
this.openFacet,
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 advancedButtons = L.DomUtil.create('div', 'button-bar half', advancedActions)
const deleteLink = L.DomUtil.create(
'a',
const deleteLink = L.DomUtil.createButton(
'button delete_datalayer_button umap-delete',
advancedButtons
)
deleteLink.textContent = L._('Delete')
deleteLink.href = '#'
L.DomEvent.on(deleteLink, 'click', L.DomEvent.stop).on(
deleteLink,
'click',
advancedButtons,
L._('Delete'),
function () {
this._delete()
this.map.ui.closePanel()
@ -1289,22 +1283,18 @@ L.U.DataLayer = L.Evented.extend({
this
)
if (!this.isRemoteLayer()) {
const emptyLink = L.DomUtil.create('a', 'button umap-empty', advancedButtons)
emptyLink.textContent = L._('Empty')
emptyLink.href = '#'
L.DomEvent.on(emptyLink, 'click', L.DomEvent.stop).on(
emptyLink,
'click',
const emptyLink = L.DomUtil.createButton(
'button umap-empty',
advancedButtons,
L._('Empty'),
this.empty,
this
)
}
const cloneLink = L.DomUtil.create('a', 'button umap-clone', advancedButtons)
cloneLink.textContent = L._('Clone')
cloneLink.href = '#'
L.DomEvent.on(cloneLink, 'click', L.DomEvent.stop).on(
cloneLink,
'click',
const cloneLink = L.DomUtil.createButton(
'button umap-clone',
advancedButtons,
L._('Clone'),
function () {
const datalayer = this.clone()
datalayer.edit()
@ -1312,10 +1302,13 @@ L.U.DataLayer = L.Evented.extend({
this
)
if (this.umap_id) {
const download = L.DomUtil.create('a', 'button umap-download', advancedButtons)
download.textContent = L._('Download')
download.href = this._dataUrl()
download.target = '_blank'
const download = L.DomUtil.createLink(
'button umap-download',
advancedButtons,
L._('Download'),
this._dataUrl(),
'_blank'
)
}
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 content = `${date.toLocaleString(L.lang)} (${parseInt(data.size) / 1000}Kb)`
const el = L.DomUtil.create('div', 'umap-datalayer-version', versionsContainer)
const a = L.DomUtil.create('a', '', el)
L.DomUtil.add('span', '', el, content)
a.href = '#'
a.title = L._('Restore this version')
L.DomEvent.on(a, 'click', L.DomEvent.stop).on(
a,
'click',
const a = L.DomUtil.createButton(
'',
el,
L._('Restore this version'),
() => this.restore(data.name),
this
)
L.DomUtil.add('span', '', el, content)
}
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')
)
const advancedButtons = L.DomUtil.create('div', 'button-bar', advancedActions)
const download = L.DomUtil.create('a', 'button', advancedButtons)
download.href = '#'
download.textContent = L._('Attach the map to my account')
L.DomEvent.on(download, 'click', L.DomEvent.stop).on(
download,
'click',
const download = L.DomUtil.createButton(
'button',
advancedButtons,
L._('Attach the map to my account'),
this.attach,
this
)
@ -192,11 +190,13 @@ L.U.MapPermissions = L.Class.extend({
'umap-map-owner',
container,
` ${L._('by')} `
),
owner = L.DomUtil.create('a')
owner.href = this.options.owner.url
owner.textContent = this.options.owner.name
ownerContainer.appendChild(owner)
)
L.DomUtil.createLink(
'',
ownerContainer,
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
)
content = L.Util.greedyTemplate(template, properties)
content = L.Util.toHTML(content, {target: target})
content = L.Util.toHTML(content, { target: target })
container.innerHTML = content
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)
this.popAlert()
}
const closeLink = L.DomUtil.create('a', 'umap-close-link', this._alert)
closeLink.href = '#'
L.DomUtil.add('i', 'umap-close-icon', closeLink)
const label = L.DomUtil.create('span', '', closeLink)
label.title = label.textContent = L._('Close')
L.DomEvent.on(closeLink, 'click', L.DomEvent.stop).on(
closeLink,
'click',
const closeButton = L.DomUtil.createButton(
'umap-close-link',
this._alert,
'',
close,
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)
if (e.actions) {
let action, el, input
@ -116,18 +115,13 @@ L.U.UI = L.Evented.extend({
this._alert
)
}
el = L.DomUtil.element('a', { className: 'umap-action' }, this._alert)
el.href = '#'
el.textContent = action.label
L.DomEvent.on(el, 'click', L.DomEvent.stop)
if (action.callback) {
L.DomEvent.on(
el,
'click',
el = L.DomUtil.createButton(
{ className: 'umap-action' },
this._alert,
action.label,
action.callback,
action.callbackContext || this.map
)
}
L.DomEvent.on(el, 'click', close, this)
}
}