ignacioazzi.github.io/script.js at master · ignacioazzi/ignacioazzi.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
78
79
80
81
82
83
84
85
86
var navbar = `
<nav id="site-navigation" class="main-navigation nav-visible" role="navigation"><div class="container nav-bar">
<div class="row">
<div class="module left">
<a href="index.html">
<p class="site-title">
Ignacio Azzi ·
<b>Product Designer</b>
</p>
</a>
</div>
<div class="module right">
<div class="responsive_menu">
<span class="ham_icon visible_xs hidden-sm hidden-md hidden-lg">Menu</span>
<span class="menu_content hidden-xs">
<span style="position:relatve" class="dropdown fwb" href="#">Projects
<ul class="dropdown_items">
<li><a href="room.html">Room Customizer</a></li>
<li><a href="pulse.html">Pulse Calendar</a></li>
<li><a href="horizontal.html">Horizontal Comparison</a></li>
</ul>
</span>
<a class="fwb" href="mailto:ignacioazzi@gmail.com">Contact me</a>
 <a class="fwb" href="Ignacio_Azzi-Resume.pdf">Curriculum</a>
</span>
</div>
<div>
</div>
</div>
</div></div></nav>`;

document.body.insertAdjacentHTML("afterbegin", navbar);
var hamIcon = document.querySelector(".ham_icon");
var menuContent = document.querySelector(".menu_content");
var siteNav = document.querySelector("#site-navigation");
var homeLink = document.querySelector("a[href$='index.html']");

if (hamIcon && menuContent) {
    hamIcon.addEventListener("click", function () {
        menuContent.classList.toggle("menu_mobile");
    });
}

var name = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);

if (name === "" || name.includes("index")) {
    if (homeLink) {
        homeLink.parentElement.classList.add("active_menu_item");
    }
} else {
    var activeLinks = document.querySelectorAll(`a[href$='${name}']`);
    activeLinks.forEach(function (a) {
        a.parentElement.classList.add("active_menu_item");
    });
}

if (siteNav) {
    var introEl = document.getElementById("intro");
    if (introEl) {
        siteNav.classList.add("nav-hidden");
        siteNav.classList.remove("nav-visible");

        var introObserver = new IntersectionObserver(function (entries) {
            entries.forEach(function (entry) {
                if (entry.isIntersecting) {
                    siteNav.classList.add("nav-hidden");
                    siteNav.classList.remove("nav-visible");
                } else {
                    siteNav.classList.add("nav-visible");
                    siteNav.classList.remove("nav-hidden");
                }
            });
        }, { threshold: 0.15 });
        introObserver.observe(introEl);
    } else {
        window.addEventListener("wheel", function (event) {
            if (event.deltaY <= 0) {
                siteNav.classList.add("nav-visible");
                siteNav.classList.remove("nav-hidden");
            } else {
                siteNav.classList.add("nav-hidden");
                siteNav.classList.remove("nav-visible");
            }
        });
    }
}