https://client.kanagawa-doctors.com/assets/js/common.js

1/* -------------------------
2ナビメニュー
3---------------------------- */
4// window.addEventListener('DOMContentLoaded', function () {
5//   //ナビボタンの取得
6//   const navButton = document.getElementById('l-header-sp__menu');
7//   //ナビメニューの取得
8//   const navMenu = document.getElementById('l-nav-sp-area');
9//   //閉じるの取得
10//   const closeButton = document.getElementById('l-nav-sp-close');
11//   //オーバーレイ
12//   const overlay = document.getElementById('l-header-sp-overlay');
13//   //body
14//   const body = document.querySelector('body');
15
16
17//   //ナビボタンをクリック
18//   navButton.addEventListener('click', function () {
19//     //ナビメニューの表示
20//     navMenu.classList.toggle('is-show');
21//     overlay.classList.toggle('is-show');
22//     body.classList.toggle('is-fixed');
23//   });
24//   //閉じるボタンをクリック
25//   closeButton.addEventListener('click', function () {
26//     //ナビメニューの表示
27//     navMenu.classList.toggle('is-show');
28//     overlay.classList.toggle('is-show');
29//     body.classList.toggle('is-fixed');
30//   });
31
32
33//   //オーバーレイをクリック
34//   overlay.addEventListener('click', function () {
35//     navMenu.classList.remove('is-show');
36//     overlay.classList.remove('is-show');
37//     body.classList.remove('is-fixed');
38//   });
39// });
40
41
42
43
44/* -------------------------
45スクロールするとナビメニューを表示させる
46---------------------------- */
47// function headerScroll() {
48//   // headerのクラスを取得
49//   const headerArea01 = document.querySelector(".l-header-area01");
50//   const navLogo = document.querySelector(".l-nav-area__logo--front");
51
52//   if (window.matchMedia('(min-width: 768px)').matches && navLogo) {
53
54//     // スクロール位置
55//     let scrollPositon_init = window.scrollY;
56//     let switchPoint = headerArea01.offsetHeight;
57
58//     // 初期状態
59//     if (scrollPositon_init > switchPoint) {
60//       navLogo.classList.add("is-show");
61//     } else {
62//       navLogo.classList.remove("is-show");
63//     }
64
65//     // スクロール時
66//     window.addEventListener("scroll", function () {
67//       // スクロール位置
68//       let scrollPositon = window.scrollY;
69//       // スクリール位置が数値を超えたら
70//       if (scrollPositon > switchPoint) {
71//         navLogo.classList.add("is-show");
72//       } else {
73//         navLogo.classList.remove("is-show");
74//       }
75//     });
76//   }
77// }
78
79// window.addEventListener("DOMContentLoaded", headerScroll());
80
81
82
83/* -------------------------
84アコーディオン
85---------------------------- */
86jQuery(function ($) {
87  // 検索画面のアコーディオン
88  const search_accordion_head = $('.u-accordion');
89
90  if (window.innerWidth < 768 && search_accordion_head.length !== 0) {
91    search_accordion_head.append('<span class="u-accordion-btn"></span>');
92  }
93
94  search_accordion_head.on('click', function () {
95    $(this).next().slideToggle();
96    $(this).children('.u-accordion-btn').toggleClass('is-close');
97  });
98
99});
100
101
102/* -------------------------
103placeholderのテキスト変更
104---------------------------- */
105function search_text() {
106  const search_area = document.getElementById('search-area');
107  if (window.innerWidth < 768 && search_area) {
108    search_area.setAttribute('placeholder', 'エリア・駅名');
109  }
110
111  const search_medical = document.getElementById('search-medical');
112  if (window.innerWidth < 768 && search_medical) {
113    search_medical.setAttribute('placeholder', '診療科目');
114  }
115
116  const search_freeword = document.querySelector('.c-search-freeword__input');
117  const search_freeword_cliniclist = document.querySelector('.p-clinicList-search__free-search-text');
118  const search_freeword_front = document.getElementById('search-freeword');
119
120  if (window.innerWidth < 768) {
121    if (search_freeword) {
122      search_freeword.setAttribute('placeholder', '病院名・院長名などのフリーワード');
123    } else if (search_freeword_cliniclist) {
124      search_freeword_cliniclist.setAttribute('placeholder', '病院名・院長名などのフリーワード');
125    } else if (search_freeword_front) {
126      search_freeword_front.setAttribute('placeholder', '病院名・院長名などのフリーワード');
127    }
128
129  }
130
131}
132
133window.addEventListener('DOMContentLoaded', search_text());
134
135
136/* -------------------------
137Datepicker
138---------------------------- */
139$('.datepicker').datepicker();
140
141
142/* -------------------------
143☑ チェックした予約枠を一括ブロック／解除
144---------------------------- */
145// さらにバルクチェック用のコードも同じイベントで登録する
146window.addEventListener('DOMContentLoaded', function () {
147  const selectedDateTimeZones = document.getElementsByName('selectedDateTimeZones[]');
148  const bulkSettingButtons = Array.from(document.getElementsByName('bulkSetting'));
149  let count = 0;
150

151  Array.from(selectedDateTimeZones).forEach(checkbox => {
152    checkbox.addEventListener('click', function () {
153      count += this.checked ? 1 : -1;
154      bulkSettingButtons.forEach(btn => {
155        btn.disabled = (count === 0);
156        btn.classList.toggle('is-active', count !== 0);
157      });
158    });
159  });
160});
161
162
163
164/* -------------------------
165休診日と診療時間の設定
166---------------------------- */
167let businessday_btn = document.querySelectorAll('.p-reserve-setting-panel__business-day');
168businessday_btn = Array.from(businessday_btn);
169let biweeklyLink = document.querySelectorAll('.p-reserve-setting-panel__biweeklyLink');
170biweeklyLink = Array.from(biweeklyLink);
171
172// 休診日と診療時間の設定
173businessday_btn.forEach((element, index) => {
174  businessday_btn[index].addEventListener('click', function () {
175    element.classList.toggle('is-change');
176    const panelBody = element.parentNode;
177    let biweekly = panelBody.querySelector('.p-reserve-setting-panel__biweekly');
178    if (biweekly) {
179      biweekly.classList.toggle('is-show');
180    }
181  });
182});
183
184biweeklyLink.forEach((element, index) => {
185  biweeklyLink[index].addEventListener('click', function () {
186
187    let biweeklySetting = element.parentNode;
188    biweeklySetting.nextElementSibling.classList.toggle('is-show');
189  });
190});
191
192/* -------------------------
193診療時間テーブルを追加・削除
194---------------------------- */
195jQuery(function ($) {
196  // 診療時間テーブル(2)と(3)を初期状態で閉じる（データが空の場合のみ）
197  const tableItems = $('.c-definition-list02__item');
198  tableItems.each(function (index) {
199    if (index > 0) { // インデックスが1以上（2番目と3番目のテーブル）
200      const $listItems = $(this).find('.c-definition-list02__list-item');
201      const $hiddenInput = $(this).find('input[type="hidden"]');
202
203      // データが空の場合（hidden inputの値が0）のみ非表示にする
204      if ($hiddenInput.val() === '0') {
205        $listItems.hide();
206        $(this).find('.c-definition-list02__accordionBtn').removeClass('is-frag');
207      }
208    }
209  });
210
211  const timetable_btn = $('.c-definition-list02__accordionBtn');
212
213  // 初期化：value=1のhidden inputに対応するボタンにis-fragを付与
214  $('.c-definition-list02__item').each(function () {
215    const $item = $(this);
216    const $hiddenInput = $item.find('input[type="hidden"]');
217    const $btn = $item.find('.c-definition-list02__accordionBtn');
218    if ($hiddenInput.val() === '1') {
219      $btn.addClass('is-frag');
220      $btn.children('.c-definition-list02__accordionBtn-text').text('このテーブルを削除する');
221    }
222  });
223
224  timetable_btn.on('click', function () {
225    const $btn = $(this);
226    const $listItems = $btn.closest('.c-definition-list02__item').find('.c-definition-list02__list-item');
227    const $item = $btn.closest('.c-definition-list02__item');
228    const hiddenInput = $item.find('input[type="hidden"]');
229    const currentValue = hiddenInput.val();
230
231    // スライドトグル
232    $listItems.slideToggle();
233
234    // アイコンの切り替え
235    $btn.children('.c-definition-list02__accordionBtn-icon').toggleClass('is-close');
236    $btn.toggleClass('is-frag');
237
238    // テキストの切り替え
239    if ($btn.hasClass('is-frag')) {
240      $btn.children('.c-definition-list02__accordionBtn-text').text('このテーブルを削除する');
241      hiddenInput.val('1');
242    } else {
243      $btn.children('.c-definition-list02__accordionBtn-text').text('このテーブルを追加する');
244      hiddenInput.val('0');
245    }
246
247    // console.log('Current value:', currentValue);
248    // console.log('New value:', hiddenInput.val());
249  });
250});
251
252
253
254/* -------------------------
255ポップアップ画面
256---------------------------- */
257window.addEventListener('DOMContentLoaded', function () {
258  const popup = document.getElementById('c-popup');
259  const success = document.body.dataset.success;
260
261  if (success === 'true' && popup) {
262    popup.classList.add('is-show');
263  }
264});
265
266// 削除時の確認ポップアップを表示させる
267const deleteBtn = document.getElementById('delete-btn');
268if (deleteBtn) {
269  deleteBtn.addEventListener('click', function (event) {

270    // OK であれば何もせずリンクを続行、キャンセル時だけ止める
271    if (!window.confirm("本当に削除しますか？")) {
272      event.preventDefault();
273    }
274  });
275}