italia2024/js/_enchants/_diverdepth-meter.js

Italia 2024 assets

(function () {
//diverdepth-meter.js（スクロール量・向きによってクラス付与）

const debugMode = false; //デバッグモード（trueで有効、falseで無効）

const appendCSS = `
/* Debug style：CSS */
#debug-scroll {
position: fixed;
bottom: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 5px;
border-radius: 5px;
display: ${debugMode ? 'block' : 'none'};
}
`;
const STYLE = document.createElement('style');
STYLE.textContent = appendCSS;
document.getElementsByTagName('head')[0].appendChild(STYLE);

//Debug element
if (debugMode) {
  var debugElement = document.createElement('div');
  debugElement.id = 'debug-scroll';
  document.body.appendChild(debugElement);
}

//JavaScriptの処理
var prev_scrlY = 0;
var timerNUJA = 0;

//全ての .js-diverment 要素を取得
let arrDiverments = Array.prototype.slice.call(document.querySelectorAll('[class*="js-diverment"]')); //Arr.NodeList

//ロードが完了したら、'is-loaded'クラスを付与する
let fnLoadedNUJA = function () {
  for (let n = 0; n < arrDiverments.length; n++) {
    //action
    arrDiverments[n].classList.add('is-loaded');
  } ///for
};
//ウィンドウロード時のイベント呼び出し
window.addEventListener('load', fnLoadedNUJA); ///window('load');


//ページ最下部に到達したら、'is-rolleached'クラスを付与する
let fnRolleachedNUJA = function () {
  const allHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
  );
  const mostBottom = allHeight - window.innerHeight;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  let lngtNUJA = arrDiverments.length;
  if (scrollTop >= mostBottom) {
    for (let n = 0; n < lngtNUJA; n++) {
      //action
      arrDiverments[n].classList.add('is-rolleached');
    } ///for
  } else {
    for (let n = 0; n < lngtNUJA; n++) {
      //action
      arrDiverments[n].classList.remove('is-rolleached');
    } ///for
  };
};

let fnDepthMaterNUJA = function () {
  if (timerNUJA) clearTimeout(timerNUJA);
  timerNUJA = setTimeout(() => {
    let current_scrlY = window.pageYOffset; //現在のスクロール量
    let diff_scrlY = current_scrlY - prev_scrlY; //前回のスクロール量との比較
    let isPC = window.innerWidth > 744; //ブレイクポイントの判定
    let vw = window.innerWidth / 100; //1vwの値を計算
    let current_scrlY_vw = current_scrlY / vw; //現在のスクロール量をvwで計算

    //Debug output
    if (debugMode) {
      debugElement.innerText = `Scroll: ${current_scrlY.toFixed(0)}px / ${current_scrlY_vw.toFixed(2)}vw, Mode: ${isPC ? 'PC' : 'SP'}`;
    }

    arrDiverments.forEach((arrDiverment) => {
      let visibleThreshold, hiddenThreshold;

      if (isPC) {
        visibleThreshold = parseInt(arrDiverment.dataset.visible_pc) || parseInt(arrDiverment.dataset.visible) || 0;
        hiddenThreshold = parseInt(arrDiverment.dataset.hidden_pc) || parseInt(arrDiverment.dataset.hidden) || Infinity;
      } else {
        //スマホの場合、vw値を解析してピクセル値に変換
        let parseVW = (value) => {
          if (value && value.endsWith('vw')) {
            return parseFloat(value) * vw;
          }
          return parseInt(value) || 0;
        };

        visibleThreshold = parseVW(arrDiverment.dataset.visible_sp) || parseInt(arrDiverment.dataset.visible) || 0;
        hiddenThreshold = parseVW(arrDiverment.dataset.hidden_sp) || parseInt(arrDiverment.dataset.hidden) || Infinity;
      }

      //aria-hidden の処理
      if (current_scrlY >= visibleThreshold && current_scrlY < hiddenThreshold) {
        arrDiverment.setAttribute('aria-hidden', 'false');
      } else {
        arrDiverment.setAttribute('aria-hidden', 'true');
      }

      //roll-*** クラスの処理
      if (current_scrlY > visibleThreshold) {
        if (diff_scrlY > 0) {
          arrDiverment.classList.add('is-rolldown-hide');
          arrDiverment.classList.remove('is-rollup', 'is-rollup-hide');
        }
        if (diff_scrlY < 0) {
          arrDiverment.classList.add('is-rollup-hide');
          arrDiverment.classList.remove('is-rolldown', 'is-rolldown-hide');
        }
        if (current_scrlY > visibleThreshold + 100) {
          if (diff_scrlY > 0) {
            arrDiverment.classList.add('is-rolldown');
            arrDiverment.classList.remove('is-rolldown-hide', 'is-rollup', 'is-rollup-hide');
          }
          if (diff_scrlY < 0) {
            arrDiverment.classList.add('is-rollup');
            arrDiverment.classList.remove('is-rollup-hide', 'is-rolldown', 'is-rolldown-hide');
          }
        }
      } else {
        arrDiverment.classList.remove('is-rollup-hide', 'is-rollup', 'is-rolldown-hide', 'is-rolldown');
      }
    });

    //前回のスクロール位置を更新
    prev_scrlY = current_scrlY;
  }, 30);
};

//イベントリスナーの登録
'load resize scroll'.split(' ').forEach((events) => {
  window.addEventListener(events, function (e) {
    fnDepthMaterNUJA();
    fnRolleachedNUJA();
  });
});
})();