almet/umap
1
0
Fork 0
mirror of https://github.com/umap-project/umap.git synced 2025-04-29 03:42:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore: use imports instead of globals in share.js

Browse source
This commit is contained in:
Yohan Boniface 2024-08-28 21:22:22 +02:00
parent d0c1a55b2f
commit 7a7553c52f
1 changed files with 50 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
umap/static/umap/js/modules/share.js
View file

@ -1,4 +1,7 @@
import { DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
import { EXPORT_FORMATS } from './formatter.js'
import { translate } from './i18n.js'
import * as Utils from './utils.js'
export default class Share {
constructor(map) {
@ -6,85 +9,93 @@ export default class Share {
}
build() {
this.container = L.DomUtil.create('div', '')
this.title = L.DomUtil.createTitle(
this.container = DomUtil.create('div', '')
this.title = DomUtil.createTitle(
this.container,
L._('Share and download'),
translate('Share and download'),
'icon-share'
)
L.DomUtil.createCopiableInput(
DomUtil.createCopiableInput(
this.container,
L._('Link to view the map'),
window.location.protocol + U.Utils.getBaseUrl()
translate('Link to view the map'),
window.location.protocol + Utils.getBaseUrl()
)
if (this.map.options.shortUrl) {
L.DomUtil.createCopiableInput(
DomUtil.createCopiableInput(
this.container,
L._('Short link'),
translate('Short link'),
this.map.options.shortUrl
)
}
L.DomUtil.create('hr', '', this.container)
DomUtil.create('hr', '', this.container)
L.DomUtil.add('h4', '', this.container, L._('Download'))
L.DomUtil.add('small', 'label', this.container, L._("Only visible layers' data"))
for (const format of Object.keys(EXPORT_FORMATS)) {
L.DomUtil.createButton('download-file', this.container, format, () =>
this.download(format)
)
}
L.DomUtil.create('div', 'vspace', this.container)
L.DomUtil.add(
DomUtil.add('h4', '', this.container, translate('Download'))
DomUtil.add(
'small',
'label',
this.container,
L._('All data and settings of the map')
translate("Only visible layers' data")
)
const downloadUrl = U.Utils.template(this.map.options.urls.map_download, {
for (const format of Object.keys(EXPORT_FORMATS)) {
DomUtil.createButton('download-file', this.container, format, () =>
this.download(format)
)
}
DomUtil.create('div', 'vspace', this.container)
DomUtil.add(
'small',
'label',
this.container,
translate('All data and settings of the map')
)
const downloadUrl = Utils.template(this.map.options.urls.map_download, {
map_id: this.map.options.umap_id,
})
const link = L.DomUtil.createLink(
const link = DomUtil.createLink(
'download-backup',
this.container,
L._('full backup'),
translate('full backup'),
downloadUrl
)
let name = this.map.options.name || 'data'
name = name.replace(/[^a-z0-9]/gi, '_').toLowerCase()
link.setAttribute('download', `${name}.umap`)
L.DomUtil.create('hr', '', this.container)
DomUtil.create('hr', '', this.container)
const embedTitle = L.DomUtil.add('h4', '', this.container, L._('Embed the map'))
const iframe = L.DomUtil.create('textarea', 'umap-share-iframe', this.container)
const urlTitle = L.DomUtil.add('h4', '', this.container, L._('Direct link'))
const exportUrl = L.DomUtil.createCopiableInput(
const embedTitle = DomUtil.add('h4', '', this.container, translate('Embed the map'))
const iframe = DomUtil.create('textarea', 'umap-share-iframe', this.container)
const urlTitle = DomUtil.add('h4', '', this.container, translate('Direct link'))
const exportUrl = DomUtil.createCopiableInput(
this.container,
L._('Share this link to open a customized map view'),
translate('Share this link to open a customized map view'),
''
)
exportUrl.type = 'text'
const UIFields = [
['dimensions.width', { handler: 'Input', label: L._('width') }],
['dimensions.height', { handler: 'Input', label: L._('height') }],
['dimensions.width', { handler: 'Input', label: translate('width') }],
['dimensions.height', { handler: 'Input', label: translate('height') }],
[
'options.includeFullScreenLink',
{ handler: 'Switch', label: L._('Include full screen link?') },
{ handler: 'Switch', label: translate('Include full screen link?') },
],
[
'options.currentView',
{ handler: 'Switch', label: L._('Current view instead of default map view?') },
{
handler: 'Switch',
label: translate('Current view instead of default map view?'),
},
],
[
'options.keepCurrentDatalayers',
{ handler: 'Switch', label: L._('Keep current visible layers') },
{ handler: 'Switch', label: translate('Keep current visible layers') },
],
[
'options.viewCurrentFeature',
{ handler: 'Switch', label: L._('Open current feature on load') },
{ handler: 'Switch', label: translate('Open current feature on load') },
],
'queryString.moreControl',
'queryString.scrollWheelZoom',
@ -106,9 +117,9 @@ export default class Share {
const builder = new U.FormBuilder(iframeExporter, UIFields, {
callback: buildIframeCode,
})
const iframeOptions = L.DomUtil.createFieldset(
const iframeOptions = DomUtil.createFieldset(
this.container,
L._('Embed and link options')
translate('Embed and link options')
)
iframeOptions.appendChild(builder.build())
}
@ -144,7 +155,7 @@ export default class Share {
class IframeExporter {
constructor(map) {
this.map = map
this.baseUrl = U.Utils.getBaseUrl()
this.baseUrl = Utils.getBaseUrl()
this.options = {
includeFullScreenLink: true,
currentView: false,
@ -199,7 +210,7 @@ class IframeExporter {
}
const currentView = this.options.currentView ? window.location.hash : ''
const queryString = L.extend({}, this.queryString, options)
return `${this.baseUrl}?${U.Utils.buildQueryString(queryString)}${currentView}`
return `${this.baseUrl}?${Utils.buildQueryString(queryString)}${currentView}`
}
build() {
@ -207,7 +218,7 @@ class IframeExporter {
let code = `<iframe width="${this.dimensions.width}" height="${this.dimensions.height}" frameborder="0" allowfullscreen allow="geolocation" src="${iframeUrl}"></iframe>`
if (this.options.includeFullScreenLink) {
const fullUrl = this.buildUrl({ scrollWheelZoom: true })
code += `<p><a href="${fullUrl}">${L._('See full screen')}</a></p>`
code += `<p><a href="${fullUrl}">${translate('See full screen')}</a></p>`
}
return code
}