hochzeit/src/client/js/index.ts

import * as $ from "jquery";
import "foundation-sites/dist/js/foundation.es6";
import {PresentsHandler} from "./PresentsHandler";

const templates = {
    home: require("../html/home.html"),
    unterkunft: require("../html/unterkunft.html"),
    tagesablauf: require("../html/tagesablauf.html"),
    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: () => {
    },
    unterkunft: () => {
    },
    tagesablauf: () => {
        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 => {
            circle.addEventListener("click", () => {
                state = (<HTMLElement>circle).dataset["state"];
                infoImageContainer.dataset["state"] = state;
                scrollToView = true;
                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")
                }
            });
        });

        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 container = document.getElementById("main-content");
    const img = document.getElementById("home-img-container");
    const navbar = document.getElementById("main-menu");

    let currentSite = "home";

    //Navigation
    container.innerHTML = templates.home;
    document.querySelectorAll(".menu li[data-site]").forEach((elem: HTMLElement) => {
        elem.addEventListener("click", () => {
            const oldActive = document.querySelectorAll(".menu .active");
            oldActive.forEach(elem => elem.classList.remove("active"));

            const nowActive = document.querySelectorAll(".menu li[data-site='" + elem.dataset["site"] + "']");
            nowActive.forEach(elem => elem.classList.add("active"));

            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");
            }


            if (typeof callbacks[currentSite] === "function") {
                callbacks[currentSite]();
            }
        });
    })
});