https://rusutsu.com/find-your-rusutsu/js/common.js

1let myRusutsuSwiper = null;
2
3document.addEventListener("DOMContentLoaded", () => {
4  /* ==========================
5   inview アニメーション
6  ========================== */
7  $(".inv_mov").on("inview", function (event, isInView) {
8    if (isInView) {
9      $(this).addClass("mov");
10    }
11  });
12
13  /* ==========================
14   NEWS タイトル省略判定
15  ========================== */
16  function checkNewsOverflow() {
17    $(".news-title").each(function () {
18      const $title = $(this);
19      const $line = $title.closest("a").find(".news-line");
20
21      if (this.scrollWidth > this.clientWidth) {
22        $line.addClass("is-overflow");
23      } else {
24        $line.removeClass("is-overflow");
25      }
26    });
27  }
28
29  checkNewsOverflow();
30  $(window).on("resize", checkNewsOverflow);
31
32  /* ==========================
33   Swiper 初期化
34  ========================== */
35  const el = document.querySelector(".js-my-rusutsu-slider");
36
37  if (el && typeof Swiper !== "undefined") {
38    myRusutsuSwiper = new Swiper(el, {
39      speed: 600,
40      loop: true,
41      centeredSlides: true,
42      slidesPerView: "auto",
43      spaceBetween: 0,
44
45      autoplay: {
46        delay: 3000,
47        disableOnInteraction: false
48      },
49
50      navigation: {
51        nextEl: ".swiper-button-next",
52        prevEl: ".swiper-button-prev"
53      },
54
55      breakpoints: {
56        768: {
57          spaceBetween: 0
58        }
59      }
60    });
61
62    /* ==========================
63     カテゴリークリックで移動
64    ========================== */
65    document.querySelectorAll(".catList__item").forEach(item => {
66      item.addEventListener("click", () => {
67        myRusutsuSwiper.slideToLoop(Number(item.dataset.slide), 600);
68      });
69    });
70
71    /* ==========================
72     カテゴリー active
73    ========================== */
74    function updateCategory() {
75      const index = myRusutsuSwiper.realIndex;
76
77      let activeCategory = 0;
78
79      if (index <= 1) {
80        activeCategory = 0;
81      } else if (index <= 5) {
82        activeCategory = 1;
83      } else if (index <= 7) {
84        activeCategory = 2;
85      } else if (index === 8) {
86        activeCategory = 3;
87      } else {
88        activeCategory = 4;
89      }
90
91      document.querySelectorAll(".catList__item").forEach((item, i) => {
92        item.classList.toggle("active", i === activeCategory);
93      });
94    }
95
96    myRusutsuSwiper.on("slideChange", updateCategory);
97    updateCategory();
98  }
99
100  /* ==========================
101   MicroModal 初期化
102  ========================== */
103  if (typeof MicroModal !== "undefined") {
104    MicroModal.init({
105      disableScroll: true,
106      disableFocus: true,
107
108      onClose: () => {
109        if (myRusutsuSwiper?.autoplay) {
110          myRusutsuSwiper.autoplay.start();
111        }
112      }
113    });
114
115    const openModal = btn => {
116      // モーダル表示中はSwiper停止
117      if (myRusutsuSwiper?.autoplay) {
118        myRusutsuSwiper.autoplay.stop();
119      }
120
121      const cat = document.querySelector(".js-modal-cat");
122      const tag = document.querySelector(".js-modal-tag");
123      const img = document.querySelector(".js-modal-img");
124      const title = document.querySelector(".js-modal-title");
125      const text = document.querySelector(".js-modal-text");
126      const link = document.querySelector(".js-modal-link");
127      const btnText = document.querySelector(".js-modal-btn-text");
128
129      if (cat) cat.textContent = btn.dataset.cat || "";
130      if (tag) tag.textContent = btn.dataset.tag || "";
131      if (img) img.src = btn.dataset.img || "";
132      if (title) title.innerHTML = btn.dataset.title || "";
133      if (text) text.textContent = btn.dataset.text || "";
134      if (link) link.href = btn.dataset.url || "#";
135      if (btnText) btnText.textContent = btn.dataset.btn || "";
136
137      MicroModal.show("modal-detail");
138    };
139
140    document.querySelectorAll(".js-modal-open").forEach(btn => {
141      btn.addEventListener("click", () => openModal(btn));
142    });
143  }
144});