From 36afe0ead538419665ce22e326ba7ba6675ce69a Mon Sep 17 00:00:00 2001
From: Yohan Boniface <yohanboniface@free.fr>
Date: Mon, 7 Oct 2024 11:45:05 +0200
Subject: [PATCH] chore: open dropdown on download click in browser

Instead of switching context and opening the share panel.
---
 umap/static/umap/js/modules/browser.js        | 16 +++++++++++++++-
 umap/static/umap/js/modules/ui/contextmenu.js |  5 +++++
 umap/static/umap/js/umap.controls.js          |  4 +---
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/umap/static/umap/js/modules/browser.js b/umap/static/umap/js/modules/browser.js
index 38946dff..7699226b 100644
--- a/umap/static/umap/js/modules/browser.js
+++ b/umap/static/umap/js/modules/browser.js
@@ -2,6 +2,8 @@ import { DomEvent, DomUtil, stamp } from '../../vendors/leaflet/leaflet-src.esm.
 import { translate } from './i18n.js'
 import * as Icon from './rendering/icon.js'
 import * as Utils from './utils.js'
+import { EXPORT_FORMATS } from './formatter.js'
+import ContextMenu from './ui/contextmenu.js'
 
 export default class Browser {
   constructor(map) {
@@ -228,7 +230,19 @@ export default class Browser {
     container.appendChild(toolbox)
     toggle.addEventListener('click', () => this.toggleLayers())
     fitBounds.addEventListener('click', () => this.map.fitDataBounds())
-    download.addEventListener('click', () => this.map.share.open())
+    download.addEventListener('click', () => this.downloadVisible(download))
+  }
+
+  downloadVisible(element) {
+    const menu = new ContextMenu({ fixed: true })
+    const items = []
+    for (const format of Object.keys(EXPORT_FORMATS)) {
+      items.push({
+        label: format,
+        action: () => this.map.share.download(format),
+      })
+    }
+    menu.openBelow(element, items)
   }
 
   toggleLayers() {
diff --git a/umap/static/umap/js/modules/ui/contextmenu.js b/umap/static/umap/js/modules/ui/contextmenu.js
index 8d2603b5..dafb605b 100644
--- a/umap/static/umap/js/modules/ui/contextmenu.js
+++ b/umap/static/umap/js/modules/ui/contextmenu.js
@@ -21,6 +21,11 @@ export default class ContextMenu extends Positioned {
     this.openAt([left, top], items)
   }
 
+  openBelow(element, items) {
+    const coords = this.getPosition(element)
+    this.openAt([coords.left, coords.bottom], items)
+  }
+
   openAt([left, top], items) {
     this.container.innerHTML = ''
     for (const item of items) {
diff --git a/umap/static/umap/js/umap.controls.js b/umap/static/umap/js/umap.controls.js
index 815ee1dc..0246664b 100644
--- a/umap/static/umap/js/umap.controls.js
+++ b/umap/static/umap/js/umap.controls.js
@@ -661,9 +661,7 @@ const ControlsMixin = {
         })
       }
       button.addEventListener('click', () => {
-        const x = button.offsetLeft
-        const y = button.offsetTop + button.offsetHeight
-        menu.openAt([x, y], actions)
+        menu.openBelow(button, actions)
       })
     }
     this.help.getStartedLink(rightContainer)