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