diff options
Diffstat (limited to 'src/editor.mjs')
-rw-r--r-- | src/editor.mjs | 31 |
1 files changed, 22 insertions, 9 deletions
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'); | |||
10 | const textArea = document.querySelector('.editor textarea'); | 10 | const textArea = document.querySelector('.editor textarea'); |
11 | let dumbymap; | 11 | let dumbymap; |
12 | 12 | ||
13 | const toggleEditing = () => { | 13 | new MutationObserver(() => { |
14 | if (document.body.getAttribute('data-mode') === 'editing') { | 14 | if (document.body.getAttribute('data-mode') === 'editing') { |
15 | document.body.removeAttribute('data-mode'); | 15 | HtmlContainer.setAttribute('data-layout', 'normal'); |
16 | } else { | ||
17 | document.body.setAttribute('data-mode', 'editing'); | ||
18 | } | 16 | } |
19 | HtmlContainer.setAttribute('data-layout', 'normal'); | 17 | }).observe(document.body, { |
18 | attributes: true, | ||
19 | attributeFilter: ['data-mode'], | ||
20 | }); | ||
21 | const toggleEditing = () => { | ||
22 | const mode = document.body.getAttribute('data-mode'); | ||
23 | document.body.setAttribute('data-mode', mode === 'editing' ? '' : 'editing'); | ||
20 | }; | 24 | }; |
21 | // }}} | 25 | // }}} |
22 | // Set up EasyMDE {{{ | 26 | // Set up EasyMDE {{{ |
@@ -274,6 +278,15 @@ window.onhashchange = () => { | |||
274 | const menu = document.createElement('div'); | 278 | const menu = document.createElement('div'); |
275 | menu.id = 'menu'; | 279 | menu.id = 'menu'; |
276 | menu.onclick = () => (menu.style.display = 'none'); | 280 | menu.onclick = () => (menu.style.display = 'none'); |
281 | new MutationObserver(() => { | ||
282 | if (menu.style.display === 'none') { | ||
283 | menu.style.cssText = ''; | ||
284 | menu.replaceChildren(); | ||
285 | } | ||
286 | }).observe(menu, { | ||
287 | attributes: true, | ||
288 | attributeFilter: ['style'], | ||
289 | }); | ||
277 | document.body.append(menu); | 290 | document.body.append(menu); |
278 | 291 | ||
279 | const rendererOptions = {}; | 292 | const rendererOptions = {}; |
@@ -657,13 +670,13 @@ document.oncontextmenu = e => { | |||
657 | if (selection) { | 670 | if (selection) { |
658 | e.preventDefault(); | 671 | e.preventDefault(); |
659 | menu.innerHTML = ''; | 672 | menu.innerHTML = ''; |
660 | menu.style.cssText = `display: block; left: ${e.clientX + 10}px; top: ${e.clientY + 5}px;`; | ||
661 | const addGeoLink = new menuItem.GeoLink({ range }); | 673 | const addGeoLink = new menuItem.GeoLink({ range }); |
662 | menu.appendChild(addGeoLink.createElement()); | 674 | menu.appendChild(addGeoLink.createElement()); |
663 | } | 675 | } |
664 | menu.appendChild(menuItem.nextMap.bind(dumbymap)()); | 676 | menu.style.cssText = `overflow: visible; display: block; left: ${e.clientX + 10}px; top: ${e.clientY + 5}px;`; |
665 | menu.appendChild(menuItem.nextBlock.bind(dumbymap)()); | 677 | menu.appendChild(menuItem.pickMapItem(dumbymap)); |
666 | menu.appendChild(menuItem.nextLayout.bind(dumbymap)()); | 678 | menu.appendChild(menuItem.pickBlockItem(dumbymap)); |
679 | menu.appendChild(menuItem.pickLayoutItem(dumbymap)); | ||
667 | }; | 680 | }; |
668 | 681 | ||
669 | const actionOutsideMenu = e => { | 682 | const actionOutsideMenu = e => { |