wep/script.js at main · KevinMaulanaAtmaja/wep · 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
127
128
// toggle btn
const menuToggle = document.querySelector(".menu");
const nav = document.querySelector("nav");
const header = document.querySelector("header");

menuToggle.addEventListener("click", () => {
    nav.classList.toggle("active");
    header.classList.toggle("mobile-header");
});

// fetch data
const select = document.getElementById("select-eps");
const img = document.getElementById("img-eps");
const desc = document.getElementById("desc-eps");

fetch("data.json")
    .then((response) => response.json())
    .then((data) => {
        data.forEach((item) => {
            const option = document.createElement("option");
            option.value = item.eps;
            option.textContent = `Episode ${item.eps}: ${item.title}`;
            option.setAttribute("desc", item.desc);
            option.setAttribute("img", `img/eps/${item.img}`);
            select.appendChild(option);

            select.addEventListener("change", function () {
                const selectedOption = select.options[select.selectedIndex];
                const epsDesc = selectedOption.getAttribute("desc");
                const epsImg = selectedOption.getAttribute("img");

                if (epsDesc) {
                    desc.textContent = epsDesc;
                    img.src = `img/eps/${item.img}`;
                } else {
                    desc.textContent = "";
                    img.src = "";
                }

                if (epsImg) {
                    img.src = epsImg;
                }
            });

            if (data.length > 0) {
                select.value = data[0].eps;
                desc.textContent = data[0].desc;
                img.src = `img/eps/${data[0].img}`;
            }
        });
    })
    .catch((error) => console.error("Error fetching JSON:", error));

// slideshow
const slides = [
    {
        type: "iframe",
        src: "https://www.youtube.com/embed/-C2gc6RKGCI?si=Azci3Tai4GaUwdGp",
        title: "Teaser Video",
        mobileSrc: null,
    },
    {
        type: "img",
        src: "img/walp/01.webp",
        alt: "Image 1",
        mobileSrc: "img/walp/mobile/01.png",
    },
    {
        type: "img",
        src: "img/walp/02.webp",
        alt: "Image 2",
        mobileSrc: "img/walp/mobile/02.png",
    },
    {
        type: "img",
        src: "img/walp/03.webp",
        alt: "Image 3",
        mobileSrc: "img/walp/mobile/03.png",
    },
    {
        type: "img",
        src: "img/walp/04.webp",
        alt: "Image 4",
        mobileSrc: "img/walp/mobile/04.png",
    },
];

let currentSlide = 0;
const slider = document.getElementById("slider");

function isMobileDevice() {
    return window.matchMedia("(max-width: 1023px)").matches;
}

function showSlide(index) {
    slider.innerHTML = "";
    const slide = slides[index];
    const useMobile = isMobileDevice();

    if (slide.type === "img") {
        const img = document.createElement("img");
        img.src = useMobile && slide.mobileSrc ? slide.mobileSrc : slide.src;
        img.alt = slide.alt;
        slider.appendChild(img);
    } else if (slide.type === "iframe") {
        const iframe = document.createElement("iframe");
        iframe.src = slide.src;
        iframe.title = slide.title;
        iframe.frameBorder = "0";
        iframe.allowFullscreen = true;
        slider.appendChild(iframe);
    }
}

function prevSlide() {
    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
    showSlide(currentSlide);
}

function nextSlide() {
    currentSlide = (currentSlide + 1) % slides.length;
    showSlide(currentSlide);
}

document.getElementById("prev").addEventListener("click", prevSlide);
document.getElementById("next").addEventListener("click", nextSlide);

showSlide(currentSlide);