mirror of
https://github.com/umap-project/umap.git
synced 2025-04-29 11:52:38 +02:00
Merge pull request #2081 from umap-project/fix-white-space-panel
fix: white space was broken since using loadTemplate
This commit is contained in:
commit
061edd3198
3 changed files with 14 additions and 16 deletions
|
@ -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;
|
||||||
|
|
|
@ -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)
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue