bug(mindmap): fix image removal (#756)

fixes #755

.github/labeler.yml

@@ -30,7 +30,7 @@ translation:
   - changed-files:
       - any-glob-to-any-file:
           - '*/language/*.yml'
-research:
+mindmap:
   - changed-files:
       - any-glob-to-any-file:
           - mindmap/**/*

.gitignore

@@ -65,6 +65,7 @@
 /mindmap/node_modules
 /mindmap/dist
 /mindmap/cache
+/mindmap/src/*.js
 
 # Editor directories and files
 .DS_Store

mindmap/data.yml

@@ -260,12 +260,14 @@ children:
           - text: Documentation Website
             image: website-screenshot.png
             url: https://idrinth-api-ben.ch
+          - text: Mindmap
           - text: Logo
             image: iab.svg
       - text: work in progress
         children:
           - text: Logo
             image: new-logo.png
+          - text: History Website
       - text: requirements
         children:
           - text: dark mode

mindmap/package.json

@@ -3,15 +3,16 @@
   "version": "1.0.0",
   "description": "",
   "scripts": {
-    "build": "node tools/data.js",
+    "build": "npm run tsc && node tools/data.js",
     "serve": "http-server ./dist -c-1 --proxy http://localhost:8080? --silent",
     "start": "npm run build && npm run serve",
     "spellcheck": "spellchecker",
     "lint": "eslint . --ext .js,.ts,.cjs,.json,.tsx --report-unused-disable-directives --max-warnings 0",
     "lint-fix": "eslint . --ext .js,.ts,.cjs,.json,.tsx --fix",
     "lint-styles": "stylelint src/index.css",
     "lint-css": "ilcd",
-    "knip": "knip"
+    "knip": "knip",
+    "tsc": "tsc -p tsconfig.json"
   },
   "repository": {
     "type": "git",
@@ -34,7 +35,8 @@
     "spellchecker-cli": "^6.2.0",
     "@idrinth/duplicate-style-check": "^1.1.0",
     "stylelint": "^16.2.1",
-    "stylelint-config-standard": "^36.0.0"
+    "stylelint-config-standard": "^36.0.0",
+    "typescript": "^5.4.4"
   },
   "engines": {
     "node": ">=20"

mindmap/src/show.ts

@@ -0,0 +1,55 @@
+const FIRST = 0;
+const body = document.body;
+const remove = (
+  element: HTMLAnchorElement|HTMLSpanElement,
+) => body.removeChild(element,);
+const add = (
+  element: HTMLAnchorElement|HTMLSpanElement,
+) => body.appendChild(element,);
+const set = (
+  element: HTMLAnchorElement|HTMLSpanElement,
+  key: string,
+  value: string,
+) => element.setAttribute(key, value,);
+const get = (
+  element: HTMLAnchorElement|HTMLSpanElement,
+  key: string,
+) => element.getAttribute(key,);
+const has = (
+  element: HTMLAnchorElement|HTMLSpanElement,
+  key: string,
+) => element.hasAttribute(key,);
+const create = (type: 'a'|'img',) => document.createElement(type,);
+const removeModals = () => {
+  const modals = document.getElementsByClassName('modal',);
+  while (modals.item(FIRST,)) {
+    remove(modals.item(FIRST,) as HTMLSpanElement|HTMLAnchorElement,);
+  }
+};
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+window.show = (element: HTMLAnchorElement|HTMLSpanElement,) => {
+  if (! element || ! has(element, 'data-image',)) {
+    return;
+  }
+  removeModals();
+  const img = create('img',);
+  set(img, 'src', get(element, 'data-image',),);
+  if (has(element, 'title',)) {
+    set(img, 'title', get(element, 'title',),);
+  }
+  if (has(element, 'href',)) {
+    const a = create('a',);
+    set(a, 'href', get(element, 'href',),);
+    set(a, 'target', '_blank',);
+    set(a, 'rel', 'noreferrer',);
+    set(a, 'class', 'modal',);
+    a.appendChild(img,);
+    img.onmouseleave = () => remove(a,);
+    add(a,);
+    return;
+  }
+  img.onmouseleave = () => remove(img,);
+  set(img, 'class', 'modal',);
+  body.append(img,);
+};

mindmap/tools/data.js

@@ -101,7 +101,7 @@ html = html.replace(
   '</head>',
   '<link rel=icon type=image/svg+xml href=iab.svg />' +
   `<link rel=stylesheet type=text/css href=${ ch }.min.css />` +
-  `<script src=${ jsh }.min.js ></script>` +
+  `<script type=module src=${ jsh }.min.js ></script>` +
   '</head>',
 );
 html = html

mindmap/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "nodenext"
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}