CSLineups/videoFunc.js at main · 5ycm/CSLineups · 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
console.log("Script is running");

let buttonClickedVar = null;
function handleButtonClick(event){
    let url = this.getAttribute('data-url');
    replaceSrc(url,setBorder,this);
}

const buttons = document.querySelectorAll('.node');
buttons.forEach(function(button){
    if (button.getAttribute('data-url') != null && button.getAttribute('data-url') != "") {
        button.onclick = handleButtonClick;
    }
})

function replaceSrc(url,callback,buttonClicked){
    document.querySelector('iframe').setAttribute('src',url+'?autoplay=1&mute=1');
    document.getElementById('closerVideo').style.visibility = 'visible';
    document.getElementById('iFrameID').style.visibility = 'visible';
    document.getElementById('videoFrame').style.visibility = 'visible';

    buttons.forEach(button => {
        if (button !== buttonClicked) {
            button.querySelector('img').style.transform = 'scale(0)';
            button.style.pointerEvents = 'none';
        }
        else{
            buttonClickedVar = button;
            button.querySelector('img').src = "images/reddot.png";
            button.querySelector('img').style.transform = 'scale(4)';
        }
    });

    console.log(url+' has been added');
    callback(toClose);
}

function setBorder(callback){
    document.getElementById('videoFrame').style.visibility = 'visible';
    setTimeout(() => {
        document.getElementById('closerVideo').src = 'images/x-symbol.png'
        document.getElementById('videoFrame').style.pointerEvents = 'auto';
        document.getElementById('videoFrame').style.border = '3px solid white';
        document.getElementById('videoFrame').style.boxShadow = '1px 1px 20px 3px';

    },200);

    callback();
}


function toClose(){
    document.getElementById('closerVideo').onclick = closing;
    document.getElementById('map').onclick = closing;
}

function closing(){
    document.getElementById('closerVideo').style.visibility = 'hidden';
    document.getElementById('iFrameID').style.visibility = 'hidden';
    document.getElementById('videoFrame').style.visibility = 'hidden';
    buttons.forEach(button=> {
        button.style.pointerEvents = 'auto';
        if(button == buttonClickedVar){
            button.querySelector('img').style.transform ='';
            setTimeout(()=> {
                button.querySelector('img').src='images/dot.png';
                buttonClickedVar = null;
            },170)
            return;
        }
        button.style.visibility = 'visible';
        button.querySelector('img').src='images/dot.png';
        button.querySelector('img').style.transform = '';
        document.getElementById('videoFrame').style.boxShadow = '0px 0px 0px';

    });
    document.getElementById('closerVideo').src = "";
    document.getElementById('iFrameID').src = "";
    document.getElementById('videoFrame').style.border = '0px solid black';
    document.getElementById('videoFrame').style.pointerEvents = 'none';
}