gallery/resize.js at master · ZSangLien/gallery · 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

        let desktopLayers = document.querySelectorAll(".desktop-layer");
        let mobileLayers = document.querySelectorAll(".mobile-layer")
        checkGallery();

        function checkGallery() {
            if (window.innerWidth > 600) {
                desktopLayers[0].classList.add("active-layer")
                desktopLayers[1].classList.add("active-layer")
                mobileLayers[0].remove()
                mobileLayers[1].remove()
            }

            else {
                desktopLayers[0].remove()
                desktopLayers[1].remove()
                mobileLayers[0].classList.add("active-layer")
                mobileLayers[1].classList.add("active-layer")
            }
        }

        let images = document.querySelectorAll("img[data-src]");
        images.forEach((x) => {
            x.src = x.attributes.getNamedItem("data-src").value;
        })

        let videoObject;
        function videoSec() {
            videoObject = document.querySelector('video');
            let videoLinks = document.querySelectorAll('div[video-src]');

            videoLinks.forEach(videoLink => {
                videoLink.addEventListener('click', () => {
                    videoObject.src = videoLink.attributes.getNamedItem("video-src").value;
                    videoObject.play();
                    videoLinks.forEach(x => x.classList.remove('active-video'));
                    videoLink.classList.add('active-video');
                    let overlay = document.querySelector(".teaser-sec .overlay");
                    overlay.classList.add("clicked");
                });
            });
        }

        let translateCount = 1;
        let totalThumb = document.querySelector('.video-list-container').childElementCount;


        document.querySelector('.right-arrow').addEventListener('click', () => {
            let thumbInView = Math.floor(document.querySelector('.video-list').offsetWidth / 320);
            if (thumbInView * translateCount < totalThumb)
                document.querySelector('.video-list-container').style = `transform:translate(${320 * thumbInView * (-(++translateCount - 1))}px)`;
            checkArrowState()
        });

        document.querySelector('.left-arrow').addEventListener('click', () => {
            let thumbInView = Math.floor(document.querySelector('.video-list').offsetWidth / 320);
            if (translateCount > 1)
                document.querySelector('.video-list-container').style = `transform:translate(${320 * thumbInView * (-(--translateCount - 1))}px)`;
            checkArrowState();
        });
        checkArrowState();
        function checkArrowState() {
            if (translateCount > 1)
                document.querySelector('.left-arrow').classList.remove('deactive-btn');
            else
                document.querySelector('.left-arrow').classList.add('deactive-btn');

            let thumbInView = Math.floor(document.querySelector('.video-list').offsetWidth / 320);

            if (thumbInView * translateCount < totalThumb)
                document.querySelector('.right-arrow').classList.remove('deactive-btn');
            else
                document.querySelector('.right-arrow').classList.add('deactive-btn');
        }

        let isDevCollapsed = false;
        function Developer() {
            let devRow = document.querySelector('#team .row');
            let devSection = document.querySelector("#team");
            if (isDevCollapsed != true)
                devSection.style = `height: ${200 + 60 + devRow.offsetHeight}px`;
            else

                devSection.style = window.innerWidth > 500 ? 'height:200px' : 'height : 140px';
        }
        window.addEventListener('resize', Developer);
        Developer()