https://www.sediarreda.com/content/templates/sa-h/assets/js/modules/saMegamenu.js

1/** GESTIONE DELLE MEGAMENU<br><br> 
2 *  versione sa-h
3 *  @module saMegamenu
4 *  
5*/
6
7const toggle_menu_mobile = document.querySelectorAll('.sa-toggle-menumobile')
8const megamenu_lang_sel  = document.querySelector('#samegamenu-lang-selector');
9
10const hamburger = document.querySelector('#sa-menumob');   //('.header__cta--hamburger');
11const navigation_wrapper = document.querySelector('.navigation')
12const header_wrapper = document.querySelector('.header')
13
14//check tablet
15const userAgent = navigator.userAgent.toLowerCase();
16const isMobile  = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || ( window.innerWidth < 992) ? true : false;
17const isTablet = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/.test(userAgent);
18
19// timing options
20//const animateOpt = { duration: 1000,iterations: 1, fill: 'forwards' 	}
21
22export default class saMegamenu {
23	/**
24   * Funzione per gestire l'apertura del megamenu in versione MOBILE
25   */
26	static menuMobile(){
27		//open the menu
28		this.openHamburger();
29		//iterazione su pulsante apri sottomenu
30		toggle_menu_mobile.forEach(item => {
31			item.addEventListener("click", function(){
32				let parent = this.dataset.target;
33				//DEBUG-->console.log(parent);
34				document.querySelector(parent).classList.toggle('sa_collapse');
35			})
36		});
37	}//end menuSa_mobile
38	
39	/**
40   * Funzione per gestire il click sull'icona hamburger menù versione mobile
41	 * richiama la funzione <b>toggleMenuMobile</b>
42   */
43
44	static openHamburger(){
45		hamburger.addEventListener("click", function(){
46			//check if menu is already open
47			//if it is open -> search .sa_collapse elements and remove this class
48			if(this.classList.contains('hamburger__open')){
49				document.querySelectorAll('.sa_collapse').forEach(item => {
50					item.classList.remove('sa_collapse');
51				});
52			}
53			//toggle menu shape
54			this.classList.toggle('hamburger__open');
55			//toggle class on body whne menu mobile is open
56			document.body.classList.toggle("body_menumobile_open");
57			header_wrapper.classList.toggle('header__open--mob');
58
59			/* toggle display to navigation_wrapper element */
60			navigation_wrapper.style.display === 'flex' ?
61				navigation_wrapper.style.display = 'none' :
62				navigation_wrapper.style.display = 'flex' ;
63		});
64		this.toggleChatMobile();
65	}//end openHamburger
66
67
68	 /**
69   * Funzione che gestisce il toggle della chate.<br>
70	 * Quando si apre il menù viene nascosta la chat.<br>
71	 * Usata nella funzione <b>openHamburger</b>
72   */
73	static toggleChatMobile(){
74		//toggle chat widget
75		let widget_chat = document.querySelectorAll('.zopim');
76		if(hamburger.classList.contains('hamburger__open')){
77			 widget_chat.forEach(item => {	
78					item.style.display = 'none !important';
79			})
80		}else{
81			widget_chat.forEach(item => {	
82					item.style.display = 'block';
83			})
84		}
85	}//end toggleChatMobile
86
87
88	/**
89	 * Funzione per resettare gli stili css per menù e sottomenù 
90   * quando si fa il resize da mobile a desktop<br>
91   */
92	/*static resetStyle(){
93		document.querySelectorAll('.sub_nav').forEach(item => {
94			item.removeAttribute('style');
95		});
96		document.querySelectorAll('.subnavigation__menu').forEach(item => {
97			item.removeAttribute('style');
98		});
99
100		//se il megamenu mobile è aperto chiuderlo
101		if(hamburger.classList.contains('hamburger__open')){
102			console.log('opened');
103			hamburger.classList.remove('linkActive');
104		}						
105	}//end resetStyle*/
106	
107	//mobile scroll shows mini logo
108	/** 
109	 * Funzione per mostrare/nascondere il mini logo allo scroll
110   * quando si fa il resize da mobile a desktop<br>
111	 * (dopo 10px di scroll)
112   */
113	static scrollMobile(){
114		let started   = true;
115		let logo_min  = document.querySelector('.sa_logo-mini');
116		let logo_big  = document.querySelector('.sa_logo-big');
117		window.addEventListener('scroll', function(){ 
118			//Here you forgot to update the value
119			let scrollpos = window.scrollY;		
120
121			if(scrollpos > 10 && started){
122				logo_big.style.display = 'none';
123				logo_min.style.display = 'block';
124				started = false;
125			}
126			else if(scrollpos < 10 && !started) {
127				logo_min.style.display = 'none';
128				logo_big.style.display = 'block';
129				started   = true;
130			}
131			//console.log(scrollpos);
132		});
133	}
134	
135	/** 
136	 * start menuTablet
137   * 
138	 *  
139   */ 
140	static	menuTablet(){			
141		let startTouch;

142		firstLevel.forEach(item => {		 
143			//blocco il click
144			item.addEventListener('click', function(event) {
145				event.preventDefault();
146			});
147			item.addEventListener('touchstart', function(event) {
148				startTouch = Date.now();
149				//console.log('start touchstart: ' + startTouch);
150				event.preventDefault;
151				return false;
152			}, true);//end touchstart event
153			//touchend event
154			item.addEventListener('touchend', function(event) {
155				var diff = Date.now() - startTouch;
156				//apro link
157				if(diff > 500){                
158					//console.log('Go to page: ' + event.target);
159					window.location.href =  event.target; //rimanda alla pagina
160				}else{
161					//apro sottomenu
162					let submenu = document.querySelector(item.parentNode.dataset.subnavigation);						
163					saMegamenu.resetStyle();//chiude se trova un menu aperto			
164					item.classList.add('linkActive');
165					submenu.style.display = 'block';
166				}
167			})//end touchevent event
168		});//end foreach
169	}//end menuTablet
170	
171
172	
173	
174	/** 
175	 * Inizializza la classe SaModals
176	 *  
177   */
178	static init(){
179		//DEBUG--> console.log('saMegamenu');
180			
181		if( window.innerWidth > 1140){
182			//this.menuSA_hov();	
183		}else{
184			this.menuMobile();
185			this.scrollMobile();
186		}			
187			
188		if(isTablet){
189			this.menuTablet();
190		}
191		
192		/*if(isMobile){
193			this.menuMobile();
194		}*/
195		
196		/*window.addEventListener("resize", function(){
197			if( window.innerWidth > 1140){
198				saMegamenu.resetStyle();
199			}
200		});*/
201		
202	}
203
204
205}//end SaModals
206