Merge branch 'develop' into RobinLinde-patch-2

src/UI/Base/CloseAnimation.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Store } from "../../Logic/UIEventSource"
+  import { onDestroy, onMount } from "svelte"
+
+  let elem: HTMLElement
+  let targetOuter: HTMLElement
+  export let isOpened: Store<boolean>
+  export let moveTo: Store<HTMLElement>
+
+  export let debug : string
+  function copySizeOf(htmlElem: HTMLElement) {
+    const target = htmlElem.getBoundingClientRect()
+    elem.style.left = target.x + "px"
+    elem.style.top = target.y + "px"
+    elem.style.width = target.width + "px"
+    elem.style.height = target.height + "px"
+  }
+
+  function animate(opened: boolean) {
+    const moveToElem = moveTo.data
+console.log("Animating", debug," to", opened)
+    if (opened) {
+      copySizeOf(targetOuter)
+      elem.style.background = "var(--background-color)"
+    } else if (moveToElem !== undefined) {
+      copySizeOf(moveToElem)
+      elem.style.background = "#ffffff00"
+    } else {
+      elem.style.left = "0px"
+      elem.style.top = "0px"
+      elem.style.background = "#ffffff00"
+    }
+  }
+
+  onDestroy(isOpened.addCallback(opened => animate(opened)))
+  onMount(() =>  requestAnimationFrame(() => animate(isOpened.data)))
+
+
+</script>
+<div class={"absolute bottom-0 right-0 h-full w-screen p-4 md:p-6 pointer-events-none invisible"}>
+  <div class="content h-full" bind:this={targetOuter} style="background: red" />
+</div>
+
+<div bind:this={elem} class="pointer-events-none absolute bottom-0 right-0 low-interaction rounded-2xl"
+     style="transition: all 0.5s ease-out, background-color 1.4s ease-out; background: var(--background-color);">
+  <!-- Classes should be the same as the 'floatoaver' -->
+</div>
+
+

src/UI/Base/FloatOver.svelte

@@ -11,7 +11,6 @@
    */
   const dispatch = createEventDispatcher<{ close }>()
 
-  export let extraClasses = "p-4 md:p-6"
 </script>
 
 <!-- Draw the background over the total screen -->
@@ -24,7 +23,7 @@
 />
 <!-- draw a _second_ absolute div, placed using 'bottom' which will be above the navigation bar on mobile browsers -->
 <div
-  class={twMerge("absolute bottom-0 right-0 h-full w-screen", extraClasses)}
+  class={"absolute bottom-0 right-0 h-full w-screen p-4 md:p-6"}
   style="z-index: 21"
   use:trapFocus
 >

src/UI/Base/MapControlButton.svelte

@@ -3,7 +3,7 @@
   import { twJoin } from "tailwind-merge"
   import { Translation } from "../i18n/Translation"
   import { ariaLabel } from "../../Utils/ariaLabel"
-  import { ImmutableStore, Store } from "../../Logic/UIEventSource"
+  import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
 
   /**
    * A round button with an icon and possible a small text, which hovers above the map
@@ -12,9 +12,15 @@
   export let cls = "m-0.5 p-0.5 sm:p-1 md:m-1"
   export let enabled: Store<boolean> = new ImmutableStore(true)
   export let arialabel: Translation = undefined
+  export let htmlElem: UIEventSource<HTMLElement> = undefined
+  let _htmlElem : HTMLElement
+  $: {
+    htmlElem?.setData(_htmlElem)
+  }
 </script>
 
 <button
+  bind:this={_htmlElem}
   on:click={(e) => dispatch("click", e)}
   on:keydown
   use:ariaLabel={arialabel}

src/UI/Base/TableOfContents.ts

@@ -1,11 +1,8 @@
-import Combine from "./Combine"
 import BaseUIElement from "../BaseUIElement"
-import Title from "./Title"
 import List from "./List"
-import Link from "./Link"
 import { marked } from "marked"
 import { parse as parse_html } from "node-html-parser"
-import {default as turndown} from "turndown"
+import { default as turndown } from "turndown"
 import { Utils } from "../../Utils"
 
 export default class TableOfContents {
@@ -56,7 +53,7 @@ export default class TableOfContents {
         const htmlSource = <string>marked.parse(md)
         const el = parse_html(htmlSource)
         const structure = TableOfContents.generateStructure(<any>el)
-        let firstTitle = structure[1]
+        const firstTitle = structure[1]
         let minDepth = undefined
         do {
             minDepth = Math.min(...structure.map(s => s.depth))
@@ -81,7 +78,7 @@ export default class TableOfContents {
         let topLevelCount = 0
         for (const el of structure) {
             const depthDiff = el.depth - minDepth
-            let link = `[${el.title}](#${TableOfContents.asLinkableId(el.title)})`
+            const link = `[${el.title}](#${TableOfContents.asLinkableId(el.title)})`
             if (depthDiff === 0) {
                 topLevelCount++
                 toc += `${topLevelCount}. ${link}\n`
@@ -91,16 +88,14 @@ export default class TableOfContents {
         }
 
         const heading = Utils.Times(() => "#", firstTitle.depth)
-        toc = heading +" Table of contents\n\n"+toc
+        toc = heading + " Table of contents\n\n" + toc
 
-        const original = el.outerHTML
-        const firstTitleIndex = original.indexOf(firstTitle.el.outerHTML)
-        const tocHtml = (<string>marked.parse(toc))
-        const withToc = original.substring(0, firstTitleIndex) + tocHtml + original.substring(firstTitleIndex)
+        const firstTitleIndex = md.indexOf(firstTitle.title)
 
-        const htmlToMd = new turndown()
-        return htmlToMd.turndown(withToc)
+        const intro = md.substring(0, firstTitleIndex)
+        const splitPoint = intro.lastIndexOf("\n")
 
+        return md.substring(0, splitPoint) + toc + md.substring(splitPoint)
 
     }