From 0e78d58c037b5abab7ba91bf6f8c5b4e4fc07768 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Thu, 19 Dec 2024 10:33:12 +0100 Subject: [PATCH 1/2] chore: use WithTemplate for Caption --- umap/static/umap/js/modules/caption.js | 146 ++++++++++++------------- 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/umap/static/umap/js/modules/caption.js b/umap/static/umap/js/modules/caption.js index e1a8babd5..dd35b8bb6 100644 --- a/umap/static/umap/js/modules/caption.js +++ b/umap/static/umap/js/modules/caption.js @@ -1,11 +1,39 @@ -import { DomUtil } from '../../vendors/leaflet/leaflet-src.esm.js' import { translate } from './i18n.js' import * as Utils from './utils.js' -export default class Caption { +const TEMPLATE = ` +
+
+

+ + +

+

+
+
+
+
+
+ ${translate('Credits')} +
+
${translate('User content credits')}
+

+

${translate('Map user content has been published under licence')}

+

${translate('No licence has been set')}

+
${translate('Map background credits')}
+

+

+
+
+
+
` + +export default class Caption extends Utils.WithTemplate { constructor(umap, leafletMap) { + super() this._umap = umap this._leafletMap = leafletMap + this.loadTemplate(TEMPLATE) } isOpen() { @@ -18,94 +46,67 @@ export default class Caption { } open() { - const container = DomUtil.create('div', 'umap-caption') - const hgroup = DomUtil.element({ tagName: 'hgroup', parent: container }) - DomUtil.createTitle( - hgroup, - this._umap.getDisplayName(), - 'icon-caption icon-block', - 'map-name' - ) - const title = Utils.loadTemplate('

') - hgroup.appendChild(title) - this._umap.addAuthorLink(title) + this.elements.name.textContent = this._umap.getDisplayName() + this.elements.author.innerHTML = '' + this._umap.addAuthorLink(this.elements.author) if (this._umap.properties.description) { - const description = DomUtil.element({ - tagName: 'div', - className: 'umap-map-description text', - safeHTML: Utils.toHTML(this._umap.properties.description), - parent: container, - }) + this.elements.description.innerHTML = Utils.toHTML( + this._umap.properties.description + ) + } else { + this.elements.description.hidden = true } - const datalayerContainer = DomUtil.create('div', 'datalayer-container', container) + this.elements.datalayersContainer.innerHTML = '' this._umap.eachDataLayerReverse((datalayer) => - this.addDataLayer(datalayer, datalayerContainer) + this.addDataLayer(datalayer, this.elements.datalayersContainer) ) - const creditsContainer = DomUtil.create('div', 'credits-container', container) - this.addCredits(creditsContainer) - this._umap.panel.open({ content: container }).then(() => { + this.addCredits() + this._umap.panel.open({ content: this.element }).then(() => { // Create the legend when the panel is actually on the DOM this._umap.eachDataLayerReverse((datalayer) => datalayer.renderLegend()) }) } - addDataLayer(datalayer, container) { + addDataLayer(datalayer, parent) { if (!datalayer.options.inCaption) return - const p = DomUtil.create('p', `caption-item ${datalayer.cssId}`, container) - const legend = DomUtil.create('span', 'datalayer-legend', p) - const headline = DomUtil.create('strong', '', p) + const template = ` +

+ + + +

` + const [element, { toolbox, description }] = Utils.loadTemplateWithRefs(template) if (datalayer.options.description) { - DomUtil.element({ - tagName: 'span', - parent: p, - safeHTML: Utils.toHTML(datalayer.options.description), - }) + description.innerHTML = Utils.toHTML(datalayer.options.description) + } else { + description.hidden = true } - datalayer.renderToolbox(headline) - DomUtil.add('span', '', headline, `${datalayer.options.name} `) + datalayer.renderToolbox(toolbox) + parent.appendChild(element) + // Use textContent for security + const name = Utils.loadTemplate('') + name.textContent = datalayer.options.name + toolbox.appendChild(name) } - addCredits(container) { - const credits = DomUtil.createFieldset(container, translate('Credits')) - let title = DomUtil.add('h5', '', credits, translate('User content credits')) + addCredits() { if (this._umap.properties.shortCredit || this._umap.properties.longCredit) { - DomUtil.element({ - tagName: 'p', - parent: credits, - safeHTML: Utils.toHTML( - this._umap.properties.longCredit || this._umap.properties.shortCredit - ), - }) + this.elements.userCredits.innerHTML = Utils.toHTML( + this._umap.properties.longCredit || this._umap.properties.shortCredit + ) + } else { + this.elements.userCredits.hidden = true } if (this._umap.properties.licence) { - const licence = DomUtil.add( - 'p', - '', - credits, - `${translate('Map user content has been published under licence')} ` - ) - DomUtil.createLink( - '', - licence, - this._umap.properties.licence.name, - this._umap.properties.licence.url - ) + this.elements.licenceLink.href = this._umap.properties.licence.url + this.elements.licenceLink.textContent = this._umap.properties.licence.name + this.elements.noLicence.hidden = true } else { - DomUtil.add('p', '', credits, translate('No licence has been set')) + this.elements.licence.hidden = true } - 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._leafletMap.selectedTilelayer.options.name} `, - }) - DomUtil.element({ - tagName: 'span', - parent: tilelayerCredit, - safeHTML: this._leafletMap.selectedTilelayer.getAttribution(), - }) + this.elements.bgName.textContent = this._leafletMap.selectedTilelayer.options.name + this.elements.bgAttribution.innerHTML = + this._leafletMap.selectedTilelayer.getAttribution() const urls = { leaflet: 'http://leafletjs.com', django: 'https://www.djangoproject.com', @@ -113,7 +114,7 @@ export default class Caption { changelog: 'https://docs.umap-project.org/en/master/changelog/', version: this._umap.properties.umap_version, } - const creditHTML = translate( + this.elements.poweredBy.innerHTML = translate( ` Powered by Leaflet and Django, @@ -122,6 +123,5 @@ export default class Caption { `, urls ) - DomUtil.element({ tagName: 'p', innerHTML: creditHTML, parent: credits }) } } From 0bc4900b16bb2f1f909a7849c8c357b94bca4263 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Thu, 19 Dec 2024 10:33:32 +0100 Subject: [PATCH 2/2] fix(caption): honour carriage returns in datalayer description fix #2385 --- umap/static/umap/js/modules/caption.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/umap/static/umap/js/modules/caption.js b/umap/static/umap/js/modules/caption.js index dd35b8bb6..7e316945a 100644 --- a/umap/static/umap/js/modules/caption.js +++ b/umap/static/umap/js/modules/caption.js @@ -73,7 +73,7 @@ export default class Caption extends Utils.WithTemplate {

- +

` const [element, { toolbox, description }] = Utils.loadTemplateWithRefs(template) if (datalayer.options.description) {