added mobile version

src/client/js/index.ts

@@ -9,6 +9,13 @@ const templates = {
     geschenke: require("../html/geschenke.html"),
 }
 
+const images = {
+    home: require("../img/home.jpg").default,
+    unterkunft: require("../img/unterkunft.jpg").default,
+    tagesablauf: null,
+    geschenke: require("../img/geschenke.jpg").default,
+}
+
 
 const callbacks = {
     home: () => {
@@ -19,6 +26,10 @@ const callbacks = {
         let state = "godi";
         let scrollTimeout = null;
         let scrollToView = false;
+        const modal = document.getElementById("modal");
+        modal.onclick = () => {
+            modal.classList.remove("show");
+        }
 
         const infoImageContainer = document.getElementById("info-image-container");
         infoImageContainer.querySelectorAll(".circler").forEach(circle => {
@@ -26,10 +37,18 @@ const callbacks = {
                 state = (<HTMLElement>circle).dataset["state"];
                 infoImageContainer.dataset["state"] = state;
                 scrollToView = true;
-                document.querySelector(".anchor[data-state='" + state + "']").scrollIntoView({
+                const elemToShow = document.querySelector(".anchor[data-state='" + state + "']");
+                elemToShow.scrollIntoView({
                     "behavior": "smooth",
                     "block": "start"
                 });
+
+                // @ts-ignore
+                if (Foundation.MediaQuery.only("small")) {
+                    modal.innerText = "";
+                    modal.appendChild(elemToShow.cloneNode(true));
+                    modal.classList.add("show")
+                }
             });
         });
 
@@ -90,14 +109,21 @@ $(function () {
             const nowActive = document.querySelectorAll(".menu li[data-site='" + elem.dataset["site"] + "']");
             nowActive.forEach(elem => elem.classList.add("active"));
 
-            container.innerHTML = templates[elem.dataset["site"]];
-            if (elem.dataset["img"] === "1") {
+            currentSite = elem.dataset["site"];
+            container.innerHTML = templates[currentSite];
+            if (images[currentSite]) {
+                img.querySelector("img").src = images[currentSite];
                 img.classList.remove("hidden");
+                if (elem.dataset["imgShowAlways"] === "1") {
+                    img.classList.remove("hide-for-medium")
+                } else {
+                    img.classList.add("hide-for-medium")
+                }
+
             } else {
                 img.classList.add("hidden");
             }
 
-            currentSite = elem.dataset["site"];
 
             if (typeof callbacks[currentSite] === "function") {
                 callbacks[currentSite]();