aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorHsieh Chin Fan <pham@topo.tw>2024-09-14 19:28:46 +0800
committerHsieh Chin Fan <pham@topo.tw>2024-09-15 00:27:48 +0800
commit64f24ee5fb1a27b66de2575a8d4b31646776f54a (patch)
tree62e4b390504e8c4a391c00aa1f43af1272e6969c
parent901ad1a83ae08c259f75c69e5cc957a72e18f762 (diff)
feat: Switch layout by attribute
Diffstat
-rw-r--r--index.html2
-rw-r--r--src/css/dumbymap.css2
-rw-r--r--src/css/index.css50
-rw-r--r--src/editor.mjs32
4 files changed, 52 insertions, 34 deletions
diff --git a/index.html b/index.html
index 196458e..b6cd5e6 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
21 21
22</head> 22</head>
23 23
24<body> 24<body data-layout="editing">
25 <div class="DumbyMap"></div> 25 <div class="DumbyMap"></div>
26 <div class="editor"> 26 <div class="editor">
27 <textarea></textarea> 27 <textarea></textarea>
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index ba074a2..1dc7a09 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -106,7 +106,7 @@
106} 106}
107 107
108.DumbyMap[data-layout]:not([data-layout=none]) { 108.DumbyMap[data-layout]:not([data-layout=none]) {
109 margin: 0; 109 margin: 0 auto;
110 110
111 height: 100vh; 111 height: 100vh;
112 width: 100%; 112 width: 100%;
diff --git a/src/css/index.css b/src/css/index.css
index 9e75e93..17a8dd1 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -4,38 +4,50 @@
4} 4}
5 5
6body { 6body {
7 display: flex;
8 justify-items: stretch;
9 width: 100%; 7 width: 100%;
10} 8 height: 100vh;
9
10 &[data-layout=editing] {
11 display: flex;
12 align-items: stretch;
13 gap: 0.5em;
14
15 padding: 0.5em;
16
17 .DumbyMap {
18 order: 2;
19 flex: 1 0 calc(50% - 0.5em);
20 height: 100%;
21 overflow-y: scroll;
22 border: var(--content-border);
23 border-radius: var(--content-border-radius);
24 }
25 .editor {
26 display: block;
11 27
12.DumbyMap { 28 order: 1;
13 order: 2; 29 flex: 1 0 50%;
14 flex: 0 0 49%; 30 max-width: calc(50% - 0.5em);
15 height: calc(100vh - 15px); 31 height: 100%;
16 margin: 10px; 32 }
17 overflow-y: scroll; 33 }
18 border: var(--content-border);
19 border-radius: var(--content-border-radius);
20} 34}
21 35
22.editor { 36.editor {
23 order: 1; 37 display: none;
24 flex: 0 0 48%;
25 max-width: 50vw;
26 height: calc(100vh - 15px);
27 margin: 10px;
28} 38}
29 39
30.EasyMDEContainer { 40.EasyMDEContainer {
31 display: flex; 41 display: flex;
42 align-items: stretch;
43 gap: 0.5em;
44 height: 100%;
32 flex-direction: column; 45 flex-direction: column;
33 height: calc(100vh - 20px);
34 box-sizing: border-box; 46 box-sizing: border-box;
35 47
36 .CodeMirror { 48 .CodeMirror {
37 order: 1; 49 order: 1;
38 flex-grow: 1; 50 flex: 1 0 auto;
39 border: var(--content-border); 51 border: var(--content-border);
40 border-radius: var(--content-border-radius); 52 border-radius: var(--content-border-radius);
41 padding-inline: 0; 53 padding-inline: 0;
@@ -53,7 +65,7 @@ body {
53 65
54 .editor-toolbar { 66 .editor-toolbar {
55 order: 2; 67 order: 2;
56 margin-top: 0.5rem; 68 flex: 0 0 auto;
57 border-left: 1px solid #ced4da; 69 border-left: 1px solid #ced4da;
58 border-right: 1px solid #ced4da; 70 border-right: 1px solid #ced4da;
59 border-bottom: 1px solid #ced4da; 71 border-bottom: 1px solid #ced4da;
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'
9const HtmlContainer = document.querySelector(".DumbyMap") 9const HtmlContainer = document.querySelector(".DumbyMap")
10const textArea = document.querySelector(".editor textarea") 10const textArea = document.querySelector(".editor textarea")
11 11
12const toggleMaps = (container) => { 12const 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
88markdown2HTML(HtmlContainer, editor.value()) 86markdown2HTML(HtmlContainer, editor.value())
89createDocLinks(HtmlContainer) 87createDocLinks(HtmlContainer)
90 88
91if (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
96const addClassToCodeLines = () => { 90const 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
510document.onkeydown = (e) => { 504document.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// }}}
512const layoutObserver = new MutationObserver(() => {
513 const layout = HtmlContainer.getAttribute('data-layout')
514 if (layout !== 'none') {
515 document.body.removeAttribute('data-layout')
516 }
517})
518
519layoutObserver.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={{{,}}}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-07-03 22:31:58 +0800