Merge pull request #2081 from umap-project/fix-white-space-panel

fix: white space was broken since using loadTemplate
This commit is contained in:
Yohan Boniface 2024-08-29 20:08:51 +02:00 committed by GitHub
commit 061edd3198
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 14 additions and 16 deletions

View file

@ -5,7 +5,7 @@
display: none; display: none;
} }
.umap-slideshow-enabled .umap-slideshow-toolbox { .umap-slideshow-enabled .umap-slideshow-toolbox {
display: inline-block; display: flex;
} }
.umap-slideshow-toolbox li { .umap-slideshow-toolbox li {
display: inline-block; display: inline-block;

View file

@ -24,9 +24,9 @@ export default function loadTemplate(name, feature, container) {
} }
class PopupTemplate { class PopupTemplate {
renderTitle(feature, container) {} renderTitle(feature) {}
renderBody(feature, container) { renderBody(feature) {
const template = feature.getOption('popupContentTemplate') const template = feature.getOption('popupContentTemplate')
const target = feature.getOption('outlinkTarget') const target = feature.getOption('outlinkTarget')
const properties = feature.extendedProperties() const properties = feature.extendedProperties()
@ -40,7 +40,7 @@ class PopupTemplate {
return Utils.loadTemplate(`<div class="umap-popup-container text">${content}</div>`) return Utils.loadTemplate(`<div class="umap-popup-container text">${content}</div>`)
} }
renderFooter(feature, container) { renderFooter(feature) {
if (feature.hasPopupFooter()) { if (feature.hasPopupFooter()) {
const template = ` const template = `
<ul class="umap-popup-footer dark"> <ul class="umap-popup-footer dark">
@ -71,21 +71,22 @@ class PopupTemplate {
}) })
} }
DomEvent.on(zoom, 'click', () => feature.zoomTo()) DomEvent.on(zoom, 'click', () => feature.zoomTo())
container.appendChild(footer) return footer
} }
} }
render(feature, container) { render(feature, container) {
const title = this.renderTitle(feature, container) const title = this.renderTitle(feature)
if (title) container.appendChild(title) if (title) container.appendChild(title)
const body = this.renderBody(feature, container) const body = this.renderBody(feature)
if (body) DomUtil.add('div', 'umap-popup-content', container, body) if (body) DomUtil.add('div', 'umap-popup-content', container, body)
this.renderFooter(feature, container) const footer = this.renderFooter(feature)
if (footer) container.appendChild(footer)
} }
} }
export const TitleMixin = (Base) => export const TitleMixin = (Base) =>
class extends Base { class extends Base {
renderTitle(feature, container) { renderTitle(feature) {
const title = feature.getDisplayName() const title = feature.getDisplayName()
if (title) { if (title) {
return Utils.loadTemplate(`<h3 class="popup-title">${title}</h3>`) return Utils.loadTemplate(`<h3 class="popup-title">${title}</h3>`)
@ -109,7 +110,7 @@ class Table extends TitleMixin(PopupTemplate) {
) )
} }
renderBody(feature, container) { renderBody(feature) {
const table = document.createElement('table') const table = document.createElement('table')
for (const key in feature.properties) { for (const key in feature.properties) {
@ -121,7 +122,7 @@ class Table extends TitleMixin(PopupTemplate) {
} }
class GeoRSSImage extends TitleMixin(PopupTemplate) { class GeoRSSImage extends TitleMixin(PopupTemplate) {
renderBody(feature, container) { renderBody(feature) {
const body = DomUtil.create('a') const body = DomUtil.create('a')
body.href = feature.properties.link body.href = feature.properties.link
body.target = '_blank' body.target = '_blank'
@ -138,7 +139,7 @@ class GeoRSSImage extends TitleMixin(PopupTemplate) {
} }
class GeoRSSLink extends PopupTemplate { class GeoRSSLink extends PopupTemplate {
renderBody(feature, container) { renderBody(feature) {
if (feature.properties.link) { if (feature.properties.link) {
return Utils.loadTemplate( return Utils.loadTemplate(
`<a href="${feature.properties.link}" target="_blank"><h3>${feature.getDisplayName()}</h3></a>` `<a href="${feature.properties.link}" target="_blank"><h3>${feature.getDisplayName()}</h3></a>`
@ -155,7 +156,7 @@ class OSM extends TitleMixin(PopupTemplate) {
return props.name return props.name
} }
renderBody(feature, container) { renderBody(feature) {
const props = feature.properties const props = feature.properties
const body = document.createElement('div') const body = document.createElement('div')
const title = DomUtil.add('h3', 'popup-title', container) const title = DomUtil.add('h3', 'popup-title', container)

View file

@ -386,9 +386,6 @@ export function toggleBadge(element, value) {
export function loadTemplate(html) { export function loadTemplate(html) {
const template = document.createElement('template') const template = document.createElement('template')
template.innerHTML = html template.innerHTML = html
.split('\n')
.map((line) => line.trim())
.join('')
return template.content.firstElementChild return template.content.firstElementChild
} }