second version

src/client/js/index.ts

@@ -9,53 +9,96 @@ const templates = {
     geschenke: require("../html/geschenke.html"),
 }
 
-async function startPresents(){
-    await new PresentsHandler().showPresents();
-}
 
 const callbacks = {
-    home: () => {},
-    unterkunft: () => {},
-    tagesablauf: () => {},
-    geschenke: startPresents,
+    home: () => {
+    },
+    unterkunft: () => {
+    },
+    tagesablauf: () => {
+        let state = "godi";
+        let scrollTimeout = null;
+        let scrollToView = false;
+
+        const infoImageContainer = document.getElementById("info-image-container");
+        infoImageContainer.querySelectorAll(".circler").forEach(circle => {
+            circle.addEventListener("click", () => {
+                state = (<HTMLElement>circle).dataset["state"];
+                infoImageContainer.dataset["state"] = state;
+                scrollToView = true;
+                document.querySelector(".anchor[data-state='" + state + "']").scrollIntoView({
+                    "behavior": "smooth",
+                    "block": "start"
+                });
+            });
+        });
+
+        const navBar = document.querySelector(".top-bar");
+        const anchors = document.querySelectorAll(".anchor");
+        const margin = navBar.clientHeight+50;
+
+        const observerDown = new IntersectionObserver(entries => {
+            entries.some(entry => {
+                if (!entry.isIntersecting && entry.intersectionRect.top === margin && !scrollToView) {
+                    state = (<HTMLElement>entry.target).dataset["state"];
+                }
+            });
+        }, {threshold: 1, rootMargin: "-" + margin + "px 0px 0px 0px"});
+        // }, {threshold: 1, rootMargin: "-100px 0px 0px 0px"});
+        const observerUp = new IntersectionObserver(entries => {
+            entries.some(entry => {
+                if (entry.isIntersecting && entry.intersectionRect.top === navBar.clientHeight && !scrollToView) {
+                    state = (<HTMLElement>entry.target).dataset["state"];
+                }
+            });
+        }, {threshold: 0.1});
+
+        anchors.forEach(anchor => {
+            observerDown.observe(anchor);
+            observerUp.observe(anchor);
+        })
+
+        document.querySelector("#info-image-container + .site-content").addEventListener("scroll", e => {
+            clearTimeout(scrollTimeout);
+            scrollTimeout = setTimeout(() =>{
+                scrollTimeout = null;
+                infoImageContainer.dataset["state"] = state;
+                scrollToView = false;
+                console.log("stopped scrolling")
+            }, 50);
+        });
+    },
+    geschenke: async () => await new PresentsHandler().showPresents(),
 }
 
 $(document).foundation();
 
 $(function () {
-    const mainDiv = document.getElementById("main-content-container");
     const container = document.getElementById("main-content");
     const img = document.getElementById("home-img-container");
 
     let currentSite = "home";
 
-    //Scroll-Element
-    mainDiv.addEventListener("scroll", e => {
-        console.log("scrolling!", e);
-    });
-
-
     //Navigation
     container.innerHTML = templates.home;
     document.querySelectorAll(".menu li[data-site]").forEach((elem: HTMLElement) => {
         elem.addEventListener("click", () => {
             const oldActive = document.querySelector(".menu .active");
-            if (oldActive){
+            if (oldActive) {
                 oldActive.classList.remove("active");
             }
             elem.classList.add("active");
 
             container.innerHTML = templates[elem.dataset["site"]];
-            if (elem.dataset["img"] === "1"){
+            if (elem.dataset["img"] === "1") {
                 img.classList.remove("hidden");
-            }
-            else {
+            } else {
                 img.classList.add("hidden");
             }
 
             currentSite = elem.dataset["site"];
 
-            if (typeof callbacks[currentSite] === "function"){
+            if (typeof callbacks[currentSite] === "function") {
                 callbacks[currentSite]();
             }
         });