italia2024/js/_enchants/_custom-dataProperties.js

Italia 2024 assets

(function () {
//[data-jcai]：JS（justify-content, align-items）
const BREAKPOINT = 744; //ブレークポイント

//justify-contentとalign-itemsを設定する関数
function setJcAi() {
  let arrJcAi = Array.prototype.slice.call(document.querySelectorAll("[data-jcai], [data-jcai_sp], [data-jcai_pc]"));
  const windowWidth = window.innerWidth;

  for (let i = 0; i < arrJcAi.length; i++) {
    const element = arrJcAi[i];
    let jcaiValue;

    if (windowWidth < BREAKPOINT) {
      //スマートフォン用の値
      jcaiValue = element.getAttribute('data-jcai_sp') || element.getAttribute('data-jcai');
    } else {
      //PC用の値
      jcaiValue = element.getAttribute('data-jcai_pc') || element.getAttribute('data-jcai');
    }

    if (jcaiValue) {
      let [jcValue, aiValue] = jcaiValue.split(',');
      let styleString = '';

      if (jcValue) {
        styleString += `justify-content: ${jcValue.trim()};`;
      }

      if (aiValue) {
        styleString += `align-items: ${aiValue.trim()};`;
      }

      const currentStyle = element.getAttribute('style') || '';
      const newStyle = currentStyle.replace(/justify-content:[^;]+;?|align-items:[^;]+;?/g, '') + styleString;
      element.setAttribute('style', newStyle);
    }
  }
}

//デバウンス関数
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

//デバウンスされたsetJcAi関数
const debouncedSetJcAi = debounce(setJcAi, 200);

//ウィンドウDOMロード・ロード・リサイズ時のイベント呼び出し
document.addEventListener('DOMContentLoaded', setJcAi);
window.addEventListener('load', debouncedSetJcAi);
window.addEventListener('resize', debouncedSetJcAi);

//初期実行（DOMContentLoadedイベントが既に発生している可能性がある場合）
if (document.readyState === 'complete' || document.readyState === 'interactive') {
  setJcAi();
}
})();




(function () {
//[data-wh]：JS（width, height）
const BREAKPOINT = 744; //ブレークポイント

//widthとheightを設定する関数
function setWH() {
  let arrWH = Array.prototype.slice.call(document.querySelectorAll("[data-wh], [data-wh_sp], [data-wh_pc]"));
  const windowWidth = window.innerWidth;

  for (let i = 0; i < arrWH.length; i++) {
    const element = arrWH[i];
    let whValue;

    if (windowWidth < BREAKPOINT) {
      //スマートフォン用の値
      whValue = element.getAttribute('data-wh_sp') || element.getAttribute('data-wh');
    } else {
      //PC用の値
      whValue = element.getAttribute('data-wh_pc') || element.getAttribute('data-wh');
    }

    if (whValue) {
      let [widthValue, heightValue] = whValue.split(',');
      let styleString = '';

      if (widthValue) {
        styleString += `width: ${widthValue.trim()};`;
      }

      if (heightValue) {
        styleString += `height: ${heightValue.trim()};`;
      }

      const currentStyle = element.getAttribute('style') || '';
      const newStyle = currentStyle.replace(/width:[^;]+;?|height:[^;]+;?/g, '') + styleString;
      element.setAttribute('style', newStyle);
    }
  }
}

//デバウンス関数
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

//デバウンスされたsetWH関数
const debouncedSetWH = debounce(setWH, 200);

//ウィンドウDOMロード・ロード・リサイズ時のイベント呼び出し
document.addEventListener('DOMContentLoaded', setWH);
window.addEventListener('load', debouncedSetWH);
window.addEventListener('resize', debouncedSetWH);

//初期実行（DOMContentLoadedイベントが既に発生している可能性がある場合）
if (document.readyState === 'complete' || document.readyState === 'interactive') {
  setWH();
}
})();




(function () {
//[data-bgi]（background-image）
const BREAKPOINT = 744; //ブレークポイント

//background-imageを設定する関数
function setBgImages() {
  let arrBgImages = Array.prototype.slice.call(document.querySelectorAll("[data-bgi], [data-bgi_sp], [data-bgi_pc]"));
  const windowWidth = window.innerWidth;

  for (let i = 0; i < arrBgImages.length; i++) {
    const element = arrBgImages[i];
    let bgImageUrl;

    if (windowWidth < BREAKPOINT) {
      //スマートフォン用の画像
      bgImageUrl = element.getAttribute('data-bgi_sp') || element.getAttribute('data-bgi');
    } else {
      //PC用の画像
      bgImageUrl = element.getAttribute('data-bgi_pc') || element.getAttribute('data-bgi');
    }

    if (bgImageUrl) {
      const currentStyle = element.getAttribute('style') || '';
      const newStyle = currentStyle.replace(/background-image:[^;]+;?/, '') + `background-image: url('${bgImageUrl}');`;
      element.setAttribute('style', newStyle);
    }
  }
}

//デバウンス関数
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

//デバウンスされたsetBgImages関数
const debouncedSetBgImages = debounce(setBgImages, 200);

//ウィンドウDOMロード・リサイズ・スクロール時のイベント呼び出し
document.addEventListener('DOMContentLoaded', setBgImages);
window.addEventListener('resize', debouncedSetBgImages);
window.addEventListener('scroll', debouncedSetBgImages);

//初期実行（DOMContentLoadedイベントが既に発生している可能性がある場合）
if (document.readyState === 'complete' || document.readyState === 'interactive') {
  setBgImages();
}
})();