From 5bbbf6a98870655cd2250b28ad668037d9b77f2f Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Thu, 29 Aug 2024 12:21:51 +0200
Subject: [PATCH] fix: white space was broken since using loadTemplate

Since a2ca3a143615fde971a5f908afae02b0487d62a4, the panel/popup
template uses loadTemplate, which used to remove all white spaces
from the inner html. We had to do this to workaround white space
breaking the slideshow toolbox buttons.

So this commits fixes this problem in another way: do not remove
white space (usefull for text content in popup/panels), but use
a display: flex instead of inline-block.
---
 umap/static/umap/css/slideshow.css            |  2 +-
 .../umap/js/modules/rendering/template.js     | 25 ++++++++++---------
 umap/static/umap/js/modules/utils.js          |  3 ---
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/umap/static/umap/css/slideshow.css b/umap/static/umap/css/slideshow.css
index c5084ccd..7d7e856c 100644
--- a/umap/static/umap/css/slideshow.css
+++ b/umap/static/umap/css/slideshow.css
@@ -5,7 +5,7 @@
     display: none;
 }
 .umap-slideshow-enabled .umap-slideshow-toolbox {
-    display: inline-block;
+    display: flex;
 }
 .umap-slideshow-toolbox li {
     display: inline-block;
diff --git a/umap/static/umap/js/modules/rendering/template.js b/umap/static/umap/js/modules/rendering/template.js
index e972d662..19090b38 100644
--- a/umap/static/umap/js/modules/rendering/template.js
+++ b/umap/static/umap/js/modules/rendering/template.js
@@ -24,9 +24,9 @@ export default function loadTemplate(name, feature, container) {
 }
 
 class PopupTemplate {
-  renderTitle(feature, container) {}
+  renderTitle(feature) {}
 
-  renderBody(feature, container) {
+  renderBody(feature) {
     const template = feature.getOption('popupContentTemplate')
     const target = feature.getOption('outlinkTarget')
     const properties = feature.extendedProperties()
@@ -40,7 +40,7 @@ class PopupTemplate {
     return Utils.loadTemplate(`<div class="umap-popup-container text">${content}</div>`)
   }
 
-  renderFooter(feature, container) {
+  renderFooter(feature) {
     if (feature.hasPopupFooter()) {
       const template = `
       <ul class="umap-popup-footer dark">
@@ -71,21 +71,22 @@ class PopupTemplate {
         })
       }
       DomEvent.on(zoom, 'click', () => feature.zoomTo())
-      container.appendChild(footer)
+      return footer
     }
   }
 
   render(feature, container) {
-    const title = this.renderTitle(feature, container)
+    const title = this.renderTitle(feature)
     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)
-    this.renderFooter(feature, container)
+    const footer = this.renderFooter(feature)
+    if (footer) container.appendChild(footer)
   }
 }
 export const TitleMixin = (Base) =>
   class extends Base {
-    renderTitle(feature, container) {
+    renderTitle(feature) {
       const title = feature.getDisplayName()
       if (title) {
         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')
 
     for (const key in feature.properties) {
@@ -121,7 +122,7 @@ class Table extends TitleMixin(PopupTemplate) {
 }
 
 class GeoRSSImage extends TitleMixin(PopupTemplate) {
-  renderBody(feature, container) {
+  renderBody(feature) {
     const body = DomUtil.create('a')
     body.href = feature.properties.link
     body.target = '_blank'
@@ -138,7 +139,7 @@ class GeoRSSImage extends TitleMixin(PopupTemplate) {
 }
 
 class GeoRSSLink extends PopupTemplate {
-  renderBody(feature, container) {
+  renderBody(feature) {
     if (feature.properties.link) {
       return Utils.loadTemplate(
         `<a href="${feature.properties.link}" target="_blank"><h3>${feature.getDisplayName()}</h3></a>`
@@ -155,7 +156,7 @@ class OSM extends TitleMixin(PopupTemplate) {
     return props.name
   }
 
-  renderBody(feature, container) {
+  renderBody(feature) {
     const props = feature.properties
     const body = document.createElement('div')
     const title = DomUtil.add('h3', 'popup-title', container)
diff --git a/umap/static/umap/js/modules/utils.js b/umap/static/umap/js/modules/utils.js
index 1f4640a0..c159e0fd 100644
--- a/umap/static/umap/js/modules/utils.js
+++ b/umap/static/umap/js/modules/utils.js
@@ -386,9 +386,6 @@ export function toggleBadge(element, value) {
 export function loadTemplate(html) {
   const template = document.createElement('template')
   template.innerHTML = html
-    .split('\n')
-    .map((line) => line.trim())
-    .join('')
   return template.content.firstElementChild
 }