italia2024/js/_enchants/_accorder-inppend.js

Italia 2024 assets

(function () {
var insertStyle = document.createElement('style');
insertStyle.insertAdjacentHTML('beforeend', `
/* accorder-inppend：CSS */
.accorder-container {
width: 100%;
}

.accorder-wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 0;
}

/* .button */
.accorder-button.button.mx-auto {
display: flex;
}

.accorder-button.button::before {
position: absolute;
top: 0px;
bottom: 0;
right: 1em;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 0;
height: 0;
font-size: 133.3%;
/* Material Symbols */
font-family: 'Material Symbols Sharp';
font-variation-settings:
'FILL' 0,
'wght' 300;
content: "\\e145";
}

.accorder-button.button [data-closed] {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
height: 0;
}

.accorder-button.button [data-closed]::before {
position: relative;
top: 0.0625em;
/* margin: auto; */
display: flex;
justify-content: center;
align-items: center;
height: 0;
font-size: 100%;
content: attr(data-closed)"";
}


/* .is-opened */
.accorder-wrapper.is-opened {
margin-top: 1pc;
}

.accorder-button.button[class*=is-outline].is-opened {
border-color: hsla(0, 0%, 0%, 0.7);
color: hsla(0, 0%, 0%, 0.7);
}

.accorder-button.button.is-opened::before {
content: "\\e15b";
}

.accorder-button.button.is-opened [data-opened]::before {
content: attr(data-opened)"";
}


/* アニメーション */
.accorder-overlay {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}

.accorder-overpath {
vector-effect: non-scaling-stroke;
fill: #4b9bd8;
}
`);
document.getElementsByTagName('head')[0].appendChild(insertStyle);

//accorder-anime.js
let accTriggers = Array.prototype.slice.call(document.querySelectorAll(".accorder-button")); //Arr.NodeList

//クリック時のイベント／登録
let fnClckAnmVCCA = function () {
  for (let n = 0; n < accTriggers.length; n++) {
    accTriggers[n].addEventListener('click', function (e) {
      e.preventDefault(); //デフォルトアクションをキャンセル

      let $thsAccBtn = $(this);
      let accGrandpa = this.parentNode.parentNode;
      let accWrapper = accGrandpa.querySelector(".accorder-wrapper");
      let accOverpath = accGrandpa.querySelector(".accorder-overpath");

      //if else
      const hasCLASS = accWrapper.classList.contains('is-opened');
      if (hasCLASS) {
        //閉じる
        $thsAccBtn[0].classList.remove('is-opened');
        accWrapper.classList.remove('is-opened');
        gsap.to(accWrapper, {
          duration: 0.5,
          height: 0,
          ease: "power2.inOut"
        });

        //upwardAnime.js
        const timeline = gsap
          .timeline()
          .set(accOverpath, {
            //初めにアニメーションするパス
            //透明パス
            attr: {
              d: "M 0 100 V 100 Q 50 100 100 100 V 100 z"
            }
          })
          //扇型を黒く塗りつぶしたパス
          .to(accOverpath, {
            duration: 0.3,
            ease: "power4.in",
            attr: {
              d: "M 0 100 V 50 Q 50 0 100 50 V 100 z"
            }
          })
          //黒パス
          .to(accOverpath, {
            duration: 0.3,
            ease: "power2",
            attr: {
              d: "M 0 100 V 0 Q 50 0 100 0 V 100 z"
            }
          });

      } else {
        //開く
        accWrapper.classList.add('is-opened');
        $thsAccBtn[0].classList.add('is-opened');
        gsap.to(accWrapper, {
          duration: 0.5,
          height: 'auto',
          ease: "power2.inOut"
        });
      };

      //downwardAnime.js
      const timeline = gsap
        .timeline()
        .set(accOverpath, {
          //初めにアニメーションするパス
          //透明パス
          attr: {
            d: "M 0 0 V 0 Q 50 0 100 0 V 0 z"
          }
        })
        //扇型を黒く塗りつぶしたパス
        .to(accOverpath, {
          duration: 0.3,
          ease: "power4.in",
          attr: {
            d: "M 0 0 V 50 Q 50 100 100 50 V 0 z"
          }
        })
        //黒パス
        .to(accOverpath, {
          duration: 0.3,
          ease: "power2",
          attr: {
            d: "M 0 0 V 100 Q 50 100 100 100 V 0 z"
          }
        })
        //後からアニメーションするパス
        //黒パス
        .set(accOverpath, {
          attr: {
            d: "M 0 100 V 0 Q 50 0 100 0 V 100 z"
          }
        })
        //扇型の余白部分を黒く塗りつぶしたパス
        .to(accOverpath, {
          duration: 0.3,
          ease: "power2.in",
          attr: {
            d: "M 0 100 V 50 Q 50 100 100 50 V 100 z"
          }
        })
        //透明パス
        .to(accOverpath, {
          duration: 0.3,
          ease: "power4",
          attr: {
            d: "M 0 100 V 100 Q 50 100 100 100 V 100 z"
          }
        });
    });
  };
}(); ///fn：accorder-anime.js




//accorder-inppend.js
let apndTriggers = Array.prototype.slice.call(document.querySelectorAll(".accorder-button.append-previous")); //Arr.NodeList

//スクリプトを動的に読み込む関数
function reloadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.onload = resolve;
    script.onerror = reject;
    document.body.appendChild(script);
  });
}

//クリック時のイベント／登録
let fnClckApndVCCB = function () {
  for (let n = 0; n < apndTriggers.length; n++) {
    apndTriggers[n].addEventListener('click', async function (e) {
      e.preventDefault(); //デフォルトアクションをキャンセル

      let $thsApndBtn = $(this);
      let apndGrandpa = this.parentNode.parentNode;
      let apndInppend = apndGrandpa.querySelector(".accorder-inppend");
      let apndTemplate = apndGrandpa.querySelector(".accorder-template");
      let fragmentVCCB = document.createDocumentFragment();

      //!if
      let hasCLASS = apndInppend.classList.contains('is-appended');
      if (!hasCLASS) {
        for (var i = 0; i < 1; i++) {
          var cloneVCCB = apndTemplate.content.cloneNode(true); //templateを複製
          fragmentVCCB.appendChild(cloneVCCB); //fragmentに追加
        }
        apndInppend.appendChild(fragmentVCCB); //レンダリング処理はここだけ
        apndInppend.classList.add('is-appended');
        $thsApndBtn[0].classList.add('is-appended');

        //template挿入後にスクリプトを再読み込み
        try {
          await reloadScript('https://www.code-plus.jp/cdn/js/aboveFold.js');
          await reloadScript('https://www.code-plus.jp/cdn/js/async-defer-below.js');
          console.log('Script loaded successfully');
        } catch (error) {
          console.error('Error loading script:', error);
        }

      }; ///!if
    });
  };
}(); ///fn：accorder-inppend.js;
})(); ///function();