From 3998a88d43c1bb22bb3e5c42fb5c6dab33115ac6 Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Thu, 6 Jun 2024 10:18:44 +0200
Subject: [PATCH] wip: use dt/dd for import formats help box

---
 umap/static/umap/base.css               |  3 +++
 umap/static/umap/js/modules/help.js     | 36 ++++++++++++++++---------
 umap/static/umap/js/modules/importer.js | 10 ++++---
 umap/static/umap/js/modules/utils.js    |  2 ++
 4 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
index a79943b2..a8991951 100644
--- a/umap/static/umap/base.css
+++ b/umap/static/umap/base.css
@@ -69,6 +69,9 @@ ul {
     list-style-position:inside;
     list-style-type:none;
 }
+dt {
+    font-weight: bold;
+}
 
 /* ************************************************* */
 /* *********************** GRID ******************** */
diff --git a/umap/static/umap/js/modules/help.js b/umap/static/umap/js/modules/help.js
index da2bbe42..682bb013 100644
--- a/umap/static/umap/js/modules/help.js
+++ b/umap/static/umap/js/modules/help.js
@@ -100,30 +100,33 @@ const ENTRIES = {
   browsable: translate(
     'Set it to false to hide this layer from the slideshow, the data browser, the popup navigation…'
   ),
+  importMode: translate(
+    'When providing an URL, uMap can copy the remote data in a layer, or add this URL as remote source of the layer. In that case, data will always be fetched from that URL, and thus be up to date, but it will not be possible to edit it inside uMap.'
+  ),
   importFormats: `
   <div>
-    <h3>GeoJSON</h3>
-    <p>${translate('All properties are imported.')}</p>
-    <h3>GPX</h3>
-    <p>${translate('Properties imported:')}name, desc</p>
-    <h3>KML</h3>
-    <p>${translate('Properties imported:')}name, description</p>
-    <h3>CSV</h3>
-    <p>${translate('Comma, tab or semi-colon separated values. SRS WGS84 is implied. Only Point geometries are imported. The import will look at the column headers for any mention of «lat» and «lon» at the begining of the header, case insensitive. All other column are imported as properties.')}</p>
-    <h3>uMap</h3>
-    <p>${translate('Imports all umap data, including layers and settings.')}</p>
+    <dt>GeoJSON</dt>
+    <dd>${translate('All properties are imported.')}</dd>
+    <dt>GPX</dt>
+    <dd>${translate('Properties imported:')}name, desc</dd>
+    <dt>KML</dt>
+    <dd>${translate('Properties imported:')}name, description</dd>
+    <dt>CSV</dt>
+    <dd>${translate('Comma, tab or semi-colon separated values. SRS WGS84 is implied. Only Point geometries are imported. The import will look at the column headers for any mention of «lat» and «lon» at the begining of the header, case insensitive. All other column are imported as properties.')}</dd>
+    <dt>uMap</dt>
+    <dd>${translate('Imports all umap data, including layers and settings.')}</dd>
   </div>
   `,
   dynamicProperties: `
   <div>
-    <h3>${translate('Dynamic properties')}</h3>
+    <h4>${translate('Dynamic properties')}</h4>
     <p>${translate('Use placeholders with feature properties between brackets, eg. &#123;name&#125;, they will be dynamically replaced by the corresponding values.')}</p>
   </div>
   `,
 
   textFormatting: `
   <div>
-    <h3>${translate('Text formatting')}</h3>
+    <h4>${translate('Text formatting')}</h4>
     <ul>
       <li>${translate('*single star for italic*')}</li>
       <li>${translate('**double star for bold**')}</li>
@@ -170,6 +173,7 @@ export default class Help {
 
   show(entries) {
     const container = DomUtil.add('div')
+    DomUtil.createTitle(container, translate('Help'))
     // Special dynamic case. Do we still think this dialog is usefull ?
     if (entries == 'edit') {
       DomUtil.element({
@@ -209,9 +213,15 @@ export default class Help {
     return button
   }
 
+  parse(container) {
+    for (const element of container.querySelectorAll('[data-help]')) {
+      this.button(element, element.dataset.help.split(','))
+    }
+  }
+
   _buildEditEntry() {
     const container = DomUtil.create('div', '')
-    const title = DomUtil.create('h3', '', container)
+    const title = DomUtil.create('h4', '', container)
     const actionsContainer = DomUtil.create('ul', 'umap-edit-actions', container)
     const addAction = (action) => {
       const actionContainer = DomUtil.add('li', '', actionsContainer)
diff --git a/umap/static/umap/js/modules/importer.js b/umap/static/umap/js/modules/importer.js
index 479dce3b..22317817 100644
--- a/umap/static/umap/js/modules/importer.js
+++ b/umap/static/umap/js/modules/importer.js
@@ -18,7 +18,7 @@ const TEMPLATE = `
       </div>
     </fieldset>
     <fieldset class="formbox">
-      <legend class="counter">${translate('Choose the data format')}</legend>
+      <legend class="counter" data-help="importFormats">${translate('Choose the data format')}</legend>
       <select name="format" onchange></select>
     </fieldset>
     <fieldset class="destination formbox">
@@ -30,7 +30,7 @@ const TEMPLATE = `
       </label>
     </fieldset>
     <fieldset class="import-mode formbox">
-      <legend class="counter">${translate('Choose import mode')}</legend>
+      <legend class="counter" data-help="importMode">${translate('Choose import mode')}</legend>
       <label>
         <input type="radio" name="action" value="copy" />
         ${translate('Copy into the layer')}
@@ -125,6 +125,7 @@ export default class Importer {
         textContent: type,
       })
     }
+    this.map.help.parse(this.container)
     DomEvent.on(this.qs('[name=submit]'), 'click', this.submit, this)
     DomEvent.on(this.qs('[type=file]'), 'change', this.onFileChange, this)
     for (const element of this.container.querySelectorAll('[onchange]')) {
@@ -134,7 +135,10 @@ export default class Importer {
 
   onChange() {
     this.qs('.destination').toggleAttribute('hidden', this.format === 'umap')
-    this.qs('.import-mode').toggleAttribute('hidden', this.format === 'umap' || !this.url)
+    this.qs('.import-mode').toggleAttribute(
+      'hidden',
+      this.format === 'umap' || !this.url
+    )
   }
 
   onFileChange(e) {
diff --git a/umap/static/umap/js/modules/utils.js b/umap/static/umap/js/modules/utils.js
index 72fb620e..ef27a685 100644
--- a/umap/static/umap/js/modules/utils.js
+++ b/umap/static/umap/js/modules/utils.js
@@ -90,6 +90,8 @@ export function escapeHTML(s) {
       'source',
       'br',
       'span',
+      'dt',
+      'dd',
     ],
     ADD_ATTR: [
       'target',