Merge pull request #1958 from umap-project/broken-help

fix: main help button from edit toolbar was broken

umap/static/umap/js/modules/help.js

@@ -191,14 +191,6 @@ 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({
-        tagName: 'div',
-        className: 'umap-help-entry',
-        parent: container,
-      }).appendChild(this._buildEditEntry())
-    } else {
     for (const name of entries) {
       DomUtil.element({
         tagName: 'div',
@@ -207,26 +199,35 @@ export default class Help {
         innerHTML: ENTRIES[name],
       })
     }
-    }
     this.dialog.open({ template: container, className: 'dark', cancel: false, accept: false })
   }
 
-  button(container, entries, classname) {
+  // Special dynamic case. Do we still think this dialog is useful?
+  showGetStarted() {
+    const container = DomUtil.add('div')
+    DomUtil.createTitle(container, translate('Where do we go from here?'))
+    DomUtil.element({
+      tagName: 'div',
+      className: 'umap-help-entry',
+      parent: container,
+    }).appendChild(this._buildEditEntry())
+    this.map.dialog.open({ content: container, className: 'dark' })
+  }
+
+  button(container, entries) {
     const button = DomUtil.createButton(
-      classname || 'umap-help-button',
+      'umap-help-button',
       container,
       translate('Help')
     )
-    entries = typeof entries === 'string' ? [entries] : entries
+    button.addEventListener('click', () => this.show(entries))
-    DomEvent.on(button, 'click', DomEvent.stop).on(button, 'click', () =>
-      this.show(entries)
-    )
     return button
   }
 
-  link(container, entries) {
+  getStartedLink(container) {
-    const button = this.button(container, entries, 'umap-help-link')
+    const button = DomUtil.createButton('umap-help-link', container, translate('Help'))
     button.textContent = translate('Help')
+    button.addEventListener('click', () => this.showGetStarted())
     return button
   }
 
@@ -238,7 +239,6 @@ export default class Help {
 
   _buildEditEntry() {
     const container = DomUtil.create('div', '')
-    const title = DomUtil.create('h4', '', container)
     const actionsContainer = DomUtil.create('ul', 'umap-edit-actions', container)
     const addAction = (action) => {
       const actionContainer = DomUtil.add('li', '', actionsContainer)
@@ -247,7 +247,6 @@ export default class Help {
       DomEvent.on(actionContainer, 'click', action.addHooks, action)
       DomEvent.on(actionContainer, 'click', this.dialog.close, this.dialog)
     }
-    title.textContent = translate('Where do we go from here?')
     for (const id in this.map.helpMenuActions) {
       addAction(this.map.helpMenuActions[id])
     }

umap/static/umap/js/modules/schema.js

@@ -49,7 +49,7 @@ export const SCHEMA = {
     impacts: ['data'],
     handler: 'ColorPicker',
     label: translate('color'),
-    helpEntries: 'colorValue',
+    helpEntries: ['colorValue'],
     inheritable: true,
     default: 'DarkBlue',
   },
@@ -69,7 +69,7 @@ export const SCHEMA = {
     type: String,
     impacts: ['data'],
     label: translate('dash array'),
-    helpEntries: 'dashArray',
+    helpEntries: ['dashArray'],
     inheritable: true,
   },
   datalayersControl: {
@@ -96,7 +96,7 @@ export const SCHEMA = {
     type: 'Text',
     impacts: ['ui'],
     label: translate('description'),
-    helpEntries: 'textFormatting',
+    helpEntries: ['textFormatting'],
   },
   displayOnLoad: {
     type: Boolean,
@@ -135,7 +135,7 @@ export const SCHEMA = {
     type: Boolean,
     impacts: ['data'],
     label: translate('fill'),
-    helpEntries: 'fill',
+    helpEntries: ['fill'],
     inheritable: true,
     default: true,
   },
@@ -144,7 +144,7 @@ export const SCHEMA = {
     impacts: ['data'],
     handler: 'ColorPicker',
     label: translate('fill color'),
-    helpEntries: 'fillColor',
+    helpEntries: ['fillColor'],
     inheritable: true,
   },
   fillOpacity: {
@@ -220,7 +220,7 @@ export const SCHEMA = {
     type: Boolean,
     impacts: ['data'],
     label: translate('Allow interactions'),
-    helpEntries: 'interactive',
+    helpEntries: ['interactive'],
     inheritable: true,
     default: true,
   },
@@ -247,7 +247,7 @@ export const SCHEMA = {
   labelKey: {
     type: String,
     impacts: ['data'],
-    helpEntries: 'labelKey',
+    helpEntries: ['labelKey'],
     placeholder: translate('Default: name'),
     label: translate('Label key'),
     inheritable: true,
@@ -323,7 +323,7 @@ export const SCHEMA = {
     type: String,
     impacts: [],
     label: translate('Link to…'),
-    helpEntries: 'outlink',
+    helpEntries: ['outlink'],
     placeholder: 'http://...',
     inheritable: true,
   },
@@ -445,7 +445,7 @@ export const SCHEMA = {
     max: 10,
     step: 0.5,
     label: translate('Simplify'),
-    helpEntries: 'smoothFactor',
+    helpEntries: ['smoothFactor'],
     inheritable: true,
     default: 1.0,
   },
@@ -463,7 +463,7 @@ export const SCHEMA = {
     type: Boolean,
     impacts: ['data'],
     label: translate('stroke'),
-    helpEntries: 'stroke',
+    helpEntries: ['stroke'],
     inheritable: true,
     default: true,
   },
@@ -471,7 +471,7 @@ export const SCHEMA = {
     type: Boolean,
     impacts: ['sync', 'ui'],
     label: translate('Enable real-time collaboration'),
-    helpEntries: 'sync',
+    helpEntries: ['sync'],
     default: false,
   },
   tilelayer: {
@@ -530,7 +530,7 @@ export const SCHEMA = {
     type: Number,
     impacts: [], // not need to update the view
     placeholder: translate('Inherit'),
-    helpEntries: 'zoomTo',
+    helpEntries: ['zoomTo'],
     label: translate('Default zoom level'),
     inheritable: true,
   },

umap/static/umap/js/umap.controls.js

@@ -751,7 +751,7 @@ const ControlsMixin = {
         this.options.user.url
       )
     }
-    this.help.link(rightContainer, 'edit')
+    this.help.getStartedLink(rightContainer)
     const controlEditCancel = L.DomUtil.createButton(
       'leaflet-control-edit-cancel',
       rightContainer,