feat: prevent menu show outside of window

4 files changed, 14 insertions, 3 deletions

diff --git a/src/MenuItem.mjs b/src/MenuItem.mjs
index e1cb582..a7724d3 100644
--- a/src/MenuItem.mjs
+++ b/src/MenuItem.mjs
@@ -1,3 +1,5 @@
+import { shiftByWindow } from './utils.mjs'
+
 class Item extends window.HTMLDivElement {
   constructor ({ text, innerHTML, onclick, style }) {
     super()
@@ -35,6 +37,7 @@ class Folder extends window.HTMLDivElement {
         .querySelectorAll('.sub-menu')
         .forEach(sub => sub.remove())
       this.appendChild(submenu)
+      shiftByWindow(submenu)
     }
   }
 }
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index 3294e40..b3ff877 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -267,7 +267,6 @@ p a[href^='http']::after,
   padding: 0.5rem;
 
   position: relative;
-  z-index: 9999;
 
   cursor: pointer;
   text-wrap: nowrap;
@@ -299,7 +298,7 @@ p a[href^='http']::after,
   max-height: 40vh;
 
   position: absolute;
-  z-index: 100;
+  z-index: 10000;
 
   border: 2px solid gray;
   border-radius: 6px;
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 0e12fb4..7e04501 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -5,7 +5,7 @@ import MarkdownItFrontMatter from 'markdown-it-front-matter'
 import MarkdownItTocDoneRight from 'markdown-it-toc-done-right'
 import LeaderLine from 'leader-line'
 import { renderWith, defaultAliases, parseConfigsFromYaml } from 'mapclay'
-import { onRemove, animateRectTransition, throttle } from './utils'
+import { onRemove, animateRectTransition, throttle, shiftByWindow } from './utils'
 import { Layout, SideBySide, Overlay } from './Layout'
 import * as utils from './dumbyUtils'
 import * as menuItem from './MenuItem'
@@ -498,6 +498,8 @@ export const generateMaps = (container, { delay, mapCallback }) => {
       menu.appendChild(menuItem.pickBlockItem(dumbymap))
       menu.appendChild(menuItem.pickLayoutItem(dumbymap))
     }
+
+    shiftByWindow(menu)
   }
 
   // Remove menu when click outside
diff --git a/src/utils.mjs b/src/utils.mjs
index d9ed2d7..c9a2457 100644
--- a/src/utils.mjs
+++ b/src/utils.mjs
@@ -87,3 +87,10 @@ export function throttle (func, delay) {
     return func.call(context, ...args)
   }
 }
+
+export const shiftByWindow = element => {
+  const rect = element.getBoundingClientRect()
+  const offsetX = window.innerWidth - rect.left - rect.width
+  const offsetY = window.innerHeight - rect.top - rect.height
+  element.style.transform = `translate(${offsetX < 0 ? offsetX : 0}px, ${offsetY < 0 ? offsetY : 0}px)`
+}