~scrumplex/website

79d382a751beff134bad8e6222dece746ccda8c5 — Sefa Eyeoglu 2 months ago 1adfd55
feat: allow hash fragment on page load
1 files changed, 31 insertions(+), 12 deletions(-)

M src/js/application.js
M src/js/application.js => src/js/application.js +31 -12
@@ 21,28 21,36 @@ import ready from "./_utils";

const mainElem = document.getElementById("main");

window.addEventListener("scroll", applyScrollConditionally);

window.addEventListener("beforeunload", () => {
    window.scrollTo(0, 0); // Scroll to top
document.querySelectorAll(".scrumplex-logo").forEach((elem) => {
    elem.addEventListener("dblclick", () => {
        const randomRotation = Math.floor(Math.random() * 360);
        elem.style.transform = `rotate(${randomRotation}deg)`;
    });
});

document.querySelectorAll("*[data-scroll]").forEach((elem) => {
    elem.addEventListener("click", (e) => {
        e.preventDefault();
        const targetSelector = elem.getAttribute("data-scroll");
        const targetElem = document.querySelector(targetSelector);
        const offset = applyScroll(targetElem);
        window.scrollTo({top: offset, behavior: "smooth"});
        applyScrollSpecial(targetSelector);
    });
});

document.querySelectorAll(".scrumplex-logo").forEach((elem) => {
    elem.addEventListener("dblclick", () => {
        const randomRotation = Math.floor(Math.random() * 360);
        elem.style.transform = `rotate(${randomRotation}deg)`;
    });
});
mainElem.addEventListener("animationend", applyScrollInitially);

function applyScrollInitially() {
    mainElem.removeEventListener("animationend", applyScrollInitially);

    window.addEventListener("scroll", applyScrollConditionally);

    if (location.hash.startsWith("#")) {
        const result = applyScrollSpecial(location.hash);
        if (result)
            return;
    }
    applyScrollConditionally();
}

function applyScrollConditionally() {
    if (mainElem.getBoundingClientRect().top <= 0 || // offset to top window border


@@ 50,6 58,17 @@ function applyScrollConditionally() {
        applyScroll();
}

function applyScrollSpecial(targetSelector) {
    if (!targetSelector)
        return false;
    const targetElem = document.querySelector(targetSelector);
    if (!targetElem)
        return false;
    const offset = applyScroll(targetElem);
    window.scrollTo({top: offset, behavior: "smooth"});
    return true;
}

function applyScroll(scrollTarget = null) {
    // Black magic ahead!
    // We sometimes need this method to show all sheets and then scroll to one of them.