chore: move caption to its own module

This commit is contained in:
Yohan Boniface 2024-05-14 16:00:26 +02:00
parent b6262f04b7
commit c58196b285
4 changed files with 122 additions and 95 deletions

View file

@ -0,0 +1,108 @@
import { DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js'
import { translate } from './i18n.js'
import * as Utils from './utils.js'
export default class Caption {
constructor(map) {
this.map = map
}
open() {
const container = DomUtil.create('div', 'umap-caption')
DomUtil.createTitle(container, this.map.options.name, 'icon-caption')
this.map.permissions.addOwnerLink('h5', container)
if (this.map.options.description) {
const description = DomUtil.element({
tagName: 'div',
className: 'umap-map-description',
safeHTML: Utils.toHTML(this.map.options.description),
parent: container,
})
}
const datalayerContainer = DomUtil.create('div', 'datalayer-container', container)
this.map.eachVisibleDataLayer((datalayer) => this.addDataLayer(datalayer, datalayerContainer))
const creditsContainer = DomUtil.create('div', 'credits-container', container)
this.addCredits(creditsContainer)
this.map.panel.open({ content: container })
}
addDataLayer(datalayer, container) {
if (!datalayer.options.inCaption) return
const p = DomUtil.create('p', 'datalayer-legend', container),
legend = DomUtil.create('span', '', p),
headline = DomUtil.create('strong', '', p)
datalayer.onceLoaded(function () {
datalayer.renderLegend(legend)
if (datalayer.options.description) {
DomUtil.element({
tagName: 'span',
parent: p,
safeHTML: Utils.toHTML(datalayer.options.description),
})
}
})
datalayer.renderToolbox(headline)
DomUtil.add('span', '', headline, `${datalayer.options.name} `)
}
addCredits(container) {
const credits = DomUtil.createFieldset(container, translate('Credits'))
let title = DomUtil.add('h5', '', credits, translate('User content credits'))
if (this.map.options.shortCredit || this.map.options.longCredit) {
DomUtil.element({
tagName: 'p',
parent: credits,
safeHTML: Utils.toHTML(
this.map.options.longCredit || this.map.options.shortCredit
),
})
}
if (this.map.options.licence) {
const licence = DomUtil.add(
'p',
'',
credits,
`${translate('Map user content has been published under licence')} `
)
DomUtil.createLink(
'',
licence,
this.map.options.licence.name,
this.map.options.licence.url
)
} else {
DomUtil.add('p', '', credits, translate('No licence has been set'))
}
title = DomUtil.create('h5', '', credits)
title.textContent = translate('Map background credits')
const tilelayerCredit = DomUtil.create('p', '', credits)
DomUtil.element({
tagName: 'strong',
parent: tilelayerCredit,
textContent: `${this.map.selected_tilelayer.options.name} `,
})
DomUtil.element({
tagName: 'span',
parent: tilelayerCredit,
safeHTML: this.map.selected_tilelayer.getAttribution(),
})
const urls = {
leaflet: 'http://leafletjs.com',
django: 'https://www.djangoproject.com',
umap: 'http://wiki.openstreetmap.org/wiki/UMap',
changelog: 'https://umap-project.readthedocs.io/en/master/changelog/',
version: this.map.options.umap_version,
}
const creditHTML = translate(
`
Powered by <a href="{leaflet}">Leaflet</a> and
<a href="{django}">Django</a>,
glued by <a href="{umap}">uMap project</a>
(version <a href="{changelog}">{version}</a>).
`,
urls
)
DomUtil.element({ tagName: 'p', innerHTML: creditHTML, parent: credits })
}
}

View file

@ -1,6 +1,7 @@
import URLs from './urls.js'
import Browser from './browser.js'
import Facets from './facets.js'
import Caption from './caption.js'
import { Panel, EditPanel, FullPanel } from './panel.js'
import * as Utils from './utils.js'
import { SCHEMA } from './schema.js'
@ -25,4 +26,5 @@ window.U = {
Utils,
SCHEMA,
Orderable,
Caption,
}

View file

@ -530,7 +530,7 @@ U.CaptionControl = L.Control.Button.extend({
},
onClick: function () {
this.map.displayCaption()
this.map.openCaption()
},
})
@ -671,96 +671,6 @@ const ControlsMixin = {
'tilelayers',
],
displayCaption: function () {
const container = L.DomUtil.create('div', 'umap-caption')
L.DomUtil.createTitle(container, this.options.name, 'icon-caption')
this.permissions.addOwnerLink('h5', container)
if (this.options.description) {
const description = L.DomUtil.element({
tagName: 'div',
className: 'umap-map-description',
safeHTML: U.Utils.toHTML(this.options.description),
parent: container,
})
}
const datalayerContainer = L.DomUtil.create('div', 'datalayer-container', container)
this.eachVisibleDataLayer((datalayer) => {
if (!datalayer.options.inCaption) return
const p = L.DomUtil.create('p', 'datalayer-legend', datalayerContainer),
legend = L.DomUtil.create('span', '', p),
headline = L.DomUtil.create('strong', '', p)
datalayer.onceLoaded(function () {
datalayer.renderLegend(legend)
if (datalayer.options.description) {
L.DomUtil.element({
tagName: 'span',
parent: p,
safeHTML: U.Utils.toHTML(datalayer.options.description),
})
}
})
datalayer.renderToolbox(headline)
L.DomUtil.add('span', '', headline, `${datalayer.options.name} `)
})
const creditsContainer = L.DomUtil.create('div', 'credits-container', container),
credits = L.DomUtil.createFieldset(creditsContainer, L._('Credits'))
title = L.DomUtil.add('h5', '', credits, L._('User content credits'))
if (this.options.shortCredit || this.options.longCredit) {
L.DomUtil.element({
tagName: 'p',
parent: credits,
safeHTML: U.Utils.toHTML(this.options.longCredit || this.options.shortCredit),
})
}
if (this.options.licence) {
const licence = L.DomUtil.add(
'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'))
}
title = L.DomUtil.create('h5', '', credits)
title.textContent = L._('Map background credits')
const tilelayerCredit = L.DomUtil.create('p', '', credits)
L.DomUtil.element({
tagName: 'strong',
parent: tilelayerCredit,
textContent: `${this.selected_tilelayer.options.name} `,
})
L.DomUtil.element({
tagName: 'span',
parent: tilelayerCredit,
safeHTML: this.selected_tilelayer.getAttribution(),
})
const urls = {
leaflet: 'http://leafletjs.com',
django: 'https://www.djangoproject.com',
umap: 'http://wiki.openstreetmap.org/wiki/UMap',
changelog: 'https://umap-project.readthedocs.io/en/master/changelog/',
version: this.options.umap_version,
}
const creditHTML = L._(
`
Powered by <a href="{leaflet}">Leaflet</a> and
<a href="{django}">Django</a>,
glued by <a href="{umap}">uMap project</a>
(version <a href="{changelog}">{version}</a>).
`,
urls
)
L.DomUtil.element({ tagName: 'p', innerHTML: creditHTML, parent: credits })
this.panel.open({ content: container })
},
renderEditToolbar: function () {
const container = L.DomUtil.create(
'div',
@ -1077,7 +987,7 @@ U.AttributionControl = L.Control.Attribution.extend({
if (captionMenus) {
const link = L.DomUtil.add('a', '', container, `${L._('About')}`)
L.DomEvent.on(link, 'click', L.DomEvent.stop)
.on(link, 'click', this._map.displayCaption, this._map)
.on(link, 'click', this._map.openCaption, this._map)
.on(link, 'dblclick', L.DomEvent.stop)
}
if (window.top === window.self && captionMenus) {

View file

@ -222,7 +222,7 @@ U.Map = L.Map.extend({
this.openBrowser('filters')
} else if (this.options.onLoadPanel === 'caption') {
this.panel.mode = 'condensed'
this.displayCaption()
this.openCaption()
}
if (L.Util.queryString('edit')) {
if (this.hasEditMode()) this.enableEdit()
@ -382,6 +382,7 @@ U.Map = L.Map.extend({
else this.scrollWheelZoom.disable()
this.browser = new U.Browser(this)
this.facets = new U.Facets(this)
this.caption = new U.Caption(this)
this.importer = new U.Importer(this)
this.drop = new U.DropControl(this)
this.share = new U.Share(this)
@ -916,6 +917,12 @@ U.Map = L.Map.extend({
})
},
openCaption: function () {
this.onceDatalayersLoaded(function () {
this.caption.open()
})
},
eachDataLayer: function (method, context) {
for (let i = 0; i < this.datalayers_index.length; i++) {
method.call(context, this.datalayers_index[i])
@ -1591,7 +1598,7 @@ U.Map = L.Map.extend({
'umap-about-link flat',
container,
L._('About'),
this.displayCaption,
this.openCaption,
this
)
L.DomUtil.createButton(
@ -1758,7 +1765,7 @@ U.Map = L.Map.extend({
items.push(
{
text: L._('About'),
callback: this.displayCaption,
callback: this.openCaption,
},
{
text: this.help.displayLabel('SEARCH'),