diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js index 75a8371c..2e740fd7 100644 --- a/umap/static/umap/js/umap.controls.js +++ b/umap/static/umap/js/umap.controls.js @@ -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 } } diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js index a9398945..41bfd4bd 100644 --- a/umap/static/umap/js/umap.core.js +++ b/umap/static/umap/js/umap.core.js @@ -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 }, diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js index 5b3b8f7b..471c002c 100644 --- a/umap/static/umap/js/umap.features.js +++ b/umap/static/umap/js/umap.features.js @@ -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 () { diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index c75d01ec..c81417c9 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -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) { diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index e762db14..b2f0cc6b 100644 --- a/umap/static/umap/js/umap.js +++ b/umap/static/umap/js/umap.js @@ -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 ) diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js index 1200f8c2..5a8066d3 100644 --- a/umap/static/umap/js/umap.layer.js +++ b/umap/static/umap/js/umap.layer.js @@ -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'), { diff --git a/umap/static/umap/js/umap.permissions.js b/umap/static/umap/js/umap.permissions.js index 7e277503..1687e142 100644 --- a/umap/static/umap/js/umap.permissions.js +++ b/umap/static/umap/js/umap.permissions.js @@ -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 + ) } }, diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js index 9fd96b3c..9487890c 100644 --- a/umap/static/umap/js/umap.popup.js +++ b/umap/static/umap/js/umap.popup.js @@ -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 }, diff --git a/umap/static/umap/js/umap.ui.js b/umap/static/umap/js/umap.ui.js index 28bb6403..abe99542 100644 --- a/umap/static/umap/js/umap.ui.js +++ b/umap/static/umap/js/umap.ui.js @@ -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) } }