GraduationTrip/function.js at master · SmallSun697/GraduationTrip · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
function CardDisplayLoading() {
    const day = parseInt(window.location.href.slice(-1)) - 1;
    const quantity = database[day].length;
    const mainPage = document.querySelector(".main-page");
    for (let i = 0; i < quantity; i++) {
        const imageName = database[day][i].imageName;
        const description = database[day][i].description;

        const card = document.createElement("div");
        card.className = "content-card-setting card-show";

        const imgWrapper = document.createElement("div");
        imgWrapper.className = "img-wrapper image";

        const img = document.createElement("img");
        img.src = `Images/CardContent/Low/${imageName}`;
        img.alt = imageName;
        imgWrapper.setAttribute("onclick", `ShowFull("Images/CardContent/Full/${imageName}")`);

        imgWrapper.appendChild(img);

        const desc = document.createElement("p");
        desc.textContent = description;

        card.appendChild(imgWrapper);
        card.appendChild(desc);

        mainPage.appendChild(card);
    }
}

function CardOpacity() {
    const cards = document.querySelectorAll('.card-show');
    cards.forEach(card => {
        let cardHeight = card.offsetHeight;
        let cardButton = card.getBoundingClientRect().bottom;
        let distanceToBottom = window.innerHeight - cardButton;
        let gap = (distanceToBottom + cardHeight) / cardHeight;
        let opacity;
        if (gap > 0 && gap < 1 ) {
            opacity = gap;
        } else if (gap >= 1) {
            opacity = 1;
        } else {
            opacity = 0;
        }
        card.style.opacity = opacity;
    });
}

function HeaderHeight() {
    let titleTextHeight = document.getElementById("titleText").getBoundingClientRect().top
    let titleHeight = -1;
    if (titleTextHeight - titleHeight >= 0.5 || titleTextHeight - titleHeight <= -0.5) {
        titleHeight = titleTextHeight;
    }
    if (titleHeight < 0) {
        if (titleHeight >= -60) {
            document.querySelector('header').style.height = titleHeight*-1 + "px";
        } else {
            document.querySelector('header').style.height = "60px"
        }
    } else {
        document.querySelector('header').style.height = "0px";
    }
}

function Redirect(url) {
    window.location.href = window.location.href + url;
}

function ShowFull(path) {
    const modal = document.getElementById("fullscreen-modal");
    const modalImg = document.getElementById("fullscreen-image");
    const closeBtn = document.getElementsByClassName("close")[0];

    modal.style.display = "block";
    modalImg.src = path;
    document.body.style.overflow = "hidden";

    closeBtn.onclick = function() {
        modal.style.display = "none";
        document.body.style.overflow = "";
    }

    const hammer = new Hammer(modalImg);
    hammer.get('pinch').set({ enable: true });
    hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });

    let posX = 0, posY = 0, scale = 1, lastScale = 1, lastPosX = 0, lastPosY = 0;

    hammer.on('pan', function(e) {
        if (scale !== 1) {
            posX = lastPosX + e.deltaX;
            posY = lastPosY + e.deltaY;
            modalImg.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;
        }
    });

    hammer.on('panend', function() {
        lastPosX = posX;
        lastPosY = posY;
    });

    hammer.on('pinch', function(e) {
        scale = Math.max(1, Math.min(lastScale * e.scale, 4));
        modalImg.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;
    });

    hammer.on('pinchend', function() {
        lastScale = scale;
    });
}

function TitleHeight() {
    let Y = 1;
    if (window.scrollY - Y >= 0.5 || window.scrollY - Y <= -0.5) {
        Y = window.scrollY;
    }
    if (Y >= 340) {
        document.querySelector(".title").style.height = "442px";
    }
    else {
        document.querySelector(".title").style.height = 850 - Math.round(Y*1.2) + "px";
    }
}