diff options
author | Hsieh Chin Fan <pham@topo.tw> | 2024-10-01 16:31:39 +0800 |
---|---|---|
committer | Hsieh Chin Fan <pham@topo.tw> | 2024-10-01 20:07:06 +0800 |
commit | acad0593c6971a693078eeeb4fb15f278c427fa9 (patch) | |
tree | 11cff487265045c31d011170208cd9b366b26e5e /src/dumbymap.mjs | |
parent | 5c55ea01e1df826bf21f33c6ef067b0c7d60d4f8 (diff) |
fix: set menu position relative to click
need to calculate offset of parent element
Diffstat (limited to 'src/dumbymap.mjs')
-rw-r--r-- | src/dumbymap.mjs | 4 |
1 files changed, 3 insertions, 1 deletions
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index 2a6f332..cb528cd 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs | |||
@@ -462,12 +462,15 @@ export const generateMaps = (container, { delay, mapCallback }) => { | |||
462 | // Menu {{{ | 462 | // Menu {{{ |
463 | const menu = document.createElement('div'); | 463 | const menu = document.createElement('div'); |
464 | menu.className = 'menu'; | 464 | menu.className = 'menu'; |
465 | menu.style.display = 'none'; | ||
465 | menu.onclick = () => (menu.style.display = 'none'); | 466 | menu.onclick = () => (menu.style.display = 'none'); |
466 | container.appendChild(menu); | 467 | container.appendChild(menu); |
467 | 468 | ||
468 | // Menu Items | 469 | // Menu Items |
469 | container.oncontextmenu = e => { | 470 | container.oncontextmenu = e => { |
470 | menu.replaceChildren(); | 471 | menu.replaceChildren(); |
472 | menu.style.display = 'block'; | ||
473 | menu.style.cssText = `left: ${e.x - menu.offsetParent.offsetLeft + 10}px; top: ${e.y - menu.offsetParent.offsetTop + 5}px;`; | ||
471 | e.preventDefault(); | 474 | e.preventDefault(); |
472 | 475 | ||
473 | // GeoLinks | 476 | // GeoLinks |
@@ -476,7 +479,6 @@ export const generateMaps = (container, { delay, mapCallback }) => { | |||
476 | const range = selection.getRangeAt(0); | 479 | const range = selection.getRangeAt(0); |
477 | menu.appendChild(menuItem.addGeoLink(dumbymap, range)); | 480 | menu.appendChild(menuItem.addGeoLink(dumbymap, range)); |
478 | } | 481 | } |
479 | menu.style.cssText = `overflow: visible; display: block; left: ${e.clientX + 10}px; top: ${e.clientY + 5}px;`; | ||
480 | 482 | ||
481 | const map = e.target.closest('.mapclay'); | 483 | const map = e.target.closest('.mapclay'); |
482 | if (map?.renderer?.results) { | 484 | if (map?.renderer?.results) { |