portfolio-website-project/script.js at main · jwjohnson93/portfolio-website-project · 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
function toggleMenu() {
    const menu = document.querySelector(".menu-links");
    const icon = document.querySelector(".hamburger-icon");
    if (!menu || !icon) return;

    menu.classList.toggle("open");
    icon.classList.toggle("open");

    const isOpen = menu.classList.contains("open");
    icon.setAttribute("aria-expanded", String(isOpen));
}

function closeMenuOnClickOutside(event) {
    const menu = document.querySelector(".menu-links");
    const icon = document.querySelector(".hamburger-icon");
    const hamburgerMenu = document.querySelector(".hamburger-menu");
    if (!menu || !icon || !hamburgerMenu) return;

    if (menu.classList.contains("open") && !hamburgerMenu.contains(event.target)) {
        menu.classList.remove("open");
        icon.classList.remove("open");
        icon.setAttribute("aria-expanded", "false");
    }
}

function closeMenuOnScroll() {
    const menu = document.querySelector(".menu-links");
    const icon = document.querySelector(".hamburger-icon");
    if (!menu || !icon) return;

    if (menu.classList.contains("open")) {
        menu.classList.remove("open");
        icon.classList.remove("open");
        icon.setAttribute("aria-expanded", "false");
    }
}

function toggleDarkMode() {
    const body = document.body;
    body.classList.toggle('dark-mode');
    const isDarkMode = body.classList.contains('dark-mode');
    localStorage.setItem('darkMode', isDarkMode);

    // Update checkbox state
    const toggleCheckboxes = document.querySelectorAll('.dark-mode-toggle input[type="checkbox"]');
    toggleCheckboxes.forEach(checkbox => {
        checkbox.checked = isDarkMode;
    });
}

function loadDarkModePreference() {
    const darkMode = localStorage.getItem('darkMode') === 'true';
    if (darkMode) {
        document.body.classList.add('dark-mode');

        // Update checkbox state for all toggles
        const toggleCheckboxes = document.querySelectorAll('.dark-mode-toggle input[type="checkbox"]');
        toggleCheckboxes.forEach(checkbox => {
            checkbox.checked = true;
        });
    }
}


function initMenuAccessibility() {
    const icon = document.querySelector(".hamburger-icon");
    if (!icon) return;

    icon.setAttribute("role", "button");
    icon.setAttribute("tabindex", "0");

    icon.addEventListener("keydown", function (event) {
        if (event.key === "Enter" || event.key === " ") {
            event.preventDefault();
            toggleMenu();
        }
        if (event.key === "Escape") {
            const menu = document.querySelector(".menu-links");
            if (menu?.classList.contains("open")) {
                menu.classList.remove("open");
                icon.classList.remove("open");
                icon.setAttribute("aria-expanded", "false");
            }
        }
    });
}

function initMobileOptimizations() {
    // Add event listeners for mobile menu
    document.addEventListener('click', closeMenuOnClickOutside);
    window.addEventListener('scroll', closeMenuOnScroll);

    // Handle touch events better on mobile
    if ('ontouchstart' in window) {
        document.body.classList.add('touch-device');
    }
}

document.addEventListener('DOMContentLoaded', function() {
    loadDarkModePreference();
    initMobileOptimizations();
    initMenuAccessibility();
});