Pixel-Studio/script.js at main · adi-mws/Pixel-Studio · 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
const darkmodeBtn = document.getElementsByClassName("darkmode-btn")[0];
class Mode {

    constructor(btn) {
        this.btn = btn;
    }

    getCurrentMode() {
        const mode = localStorage.getItem("mode");
        if (mode) {
            return mode;
        }
        else {
            localStorage.setItem('mode', 'light');
            return 'light';
        }
    }

    apply() {
        const mode = localStorage.getItem("mode");
        if (this.getCurrentMode() === 'light') this.applyLightMode();
        else this.applyDarkMode();
    }

    applyDarkMode() {

        this.btn.children[0].classList.remove("fa-moon");
        this.btn.children[0].classList.add("fa-sun");

        localStorage.setItem('mode', 'dark');
        document.body.classList.add('darkmode');
    }

    applyLightMode() {

        this.btn.children[0].classList.remove("fa-sun");
        this.btn.children[0].classList.add("fa-moon");

        localStorage.setItem('mode', 'light');
        document.body.classList.remove('darkmode');
    }
}

const m = new Mode(darkmodeBtn);
m.apply();

darkmodeBtn.addEventListener('click', () => {
    if (m.getCurrentMode() === 'light') {
        m.applyDarkMode();
    }
    else { m.applyLightMode(); }
})


const navMenubarBtn = document.getElementsByClassName("nav-menubar-btn")[0];
const navMenubar = document.getElementsByClassName("nav-menubar")[0];
let menustate = false;

if (navMenubarBtn) {

    navMenubarBtn.onclick = () => {
        menustate = !menustate;
        if (menustate) {
            navMenubarBtn.children[0].classList.remove('fa-bars');
            navMenubarBtn.children[0].classList.add('fa-xmark');
            navMenubar.style.left = "0%";
        }
        else {
            navMenubar.style.left = '-100%';
            navMenubarBtn.children[0].classList.remove('fa-xmark');
            navMenubarBtn.children[0].classList.add('fa-bars');
        }
    }

}
// Scroll Animations
// Intersection Observer

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
            entry.target.classList.add('show');
        } else {
            entry.target.classList.remove('show');

        }

    })
})

const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((element) => { observer.observe(element) })


// Auth Back Button Handler

const authBackBtn = document.getElementsByClassName("back-btn")[0];
if (authBackBtn) {
    authBackBtn.addEventListener("click", () => {
        window.history.back()
    })
}


export function AuthPassEyeHandler(btn, input) {
    if (btn.children[0].classList.contains("fa-eye")) {
        btn.children[0].classList.remove('fa-eye');
        btn.children[0].classList.add('fa-eye-slash');
        input.setAttribute("type", "text")
    }
    else {
        btn.children[0].classList.remove("fa-eye-slash");
        btn.children[0].classList.add("fa-eye");
        input.setAttribute("type", "password")
    }
}


// Home Page Carousel