From 64f24ee5fb1a27b66de2575a8d4b31646776f54a Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Sat, 14 Sep 2024 19:28:46 +0800
Subject: feat: Switch layout by attribute

---
 src/css/dumbymap.css |  2 +-
 src/css/index.css    | 50 +++++++++++++++++++++++++++++++-------------------
 src/editor.mjs       | 32 +++++++++++++++++++-------------
 3 files changed, 51 insertions(+), 33 deletions(-)

(limited to 'src')

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 @@
 }
 
 .DumbyMap[data-layout]:not([data-layout=none]) {
-  margin: 0;
+  margin: 0 auto;
 
   height: 100vh;
   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 @@
 }
 
 body {
-  display: flex;
-  justify-items: stretch;
   width: 100%;
-}
+  height: 100vh;
+
+  &[data-layout=editing] {
+    display: flex;
+    align-items: stretch;
+    gap: 0.5em;
+
+    padding: 0.5em;
+
+    .DumbyMap {
+      order: 2;
+      flex: 1 0 calc(50% - 0.5em);
+      height: 100%;
+      overflow-y: scroll;
+      border: var(--content-border);
+      border-radius: var(--content-border-radius);
+    }
+    .editor {
+      display: block;
 
-.DumbyMap {
-  order: 2;
-  flex: 0 0 49%;
-  height: calc(100vh - 15px);
-  margin: 10px;
-  overflow-y: scroll;
-  border: var(--content-border);
-  border-radius: var(--content-border-radius);
+      order: 1;
+      flex: 1 0 50%;
+      max-width: calc(50% - 0.5em);
+      height: 100%;
+    }
+  }
 }
 
 .editor {
-  order: 1;
-  flex: 0 0 48%;
-  max-width: 50vw;
-  height: calc(100vh - 15px);
-  margin: 10px;
+  display: none;
 }
 
 .EasyMDEContainer {
   display: flex;
+  align-items: stretch;
+  gap: 0.5em;
+  height: 100%;
   flex-direction: column;
-  height: calc(100vh - 20px);
   box-sizing: border-box;
 
   .CodeMirror {
     order: 1;
-    flex-grow: 1;
+    flex: 1 0 auto;
     border: var(--content-border);
     border-radius: var(--content-border-radius);
     padding-inline: 0;
@@ -53,7 +65,7 @@ body {
 
   .editor-toolbar {
     order: 2;
-    margin-top: 0.5rem;
+    flex: 0 0 auto;
     border-left: 1px solid #ced4da;
     border-right: 1px solid #ced4da;
     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'
 const HtmlContainer = document.querySelector(".DumbyMap")
 const textArea = document.querySelector(".editor textarea")
 
-const toggleMaps = (container) => {
-  if (!container.querySelector('.Showcase')) {
-    generateMaps(container)
-    document.activeElement.blur();
+const toggleEditing = () => {
+  if (document.body.getAttribute("data-layout") === "editing") {
+    document.body.removeAttribute("data-layout")
   } else {
-    markdown2HTML(HtmlContainer, editor.value())
-    createDocLinks(container)
-    container.setAttribute('data-layout', 'none')
+    document.body.setAttribute("data-layout", "editing")
   }
+  HtmlContainer.setAttribute("data-layout", "none")
 }
 // }}}
 // Set up EasyMDE {{{
@@ -66,7 +64,7 @@ const editor = new EasyMDE({
       name: 'map',
       title: 'Toggle Map Generation',
       text: "🌏",
-      action: () => toggleMaps(HtmlContainer),
+      action: () => toggleEditing(),
     },
     {
       name: 'debug',
@@ -88,10 +86,6 @@ const cm = editor.codemirror
 markdown2HTML(HtmlContainer, editor.value())
 createDocLinks(HtmlContainer)
 
-if (queryParams.get('render')) {
-  toggleMaps(HtmlContainer)
-}
-
 // Quick hack to style lines inside code block
 const addClassToCodeLines = () => {
   const lines = cm.getLineHandle(0).parent.lines
@@ -509,11 +503,23 @@ cm.on('keydown', (_, e) => {
 
 document.onkeydown = (e) => {
   if (e.altKey && e.ctrlKey && e.key === 'm') {
-    toggleMaps(HtmlContainer)
+    toggleEditing()
   }
 }
 
 // }}}
 // }}}
+const layoutObserver = new MutationObserver(() => {
+  const layout = HtmlContainer.getAttribute('data-layout')
+  if (layout !== 'none') {
+    document.body.removeAttribute('data-layout')
+  }
+})
+
+layoutObserver.observe(HtmlContainer, {
+  attributes: true,
+  attributeFilter: ["data-layout"],
+  attributeOldValue: true
+});
 
 // vim: sw=2 ts=2 foldmethod=marker foldmarker={{{,}}}
-- 
cgit v1.2.3-70-g09d2