66945.github.io/script.js at master · 66945/66945.github.io · 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
const LIGHT = {
    background: '#FFFFFF',
    text: '#000000',
    shadow: '#00000080',
    gray: '#808080'
};
const DARK = {
    background: '#1a1a1a',
    text: '#FFFFFF',
    shadow: '#000000',
    gray: '#C7C7C7'
};

let darkMode = false;
let sideBar = false;

setDarkMode(darkMode);

let scrollChange = false;

window.addEventListener('scroll', setScroll, false);
window.addEventListener('resize', reactResolution, false);

setScroll();
reactResolution();

function setScroll() {
    let scrollPercent = window.scrollY / (document.body.offsetHeight - window.innerHeight);
    document.body.style.setProperty('--scroll', scrollPercent);

    if(scrollChange !== window.scrollY < 300) {
        if(window.scrollY < 300)
            document.getElementById('toplink').style.transform = 'scale(0)';
        else
            document.getElementById('toplink').style.transform = 'scale(1)';

        console.log('change');
    }

    scrollChange = window.scrollY < 300;
}

function reactResolution() {
    if(window.innerWidth < 1024) {
        document.body.classList.remove('laptop');
        document.body.classList.add('mobile');
    } else if(window.innerWidth < 1600) {
        document.body.classList.remove('mobile');
        document.body.classList.add('laptop');
    } else {
        document.body.classList.remove('mobile');
        document.body.classList.remove('laptop');
    }
}

function setDarkMode(mode) {
    if(mode) {
        document.body.style.setProperty('--background', DARK.background);
        document.body.style.setProperty('--text', DARK.text);
        document.body.style.setProperty('--gray', DARK.gray);
        document.body.style.setProperty('--shadow', DARK.shadow);
    } else {
        document.body.style.setProperty('--background', LIGHT.background);
        document.body.style.setProperty('--text', LIGHT.text);
        document.body.style.setProperty('--gray', LIGHT.gray);
        document.body.style.setProperty('--shadow', LIGHT.shadow);
    }
}

function toggleSideBar() {
    sideBar = !sideBar;

    if(sideBar)
        document.getElementById('sidebar').style.transform = 'translateX(0)';
    else
        document.getElementById('sidebar').style.transform = 'translateX(110%)';
}