italia2024/js/_enchants/_classify-beLable.js

Italia 2024 assets

(function () {
var insertStyle = document.createElement('style');
insertStyle.insertAdjacentHTML('beforeend', `
/* .be-scrlable：CSS（横にスクロール）
-------------------------------------- */
/* scroll-hint */
[class*="be-scrlable"] .scroll-hint-text {
font-size: 10px !important;
font-family: 'YakuHanJP', 'Noto Sans JP', sans-serif;
}

[class*="be-scrlable"] .scroll-hint-icon {
height: 87px;
}

/* スクロールバー */
[class*="be-scrlable"]::-webkit-scrollbar {
width: 10px;
height: 10px;
margin-top: 6px;
}

[class*="be-scrlable"]::-webkit-scrollbar-track {
background: hsla(0, 0%, 94%, 1);
}

[class*="be-scrlable"]::-webkit-scrollbar-thumb {
height: 6px;
border-radius: 999px;
background: #00C2D4;
}

[class*="be-scrlable"] {
width: 1000px;
max-width: 100%;
height: auto;
}

.be-scrlable {
overflow-x: scroll !important;
overflow-y: hidden !important;
cursor: move;
}

.be-scrlable .scrlable-wrapper {
width: 200%;
max-width: none;
margin-bottom: 10px;
}

/* .scrlable_sp（スマホの場合だけスクロール） */
@media screen and (max-width: 743.9px) {
.be-scrlable_sp {
overflow-x: scroll !important;
overflow-y: hidden !important;
cursor: move;
}

.be-scrlable_sp .scrlable-wrapper {
width: 200%;
max-width: none;
margin-bottom: 10px;
}
}

/* .scrlable_pc（PCの場合だけスクロール） */
@media print, screen and (min-width: 744px) {
.be-scrlable_pc {
overflow-x: scroll !important;
overflow-y: hidden !important;
cursor: move;
}

.be-scrlable_pc .scrlable-wrapper {
width: 200%;
max-width: none;
margin-bottom: 10px;
}
}
`);
document.getElementsByTagName('head')[0].appendChild(insertStyle);
})(); ///function：scroll-hint.function.js


(function () {
//scroll-hint.function.js
let timerGDRA = 0,
  fnScrlHintGDRA = function () {
    timerGDRA && clearTimeout(timerGDRA),
      timerGDRA = setTimeout(() => {
        window.matchMedia("(max-width: 767.9px)").matches ? new ScrollHint(".be-scrlable_sp", {
            i18n: {
              scrollable: "スクロールできます"
            }
          }) : new ScrollHint(".be-scrlable_pc", {
            i18n: {
              scrollable: "スクロールできます"
            }
          }),
          new ScrollHint(".be-scrlable", {
            i18n: {
              scrollable: "スクロールできます"
            }
          })
      }, 300)
  };
'load resize'.split(' ').forEach(e => {
  window.addEventListener(e,
    function (e) {
      fnScrlHintGDRA()
    })
});
})(); ///function：scroll-hint.function.js


(function () {
//scrollbooster.function.js
let arrScblCtnrGDRBs = Array.prototype.slice.call(document.querySelectorAll('[class^="be-scrlable"]')); //Arr.NodeList
let arrScblWrprGDRBs = Array.prototype.slice.call(document.querySelectorAll(".scrlable-wrapper")); //Arr.NodeList

let fnAsgnSeqGDRB = function () {
  var intGDRB = 0; //連番
  var lngtGDRB = arrScblCtnrGDRBs.length;
  for (let n = 0; n < lngtGDRB; n++) {
    let clarisCtnr = 'scrlable-boost' + intGDRB;
    let clarisWrpr = 'scrlable-wrapper' + intGDRB;
    arrScblCtnrGDRBs[n].classList.add(clarisCtnr);
    arrScblWrprGDRBs[n].classList.add(clarisWrpr);
    intGDRB += 1;
  }; //for
}();

//ウィンドウDOMロード・リサイズ時のイベント
let timerGDRB = 0;
let fnScrlBstrGDRB = function () {
  if (timerGDRB) clearTimeout(timerGDRB);
  timerGDRB = setTimeout(() => {
    //sequential-action.js（連番クラスを順番に処理する）
    var intGDRB = 0; //連番
    var lngtGDRB = arrScblCtnrGDRBs.length;
    for (let n = 0; n < lngtGDRB; n++) {
      //ScrollBooster ※要querySelector
      let scrlBstrVprt = document.querySelector(".scrlable-boost" + intGDRB);
      let scrlBstrCtnt = document.querySelector(".scrlable-wrapper" + intGDRB);
      new ScrollBooster({
        viewport: scrlBstrVprt,
        content: scrlBstrCtnt,
        scrollMode: 'native',
        direction: 'horizontal'
      });
      intGDRB += 1;
    }; ///for
  }, 300);
};
//ウィンドウロード・リサイズ時のイベント呼び出し登録
'load resize'.split(' ').forEach((events) => {
  window.addEventListener(events, function (e) {
    fnScrlBstrGDRB();
  })
});
})(); ///function：scrollbooster.function.js




(function () {
var insertStyle = document.createElement('style');
insertStyle.insertAdjacentHTML('beforeend', `
/* be-pinchOutable：CSS（SP） */
@media screen and (max-width: 743.9px) {
.be-pinchOutable_sp {
position: relative;
z-index: 10;
}

.be-pinchOutable_sp::after {
position: absolute;
z-index: 10;
bottom: 6px;
right: 4px;
margin: auto;
padding: 3px 3px 2px 2px;
border-radius: 4px;
transition: opacity .3s;
line-height: 1;
font-size: 24px;
text-align: center;
/* Material Symbols */
font-family: 'Material Symbols Sharp';
font-variation-settings:
'FILL' 0,
'wght' 300;
content: "\\f1fb";
background: hsla(0, 0%, 0%, 0.5);
color: #FFF;
}

.be-pinchOutable_sp.is-touched::after {
display: none;
}
}
`);
document.getElementsByTagName('head')[0].appendChild(insertStyle);

//be-pinchOutable：JS
if (window.matchMedia('(max-width: 743.9px)').matches) {
  //@media: 743.9px以下（SP）
  let arrNodlV12As = Array.prototype.slice.call(document.querySelectorAll(".be-pinchOutable_sp")); //Arr.NodeList

  //タッチ時のイベント／登録
  let fnForTuchV12A = function () {
    let lngtV12A = arrNodlV12As.length;
    for (let n = 0; n < lngtV12A; n++) {
      arrNodlV12As[n].addEventListener('touchstart', function (e) {
        let $thsTriggers = $(this);
        //if else
        let hasCLASS = $thsTriggers[0].classList.contains('is-touched');
        if (!hasCLASS) {
          //action
          $thsTriggers[0].classList.add('is-touched');

        };
      });
    };
  }(); ///for.Event('touchstart')
}; ///window.matchMedia
})(); ///function();