https://www.suzuki4187.org/js/jQ.js

1// JavaScript Document
2
3
4// Global ----------------------------------------
5
6const windowWidth = $(window).width(); // ウィンドウ幅取得
7const custom_root = document.querySelector(':root'); // カスタムプロパティ取得
8const str_bp = getComputedStyle(custom_root).getPropertyValue('--breakpoint'); // css変数ブレイクポイント
9const windowSm = str_bp.replace("px", ""); // px削除
10
11
12// ブレイクポイントでリロード ----------------------------------------
13
14const breakpoint = window.matchMedia('(max-width: ' + str_bp + ')');
15breakpoint.addEventListener("change", () => {
16  window.location.reload();
17});
18
19
20// 電話番号 ----------------------------------------
21
22if (navigator.userAgent.match(/(iPhone|iPad|Android|Mobile)/)) {
23  $('.js-tel').each(function() {
24    let telNumber;
25    if ($(this).children().is('img')) {
26      telNumber = $(this).children().attr('alt').replace(/-/g, '');
27    } else {
28      telNumber = $(this).text().replace(/-/g, '');
29    }
30    $(this).wrap('<a href="tel:' + telNumber + '" style="display: inline-block"></a>');
31  });
32}
33
34
35// Gナビ ----------------------------------------
36
37$('#nav #sp_menu').on('click', function(){ // SPハンバーガーモーダル
38  $('html, body').toggleClass('spnav_modal');
39  $(this).toggleClass('close');
40  $('#nav .gnav_subnav').slideToggle();
41  return false;
42});
43$('#nav #menu_close').click(function(){ // とじるボタン
44  $('html, body').removeClass('spnav_modal');
45  $('#nav #sp_menu').removeClass('close');
46  $('#nav .gnav_subnav').slideUp();
47  return false;
48});
49
50
51if(windowWidth < windowSm){ // SPの場合
52  $('#nav a').click(function(){ // 戻るボタンで戻った時にメニュー閉じているよう対策
53    $('html, body').removeClass('spnav_modal');
54    $('#nav #sp_menu').removeClass('close');
55    $('#nav .gnav_subnav').slideUp();
56  });
57}
58
59// ハンバーガー内　スクロール処理
60const setVh = () => {
61  const vh = window.innerHeight * 0.01;
62  document.documentElement.style.setProperty('--vh', `${vh}px`);
63}
64window.addEventListener('load', setVh);
65
66// ハンバーガー内　リサイズ処理
67let vw = window.innerWidth;
68window.addEventListener('resize', () => {
69  if (vw === window.innerWidth) {
70    return; // 画面の横幅にサイズ変動がないので処理を終える
71  }
72  // 画面の横幅のサイズ変動があった時のみ高さを再計算する
73  vw = window.innerWidth;
74  setVh();
75});
76setVh(); // 初期化
77
78// 診療内容ドロップダウンメニュー
79$('#nav .sub').click(function(){
80  $(this).toggleClass('close').next('#nav .subbox').slideToggle();
81  if(windowWidth >= windowSm){ // PCの場合
82    $('#nav .sub').not(this).removeClass('close').next('#nav .subbox').slideUp();
83  }
84  return false;
85});
86
87// エリア外クリックで閉じる
88$(document).on('click', function(e){
89  if(windowWidth < windowSm){ // スマホの場合
90    if($('.spnav_modal').is(':visible')){
91      if(!$(e.target).closest('#nav .gnav_subnav').length){
92        $('html, body').removeClass('spnav_modal');
93        $('#nav #sp_menu, #nav #menu_close').removeClass('close');
94        $('#nav .gnav_subnav').slideUp();
95      }
96    }
97  } else { // PCの場合
98    $('html, body').removeClass('spnav_modal');
99    if($('#nav .subbox').is(':visible')){
100      if(!$(e.target).closest('#nav').length){ // タブレット対応
101        $('#nav .sub').removeClass('close');
102        $('#nav .subbox').slideUp();
103      }
104    }
105  }
106});
107
108// カレントメニュー処理 ----------------------------------------
109const currentURL = location.href;
110const currentURLNoHash = currentURL.replace(/#.*$/, "");
111
112// すべての current クラスを一旦削除
113$('#nav .current, .subnav .current').removeClass('current');
114
115// ハッシュなしと完全一致
116$('#nav a, .subnav a').filter(function(){
117  return $(this).prop('href') === currentURL || $(this).prop('href') === currentURLNoHash;
118}).addClass('current');
119
120// アンカーナビ用
121$('#nav a[href*="#"]').on('click', function(){
122  $('#nav a, .subnav a').removeClass('current');
123  $(this).addClass('current');
124});
125
126
127// トップ　キービジュアル　slick ----------------------------------------
128
129$('#keyvsl').slick({
130  cssEase: 'linear', // 一定速度
131  autoplay: true, // Autoplay
132  autoplaySpeed: 5000, // インターバル
133  speed: 700, // 切替時間

134  arrows: false, // Prev/Next
135  dots: false, // インジケーター
136  fade: true
137});
138$('#keyvsl').delay(50).css('visibility','visible');
139
140
141// 新お知らせエディタ --------------------------------------------
142// DOM変更を監視する共通関数
143function watchDOM(selector, callback) {
144  const observer = new MutationObserver(() => {
145    callback(); // 指定された処理を実行
146  });
147
148  const container = $(selector)[0];
149
150  if (container) {
151    observer.observe(container, {
152      childList: true,  // 子要素の追加・削除を監視
153      subtree: true     // 孫要素以下の変更も監視
154    });
155  }
156}
157
158function initAccordion() {
159  // 最初の3つを開く
160  $('.accordion-item').each(function(index) {
161    if (index < 3) {
162      $(this).prop('open', true).addClass('open');
163    }
164  });
165
166  // クリックイベント設定（重複登録を防ぐ）
167  $('.accordion-item').off('toggle.accordion').on('toggle.accordion', function() {
168    $(this).toggleClass('open', this.open);
169  });
170}
171
172// 適用
173$(function() {
174  initAccordion(); // 初回用
175  watchDOM('[data-styled]', initAccordion); // Vueで生成されたHTMLにも対応
176});
177
178// カルーセル（バラ） ----------------------------------------
179
180$('#loopslider').on('init', function(){
181  $('#loopslider .slick-slide').each(function(i){
182    if(i % 2){
183      $(this).addClass('is-even');
184    }
185  });
186});
187
188
189$('#loopslider').slick({
190  arrows: false,
191  dots: false,
192  infinite: true,
193  autoplay: true,
194  autoplaySpeed: 0,
195  speed: 3000,
196  cssEase: 'linear',
197  slidesToScroll: 1,
198  pauseOnHover: false,
199  pauseOnFocus: false,
200  swipe: false,
201  draggable: false,
202  centerMode: true,
203  variableWidth: true,
204});
205
206
207// クリニック紹介ギャラリー/アクセスルートギャラリー slick ----------------------------------------
208
209$(".gallery_slider, .route_slider").each(function(){ // メイン画像
210  $(this).slick({
211    cssEase: 'linear', // 一定速度
212    infinite: !$(this).hasClass("route_slider"),
213//    autoplay: true, // Autoplay
214//    autoplaySpeed: 5000, // インターバル
215    dots: true, // インジケーター
216    fade: true,
217    speed: 500, // 切替時間
218    adaptiveHeight: true, // 内容によって高さ可変
219    asNavFor: "#" + $(this).attr("id") + "_nav", // 複数スライド対応
220    responsive: [{ // SPアローなしの場合
221      breakpoint: 576, // スマホの場合
222      settings: {
223        arrows: false,
224      },},
225    ]
226  });
227});
228$(".gallery_thum, .route_thum").each(function(){ // サムネ
229  $(this).slick({
230    infinite: !$(this).hasClass("route_thum"),
231    slidesToShow: 7,
232    slidesToScroll: 1,
233    centerMode: true,
234    centerPadding: 0,
235    arrows: false, // Prev/Next
236    cssEase: 'linear', // 一定速度
237    focusOnSelect: true, // クリックで切り替え
238    asNavFor: "#" + $(this).attr("id").replace("_nav", ""), // 複数スライド対応
239    responsive: [{
240      breakpoint: 576, // スマホの場合
241      settings: {
242        slidesToShow: 3,
243      },},
244    ]
245  });
246});
247$('.gallery').delay(50).css('visibility','visible');
248
249
250// フッター列の最後の「｜」調整 -----------------------------------------------
251// 最後尾のliに .last-in-row を付ける
252
253function LastInRow() {
254const $items = $(".footer ul li:visible");
255  $items.removeClass("last-in-row");
256  const rowMap = {};
257  $items.each(function () {
258    const top = Math.round($(this).offset().top);
259    if (!rowMap[top]) {
260      rowMap[top] = [];
261    }
262    rowMap[top].push(this);
263  });
264  $.each(rowMap, function (_, row) {
265    const lastItem = row[row.length - 1];
266    $(lastItem).addClass("last-in-row");
267  });
268}
269function runLastInRowWithDelay() { // 少し待つ
270  setTimeout(() => {
271    requestAnimationFrame(LastInRow);
272  }, 100);
273}
274$(window).on("load resize", runLastInRowWithDelay);
275
276
277// SPフッター固定　電話・WEb予約・ページアップ ----------------------------------------
278
279$('#tel_up').hide();
280$(window).scroll(function(){
281  if($(this).scrollTop() > 200){
282    $('#tel_up').fadeIn().css('visibility', 'visible');
283  } else {
284    $('#tel_up').fadeOut();
285  }
286});
287$('#pageup').on('click', function(){
288  $('html, body').animate({ scrollTop: 0 }, 500, 'swing');
289  return false;
290});
291
292
293// モーダル -----------------------------------------------
294
295// 開く
296$('[id^="open_modal"]').on('click', function () {
297  const num = this.id.replace('open_modal', '');
298  const modal = document.getElementById(`modal${num}`);
299
300  modal.showModal();
301  modal.scrollTop = 0;
302  $('body').addClass('modal_open');
303});
304
305// 閉じる
306$('.close_modal').on('click', function () {
307  const modal = $(this).closest('dialog')[0];
308
309  modal.close();
310  $('body').removeClass('modal_open');
311});
312
313// 背景クリックで閉じる
314$('dialog.modal_box').on('click', function (e) {
315  if (e.target === this) {
316    this.close();
317    $('body').removeClass('modal_open');
318  }
319});