A11Y: switch from links to buttons when pertinent
This commit is contained in:
David Larlet
parent
3c234ead5b
commit
688ef19c04
9 changed files with 322 additions and 332 deletions
|
|
@ -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')),
|
||||
|
|
@ -777,13 +768,17 @@ L.U.Map.include({
|
|||
}
|
||||
if (this.options.licence) {
|
||||
const licence = L.DomUtil.add(
|
||||
'p',
|
||||
'',
|
||||
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
|
||||
'p',
|
||||
'',
|
||||
credits,
|
||||
`${L._('Map user content has been published under licence')} `
|
||||
)
|
||||
L.DomUtil.createLink(
|
||||
'',
|
||||
licence,
|
||||
this.options.licence.name,
|
||||
this.options.licence.url
|
||||
)
|
||||
} else {
|
||||
L.DomUtil.add('p', '', credits, L._('No licence has been set'))
|
||||
}
|
||||
|
|
@ -865,78 +860,75 @@ L.U.Map.include({
|
|||
|
||||
renderEditToolbar: function () {
|
||||
const container = L.DomUtil.create(
|
||||
'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 = () => {
|
||||
const status = this.permissions.getShareStatusDisplay()
|
||||
name.textContent = this.getDisplayName()
|
||||
// status is not set until map is saved once
|
||||
if (status)
|
||||
share_status.textContent = L._('Visibility: {status}', {
|
||||
status: status,
|
||||
})
|
||||
'div',
|
||||
'umap-main-edit-toolbox with-transition dark',
|
||||
this._controlContainer
|
||||
)
|
||||
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()
|
||||
nameButton.textContent = this.getDisplayName()
|
||||
// status is not set until map is saved once
|
||||
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',
|
||||
container,
|
||||
L._(`My Dashboard ({username})`, { username: this.options.user.name })
|
||||
)
|
||||
userLabel.href = this.options.user.url
|
||||
}
|
||||
|
||||
L.DomEvent.addListener(disable, 'click', L.DomEvent.stop).addListener(
|
||||
disable,
|
||||
'click',
|
||||
L.DomUtil.createButton(
|
||||
'leaflet-control-edit-save button',
|
||||
container,
|
||||
`${L._('Save current edits')} (Ctrl+S)`,
|
||||
this.save,
|
||||
this
|
||||
)
|
||||
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(
|
||||
|
|
@ -1277,16 +1279,17 @@ L.U.StarControl = L.Control.extend({
|
|||
onAdd: function (map) {
|
||||
const status = map.options.starred ? ' starred' : ''
|
||||
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)
|
||||
|
||||
'div',
|
||||
`leaflet-control-star umap-control${status}`
|
||||
)
|
||||
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.DomEvent.stop(e)
|
||||
self.openPanel(map)
|
||||
})
|
||||
L.DomUtil.createButton(
|
||||
'',
|
||||
container,
|
||||
L._('Search a place name'),
|
||||
(e) => {
|
||||
L.DomEvent.stop(e)
|
||||
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 } }
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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'), {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
)
|
||||
|
|
@ -188,15 +186,17 @@ L.U.MapPermissions = L.Class.extend({
|
|||
addOwnerLink: function (element, container) {
|
||||
if (this.options.owner && this.options.owner.name && this.options.owner.url) {
|
||||
const ownerContainer = L.DomUtil.add(
|
||||
element,
|
||||
'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)
|
||||
element,
|
||||
'umap-map-owner',
|
||||
container,
|
||||
` ${L._('by')} `
|
||||
)
|
||||
L.DomUtil.createLink(
|
||||
'',
|
||||
ownerContainer,
|
||||
this.options.owner.name,
|
||||
this.options.owner.url
|
||||
)
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
action.callback,
|
||||
action.callbackContext || this.map
|
||||
)
|
||||
}
|
||||
el = L.DomUtil.createButton(
|
||||
{ className: 'umap-action' },
|
||||
this._alert,
|
||||
action.label,
|
||||
action.callback,
|
||||
action.callbackContext || this.map
|
||||
)
|
||||
L.DomEvent.on(el, 'click', close, this)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue