https://footbus.co.jp/asset_en/js/top.js

1
2
3//How to Ride
4$(function () {
5    const $slider = $('.how_to_list');
6    const breakpoint = 920;
7
8    function slickSwitch() {
9        if (window.matchMedia(`(max-width: ${breakpoint}px)`).matches) {
10            // 920px以下：slick未発火なら発火
11            if (!$slider.hasClass('slick-initialized')) {
12                $slider.slick({
13                    slidesToShow: 1,
14                    slidesToScroll: 1,
15                    arrows: true,
16                    dots: false,
17                    infinite: false,
18                    adaptiveHeight: true,
19                    prevArrow: '<button type="button" class="slick-prev how_prev"></button>',
20                    nextArrow: '<button type="button" class="slick-next how_next"></button>'
21                });
22            }
23        } else {
24            // 921px以上：slick発火済みなら解除
25            if ($slider.hasClass('slick-initialized')) {
26                $slider.slick('unslick');
27            }
28        }
29    }
30
31    slickSwitch();
32
33    $(window).on('resize', function () {
34        slickSwitch();
35    });
36});
37
38
39//FAQ toggle
40$(function () {
41    $('.faq_list dt').on('click', function () {
42        $(this).next('dd').slideToggle(300);
43        $(this).toggleClass('open');
44    });
45});
46
47//Bus stop toggle
48$(function () {
49    $('.accordion .accordion-header').on('click', function () {
50        $(this).next('.accordion-body').slideToggle(300);
51        $(this).toggleClass('open');
52    });
53});
54
55//nav active
56document.addEventListener('DOMContentLoaded', function () {
57    const ctaBtn = document.getElementById('header_cta_btn');
58    const menu = document.querySelector('.gnavi_inner');
59
60    if (!ctaBtn || !menu) return;
61
62    function openMenu() {
63        menu.classList.add('active');
64        ctaBtn.setAttribute('aria-expanded', 'true');
65    }
66
67    function closeMenu() {
68        menu.classList.remove('active');
69        ctaBtn.setAttribute('aria-expanded', 'false');
70    }
71
72    function toggleMenu() {
73        const isOpen = menu.classList.contains('active');
74
75        if (isOpen) {
76            closeMenu();
77        } else {
78            openMenu();
79        }
80    }
81
82    ctaBtn.setAttribute('aria-expanded', 'false');
83
84    ctaBtn.addEventListener('click', function (event) {
85        event.stopPropagation();
86        toggleMenu();
87    });
88
89    menu.addEventListener('click', function (event) {
90        event.stopPropagation();
91    });
92
93    document.addEventListener('click', function () {
94        closeMenu();
95    });
96
97    document.addEventListener('keydown', function (event) {
98        if (event.key === 'Escape') {
99            closeMenu();
100            ctaBtn.focus();
101        }
102    });
103});
104
105
106//time table swipe scroll
107document.addEventListener("DOMContentLoaded", function () {
108    const targets = document.querySelectorAll(".js-swipe-target");
109    const mediaQuery = window.matchMedia("(max-width: 767px)");
110
111    if (!targets.length) return;
112
113    const observer = new IntersectionObserver(
114        function (entries) {
115            entries.forEach(function (entry) {
116                const target = entry.target;
117
118                if (!entry.isIntersecting) return;
119                if (!mediaQuery.matches) return;
120                if (target.dataset.swipeShown === "true") return;
121
122                target.dataset.swipeShown = "true";
123                target.classList.add("is-swipe-guide-visible");
124
125                observer.unobserve(target);
126
127                setTimeout(function () {
128                    target.classList.remove("is-swipe-guide-visible");
129                }, 4200);
130            });
131        },
132        {
133            threshold: 0.05,
134            rootMargin: "0px 0px -20% 0px"
135        }
136    );
137
138    targets.forEach(function (target) {
139        observer.observe(target);
140    });
141});
142
143// footer cta
144/*document.addEventListener('DOMContentLoaded', function () {
145  const ctaBtn = document.getElementById('sp_footer_wrapper');
146  const menu = document.querySelector('.sp_footer_inner');
147
148  if (!ctaBtn || !menu) return;
149
150  function openMenu() {
151    menu.classList.add('active');
152    ctaBtn.setAttribute('aria-expanded', 'true');
153  }
154
155  function closeMenu() {
156    menu.classList.remove('active');
157    ctaBtn.setAttribute('aria-expanded', 'false');
158  }
159
160  function toggleMenu() {
161    const isOpen = menu.classList.contains('active');
162
163    if (isOpen) {
164      closeMenu();
165    } else {
166      openMenu();
167    }
168  }
169
170  ctaBtn.setAttribute('aria-expanded', 'false');
171
172  ctaBtn.addEventListener('click', function (event) {
173    event.stopPropagation();
174    toggleMenu();
175  });
176
177  menu.addEventListener('click', function (event) {
178    event.stopPropagation();
179  });
180
181  document.addEventListener('click', function () {
182    closeMenu();
183  });
184
185  document.addEventListener('keydown', function (event) {
186    if (event.key === 'Escape') {
187      closeMenu();
188      ctaBtn.focus();
189    }
190  });
191});*/
192
193
194// time table
195jQuery(function ($) {
196    const $timeTables = $('.time-table--inner.col_18');
197
198    function updateCursor($slider) {
199        const hasVisibleArrow = $slider.find('.slick-arrow:not(.slick-hidden

199)').length > 0;
200        $slider.toggleClass('cursor_change', hasVisibleArrow);
201    }
202
203    $timeTables.each(function () {
204        const $slider = $(this);
205
206        if ($slider.hasClass('slick-initialized')) return;
207
208        $slider.on('init reInit breakpoint setPosition', function () {
209            $slider.find('dl').attr('tabindex', '0');
210            updateCursor($slider);
211        });
212
213        $slider.slick({
214            infinite: false,
215            dots: false,
216            arrows: true,
217            variableWidth: true,
218            slidesToShow: 14,
219            slidesToScroll: 1,
220            accessibility: true,
221            prevArrow: '<button type="button" class="slick-prev how_prev"></button>',
222            nextArrow: '<button type="button" class="slick-next how_next"></button>',
223            responsive: [
224                {
225                    breakpoint: 1300,
226                    settings: {
227                        slidesToShow: 11,
228                        slidesToScroll: 1
229                    }
230                },
231                {
232                    breakpoint: 1100,
233                    settings: {
234                        slidesToShow: 8,
235                        slidesToScroll: 1
236                    }
237                },
238                {
239                    breakpoint: 810,
240                    settings: {
241                        slidesToShow: 5,
242                        slidesToScroll: 1
243                    }
244                },
245                {
246                    breakpoint: 650,
247                    settings: {
248                        slidesToShow: 3,
249                        slidesToScroll: 1
250                    }
251                },
252                {
253                    breakpoint: 490,
254                    settings: {
255                        slidesToShow: 2,
256                        slidesToScroll: 1
257                    }
258                },
259                {
260                    breakpoint: 375,
261                    settings: {
262                        slidesToShow: 1,
263                        slidesToScroll: 1
264                    }
265                }
266            ]
267        });
268
269        $slider.on('click', 'dl', function () {
270            this.focus();
271        });
272    });
273});
274
275
276//js-photo-modal
277document.addEventListener("DOMContentLoaded", function () {
278    const photoLinks = document.querySelectorAll(".js-photo-modal");
279
280    if (!photoLinks.length) return;
281
282    const modal = document.createElement("div");
283    modal.className = "photo-modal";
284    modal.innerHTML = `
285    <div class="photo-modal__overlay"></div>
286    <div class="photo-modal__content" role="dialog" aria-modal="true" aria-label="Photo of the stop">
287      <button type="button" class="photo-modal__close" aria-label="Close"><span></span></button>
288      <img class="photo-modal__img" src="" alt="">
289    </div>
290  `;
291
292    document.body.appendChild(modal);
293
294    const modalImg = modal.querySelector(".photo-modal__img");
295    const closeBtn = modal.querySelector(".photo-modal__close");
296    const overlay = modal.querySelector(".photo-modal__overlay");
297
298    let lastFocusedElement = null;
299
300    function openModal(link) {
301        const imgSrc = link.getAttribute("href");
302        const imgAlt = link.getAttribute("data-alt") || link.textContent.trim() || "Photo of the stop";
303
304        lastFocusedElement = link;
305
306        modalImg.src = imgSrc;
307        modalImg.alt = imgAlt;
308
309        modal.classList.add("is-active");
310        document.body.classList.add("is-photo-modal-open");
311
312        closeBtn.focus();
313    }
314
315    function closeModal() {
316        modal.classList.remove("is-active");
317        document.body.classList.remove("is-photo-modal-open");
318
319        setTimeout(function () {
320            modalImg.src = "";
321            modalImg.alt = "";
322        }, 350);
323
324        if (lastFocusedElement) {
325            lastFocusedElement.focus();
326        }
327    }
328

329    photoLinks.forEach(function (link) {
330        link.addEventListener("click", function (event) {
331            event.preventDefault();
332            openModal(link);
333        });
334    });
335
336    closeBtn.addEventListener("click", closeModal);
337    overlay.addEventListener("click", closeModal);
338
339    document.addEventListener("keydown", function (event) {
340        if (event.key === "Escape" && modal.classList.contains("is-active")) {
341            closeModal();
342        }
343    });
344});
345
346
347
348document.addEventListener('wpcf7mailsent', function (event) {
349    location = 'https://footbus.co.jp/en/inquiry-submitted/';
350}, false);