https://www.subaru.jp/assets/js/top/top.js

1
2
3const slider_instance = {
4  lineup_slider_tab1: null,
5  lineup_slider_tab2: null,
6  lineup_slider_tab3: null,
7  lineup_slider_tab4: null,
8  lineup_slider_tab5: null,
9  lineup_slider_tab6: null,
10};
11
12/* ===================================================================
13   * slider extension
14  =================================================================== */
15
16// タブ機能を無効化する要素を指定し、適用する。
17function setUnTabIndex(splideInstance) {
18  if (!splideInstance.state.is(Splide.STATES.MOUNTED)) {
19    splideInstance.on("mounted", function () {
20      const prevArrow = splideInstance.root.querySelector(".splide__arrow--prev");
21      const nextArrow = splideInstance.root.querySelector(".splide__arrow--next");
22
23      [prevArrow, nextArrow].forEach((arrow) => {
24        if (arrow) {
25          arrow.setAttribute("tabindex", "-1");
26          arrow.setAttribute("aria-hidden", true);
27        }
28      });
29    });
30  }
31}
32
33document.addEventListener("DOMContentLoaded", () => {
34  /* ===================================================================
35   * common slider
36  =================================================================== */
37
38  // lineup slider
39  const lineup_slider_option = {
40    arrows: true,
41    gap: 24,
42    perPage: 4,
43    paginationKeyboard: false,

44    paginationTabIndex: false,
45    pagination: false,
46    width: "100%",
47    focus: 0,
48    classes: {
49      arrows: "splide__arrows cmn-carousel-arrows",
50      arrow: "splide__arrow cmn-carousel-class-arrow",
51      prev: "splide__arrow--prev cmn-carousel-prev",
52      next: "splide__arrow--next cmn-carousel-next",
53      pagination: "splide__pagination cmn-carousel-pagination",
54      page: "splide__pagination__page cmn-carousel-page",
55    },
56    breakpoints: {
57      948: {
58        perPage: 3,
59      },
60      768: {
61        perPage: 2,
62        arrows: false,
63      },
64    },
65  };
66
67  slider_instance.lineup_slider_tab1 = new Splide("#LineUpSliderTab1", lineup_slider_option);
68  setUnTabIndex(slider_instance.lineup_slider_tab1);
69  slider_instance.lineup_slider_tab1.on("pagination:mounted", setPagination);
70  slider_instance.lineup_slider_tab1.mount();
71
72  slider_instance.lineup_slider_tab1.on("pagination:updated", updatePagination);
73
74  // ページネーションの初期化処理
75  function setPagination(data) {
76    // この機能はスライダーアイテムが6個以上の時に適応するようにします。
77    if (data?.items.length > 5) {
78      data.items.forEach((item, index) => {
79        item.li.style.display = index < 5 ? "flex" : "none";
80        if (index === 4) {
81          item.button.style.borderWidth = "5px";
82        }
83      });
84    }
85  }
86
87  // ページネーション更新時の処理
88  function updatePagination(data) {
89    // この機能はスライダーアイテムが6個以上の時に適応するようにします。
90    if (data?.items.length > 5) {
91      const activeIndex = data.items.findIndex((item) => item.button.classList.contains("is-active"));
92      const maxIndex = data.items.length - 1;
93
94      data.items.forEach((item, _) => {
95        item.li.style.display = "none";
96        item.button.style.borderWidth = "";
97      });
98
99      if (activeIndex <= 1) {
100        for (let i = 0; i < 5; i++) {
101          data.items[i].li.style.display = "flex";
102        }
103        data.items[4].button.style.borderWidth = "5px";
104      } else if (activeIndex >= maxIndex - 1) {
105        for (let i = maxIndex; i > maxIndex - 5; i--) {
106          data.items[i].li.style.display = "flex";
107        }
108        data.items[maxIndex - 4].button.style.borderWidth = "5px";
109      } else {
110        for (let i = activeIndex - 2; i <= activeIndex + 2; i++) {
111          data.items[i].li.style.display = "flex";
112        }
113        data.items[activeIndex - 2].button.style.borderWidth = "5px";
114        data.items[activeIndex + 2].button.style.borderWidth = "5px";
115      }
116    }
117  }
118
119  // TOPスライダーのダブ切り替えだけ
120  document.querySelectorAll(".js-tab-wrap-top-slider").forEach((tabWrap) => {
121    tabWrap.addEventListener("click", (e) => {
122      const tabBtn = e.target.closest(".js-tab-btn:not(.tab-link)");
123
124      if (tabBtn && tabWrap.contains(tabBtn)) {
125        e.preventDefault();
126
127        if (!tabBtn.classList.contains("cur")) {
128          const tar = tabBtn.dataset.tabId;
129
130          tabWrap.querySelector(".js-tab-btn.cur")?.removeAttribute("aria-current");
131
132          // 現在の "cur" クラスを持つのタブボタンとコンテンツを取得し、クラスを削除
133          tabWrap.querySelector(".js-tab-btn.cur")?.classList.remove("cur");
134          tabWrap.querySelector(".js-tab-content.cur")?.classList.remove("cur");
135
136          // クリックされたタブボタンと対象のタブコンテンツに "cur" クラスを追加
137          tabBtn.classList.add("cur");
138          document.querySelector("#" + tar)?.classList.add("cur");
139
140          // "aria"を追加
141          tabBtn.setAttribute("aria-current", "page");
142
143          switch (tar) {
144            case "tab-01":
145              if (slider_instance.lineup_slider_tab1 == null) {
146                slider_instance.lineup_slider_tab1 = new Splide("#LineUpSliderTab1", lineup_slider_option);
147                setUnTabIndex(slider_instance.lineup_slider_tab1);
148                slider_instance.lineup_slider_tab1.on("pagination:mounted", setPagination);
149                slider_instance.lineup_slider_tab1.mount();
150                slider_instance.lineup_slider_tab1.on("pagination:updated", updatePagination);
151              }
152
153              break;
154
155            case "tab-02":
156              if (slider_instance.lineup_slider_tab2 == null) {
157                slider_instance.lineup_slider_tab2 = new Splide("#LineUpSliderTab2", lineup_slider_option);
158                setUnTabIndex(slider_instance.lineup_slider_tab2);
159                slider_instance.lineup_slider_tab2.on("pagination:mounted", setPagination);
160                slider_instance.lineup_slider_tab2.mount();
161                slider_instance.lineup_slider_tab2.on("pagination:updated", updatePagination);
162              }
163
164              break;
165
166            case "tab-03":
167              if (slider_instance.lineup_slider_tab3 == null) {
168                slider_instance.lineup_slider_tab3 = new Splide("#LineUpSliderTab3", lineup_slider_option);
169                setUnTabIndex(slider_instance.lineup_slider_tab3);
170                slider_instance.lineup_slider_tab3.on("pagination:mounted", setPagination);
171                slider_instance.lineup_slider_tab3.mount();
172                slider_instance.lineup_slider_tab3.on("pagination:updated", updatePagination);
173              }
174
175              break;
176
177            case "tab-04":
178              if (slider_instance.lineup_slider_tab4 == null) {
179                slider_instance.lineup_slider_tab4 = new Splide("#LineUpSliderTab4", lineup_slider_option);
180                setUnTabIndex(slider_instance.lineup_slider_tab4);
181                slider_instance.lineup_slider_tab4.on("pagination:mounted", setPagination);
182                slider_instance.lineup_slider_tab4.mount();
183                slider_instance.lineup_slider_tab4.on("pagination:updated", updatePagination);
184              }
185
186              break;
187
188            case "tab-05":
189              if (slider_instance.lineup_slider_tab5 == null) {
190                slider_instance.lineup_slider_tab5 = new Splide("#LineUpSliderTab5", lineup_slider_option);
191                setUnTabIndex(slider_instance.lineup_slider_tab5);
192                slider_instance.lineup_slider_tab5.on("pagination:mounted", setPagination);
193                slider_instance.lineup_slider_tab5.mount();
194                slider_instance.lineup_slider_tab5.on("pagination:updated", updatePagination);
195              }
196
197              break;
198
199            case "tab-06":
200              if (slider_instance.lineup_slider_tab6 == null) {
201                slider_instance.lineup_slider_tab6 = new Splide("#LineUpSliderTab6", lineup_slider_option);
202                setUnTabIndex(slider_instance.lineup_slider_tab6);
203                slider_instance.lineup_slider_tab6.on("pagination:mounted", setPagination);
204                slider_instance.lineup_slider_tab6.mount();
205                slider_instance.lineup_slider_tab6.on("pagination:updated", updatePagination);
206              }
207
208              break;
209
210            default:
211              break;
212          }
213        }
214      }
215    });
216  });
217
218  // TOPラインアップスライダーの矢印操作
219  document.querySelectorAll("#LineUpSliderTab1 li").forEach((item, _) => {
220    item.addEventListener("keydown", (event) => {
221      arrowKeyDown(event, slider_instance.lineup_slider_tab1);
222    });
223  });
224
225  // TOPラインアップスライダーの矢印操作
226  document.querySelectorAll("#LineUpSliderTab2 li").forEach((item, _) => {
227    item.addEventListener("keydown", (event) => {
228      arrowKeyDown(event, slider_instance.lineup_slider_tab2);
229    });
230  });
231
232  // 矢印キーを押下した時の共通処理
233  function arrowKeyDown(event, target) {
234    const activeElement = document.activeElement;
235
236    // フォーカスターゲットのエレメントがlineup-linkpanelクラスを持っている時のみ動作
237    if (activeElement.classList.contains("lineup-linkpanel")) {
238      let sibling;
239      // 押下した方向キーによって次の要素の取得分けを行います。
240      if (event.key === "ArrowLeft") {
241        sibling = activeElement.offsetParent?.previousElementSibling;
242      } else if (event.key === "ArrowRight") {
243        sibling = activeElement.offsetParent?.nextElementSibling;
244      }
245
246      if (sibling) {
247        const linkPanel = sibling.querySelector(".lineup-linkpanel");
248        if (linkPanel) {
249          const parentUl = sibling.parentNode;
250          const ulChildren = Array.from(parentUl.children);
251
252          target.go(ulChildren.indexOf(sibling));
253          linkPanel.focus();
254        }
255      }
256    }
257  }
258
259  // service panel slider
260  const service_panel_slider_option = {

261    arrows: false,
262    type: "loop",
263    drag: true,
264    perPage: 1,
265    perMove: 1,
266    pagination: true,
267    classes: {
268      pagination: "splide__pagination cmn-carousel-pagination",
269      page: "splide__pagination__page cmn-carousel-page",
270    },
271  };
272
273  new Splide("#ServicePanelSlider", service_panel_slider_option).mount();
274});
275
276
277