phga.de-legacy/web/static/js/main.js

/*
 * main.js
 * functions to power my portfolio
 * Author: phga
 * Date: 2019-10-18
 * Version: 1.1
 */
"use strict";
document.addEventListener("DOMContentLoaded", run);
// global var to control the animation of the text
var runTextAnimation = true;
function run() {
    initialize();
}

function initialize() {
    let welcome = document.getElementById("welcome");
    let exhibit = document.getElementById("exhibition");
    let notice = Array.from(document.getElementsByClassName("arrow"));
    let userAgent = window.navigator.userAgent;
    flyingText(welcome);
    document.addEventListener("click", (e) => {
        let overlay = document.getElementById("info-box");
        let curr = e.target;
        if (curr.className === "thumb") {
            runTextAnimation = false;
            hideElement(welcome);
            handleThumb(overlay, curr);
        } else if (curr.id === "btn-close") {
            runTextAnimation = true;
            flyingText(welcome);
            hideElement(overlay);
        } else if (curr.id === "avatar") {
            curr.classList.add("wobble");
            for (let i = 0; i < 10; ++i)
                shootText(welcome, 3, "♥");
            setTimeout(() => {curr.classList.remove("wobble");}, 2000);
        }
    });

    // Handle dummy dum dum Apple products >:
    if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
        exhibit.addEventListener("scroll", (e) => {
            e.preventDefault();
        });
        let startpos;
        exhibit.addEventListener("touchmove", (e) => {
            e.preventDefault();
        });

        exhibit.addEventListener("touchstart", (e) => {
            startpos = e.touches[0].clientX;
        });

        exhibit.addEventListener("touchend", (e) => {
            let slide = startpos - e.changedTouches[0].clientX;
            if (slide < -5 || slide > 5 ) {
                doSlide(exhibit, slide);
            }
        });
    }
    else {
        // remove the indicator on enter
        exhibit.addEventListener("mouseenter", () => {
            notice[0].remove();
            notice[1].remove();
        }, {once: true});
    }
}

// this scroll is NOT smooth
function doSlide(elem, dist) {
    let hM = elem.scrollHeight;
    let sT = elem.scrollTop;
    if (dist < 0)
        elem.scrollTop = (sT + dist > 0) ? sT + dist : 0;
    else
        elem.scrollTop = (sT + dist > hM) ? hM : sT + dist;
}

function handleThumb(overlay, elem) {
    let imgName = elem.dataset.img;
    showOverlay(overlay, imgName);
}

// save last eventlistener func to remove it...
var resize;
function showOverlay(overlay, imgName) {
    let magni = document.getElementById("zoom");
    let infoTable = document.getElementById("img-description");
    let img = document.createElement("img");
    // call my zoom function (zoom.js)
    // fix for the zoom factor after resize (timeout to reduce calls)
    let waitResize;
    // remove for old img_names (named func required)
    window.removeEventListener("resize", resize);
    resize = () => {
        clearTimeout(waitResize);
        waitResize = setTimeout(() => {zoom(0.4, imgName)},50);
    };
    window.addEventListener("resize", resize);

    img.addEventListener("load", () => {zoom(0.4, imgName)});
    img.src = `/static/images/${imgName}.jpg`;
    img.id = imgName;
    img.alt = imgName;

    magni.innerHTML = "";
    magni.appendChild(img);

    getInfoForImg(imgName).then(info => {
        let infos = ` <tr>
<th>Author:</th><td>${info.Author}</td>
</tr>
<tr>
<th>Size:</th><td>${info.Size}</td>
</tr>
<tr>
<th>Tools:</th><td>${info.Tools}</td>
</tr>
<tr>
<th>Date:</th><td>${info.Date}</td>
</tr>
<tr>
<th colspan="2">Description:</th>
</tr>
<tr>
<td colspan="2">${info.Desc}</td>
</tr>
`;
        if (info.BlogLink != "none") {
            infos += `<tr>
<th colspan="2"><a href="${info.Blog}">Read more...</a></th>
</tr>`;
        }
        infoTable.innerHTML = infos;
    });
    overlay.classList.remove("hidden");
}

function hideElement(elem) {
    elem.classList.add("hidden");
}

// Get info from server
async function getInfoForImg(imgName) {
    let res = await fetch(`/info/${imgName}`);
    let info = await res.json();
    return info;
}