From 2f4f688cbf8fb596405cbd7d2c89765d0d54106d Mon Sep 17 00:00:00 2001
From: Hsieh Chin Fan <pham@topo.tw>
Date: Fri, 11 Oct 2024 20:40:04 +0800
Subject: feat: add query param for layout

---
 src/dumbymap.mjs | 14 +++++++++++++-
 src/editor.mjs   | 35 +++++++++++++++++++----------------
 2 files changed, 32 insertions(+), 17 deletions(-)

(limited to 'src')

diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index f4e3d83..e5dd2cd 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -348,16 +348,20 @@ export const generateMaps = (container, {
     const mapElement = renderer.target
     // FIXME
     mapElement.renderer = renderer
+    // Make map not focusable by tab key
     mapElement.tabindex = -1
+
+    // Cache if render is fulfilled
     if (mapElement.dataset.render === 'fulfilled') {
       mapCache[mapElement.id] = renderer
     } else {
       return
     }
 
+    // Simple callback by caller
     renderCallback?.(renderer)
 
-    // Work with Mutation Observer
+    // Watch change of class
     const observer = mapClassObserver()
     observer.observe(mapElement, {
       attributes: true,
@@ -367,6 +371,14 @@ export const generateMaps = (container, {
     onRemove(dumbymap.htmlHolder, () => {
       observer.disconnect()
     })
+
+    // Focus current map is no map is focused
+    if (
+      !dumbymap.utils.renderedMaps().find(map => map.classList.contains('focus')) ||
+      container.querySelectorAll('.mapclay.focus').length === 0
+    ) {
+      mapElement.classList.add('focus')
+    }
   }
 
   // Set unique ID for map container
diff --git a/src/editor.mjs b/src/editor.mjs
index ecf3735..fd18f78 100644
--- a/src/editor.mjs
+++ b/src/editor.mjs
@@ -20,12 +20,25 @@ import * as tutorial from './tutorial'
 const url = new URL(window.location)
 const pageParams = url.searchParams
 const crs = pageParams.get('crs') ?? 'EPSG:4326'
+const initialLayout = pageParams.get('layout')
 
 /** Variables: dumbymap and editor **/
 const context = document.querySelector('[data-mode]')
+const textArea = document.querySelector('.editor textarea')
 const dumbyContainer = document.querySelector('.DumbyMap')
 dumbyContainer.dataset.scrollLine = ''
-const textArea = document.querySelector('.editor textarea')
+/** Watch: Layout of DumbyMap */
+new window.MutationObserver(mutaions => {
+  const mutation = mutaions.at(-1)
+  const layout = dumbyContainer.dataset.layout
+  if (layout !== 'normal' || mutation.oldValue === 'normal') {
+    delete context.dataset.mode
+  }
+}).observe(dumbyContainer, {
+  attributes: true,
+  attributeFilter: ['data-layout'],
+  attributeOldValue: true,
+})
 let dumbymap
 
 /** Variables: Reference Style Links in Markdown */
@@ -472,7 +485,11 @@ const updateDumbyMap = (callback = null) => {
 
   callback?.(dumbymap)
 }
-updateDumbyMap()
+updateDumbyMap(() => {
+  if (initialLayout) {
+    dumbyContainer.dataset.layout = initialLayout
+  }
+})
 
 // Re-render HTML by editor content
 cm.on('change', (_, change) => {
@@ -931,20 +948,6 @@ document.onkeydown = e => {
 
 // }}}
 // }}}
-// Layout Switch {{{
-new window.MutationObserver(mutaions => {
-  const mutation = mutaions.at(-1)
-  const layout = dumbyContainer.dataset.layout
-  if (layout !== 'normal' || mutation.oldValue === 'normal') {
-    delete context.dataset.mode
-  }
-}).observe(dumbyContainer, {
-  attributes: true,
-  attributeFilter: ['data-layout'],
-  attributeOldValue: true,
-})
-// }}}
-
 /**
  * addMapRandomlyByPreset. insert random text of valid mapclay yaml into editor
  */
-- 
cgit v1.2.3-70-g09d2