https://cabreiroa.es/etc.clientlibs/catalog/clientlibs/clientlib-c…-395092d9dc82e6722bab25fb742a908b-lc.min.js

1const Header = {
2  lastScrollTop: 0,
3  html: document.querySelector('html'),
4  body: document.querySelector('body'),
5  mainElm: '',
6  langWrapper: document.querySelector('.header-component__language-wrapper'),
7  headerElm: document.querySelector('.header-component'),
8  headerMicrositesElm: '',
9  breadcrumb: '',
10  btnToggleMenu: document.querySelector('.header-component__btn-menu'),
11  navList: document.querySelector('.header-component__nav-list'),
12  init: () => {
13    Header.mainElm = document.querySelector('main')
14    Header.headerMicrositesElm = document.querySelector('.header-microsite-component')
15    Header.breadcrumb = document.querySelector('.cmp-breadcrumb')
16    Header.events()
17  },
18  events: () => {
19    const navLinkItems = document.querySelectorAll('.header-component__nav-item--childs .header-component__nav-link')
20    const backLinks = document.querySelectorAll('.header-component__back-btn')
21    Header.btnToggleMenu?.addEventListener('click', () => {
22      Header.navigation.toggle()
23    })
24    navLinkItems.forEach(navLinkItem => {
25      navLinkItem.addEventListener('click', (ev) => {
26        if (!window.matchMedia('(min-width: 1280px)').matches) {
27          ev.preventDefault()
28          Header.navigation.openSecondLevel(navLinkItem)
29        } else if (window.matchMedia('(min-width: 1280px)').matches && HdR.isTouchDevice()) {
30          ev.preventDefault()
31        }
32      })
33    })
34    backLinks.forEach(backLink => {
35      backLink.addEventListener('click', () => {
36        Header.navigation.backFirstLevel()
37      })
38    })
39  },
40  navigation: {
41    toggle: () => {
42      const navWrapper = document.querySelector('.header-component__nav-wrapper')
43      Header.btnToggleMenu.classList.toggle('is-active')
44      Header.headerElm.classList.toggle('opened')
45      Header.body.classList.toggle('has-opened-menu')
46      if (Header.headerElm.classList.contains('.header-component--standard')) {
47        Header.mainElm.classList.toggle('has-opened-menu')
48      }
49      navWrapper.classList.toggle('opened')
50      if (!Header.btnToggleMenu.classList.contains('is-active')) {
51        Header.navigation.reset()
52      }
53    },
54    openSecondLevel: (navLinkItem) => {
55      Header.navList.classList.add('has-child-opened')
56      Header.langWrapper?.classList.add('hidden')
57      navLinkItem.parentElement.classList.add('is-active-element')
58      navLinkItem.parentElement.querySelector('.header-component__subnav-wrapper').classList.add('opened')
59    },
60    backFirstLevel: () => {
61      const activeItem = document.querySelector('.header-component__nav-item.is-active-element')
62      activeItem.classList.remove('is-active-element')
63      activeItem.querySelector('.header-component__subnav-wrapper').classList.remove('opened')
64      Header.navList.classList.remove('has-child-opened')
65      Header.langWrapper?.classList.remove('hidden')
66    },
67    reset: () => {
68      const activeItem = document.querySelector('.is-active-element')
69      const itemChildOpened = document.querySelector('.has-child-opened')
70      activeItem.classList.remove('is-active-element')
71      activeItem.querySelector('.header-component__subnav-wrapper').classList.remove('opened')
72      itemChildOpened.classList.remove('has-child-opened')
73      Header.langWrapper?.classList.remove('hidden')
74    }
75  },
76  scrolling: () => {
77    if (Header.headerElm.classList.contains('header-component--sticky') || Header.headerElm.classList.contains('header-component--hide-on-scroll')) {
78      if (Header.html.scrollTop > 0) {
79        Header.headerElm.classList.add('scrolling')
80      } else {
81        Header.headerElm.classList.remove('scrolling')
82      }
83    }
84
85    if (Header.headerElm.classList.contains('header-component--hide-on-scroll')) {
86      const hoveredNavItem = document.querySelector('.header-component__nav-item:hover') // 'header-component__nav-item:hover' for all items / 'header-component__nav-item--childs:hover' for only items with dropdown menu
87      const openedHeader = document.querySelector('.header-component--hide-on-scroll.opened')
88      const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop
89      if (!hoveredNavItem && !openedHeader) {
90        if (currentScrollTop > Header.lastScrollTop && currentScrollTop > 50) {
91          Header.headerElm.classList.add('hide-header')
92          Header.headerMicrositesElm?.classList.add('hide-header')
93          Header.breadcrumb?.classList.add('hide-header')
94        } else if (currentScrollTop < Header.lastScrollTop) {
95          Header.headerElm.classList.remove('hide-header')
96          Header.headerMicrositesElm?.classList.remove('hide-header')
97          Header.breadcrumb?.classList.remove('hide-header')
98        }
99      }
100      Header.lastScrollTop = Math.max(0, currentScrollTop)
101    }
102  }
103}
104
105document.addEventListener('DOMContentLoaded', () => {
106  Header.init()
107})
108
109window.addEventListener('scroll', () => {
110  Header.scrolling()
111})