https://upv.es/js/main.js

1document.addEventListener(
2  "DOMContentLoaded",
3  function () {
4    const animationElements = document.querySelectorAll(".gsap-animation")
5    const scrollAnimationElements = document.querySelectorAll(".scroll-animation-to-top")
6
7    if (
8      (animationElements && animationElements.length) ||
9      (scrollAnimationElements && scrollAnimationElements).length
10    ) {
11      let mm = gsap.matchMedia()
12
13      mm.add("(min-width: 200px)", () => {
14        if (animationElements.length) {
15          animationElements.forEach((el) => {
16            el.classList.add("prepare-animation")
17            ScrollTrigger.create({
18              trigger: el,
19              start: "50px 80%",
20              onEnter: () => {
21                el.classList.add("active")
22              },
23              onLeaveBack: () => el.classList.remove("active"),
24            })
25          })
26        }
27        if (scrollAnimationElements.length) {
28          scrollAnimationElements.forEach((el) => {
29            gsap.to(el, {
30              y: "-50%",
31              scrollTrigger: {
32                trigger: el,
33                scrub: 1,
34              },
35            })
36          })
37        }
38
39        return () => {
40          // console.log("Resolución demasiado pequeña")
41        }
42      })
43
44      window.addEventListener("resize", () => {
45        gsap.matchMediaRefresh()
46      })
47    }
48
49    let openMenu = false
50    let closedButton = document.querySelector(".closed-menu")
51    let openedButton = document.querySelector(".opened-menu")
52    let mobileNav = document.querySelector("#openedMenuMobile")
53    let htmlElement = document.getElementsByTagName("html")[0]
54
55    let toggleMenuBtn = document.querySelector(".open-mobile-menu")
56    if (toggleMenuBtn) {
57      toggleMenuBtn.addEventListener("click", toggleMenu)
58    }
59    function toggleMenu() {
60      openMenu = !openMenu
61      htmlElement.classList.toggle("hide-scroll")
62      closedButton.classList.toggle("active")
63      openedButton.classList.toggle("active")
64      openMenu ? mobileNav.classList.add("active") : mobileNav.classList.remove("active")
65    }
66
67    document.addEventListener(
68      "keydown",
69      (e) => {
70        const checkIfElementIsSubMenu = document.activeElement.parentElement.classList.contains("list-submenu")
71        const checkIfElementIsMenuBtn = document.activeElement.classList.contains("menu-btn")
72        if (checkIfElementIsSubMenu || checkIfElementIsMenuBtn) {
73          if (checkIfElementIsSubMenu) {
74            if (e.key === "ArrowDown") {
75              const element = document.activeElement.parentElement.nextElementSibling?.firstElementChild
76              if (element) {
77                moveFocus(element)
78              } else {
79                const newElement =
80                  document.activeElement.parentElement.parentElement.firstElementChild.firstElementChild
81                moveFocus(newElement)
82              }
83            } else if (e.key === "ArrowUp") {
84              const element = document.activeElement.parentElement.previousElementSibling?.firstElementChild
85              if (element) {
86                moveFocus(element)
87              } else {
88                const newElement = document.activeElement.parentElement.parentElement.lastElementChild.firstElementChild
89                moveFocus(newElement)
90              }
91            } else if (e.key === "ArrowLeft") {
92              const newElement =
93                document.activeElement.parentElement.parentElement.parentElement.previousElementSibling
94                  ?.firstElementChild
95              if (newElement) {
96                moveFocus(newElement)
97
98                const jump = newElement.nextElementSibling?.firstElementChild.firstElementChild
99                moveFocus(jump)
100              }
101            } else if (e.key === "ArrowRight") {
102              const newElement =
103                document.activeElement.parentElement.parentElement.parentElement.nextElementSibling?.firstElementChild
104              if (newElement) {
105                moveFocus(newElement)
106
107                const jump = newElement.nextElementSibling?.firstElementChild.firstElementChild
108                moveFocus(jump)
109              }
110            }
111          }
112          if (checkIfElementIsMenuBtn) {
113            if (e.key === "ArrowDown") {
114              const element = document.activeElement.nextElementSibling?.firstElementChild.firstElementChild
115              moveFocus(element)
116            }
117            if (e.key === "ArrowLeft") {
118              const element = document.activeElement.parentElement.previousElementSibling?.firstElementChild
119              if (element) moveFocus(element)
120            }
121            if (e.key === "ArrowRight") {
122              const element = document.activeElement.parentElement.nextElementSibling?.firstElementChild
123              if (element) moveFocus(element)
124            }
125          }
126        }
127      },
128      { passive: true }
129    )
130  },
131  false
132)
133function activeSubMenu(id) {
134  document.querySelector(`#subelement${id}`).classList.toggle("active")
135}
136function setFocus(element) {
137  const clickElement = document.getElementById(element)
138  const firstElementToFocus = clickElement.querySelector("ul > li:first-child a")
139  moveFocus(clickElement)
140  moveFocus(firstElementToFocus)
141}
142function moveFocus(element) {
143  element.tabIndex = -1
144  element.focus()
145  element.tabIndex = 0
146  // aria-expanded="true" para añadir el hover
147}
148