italia2024/js/_enchants/_classify-invisibleTab.js

Italia 2024 assets

(function () {
//invisibleTab:CSS
var insertStyle = document.createElement('style');
insertStyle.insertAdjacentHTML('beforeend', `
/* タブパネル（PC）
-------------------------------------- */
@media print, screen and (min-width: 744px) {
.tab-panel {
overflow: hidden;
visibility: hidden;
height: 0;
opacity: 0;
}

.tab-panel.is-summoned {
visibility: visible;
height: auto;
opacity: 1;
}
}
`);
document.getElementsByTagName('head')[0].appendChild(insertStyle);
})(); ///function invisibleTab:CSS();




(function () {
//add-isSummon.js（URLハッシュ値から、'is-summoned'クラスを付与）
//URLのハッシュ値から、summonHashを取得
const summonHash = window.location.hash.slice(1);

//ウィンドウロード時のイベント
let timerV6PA = 0;
let fnLoadV6PA = function () {
  if (timerV6PA) clearTimeout(timerV6PA);
  timerV6PA = setTimeout(() => {
    //ページ内に.tab-panelが存在するかチェック
    const hasTabPanel = document.querySelector('.tab-panel') !== null;

    if (!summonHash) {
      //if(summonHashがない場合)：最初のタブパネルとタブアイテムにクラスを付与
      const firstTabPanel = document.querySelector('.tab-panel');
      if (firstTabPanel) {
        firstTabPanel.classList.add('is-summoned');
        //ページTOPに移動（PC）
        if (hasTabPanel && window.matchMedia('(min-width: 744px)').matches) window.scrollTo(0, 0);
      }
      const firstTabItem = document.querySelector('.tab-item');
      if (firstTabItem) {
        firstTabItem.classList.add('current_page_item');
      }

    } else {
      //else(summonHashがある場合)：一旦すべてのタブパネルから 'is-summoned'クラスを削除
      let arrTabPanels = Array.prototype.slice.call(document.querySelectorAll(".tab-panel.is-summoned"));
      for (let i = 0; i < arrTabPanels.length; i++) {
        arrTabPanels[i].classList.remove('is-summoned');
      } ///for

      //summonHashに対応するタブパネルに 'is-summoned'クラスを付与
      const smnTabPanel = document.getElementById(summonHash);
      if (smnTabPanel) {
        smnTabPanel.classList.add('is-summoned');
        //ページTOPに移動（PC）
        if (hasTabPanel && window.matchMedia('(min-width: 744px)').matches) window.scrollTo(0, 0);
      }

      //一旦すべてのタブアイテムから 'current_page_item'クラスを削除
      let arrTabItems = Array.prototype.slice.call(document.querySelectorAll(".tab-item.current_page_item")); //Arr.NodeList
      let lngtV6PJ = arrTabItems.length;
      for (let j = 0; j < lngtV6PJ; j++) {
        arrTabItems[j].classList.remove('current_page_item');
      } ///for

      //summonHashに対応するすべてのタブアイテムに 'current_page_item'クラスを付与
      let smnTabItems = Array.prototype.slice.call(document.querySelectorAll(`.tab-item>a[href*="${summonHash}"]`)); //Arr.NodeList
      if (smnTabItems) {
        let lngtV6PK = smnTabItems.length;
        for (let k = 0; k < lngtV6PK; k++) {
          smnTabItems[k].parentElement.classList.add('current_page_item');
        } ///for
      }

    }; ///if else (!summonHash);
  }, 0); ///delayTime
};
//ウィンドウロード時のイベント呼び出し
window.addEventListener('load', fnLoadV6PA);
})(); ///function add-isSummon：JS();




(function () {
//invisibleTab:JS
let overLoad = document.querySelector(".overload");
let tabItems = Array.prototype.slice.call(document.querySelectorAll(".tab-item"));
let tabLinks = Array.prototype.slice.call(document.querySelectorAll(".tab-item>a"));
let tabPanels = Array.prototype.slice.call(document.querySelectorAll(".tab-panel"));

//URLからベースURLを取得する関数
function getBaseUrl(url) {
  const parsedUrl = new URL(url);
  return `${parsedUrl.protocol}//${parsedUrl.host}${parsedUrl.pathname}`.replace(/\/$/, '');
}

function fnClckTab(tabLink) {
  tabLink.addEventListener('click', function (e) {
    //現在とリンク先のURL, Hash(#) を取得
    const currentHref = window.location.href;
    const currentBurl = getBaseUrl(currentHref);
    const tabHref = tabLink.getAttribute('href'); //クリックしたタブの href を取得
    const targetBurl = getBaseUrl(tabHref);
    const targetHash = new URL(tabHref).hash;


    //リンク先の タブコンテンツを取得
    let targetTabPanel = document.querySelector(targetHash);
    //同じ href を持つすべてのタブアイテムを取得
    let sameTabItems = Array.prototype.slice.call(document.querySelectorAll(`.tab-item>a[href*='${targetHash}']`)).map(a => a.parentElement);

    //同じページ内のリンクかどうかを判定
    if ((currentBurl === targetBurl) && targetTabPanel) {
      //デフォルトイベント無効
      e.preventDefault();

      //URLのハッシュを更新
      history.pushState(null, '', tabHref);

      //GSAPのインスタンスを作成
      let timeline = gsap.timeline();
      timeline
        .to(overLoad, {
          duration: 0.3,
          opacity: 1
        })
        .to(targetTabPanel, {
          duration: 0,
          opacity: 0
        })
        .add(() => {
          if (window.matchMedia('(min-width: 744px)').matches) {
            //ウィンドウサイズ744px以上（PC）
            gsap.to('body', {
              onComplete: function () {
                window.scrollTo(0, 0);
              }
            });
          }
        })
        .to(targetTabPanel, {
          onComplete: function () {
            tabPanels.forEach(function (tabPanel) {
              tabPanel.classList.remove('is-summoned');
            });
            tabItems.forEach(function (tabItem) {
              tabItem.classList.remove('current_page_item');
            });
          }
        })
        .add(() => {
          targetTabPanel.classList.add('is-summoned');
          sameTabItems.forEach(sameTabItem => {
            sameTabItem.classList.add('current_page_item');
          });
        })
        .to(targetTabPanel, {
          opacity: 1
        })
        .to(overLoad, {
          duration: 0.15,
          opacity: 0
        })

      //タイムラインを再生
      timeline.play();

    } ///if (currentBurl === targetBurl)

  });
} ///Event('click')
tabLinks.forEach((tabLink) => {
  fnClckTab(tabLink);
});
})(); ///function invisibleTab:JS();