https://www.investinspain.org/etc.clientlibs/icex-catalog-componen…/catalog/header/v1/header/clientlibs.min.js

1document.addEventListener('DOMContentLoaded', ()=> {
2    const body = document.querySelector('body')
3    const mainRight = document.getElementById('mainRight')
4    const languageSelector = document.getElementById('language-selector')
5    const rightArrows = document.getElementsByClassName('right_arrow')
6    const leftArrows = document.getElementsByClassName('left_arrow')
7    const rightArrows2 = document.getElementsByClassName('right_arrow2')
8    const leftArrows2 = document.getElementsByClassName('left_arrow2')
9    
10
11    languageSelector?.addEventListener( 'change', function () {
12        window.location.href = this.value
13    })
14    
15    window.addEventListener( 'resize', ()=> {
16        mainMenu()
17    })
18
19    languageHeader()
20    mainMenu()
21
22
23    function languageHeader() {
24        var language = $('#languagePage').val();
25        $("#language-selector option[data-lang=" + language + "]").prop("selected", "selected");
26    }
27
28    function mainMenu(){
29        const itemsLevel_1 = document.getElementsByClassName('js-item-level-1')
30        const firstItemLevel_1 = itemsLevel_1[0]
31        const submenusLevel_2 = document.getElementsByClassName('js-submenu-level-2')
32        const linksLevel_2 = document.getElementsByClassName('js-link-level-2')
33        const itemsLevel_3 = document.getElementsByClassName('js-item-level-3')
34        let currentElement
35        
36        resetMainMenu()
37
38
39        if ( window.innerWidth > 1025 ) { // DESKTOP VERSION
40
41            body.style.overflowY = 'auto'
42            mainRight.style.display = 'flex'
43
44
45            firstItemLevel_1?.addEventListener( 'focusout', closeSubmenusOnLeaveHeader )
46
47
48            for ( const item of itemsLevel_1 ) {
49                item.addEventListener( 'focus', () => {
50                    hideAllSubmenusLevel_2()
51                    hideAllLinksLevel_3()
52                    showCurrentSubmenuLevel_2( item )
53                    currentElement = item // Used on closeSubmenusOnreverseTab function
54                })
55            }
56
57            for ( const link of linksLevel_2 ) {
58                link.addEventListener( 'focus', () => {
59                    hideAllLinksLevel_3()
60                    showCurrentLinksLevel_3( link )
61                    currentElement = link
62                })
63            }
64
65            function showCurrentSubmenuLevel_2 ( item ) {
66                const currentSubmenuLevel_2 = item.parentNode.querySelector('.js-submenu-level-2')
67                if ( currentSubmenuLevel_2 ) currentSubmenuLevel_2.classList.remove('closed')
68            }
69
70            function showCurrentLinksLevel_3 ( link ) {
71                const itemsLevel_3 = link.getElementsByClassName('js-item-level-3')
72                for ( const item of itemsLevel_3 ) {
73                    item.classList.add('show')
74                }
75            }
76
77            function hideAllSubmenusLevel_2 () {
78                for ( const submenu of submenusLevel_2 ) {
79                    submenu.classList.add('closed')
80                }
81            }
82
83            function hideAllLinksLevel_3 () {
84                for ( const item of itemsLevel_3 ) {
85                    item.classList.remove('show')
86                }
87            }
88
89            function closeSubmenusOnLeaveHeader () {
90                const element = currentElement
91
92                setTimeout( () => {
93
94                    if( element === currentElement ) {
95                        hideAllSubmenusLevel_2()
96                    }
97
98                }, 100 )
99            }
100            
101            body.addEventListener( 'click', () => {
102                hideAllSubmenusLevel_2()
103                hideAllLinksLevel_3()
104            })
105        }
106        
107        else { // MOBILE VERSION
108            
109            if ( ! window.matchMedia("(orientation: landscape)").matches && window.matchMedia("(-webkit-min-device-pixel-ratio: 2)").matches) {
110                mainRight.style.display = 'none'
111        	}
112
113
114            // Set right arrows level 1
115            $( rightArrows ).on( 'click', function () {
116                $(this).parent().parent().find('.submenu').toggleClass('closed')
117                $(this).parent().find('.left_arrow').css('display', 'inline')
118                $(this).hide()
119            })
120
121
122            // Set left arrows level 1
123            $( leftArrows ).on( 'click', function () {
124                $(this).parent().parent().find('.submenu').toggleClass('closed')
125                $(this).parent().find('.right_arrow').css('display', 'inline')
126                $(this).hide()
127                $('#header .submenu').find('.p_submenuN3').hide()
128
129                // Set left arrows level 2
130                $('#header .header-main-links .left_arrow2').each( function () {
131                    if($(this).css('display') == 'block'){
132                        $(this).hide()
133                        $(this).parent().find('.right_arrow2').show()
134                    }
135                })
136            })
137            
138
139            // Set right arrows level 2
140            $( rightArrows2 ).on( 'click', function () {
141                $(this).parent().parent().find('.p_submenuN3').show()
142                $(this).parent().find('.left_arrow2').show()
143                $(this).hide()
144            })
145
146
147            // Set left arrows level 2
148            $( leftArrows2 ).on( 'click', function () {
149                $(this).parent().parent().find('.p_submenuN3').hide()
150                $(this).parent().find('.right_arrow2').show()
151                $(this).hide()
152            })
153        }
154    }
155
156    function resetMainMenu(){
157        $('#header .header-more-links .submenu').addClass('closed');
158        $('#header .header-links-container').removeAttr('style', '');
159        $('#header .header-main-links .right_arrow').removeAttr('style', '');
160        $('#header .header-main-links .right_arrow2').removeAttr('style', '');
161        $('#header .header-main-links .left_arrow').removeAttr('style', '');
162        $('#header .header-main-links .left_arrow2').removeAttr('style', '');
163        $('#header .header-main-links .p_submenuN3').removeAttr('style', '');
164    }
165})