107 lines
3.9 KiB
TypeScript
107 lines
3.9 KiB
TypeScript
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 callbacks = {
|
|
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 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"));
|
|
|
|
container.innerHTML = templates[elem.dataset["site"]];
|
|
if (elem.dataset["img"] === "1") {
|
|
img.classList.remove("hidden");
|
|
} else {
|
|
img.classList.add("hidden");
|
|
}
|
|
|
|
currentSite = elem.dataset["site"];
|
|
|
|
if (typeof callbacks[currentSite] === "function") {
|
|
callbacks[currentSite]();
|
|
}
|
|
});
|
|
})
|
|
}); |