https://www.lotte.co.jp/corporate/js/webacc.js

1window.addEventListener('load', function(){
2	//waFocus();
3	movMain();
4	topMovBtFocus();
5	gnavControl();
6	spNavLoop();
7});
8
9const spNavLoop = () =>{
10	let element = document.querySelector('.st-HeaderLogo_Item');
11	let style = window.getComputedStyle(element);
12	let cssJg = ("block" === style.getPropertyValue('display'));
13	
14	let clsBt=document.querySelectorAll(".spMenuClose a,.navBackBt a");
15	let strtBt=document.querySelector(".wa-skipLink a");
16	
17	for(let c=0;c<clsBt.length;c++){
18		
19		clsBt[c].addEventListener("keydown", (event) => {
20			let tabKey = ( 9 === event.keyCode );
21			let shiftKey = event.shiftKey;
22			
23			if(cssJg && !shiftKey && tabKey && clsBt[c] === document.activeElement ){
24				strtBt.focus();
25			}
26		});
27	}
28}
29
30const movMain = () =>{
31	let contBt=document.getElementById("wa-skipLink").querySelector("a");
32	contBt.addEventListener("click",(e) =>{
33		e.preventDefault();
34		let cont=document.querySelector("main");
35		let contTop=cont.getBoundingClientRect().top;
36		let contFstA=cont.querySelector("a");
37		contFstA.focus();
38		window.scrollTo({top:contTop,behavior: 'smooth'});
39		return false;
40	})
41	
42}
43
44const topMovBtFocus = () =>{
45	let t=document.getElementById("movTopBt");
46	t.addEventListener("click",() =>{
47		//let pgFstA=document.querySelector("a");
48		let pgFstA=document.querySelector(".st-HeaderLogo_Item");
49		pgFstA.focus();
50	});
51}
52
53
54/************************グローバルナビ制御 start************************/
55const gnavControl = () =>{
56	
57	/************************PC用ナビ制御************************/
58	
59	/**PC用変数**/
60	let gNav=document.getElementById("gnvNew");
61	let contBt=gNav.querySelectorAll(".newNavMain > li button");
62	
63	/**SP用変数**/
64	let spHmBt=document.querySelector(".spMenuBt");
65	let backBt=gNav.querySelectorAll(".navBackBt a");
66	let firstBt=gNav.querySelector(".newNavMain").children;
67	let firstSubBts=gNav.querySelector(".newNavSub");
68	let closeBt=gNav.querySelector(".spMenuClose a");
69	
70	
71	
72	contBt.forEach((element) => {
73		let targMenu=element.nextElementSibling;
74		
75		element.parentNode.addEventListener("mouseover",() =>{
76			if(window.innerWidth >=769){
77				targMenu.hidden = false;
78				element.setAttribute('aria-expanded', 'true');
79			}
80			
81		});
82		element.parentNode.addEventListener("mouseleave",() =>{
83			if(window.innerWidth >=769){
84				targMenu.hidden = true;
85				element.setAttribute('aria-expanded', 'false');
86			}
87		});
88		
89		element.addEventListener("focusin", () => {
90			if(window.innerWidth >=769){
91				targMenu.hidden = false;
92				element.setAttribute('aria-expanded', 'true');
93			}
94			
95		});
96		
97		element.parentNode.addEventListener("focusout", (ev) => {
98			if(window.innerWidth >=769){
99				if (!ev.currentTarget.contains(ev.relatedTarget)) {
100					targMenu.hidden = true;
101					element.setAttribute('aria-expanded', 'false');
102				}
103			}
104			
105		}, true);
106		
107		element.addEventListener("click", () => {
108			targMenu.hidden = !targMenu.hidden;
109			if('true' === element.getAttribute('aria-expanded')){
110				element.setAttribute('aria-expanded', 'false');
111				Array.from(firstBt).forEach((bt) => {
112					bt.querySelector("a,button").classList.remove("inert");
113				});
114				firstSubBts.classList.remove("inert");
115			}else{
116				element.setAttribute('aria-expanded', 'true');
117				Array.from(firstBt).forEach((bt) => {
118					bt.querySelector("a,button").classList.add("inert");
119				});
120				firstSubBts.classList.add("inert");
121				closeBt.classList.add("inert");
122			}
123			
124		});
125	});
126	
127	
128	/************************SP用ナビ制御************************/
129	
130	
131	spHmBt.addEventListener("click",() =>{
132		event.preventDefault();
133		SpMenuOpCl(gNav);
134	});
135	
136	closeBt.addEventListener("click",() =>{
137		event.preventDefault();
138		SpMenuOpCl(gNav);
139	});
140	
141	
142	backBt.forEach((element) => {
143		element.addEventListener("click",() =>{
144			event.preventDefault();
145			Array.from(firstBt).forEach((bt) => {
146				//bt.querySelector("a,button").inert = false;
147				bt.querySelector("a,button").classList.remove("inert");
148			});
149			//firstSubBts.inert = false;
150			firstSubBts.classList.remove("inert");
151			closeBt.classList.remove("inert")
152			element.closest(".mainSubMenu").hidden=!element.closest(".mainSubMenu").hidden;
153			element.closest(".mainSubMenu").previousElementSibling.setAttribute('aria-expanded', 'false');
154		});
155	});
156}
157
158

159const SpMenuOpCl = (gNav) =>{
160	let spHmBt=document.querySelector(".spMenuBt");
161	let mainCont=document.querySelector("main");
162	let footCont=document.querySelector(".common_Include_Footer");
163	let body=document.querySelector("body");
164	let visMen=document.querySelectorAll(".mainSubMenu:not([hidden])");
165	let inerts=gNav.querySelectorAll(".inert");
166	
167	gNav.hidden = !gNav.hidden;
168	
169	if (gNav.hidden) {
170		spHmBt.setAttribute('aria-expanded', 'false');
171		spHmBt.innerHTML="MENU";
172		mainCont.classList.remove("inert");
173		footCont.classList.remove("inert");
174		body.classList.remove("scrollLock");
175		
176		visMen.forEach((trg) => {
177			trg.hidden=true;
178			trg.previousElementSibling.setAttribute('aria-expanded', 'false');
179		});
180		inerts.forEach((inert) => {
181			inert.classList.remove("inert");
182		});
183	}else{
184		spHmBt.setAttribute('aria-expanded', 'true');
185		spHmBt.innerHTML="CLOSE";
186		mainCont.classList.add("inert");
187		footCont.classList.add("inert");
188		body.classList.add("scrollLock");
189	}
190}
191
192/************************グローバルナビ制御 end************************/