https://emptycan-2025.netlify.app/src/js/browser.js

1import DATA from "/src/data/data.js";
2
3let _DATA = DATA;
4let _POSITION = 0;
5let _ACTIVE = false;
6let _SWIPE;
7
8const _ANSWER = document.querySelector("#Answer");
9
10function loadCard() {
11    const card = document.querySelector("section");
12    
13    if (_POSITION >= _DATA.length)
14        _POSITION = 0;
15    if (_POSITION < 0)
16        _POSITION = _DATA.length-1;
17
18    background();
19    
20    if (_DATA[_POSITION].url) {
21        card.querySelector("a").setAttribute('href', _DATA[_POSITION].url);
22    }
23
24    if (card.querySelector(".img"))
25        card.querySelector(".img").innerHTML = _DATA[_POSITION].body || null;
26    if (card.querySelector(".title"))
27        card.querySelector(".title").innerHTML =  _DATA[_POSITION].title || null;
28}
29function background() {
30    if (_DATA[_POSITION].color) {
31        document.querySelector(".Browser").style.background = `${_DATA[_POSITION].color}`;
32    }
33}
34function detectSwipe(e) {
35    const card = document.querySelector("section");
36    const startX = e.touches[0].clientX;
37
38    function handleEnd(e) {
39        const endX = e.changedTouches[0].clientX;
40        const diffX = startX - endX;
41
42        if (diffX > 0) {
43            _SWIPE =  "left"
44            // Add logic for swiping left here
45        } else if (diffX < 0) {
46            _SWIPE = "right"
47            // Add logic for swiping right here
48        }
49    }
50    document.addEventListener("touchend", handleEnd);
51}
52function moveCardOffScreen(e) {
53    const card = document.querySelector("section");
54    const screenWidth = window.innerWidth;
55    const direction = (!e.clientX) ? _SWIPE : e.clientX < screenWidth / 2 ? "left" : "right";
56    if (!_ACTIVE) {
57        _ACTIVE = true;
58        let _x = screenWidth/2 + card.offsetWidth/2 + "px";
59        if (direction === "left") {
60            card.style.opacity = 0.5;
61            card.style.transform = `translateX(-${_x}) scale(0.5)`;
62            _SWIPE = "right";
63        } else {
64            card.style.opacity = 0.5;
65            card.style.transform = `translateX(${_x}) scale(0.5)`;
66            _SWIPE = "left";
67        }
68        function animationControls() {
69            console.log("Animation stopped");
70            card.style.opacity = 0;
71            if (direction === "left") {
72                card.style.transform = `translateX(${_x}) scale(0.5)`;
73                _POSITION--;
74            } else {
75                card.style.transform = `translateX(-${_x}) scale(0.5)`;
76                _POSITION++;
77            }
78            loadCard();
79            card.removeEventListener("transitionend",animationControls);
80            setTimeout(function(){
81                card.style.opacity = 1;
82                card.style.transform = "translateX(0) scale(1)";                
83                _ACTIVE = false;
84            }, 1000);
85        }
86        card.addEventListener("transitionend", animationControls);
87    }
88
89}
90
91document.addEventListener("DOMContentLoaded", () => {
92
93    if(!('ontouchstart' in window) && (screen.width > 600)) {
94        document.querySelector('.Browser').addEventListener("click", (e) => {
95                if (e.target.tagName.toLowerCase() == "main" || e.target.tagName.toLowerCase() == "div" || e.target.tagName.toLowerCase() == "svg") {
96                moveCardOffScreen(e);
97            }
98        });
99    }
100    
101    document.addEventListener("touchmove", moveCardOffScreen);
102    window.addEventListener("touchmove", detectSwipe);
103    window.addEventListener("keyup", (e) => {
104        console.log(e.key);
105        if (e.key == 'ArrowLeft' || e.key == 'ArrowRight') {
106            _ACTIVE = false;
107            _SWIPE = e.key == 'ArrowLeft' ? 'left' : 'right';
108            moveCardOffScreen({clientX : false});
109        }
110        if (e.key == ' ') {
111            window.open(_DATA[_POSITION].url, '_blank');
112        }
113    })
114      
115    loadCard();
116    background();
117});
118
119