Merge branch 'master' into gh-pages

outdoorsafetylab · Sep 16, 2024 · a911ef1 · a911ef1
2 parents 7bb9efa + be3c3f7
commit a911ef1
Show file tree

Hide file tree

Showing 10 changed files with 434 additions and 236 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
+dist/
 node_modules/
 package-lock.json
 pnpm-lock.yaml
-mapclay/
+mapclay
diff --git a/eslint.config.js b/eslint.config.js
@@ -21,7 +21,11 @@ export default [
  node: nodePlugin,
  },
  rules: {
- 'no-unused-vars': ['warn', { 'varsIgnorePattern': '^_' }],
+ 'no-unused-vars': ['warn', {
+ 'varsIgnorePattern': '^_',
+ "argsIgnorePattern": "^_",
+ "caughtErrorsIgnorePattern": "^ignore|_",
+ }],
  'import/no-unresolved': 'error',
  'no-console': ["error", { allow: ["info", "warn", "error"] }],
  'eqeqeq': ['error', 'always'],

diff --git a/index.html b/index.html
@@ -21,8 +21,8 @@
 
 </head>
 
-<body>
- <div class="result-html"></div>
+<body data-layout="editing">
+ <div class="DumbyMap"></div>
  <div class="editor">
  <textarea></textarea>
  </div>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "dumbymap",
  "description": "Generate interactive maps from Semantic HTML",
- "version": "0.2.0",
+ "version": "0.2.5",
  "license": "MIT",
  "type": "module",
  "main": "dist/dumbymap.mjs",
@@ -17,7 +17,6 @@
  "openlayers",
  "leaflet"
  ],
- "license": "MIT",
  "scripts": {
  "watch": "npx rollup -c -w",
  "build": "mkdir -p dist; npm run build-css; npm run build-renderers; npm run build-resources; npx rollup -c",
@@ -40,12 +39,12 @@
  "eslint-plugin-node": "^11.1.0",
  "eslint-plugin-promise": "^7.1.0",
  "globals": "^15.9.0",
- "rollup": "^4.21.2"
+ "rollup": "^4.21.3"
  },
  "dependencies": {
  "easymde": "^2.18.0",
  "leader-line": "^1.0.7",
- "mapclay": "^0.6.1",
+ "mapclay": "^0.6.4",
  "markdown-it": "^14.1.0",
  "markdown-it-anchor": "^9.2.0",
  "markdown-it-footnote": "^4.0.0",

diff --git a/rollup.config.js b/rollup.config.js
@@ -28,6 +28,16 @@ const general = {
  return null;
  },
  },
+ {
+ name: 'plain-draggable',
+ transform(code, id) {
+ if (id.includes('node_modules/plain-draggable/')) {
+ const removePattern = /window\.addEventListener\('scroll'[^\)]*\)/
+ return `${code.replace(removePattern, "")}`;
+ }
+ return null;
+ },
+ },
  {
  name: 'mapclay',
  resolveId(source) {

diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css
@@ -29,7 +29,7 @@
  }
 }
 
