1/** 2 * navigation.js 3 * 4 */ 5 6"use strict"; 7var u = new COMMON.Util(); 8//fadeIn,fadeOut管ç 9let fadeOutTimeout = null; 10 11/** 12 * @method fadeIn 13 */ 14function fadeIn(element) { 15 if (fadeOutTimeout) { 16 clearTimeout(fadeOutTimeout); // ååã® fadeOut ããã£ã³ã»ã« 17 fadeOutTimeout = null; 18 } 19 element.classList.remove('is-hidden'); 20 element.classList.remove('is-fadeout'); 21 element.classList.add('is-visible'); 22} 23 24/** 25 * @method fadeOut 26 */ 27function fadeOut(element) { 28 element.classList.add('is-fadeout'); 29 30 fadeOutTimeout = setTimeout(() => { 31 element.classList.remove('is-visible'); 32 element.classList.add('is-hidden'); 33 fadeOutTimeout = null; 34 }, 300); 35} 36 37/** 38 * @method footerLinkList 39 */ 40function footerLinkList() { 41 /** 42 * options 43 */ 44 const c = { 45 factorElement: '.js-footer-link-list', 46 pcHidden: '.js-footer-link-list__pc-hidden', 47 spHidden: '.js-footer-link-list__sp-hidden', 48 }; 49 50 if (u.isRangePC()) { 51 document.querySelectorAll(c.pcHidden).forEach(link =>{ 52 link.style.display = 'none'; 53 }); 54 55 } else { 56 document.querySelectorAll(c.spHidden).forEach(link =>{ 57 link.style.display = 'none'; 58 }); 59 60 // footer-link-columnã®åæ§æ 61 const footerLinkColumn = document.querySelector('.footer-link-column'); 62 const ulElement = document.createElement('ul'); 63 const footerLinks = document.querySelectorAll('.js-footer-link-list'); 64 const sortedFooterLinks = Array.from(footerLinks).sort((a, b) => { 65 return a.getAttribute('data-order') - b.getAttribute('data-order'); 66 }); 67 68 69 ulElement.className = 'footer-link-list'; 70 footerLinkColumn.appendChild(ulElement); 71 sortedFooterLinks.forEach(link => { 72 ulElement.appendChild(link); 73 }); 74 } 75 76} 77 78/** 79 * @method gnavAccordion 80 */ 81function gnavAccordion() { 82 // vars 83 const factorElms = document.querySelectorAll('.js-gnav-accordion'); 84 const accTrigger = '.js-gnav-accordion__trigger'; 85 const accPanel = '.js-gnav-accordion__panel'; 86 const display = 'allHide'; // åæ表示è¨å®ï¼ãallHideãorãallShowã 87 const panelPc = 'data-panel-pc'; 88 const panelSp = 'data-panel-sp'; 89 const activeName = 'is-active'; 90 const openName = 'is-open'; 91 92 // exit 93 if (!factorElms || factorElms.length === 0) { return false; } 94 95 // function 96 function close(_triggerElm, _panelElm) { 97 _triggerElm.classList.remove(activeName); 98 _panelElm.classList.remove(openName); 99 } 100 101 function open(_triggerElm, _panelElm) { 102 _triggerElm.classList.add(activeName); 103 _panelElm.classList.add(openName); 104 } 105 106 // setting 107 factorElms.forEach((elm) => { 108 const wrapElm = elm; 109 const triggerElm = wrapElm.querySelector(accTrigger); 110 const panelElm = wrapElm.querySelector(accPanel); 111 const displayPc = wrapElm.getAttribute(panelPc); 112 const displaySp = wrapElm.getAttribute(panelSp); 113 if (!u.isRangeSP()) { 114 if (displayPc === 'esc') { return true; } 115 } else if (displaySp === 'esc') { return true; } 116 switch (display) { 117 // å ¨é表示ã®å ´å 118 case 'allHide': 119 close(triggerElm, panelElm); 120 break; 121 // å ¨è¡¨ç¤ºã®å ´å 122 case 'allShow': 123 open(triggerElm, panelElm); 124 break; 125 default: 126 break; 127 } 128 if (!u.isRangeSP()) { 129 switch (displayPc) { 130 // PCæé表示ã®å ´å 131 case 'close': 132 close(triggerElm, panelElm); 133 break; 134 // PCæ表示ã®å ´å 135 case 'open': 136 open(triggerElm, panelElm); 137 break; 138 default: 139 break; 140 } 141 } else { 142 switch (displaySp) { 143 // SPæé表示ã®å ´å 144 case 'close': 145 close(triggerElm, panelElm); 146 break; 147 // SPæ表示ã®å ´å 148 case 'open': 149 open(triggerElm, panelElm); 150 break; 151 default: 152 break; 153 } 154 } 155 // control 156 triggerElm.addEventListener('click', (e) => { 157 e.preventDefault(); 158 if (!u.isRangeSP()) { 159 if (displayPc === 'esc') { return true; } 160 } else if (displaySp === 'esc') { return true; } 161 if (wrapElm) { 162 if (triggerElm.classList.contains(activeName)) {
163 close(triggerElm, panelElm); 164 } else { 165 open(triggerElm, panelElm); 166 } 167 } 168 }); 169 }); 170} 171 172/** 173 * @method ariaControl 174 * - aria-expandedãaria-controlsãaria-hiddenã®åãæ¿ãå¶å¾¡ 175 */ 176function ariaControl(_trigger, _boolean, _callback) { 177 const expandedAttr = 'aria-expanded'; 178 const targetHiddensAttr = 'aria-hidden'; 179 const targetControlsAttr = 'aria-controls'; 180 const targetId = _trigger.getAttribute(targetControlsAttr); 181 const targetElm = document.getElementById(targetId); 182 if (_callback) { 183 _callback(); 184 } 185 if (_boolean) { 186 _trigger.setAttribute(expandedAttr, 'true'); 187 targetElm.setAttribute(targetHiddensAttr, 'false'); 188 } else { 189 _trigger.setAttribute(expandedAttr, 'false'); 190 targetElm.setAttribute(targetHiddensAttr, 'true'); 191 } 192} 193 194/** 195 * @method headerControl 196 * - headerå¶å¾¡ 197 */ 198function headerControl() { 199 /** 200 * options 201 */ 202 const c = { 203 factorElement: '#common-header', 204 gnavElement: '.js-header-gnav', 205 gnavListElement: '.js-header-gnav__list', 206 gnavTriggerElement: '.js-header-gnav__trigger', 207 gnavMegamenuElement: '.js-header-gnav__megamenu', 208 subNavTriggerElement: '.js-header-snav__trigger', 209 subNavMegamenuElement: '.js-header-snav__menu', 210 menuTriggerElement: '.js-header-menu__trigger', 211 menuMegamenuElement: '.js-header-menu__megamenu', 212 menuContainerElement: '.js-header-menu__container', 213 cloneChatElement: '.js-header-clone__chat', 214 cloneSupportElement: '.js-header-clone__support', 215 cloneSearchElement: '.js-header-clone__search', 216 }; 217 218 const factorElm = document.getElementById(c.factorElement.split('#')[1]); 219 if (!factorElm || factorElm.length === 0) { return false; } 220 221 /* ã¯ãã¼ã³ã®çæ */ 222 // PCæã®ã°ãããçãSPæã®ã¡ãã¥ã¼å ã«ã³ãã¼ï¼ãã¶ã¤ã³ã§ã¯ãã¼ã³ãå¿ è¦ãªå ´åã®ã¿ä½¿ç¨ãä¸è¦ãªå ´åã¯åé¤ï¼ 223 function headerClone() { 224 if(document.querySelector(c.menuContainerElement)) { 225 // SPæã¡ãã¥ã¼ç¨ã®ã¨ãªã¢ã«è¦ç´ ãã¯ãã¼ã³ 226 if (u.isRangeSP()) { 227 document.querySelectorAll(c.cloneSearchElement).forEach(e =>{ 228 document.querySelector(c.menuContainerElement).appendChild(e); 229 }); 230 } 231 document.querySelectorAll(c.cloneChatElement).forEach(e =>{ 232 document.querySelector(c.menuContainerElement).appendChild(e.cloneNode(true)); 233 }); 234 document.querySelectorAll(c.cloneSupportElement).forEach(e =>{ 235 document.querySelector(c.menuContainerElement).appendChild(e.cloneNode(true)); 236 }); 237 238 // SPæã¡ãã¥ã¼ç¨ã®ã¨ãªã¢å ã« 239 const idElms = document.querySelector(c.menuContainerElement).querySelectorAll('[id]'); 240 const ariaControlsElms = document.querySelector(c.menuContainerElement).querySelectorAll('[aria-controls]'); 241 const cloneIdName = '__sp';// ã¯ãã¼ã³ããè¦ç´ ã®æ«å°¾ã«è¿½å ããååãå®ç¾© 242 243 idElms.forEach(e => { 244 const id = e.id; 245 e.setAttribute('id', `${id}${cloneIdName}`); 246 }); 247 ariaControlsElms.forEach(e => { 248 const ariaControls = e.getAttribute('aria-controls'); 249 const href = e.getAttribute('aria-controls'); 250 e.setAttribute('aria-controls', `${ariaControls}${cloneIdName}`); 251 if (href === ariaControls) { 252 e.setAttribute('aria-controls', `${href}${cloneIdName}`); 253 } 254 }); 255 } 256 } 257 headerClone(); 258 259 // å ç¥è¦ç´ ãè¦ã¤ããé¢æ° 260 function findAncestor(element, className) { 261 while (element && !element.classList.contains(className)) { 262 element = element.parentElement; 263 } 264 return element; 265 } 266 267 /** 268 * vars 269 */ 270 const bodyElm = document.body; 271 const gnavTriggerElms = document.querySelectorAll(c.gnavTriggerElement); 272 const gnavMegamenuElms = document.querySelectorAll(c.gnavMegamenuElement); 273 const gnavWrapElms = []; 274 const subNavTriggerElms = document.querySelectorAll(c.subNavTriggerElement); 275 const subNavMegamenuElms = document.querySelectorAll(c.subNavMegamenuElement);
276 const menuTriggerElms = document.querySelectorAll(c.menuTriggerElement); 277 const menuMegamenuElms = document.querySelectorAll(c.menuMegamenuElement); 278 const menuWrapElms = []; 279 const subNavDisplayClass = 'js-header-snav__display'; 280 const headerFixedName = 'is-header-fixed'; 281 const activeName = 'is-active'; 282 const currentName = 'is-current'; 283 const openName = 'is-open'; 284 const hiddenName = 'is-hidden'; 285 const visibleName = 'is-visible'; 286 const activeMenuName = 'is-active-menu'; 287 const overlayName = '.js-main-overlay'; 288 const overlayHtml = document.createElement('div'); 289 const scrollBehaviorVar = '--scroll-behavior'; 290 const scrollBehaviorSmooth = 'smooth'; 291 const scrollBehaviorAuto = 'auto'; 292 const firstDir = location.pathname.replace('index.html', '').split('/')[1]; 293 let setPos = 0; 294 295 gnavTriggerElms.forEach(e => { 296 gnavWrapElms.push(e.parentNode); 297 }) 298 menuTriggerElms.forEach(e => { 299 menuWrapElms.push(e.parentNode); 300 }) 301 302 /* ãªã¼ãã¼ã¬ã¤ã®çæ */ 303 overlayHtml.className = `main-overlay ${overlayName.split('.')[1]}`; 304 document.body.appendChild(overlayHtml); 305 const overlayElm = document.querySelector(overlayName); 306 307 /** 308 * 追å¾å¶å¾¡ 309 */ 310 function headerFixed() { 311 // vars 312 const dispY = 50; 313 // functionï¼Y軸ä¸ã®ä½ç½®ãå¶å¾¡ 314 const setTop = function (_top) { 315 if (_top > dispY) { 316 bodyElm.classList.add(headerFixedName); 317 } else if (!bodyElm.classList.contains(activeMenuName)) { 318 bodyElm.classList.remove(headerFixedName); 319 } 320 }; 321 // functionï¼X軸ä¸ã®ä½ç½®ãå¶å¾¡ 322 const setLeft = function (left) { 323 if (u.isRangePC()) { 324 factorElm.style.left = `-${left}px`; 325 gnavMegamenuElms.forEach(e => { 326 e.style.left = `-${left}px`; 327 }); 328 menuMegamenuElms.forEach(e => { 329 e.style.left = `-${left}px`; 330 }); 331 } 332 }; 333 // controllï¼PCãããã¼èªã¿è¾¼ã¿æå¶å¾¡ 334 const top = window.scrollY || document.documentElement.scrollTop; 335 setTop(top); 336 const left = window.scrollX || document.documentElement.scrollLeft; 337 setLeft(left); 338 // controllï¼PCããã㼠横ã¹ã¯ã¼ã«å¶å¾¡ 339 window.addEventListener('scroll', () => { 340 const top = window.scrollY || document.documentElement.scrollTop; 341 setTop(top); 342 const left = window.scrollX || document.documentElement.scrollLeft; 343 setLeft(left); 344 }); 345 } 346 347 /** 348 * éãããã¿ã³å¶å¾¡ 349 */ 350 function closeControl(_wrap, _trigger, _megamenu) { 351 setPos = document.defaultView.getComputedStyle(bodyElm, null).top; 352 setPos = setPos.replace(/-(\d*)px/, '$1'); 353 bodyElm.classList.remove(activeMenuName); 354 _wrap.classList.remove(activeName); 355 ariaControl(_trigger, false, () => { 356 _megamenu.forEach(elm => { 357 fadeOut(elm); 358 }); 359 }); 360 overlayElm.classList.remove(activeName)// ãã§ã¼ãã¢ã¦ã:CSSã§å¶å¾¡ 361 overlayElm.classList.add('is-fadeout'); 362 setTimeout(() => { 363 overlayElm.classList.remove('is-visible'); 364 overlayElm.classList.add('is-hidden'); 365 }, 300); 366 if (u.isRangeSP()) { 367 bodyElm.style.top = 'auto'; 368 window.scrollTo(0, setPos); 369 document.querySelector(':root').style.setProperty(scrollBehaviorVar, scrollBehaviorSmooth); 370 } 371 } 372 373 374 /** 375 * ã°ãã¼ãã«ããå¶å¾¡ 376 */ 377 function headerGnav() { 378 // exit 379 if (gnavTriggerElms.length === 0) { return false; } 380 // init 381 gnavTriggerElms.forEach(gnavTrigger =>{ 382 ariaControl(gnavTrigger, false, () => { 383 gnavMegamenuElms.forEach(gnavMegamenu => { 384 gnavMegamenu.classList.add(hiddenName);// hide
385// gnavMegamenu.classList.remove(openName);// hideï¼CSSã§å¶å¾¡ 386 }) 387 }); 388 }); 389 // control 390 if (u.isRangePC()) { // PCæå¦ç 391 gnavTriggerElms.forEach(gnavTrigger =>{ 392 gnavTrigger.addEventListener('click', (e) => { 393 e.preventDefault(); 394 const targetPanelElms = document.querySelectorAll(`#${gnavTrigger.getAttribute('aria-controls')}${c.gnavMegamenuElement}`); 395 const wrapElm = gnavTrigger.parentNode; 396 397 if (!wrapElm.classList.contains(activeName)) { 398 // åæå 399 menuWrapElms.forEach(menuWrap => { 400 menuWrap.classList.remove(activeName); 401 }); 402 menuTriggerElms.forEach(menuTrigger =>{ 403 ariaControl(menuTrigger, false, () => { 404 menuMegamenuElms.forEach(menuMegamenu => { 405 menuMegamenu.classList.remove(openName);// slideUpï¼CSSã§å¶å¾¡ 406 }) 407 }); 408 }); 409 gnavWrapElms.forEach(gnavWrap => { 410 gnavWrap.classList.remove(activeName); 411 }); 412 gnavTriggerElms.forEach(gnavTrigger =>{ 413 ariaControl(gnavTrigger, false, () => { 414 gnavMegamenuElms.forEach(gnavMegamenu => { 415 gnavMegamenu.classList.add(hiddenName);// hide
416// gnavMegamenu.classList.remove(openName);// slideUpï¼CSSã§å¶å¾¡ 417 }) 418 }); 419 }); 420 // å®è¡ 421 wrapElm.classList.add(activeName); 422 ariaControl(gnavTrigger, true, () => { 423 targetPanelElms.forEach(targetPanel => { 424 fadeIn(targetPanel); 425 targetPanel.removeAttribute('style'); 426 targetPanel.style.height = `${targetPanel.offsetHeight}px`; 427// targetPanel.classList.add(openName);// slideDownï¼CSSã§å¶å¾¡ 428 }); 429 }); 430 overlayElm.classList.add(activeName); 431 overlayElm.classList.remove('is-hidden'); 432 overlayElm.classList.remove('is-fadeout'); 433 overlayElm.classList.add('is-visible'); 434 if (!bodyElm.classList.contains(activeMenuName)) { 435 bodyElm.classList.add(activeMenuName); 436 } 437 } else { 438 closeControl(wrapElm, gnavTrigger, targetPanelElms); 439 } 440 }); 441 }); 442 } else { // SPæå¦ç 443 gnavTriggerElms.forEach(gnavTrigger =>{ 444 // ã¢ãã¡ã¼ã·ã§ã³ç¶æ ã管çãããã©ã° 445 let isAnimating = false; 446 447 // ããã¦ã³ã¹é¢æ° 448 const debounce = (func, wait) => { 449 let timeout; 450 return function executedFunction(...args) { 451 const later = () => { 452 clearTimeout(timeout); 453 func(...args); 454 }; 455 clearTimeout(timeout); 456 timeout = setTimeout(later, wait); 457 }; 458 }; 459 460 // ã¯ãªãã¯ãã³ãã©ã¼ 461 gnavTrigger.addEventListener('click', debounce((e) => { 462 e.preventDefault(); 463 464 // ã¢ãã¡ã¼ã·ã§ã³ä¸ã¯å¦çãã¹ããã 465 if (isAnimating) return; 466 467 const targetPanelElms = document.querySelectorAll(`#${gnavTrigger.getAttribute('aria-controls')}${c.gnavMegamenuElement}`); 468 const wrapElm = gnavTrigger.parentNode; 469 470 // ã¢ãã¡ã¼ã·ã§ã³éå§ 471 isAnimating = true; 472 473 if (!wrapElm.classList.contains(activeName)) { 474 // åæåå¦ç 475 Promise.all([ 476 // ã¡ãã¥ã¼é¢é£ã®åæå 477 new Promise(resolve => { 478 menuWrapElms.forEach(menuWrap => { 479 menuWrap.classList.remove(activeName); 480 }); 481 menuTriggerElms.forEach(menuTrigger => { 482 ariaControl(menuTrigger, false, () => { 483 menuMegamenuElms.forEach(menuMegamenu => { 484 fadeOut(menuMegamenu); 485 }); 486 }); 487 }); 488 resolve(); 489 }), 490 491 // ã°ãã¼ãã«ããé¢é£ã®åæå 492 new Promise(resolve => { 493 gnavWrapElms.forEach(gnavWrap => { 494 gnavWrap.classList.remove(activeName); 495 }); 496 gnavTriggerElms.forEach(gnavTrigger => { 497 ariaControl(gnavTrigger, false, () => { 498 gnavMegamenuElms.forEach(gnavMegamenu => { 499 gnavMegamenu.classList.add(hiddenName); 500 }); 501 }); 502 }); 503 resolve(); 504 }) 505 ]).then(() => { 506 // æ°ããã¡ãã¥ã¼ã表示 507 wrapElm.classList.add(activeName); 508 ariaControl(gnavTrigger, true, () => { 509 targetPanelElms.forEach(targetPanel => { 510 fadeIn(targetPanel); 511 const winH = window.innerHeight; 512 const menuHeight = winH - factorElm.offsetHeight; 513 targetPanel.style.maxHeight = `${menuHeight}px`; 514 }); 515 }); 516 517 // ãªã¼ãã¼ã¬ã¤ã®è¡¨ç¤º 518 overlayElm.classList.add(activeName); 519 overlayElm.classList.remove('is-hidden'); 520 overlayElm.classList.remove('is-fadeout'); 521 overlayElm.classList.add('is-visible'); 522 523 if (!bodyElm.classList.contains(activeMenuName)) { 524 bodyElm.classList.add(activeMenuName); 525 } 526 527 // ã¢ãã¡ã¼ã·ã§ã³å®äº 528 setTimeout(() => { 529 isAnimating = false; 530 }, 300); // ã¢ãã¡ã¼ã·ã§ã³æéã«å¿ãã¦èª¿æ´ 531 }); 532 } else { 533 closeControl(wrapElm, gnavTrigger, targetPanelElms);
534 targetPanelElms.forEach(targetPanel => { 535 targetPanel.removeAttribute('style'); 536 }); 537 538 // ã¢ãã¡ã¼ã·ã§ã³å®äº 539 setTimeout(() => { 540 isAnimating = false; 541 }, 300); // ã¢ãã¡ã¼ã·ã§ã³æéã«å¿ãã¦èª¿æ´ 542 } 543 }, 50)); // ããã¦ã³ã¹æé 544 }); 545 } 546 } 547 548 549 /** 550 * ãµãã¡ãã¥ã¼å¶å¾¡ 551 */ 552 function headerSubNav() { 553 // exit 554 if (subNavTriggerElms.length === 0) { return false; } 555 // control 556 if (u.isRangePC()) { // PCæå¦ç 557 // init 558 subNavTriggerElms.forEach(subNavTrigger =>{ 559 const targetPanelElms = document.querySelectorAll(`#${subNavTrigger.getAttribute('aria-controls')}${c.subNavMegamenuElement}`); 560 if(subNavTrigger.classList.contains(subNavDisplayClass)){ 561 const wrapElm = subNavTrigger.parentNode; 562 wrapElm.classList.add(activeName); 563 ariaControl(subNavTrigger, true, () => { 564 targetPanelElms.forEach(subNavMegamenu => { 565 subNavMegamenu.classList.add(visibleName);// visible 566 }) 567 }); 568 569 } else { 570 ariaControl(subNavTrigger, false, () => { 571 targetPanelElms.forEach(subNavMegamenu => { 572 subNavMegamenu.classList.add(hiddenName);// hide
573 }) 574 }); 575 } 576 }); 577 subNavTriggerElms.forEach(subNavTrigger =>{ 578 subNavTrigger.addEventListener('click', (e) => { 579 e.preventDefault(); 580 const targetPanelElms = document.querySelectorAll(`#${subNavTrigger.getAttribute('aria-controls')}${c.subNavMegamenuElement}`); 581 const wrapElm = subNavTrigger.parentNode; 582 const parentElm = wrapElm.closest(c.gnavMegamenuElement); 583 584 if (!wrapElm.classList.contains(activeName)) { 585 // åæå 586 const subNavInitElms = parentElm.querySelectorAll(c.subNavTriggerElement); 587 588 subNavInitElms.forEach(subNavInit => { 589 const subNavInitWrap = subNavInit.parentNode; 590 const subNavInitPanel = subNavInitWrap.querySelectorAll(c.subNavMegamenuElement); 591 subNavInitWrap.classList.remove(activeName);// hide 592 ariaControl(subNavInit, false, () => { 593 subNavInitPanel.forEach(subNavMegamenu => { 594 subNavMegamenu.classList.add(hiddenName);// hide
595 }) 596 }); 597 }); 598 // å®è¡ 599 wrapElm.classList.add(activeName); 600 ariaControl(subNavTrigger, true, () => { 601 targetPanelElms.forEach(targetPanel => { 602 fadeIn(targetPanel); 603 //ã¡ãã¥ã¼ã®é«ãèª¿æ´ 604 const ancestor = findAncestor(targetPanel, c.gnavMegamenuElement.split('.')[1]); 605 targetPanel.removeAttribute('style'); 606 if(targetPanel.offsetHeight > ancestor.offsetHeight) { 607 const innerChild = ancestor.firstElementChild; 608 const style = window.getComputedStyle(innerChild); 609 const paddingTop = parseFloat(style.paddingTop); 610 const paddingBottom = parseFloat(style.paddingBottom); 611 const menuHeight = targetPanel.offsetHeight + paddingTop + paddingBottom; 612 ancestor.style.height = `${menuHeight}px`; 613 } 614 }); 615 }); 616 } else { 617 wrapElm.classList.remove(activeName); 618 ariaControl(subNavTrigger, false, () => { 619 targetPanelElms.forEach(elm => { 620 fadeOut(elm); 621 }); 622 }); 623 } 624 }); 625 }); 626 } 627 } 628 629 /** 630 * ãã³ãã¼ã¬ã¼ã¡ãã¥ã¼å¶å¾¡ 631 */ 632 function headerMenu() { 633 // exit 634 if (menuTriggerElms.length === 0) { return false; } 635 // init 636 menuTriggerElms.forEach(menuTrigger =>{ 637 ariaControl(menuTrigger, false, () => { 638 menuMegamenuElms.forEach(menuMegamenu => { 639 menuMegamenu.classList.add(hiddenName);// hide
640 }) 641 }); 642 }); 643 // control 644 menuTriggerElms.forEach(menuTrigger =>{ 645 menuTrigger.addEventListener('click', (e) => { 646 e.preventDefault(); 647 const targetPanelElms = document.querySelectorAll(`#${menuTrigger.getAttribute('aria-controls')}${c.menuMegamenuElement}`); 648 const wrapElm = menuTrigger.parentNode; 649 650 if (!wrapElm.classList.contains(activeName)) { 651 // åæå 652 menuWrapElms.forEach(menuWrap => { 653 menuWrap.classList.remove(activeName); 654 }); 655 menuTriggerElms.forEach(_menuTrigger =>{ 656 ariaControl(_menuTrigger, false, () => { 657 menuMegamenuElms.forEach(menuMegamenu => { 658 menuMegamenu.classList.add(hiddenName);// hide 659 }) 660 }); 661 }); 662 gnavWrapElms.forEach(gnavWrap => { 663 gnavWrap.classList.remove(activeName); 664 }); 665 gnavTriggerElms.forEach(gnavTrigger =>{ 666 ariaControl(gnavTrigger, false, () => { 667 gnavMegamenuElms.forEach(gnavMegamenu => { 668 gnavMegamenu.classList.add(hiddenName);// hide
669 }) 670 }); 671 }); 672 document.querySelector(':root').style.setProperty(scrollBehaviorVar, scrollBehaviorAuto); 673 // å®è¡ 674 wrapElm.classList.add(activeName); 675 ariaControl(menuTrigger, true, () => { 676 targetPanelElms.forEach(targetPanel => { 677 fadeIn(targetPanel); 678 }); 679 }); 680 overlayElm.classList.add(activeName); 681 overlayElm.classList.remove('is-hidden'); 682 overlayElm.classList.remove('is-fadeout'); 683 overlayElm.classList.add('is-visible'); 684 setPos = window.scrollY || document.documentElement.scrollTop; 685 if (!bodyElm.classList.contains(activeMenuName)) { 686 bodyElm.style.top = `-${setPos}px`; 687 bodyElm.classList.add(activeMenuName); 688 } 689 } else { 690 closeControl(wrapElm, menuTrigger, targetPanelElms); 691 } 692 }); 693 }); 694 } 695 696 /** 697 * ãªã¼ãã¼ã¬ã¤å¶å¾¡ 698 */ 699 function overlayControl() { 700 701 // exit 702 if (overlayElm.length === 0) { return false; } 703 704 overlayElm.addEventListener('click', () => { 705 setPos = document.defaultView.getComputedStyle(bodyElm, null).top; 706 setPos = setPos.replace(/-(\d*)px/, '$1'); 707 bodyElm.classList.remove(activeMenuName); 708 menuWrapElms.forEach(menuWrap => { 709 menuWrap.classList.remove(activeName); 710 }); 711 menuTriggerElms.forEach(menuTrigger =>{ 712 ariaControl(menuTrigger, false, () => { 713 menuMegamenuElms.forEach(menuMegamenu => { 714 fadeOut(menuMegamenu); 715 }); 716 }); 717 }); 718 if (u.isRangePC()) { 719 gnavWrapElms.forEach(gnavWrap => { 720 gnavWrap.classList.remove(activeName); 721 }); 722 gnavTriggerElms.forEach(gnavTrigger =>{ 723 ariaControl(gnavTrigger, false, () => { 724 gnavMegamenuElms.forEach(gnavMegamenu => { 725 fadeOut(gnavMegamenu); 726 gnavMegamenu.classList.remove(openName);// slideUpï¼CSSã§å¶å¾¡ 727 }); 728 }); 729 }); 730 } else { 731 gnavWrapElms.forEach(gnavWrap => { 732 gnavWrap.classList.remove(activeName); 733 }); 734 gnavTriggerElms.forEach(gnavTrigger =>{ 735 ariaControl(gnavTrigger, false, () => { 736 gnavMegamenuElms.forEach(gnavMegamenu => { 737 fadeOut(gnavMegamenu); 738 gnavMegamenu.classList.remove(openName);// slideUpï¼CSSã§å¶å¾¡ 739 }); 740 }); 741 }); 742 bodyElm.style.top = 'auto'; 743 window.scrollTo(0, setPos); 744 } 745 overlayElm.classList.remove(activeName);// ãã§ã¼ãã¢ã¦ãï¼CSSã§å¶å¾¡ 746 overlayElm.classList.add('is-fadeout'); 747 setTimeout(() => { 748 overlayElm.classList.remove('is-visible'); 749 overlayElm.classList.add('is-hidden'); 750 }, 300); 751 }); 752 } 753 754 /** 755 * init 756 */ 757 footerLinkList(); 758 headerGnav(); 759 headerSubNav(); 760 headerMenu(); 761 if (u.isRangeSP()) { 762 gnavAccordion(); 763 } 764 overlayControl(); 765} 766 767 768/** 769 * @execution 770 */ 771document.addEventListener("DOMContentLoaded", () => { 772 headerControl(); 773});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.