refactor: layout class

* put class Layout and OverlayLayout together
* apply extend on OverlayLayout
* rename layouts: "none" -> "normal", "side" -> "side-by-side"

3 files changed, 17 insertions, 16 deletions

diff --git a/src/OverlayLayout.mjs b/src/Layout.mjs
index 8b4e073..20e8a23 100644
--- a/src/OverlayLayout.mjs
+++ b/src/Layout.mjs
@@ -1,7 +1,17 @@
 import PlainDraggable from 'plain-draggable'
 import { onRemove } from './utils'
 
-export class OverlayLayout {
+export class Layout {
+  constructor(options = {}) {
+    if (!options.name) throw Error("Layout name is not given")
+    this.name = options.name
+    this.enterHandler = options.enterHandler
+    this.leaveHandler = options.leaveHandler
+  }
+  valueOf = () => this.name
+}
+
+export class OverlayLayout extends Layout {
   name = "overlay"
 
   enterHandler = (dumbymap) => {
diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
index f5695f1..6c68548 100644
--- a/src/css/dumbymap.css
+++ b/src/css/dumbymap.css
@@ -150,7 +150,6 @@
   }
 }
 
-.DumbyMap[data-layout]:not([data-layout="none"]) {
   width: 100%;
   height: 100vh;
   margin: 0 auto;
@@ -162,9 +161,10 @@
     display: none;
     pointer-events: none;
   }
+.DumbyMap[data-layout]:not([data-layout="normal"]) {
 }
 
-.DumbyMap[data-layout="side"] {
+.DumbyMap[data-layout="side-by-side"] {
   .SemanticHtml {
     flex: 50%;
     overflow-y: auto;
diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs
index 4eb6bdf..63ba3ed 100644
--- a/src/dumbymap.mjs
+++ b/src/dumbymap.mjs
@@ -6,24 +6,15 @@ import MarkdownItTocDoneRight from 'markdown-it-toc-done-right'
 import LeaderLine from 'leader-line'
 import { renderWith, parseConfigsFromYaml } from 'mapclay'
 import { onRemove, animateRectTransition, throttle } from './utils'
-import { OverlayLayout } from './OverlayLayout'
+import { Layout, OverlayLayout } from './Layout'
 
 const docLinkSelector = 'a[href^="#"][title^="=>"]'
 const geoLinkSelector = 'a[href^="geo:"]'
 
-class Layout {
-  constructor({ name, enterHandler = null, leaveHandler = null }) {
-    this.name = name
-    this.enterHandler = enterHandler
-    this.leaveHandler = leaveHandler
-  }
-  valueOf = () => this.name
-}
-
 const layouts = [
-  new Layout({ name: "none" }),
-  new Layout({ name: "side" }),
-  new OverlayLayout(),
+  new Layout({ name: "normal" }),
+  new Layout({ name: "side-by-side" }),
+  new OverlayLayout({ name: "overlay" }),
 ]
 
 // FUNCTION: Get DocLinks from special anchor element {{{