-.result-html {
+.DumbyMap {
  position: relative;
  max-width: 60em;
  margin: 0 auto;
@@ -38,24 +38,23 @@
  overflow-x: scroll;
  /* height: 100vh; */
 
- #map {
- flex: 0;
+ .Showcase {
+ order: 2;
  #mapPlaceholder {
  display: none;
  }
  }
 
  .SemanticHtml {
- flex: 1;
- padding: 20px;
+ order: 1;
+ padding: 1.5rem;
  overflow-y: scroll;
+ width: 100%;
 
  > .draggable-block {
  width: 100%;
- position: relative;
  pointer-events: auto;
  border-radius: 0.5rem;
- padding: 0.5rem;
  background-color: white;
  margin-bottom: 3rem;
 
@@ -99,14 +98,14 @@
  width: fit-content;
  }
 
- #map .map-container {
+ .Showcase .map-container {
  width: 100% !important;
  height: 100% !important;
  }
 }
 
-.result-html[data-layout]:not([data-layout=none]) {
- margin: 0;
+.DumbyMap[data-layout]:not([data-layout=none]) {
+ margin: 0 auto;
 
  height: 100vh;
  width: 100%;
@@ -119,17 +118,17 @@
  }
 }
 
-.result-html[data-layout=side] {
- #map,
+.DumbyMap[data-layout=side] {
+ .Showcase,
  .SemanticHtml {
  flex: 50%;
  overflow-y: scroll;
  height: 100vh;
  }
 }
 
-.result-html[data-layout=overlay] {
- #map,
+.DumbyMap[data-layout=overlay] {
+ .Showcase,
  .SemanticHtml {
  position: fixed;
  height: 100%;
@@ -139,32 +138,56 @@
  .SemanticHtml {
  font-size: 12px;
  pointer-events: none;
+ z-index: 1;
 
  > .draggable-block {
  box-sizing: content-box;
+ position: absolute;
  width: fit-content;
  max-height: 50vh;
+ max-width: 25vw;
  overflow: scroll;
  border: solid gray;
+ padding-top: 0.5rem;
+ padding-bottom: 0;
+ resize: both;
+
+ > * {
+ padding-inline: 0.5rem;
+ }
 
- * {
- max-width: calc(100vw/4);
+ &[style*="height"],
+ &[style*="width"] {
+ max-height: unset;
+ max-width: unset;
+ }
+
+ .map-container {
+ min-width: 200px;
+ padding-inline: 0;
  }
 
  .draggable {
- width: 100%;
  display: block;
  top: 0;
  left: 0;
  position: sticky;
+ background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,1) 60%);
  margin-bottom: -18px;
- opacity: 0.3;
  transform: translate(0, -16px);
+ width: 100%;
+ padding-inline: 0;
+ padding-bottom: 2em;
  text-align: center;
- z-index: 100;
+ z-index: 9999;
  transition: all 0.3s ease-out;
  &:hover {
- background-color: lightgray;
+ background: #e1e1e1;
+ padding-block: 1em 0.5em;
+ & ~ * {
+ opacity: 0.7;
+ color: gray;
+ }
  }
  }
  }

diff --git a/src/css/index.css b/src/css/index.css
@@ -4,38 +4,57 @@
 }
 
 body {
- display: flex;
- justify-items: stretch;
  width: 100%;
-}
+ height: 100vh;
+
+ &[data-layout=editing] {
+ display: flex;
+ align-items: stretch;
+ gap: 0.5em;
+
+ padding: 0.5em;
 
-.result-html {
- flex: 0 0 50%;
- border: var(--content-border);
- border-radius: var(--content-border-radius);
- margin: 10px;
+ .DumbyMap {
+ order: 1;
+ 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;
+
+ order: 2;
+ flex: 1 0 50%;
+ max-width: calc(50% - 0.5em);
+ height: 100%;
+ }
+ }
 }
 
 .editor {
- flex: 0 0 50%;
- 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 0;
  border: var(--content-border);
  border-radius: var(--content-border-radius);
  padding-inline: 0;
 
+ font-family: monospace;
+ font-size: 1.0rem;
+
  span {
  white-space: pre;
  }
@@ -46,12 +65,10 @@ body {
 
  .editor-toolbar {
  order: 2;
- margin-top: 0.5rem;
- border-left: 1px solid #ced4da;
- border-right: 1px solid #ced4da;
- border-bottom: 1px solid #ced4da;
- border-bottom-left-radius: 4px;
- border-bottom-right-radius: 4px;
+ flex: 0 0 0;
+
+ border: var(--content-border);
+ border-radius: var(--content-border-radius);
  }
 
  .editor-statusbar {
@@ -60,7 +77,8 @@ body {
 }
 
 /* FIXME For those empty line (no child with cm-comment) */
-.CodeMirror-line:has(.cm-comment) {
+.inside-code-block,
+.CodeMirror-line:has(.cm-formatting-code-block) {
  background: rgba(0,0,0,.05) !important;
 
  .cm-comment {

diff --git a/src/css/style.css b/src/css/style.css
@@ -10,7 +10,6 @@
 
 img, picture, video, canvas, svg {
  display: block;
- max-width: 100%;
 }
 
 input, button, textarea, select {