From 27feb1302304eede3cdc58ffde5ce8e0f0019da4 Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Sun, 29 Sep 2024 21:01:03 +0800
Subject: feat: add submenu for map/block/layout switching

* Add general classes into MenuItem
* Use MutationObserver for data-mode
* Automatically unfocus other maps when one is focused

TODO:

* hover effect on submenu item doesn't work, why?
* shorcuts hint in selector ".folder.menu-item" not looks great
---
 src/editor.mjs | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

(limited to 'src/editor.mjs')

diff --git a/src/editor.mjs b/src/editor.mjs
index f965b56..9946686 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -10,13 +10,17 @@ const HtmlContainer = document.querySelector('.DumbyMap');
 const textArea = document.querySelector('.editor textarea');
 let dumbymap;
 
-const toggleEditing = () => {
+new MutationObserver(() => {
   if (document.body.getAttribute('data-mode') === 'editing') {
-    document.body.removeAttribute('data-mode');
-  } else {
-    document.body.setAttribute('data-mode', 'editing');
+    HtmlContainer.setAttribute('data-layout', 'normal');
   }
-  HtmlContainer.setAttribute('data-layout', 'normal');
+}).observe(document.body, {
+  attributes: true,
+  attributeFilter: ['data-mode'],
+});
+const toggleEditing = () => {
+  const mode = document.body.getAttribute('data-mode');
+  document.body.setAttribute('data-mode', mode === 'editing' ? '' : 'editing');
 };
 // }}}
 // Set up EasyMDE {{{
@@ -274,6 +278,15 @@ window.onhashchange = () => {
 const menu = document.createElement('div');
 menu.id = 'menu';
 menu.onclick = () => (menu.style.display = 'none');
+new MutationObserver(() => {
+  if (menu.style.display === 'none') {
+    menu.style.cssText = '';
+    menu.replaceChildren();
+  }
+}).observe(menu, {
+  attributes: true,
+  attributeFilter: ['style'],
+});
 document.body.append(menu);
 
 const rendererOptions = {};
@@ -657,13 +670,13 @@ document.oncontextmenu = e => {
   if (selection) {
     e.preventDefault();
     menu.innerHTML = '';
-    menu.style.cssText = `display: block; left: ${e.clientX + 10}px; top: ${e.clientY + 5}px;`;
     const addGeoLink = new menuItem.GeoLink({ range });
     menu.appendChild(addGeoLink.createElement());
   }
-  menu.appendChild(menuItem.nextMap.bind(dumbymap)());
-  menu.appendChild(menuItem.nextBlock.bind(dumbymap)());
-  menu.appendChild(menuItem.nextLayout.bind(dumbymap)());
+  menu.style.cssText = `overflow: visible; display: block; left: ${e.clientX + 10}px; top: ${e.clientY + 5}px;`;
+  menu.appendChild(menuItem.pickMapItem(dumbymap));
+  menu.appendChild(menuItem.pickBlockItem(dumbymap));
+  menu.appendChild(menuItem.pickLayoutItem(dumbymap));
 };
 
 const actionOutsideMenu = e => {
-- 
cgit v1.2.3-70-g09d2