diff options
Diffstat (limited to 'src/editor.mjs')
-rw-r--r-- | src/editor.mjs | 32 |
1 files changed, 19 insertions, 13 deletions
diff --git a/src/editor.mjs b/src/editor.mjs index 915ce24..b88e488 100644 --- a/src/editor.mjs +++ b/src/editor.mjs | |||
@@ -9,15 +9,13 @@ import { createDocLinks } from './dumbymap.mjs' | |||
9 | const HtmlContainer = document.querySelector(".DumbyMap") | 9 | const HtmlContainer = document.querySelector(".DumbyMap") |
10 | const textArea = document.querySelector(".editor textarea") | 10 | const textArea = document.querySelector(".editor textarea") |
11 | 11 | ||
12 | const toggleMaps = (container) => { | 12 | const toggleEditing = () => { |
13 | if (!container.querySelector('.Showcase')) { | 13 | if (document.body.getAttribute("data-layout") === "editing") { |
14 | generateMaps(container) | 14 | document.body.removeAttribute("data-layout") |
15 | document.activeElement.blur(); | ||
16 | } else { | 15 | } else { |
17 | markdown2HTML(HtmlContainer, editor.value()) | 16 | document.body.setAttribute("data-layout", "editing") |
18 | createDocLinks(container) | ||
19 | container.setAttribute('data-layout', 'none') | ||
20 | } | 17 | } |
18 | HtmlContainer.setAttribute("data-layout", "none") | ||
21 | } | 19 | } |
22 | // }}} | 20 | // }}} |
23 | // Set up EasyMDE {{{ | 21 | // Set up EasyMDE {{{ |
@@ -66,7 +64,7 @@ const editor = new EasyMDE({ | |||
66 | name: 'map', | 64 | name: 'map', |
67 | title: 'Toggle Map Generation', | 65 | title: 'Toggle Map Generation', |
68 | text: "🌏", | 66 | text: "🌏", |
69 | action: () => toggleMaps(HtmlContainer), | 67 | action: () => toggleEditing(), |
70 | }, | 68 | }, |
71 | { | 69 | { |
72 | name: 'debug', | 70 | name: 'debug', |
@@ -88,10 +86,6 @@ const cm = editor.codemirror | |||
88 | markdown2HTML(HtmlContainer, editor.value()) | 86 | markdown2HTML(HtmlContainer, editor.value()) |
89 | createDocLinks(HtmlContainer) | 87 | createDocLinks(HtmlContainer) |
90 | 88 | ||
91 | if (queryParams.get('render')) { | ||
92 | toggleMaps(HtmlContainer) | ||
93 | } | ||
94 | |||
95 | // Quick hack to style lines inside code block | 89 | // Quick hack to style lines inside code block |
96 | const addClassToCodeLines = () => { | 90 | const addClassToCodeLines = () => { |
97 | const lines = cm.getLineHandle(0).parent.lines | 91 | const lines = cm.getLineHandle(0).parent.lines |
@@ -509,11 +503,23 @@ cm.on('keydown', (_, e) => { | |||
509 | 503 | ||
510 | document.onkeydown = (e) => { | 504 | document.onkeydown = (e) => { |
511 | if (e.altKey && e.ctrlKey && e.key === 'm') { | 505 | if (e.altKey && e.ctrlKey && e.key === 'm') { |
512 | toggleMaps(HtmlContainer) | 506 | toggleEditing() |
513 | } | 507 | } |
514 | } | 508 | } |
515 | 509 | ||
516 | // }}} | 510 | // }}} |
517 | // }}} | 511 | // }}} |
512 | const layoutObserver = new MutationObserver(() => { | ||
513 | const layout = HtmlContainer.getAttribute('data-layout') | ||
514 | if (layout !== 'none') { | ||
515 | document.body.removeAttribute('data-layout') | ||
516 | } | ||
517 | }) | ||
518 | |||
519 | layoutObserver.observe(HtmlContainer, { | ||
520 | attributes: true, | ||
521 | attributeFilter: ["data-layout"], | ||
522 | attributeOldValue: true | ||
523 | }); | ||
518 | 524 | ||
519 | // vim: sw=2 ts=2 foldmethod=marker foldmarker={{{,}}} | 525 | // vim: sw=2 ts=2 foldmethod=marker foldmarker={{{,}}} |