https://mirai-beauty-clinic.jp/js/common.js?202504020908

1// JavaScript Document
2
3// ファイル全体で使うメディアクエリを定義しておく
4//==========================================================================================
5const mqSP = window.matchMedia('(max-width:767.98px)');
6const mqPC = window.matchMedia('(min-width:768px)');
7// mqSP, mqPCを使用するたびにメディアクエリを評価してパフォーマンスを落とさないためにキャッシュさせて、これを使用する。
8// 使い方： if (isSP) { // ここにSPのときだけの処理 }
9// 使い方： if (isPC) { // ここにPCのときだけの処理 }
10let isSP = mqSP.matches;
11let isPC = mqPC.matches;
12// ウィンドウのリサイズ時に値を再評価
13window.addEventListener('resize', function () {
14  // 値が違ったとき（＝ブレークポイントをまたいだとき）だけ再評価
15  if (isSP !== mqSP.matches) {
16    isSP = mqSP.matches;
17  }
18  if (isPC !== mqPC.matches) {
19    isPC = mqPC.matches;
20  }
21});
22
23
24
25// ファイル全体で使う、印刷プレビュー中かどうかを判断するためのフラグとイベントハンドラーの設定
26//==========================================================================================
27// 印刷中かどうかを判断するフラグ
28let isPrinting = false;
29// 印刷プレビューが開始されたときにフラグをtrueに設定
30window.addEventListener('beforeprint', () => {
31  isPrinting = true;
32});
33// 印刷プレビューが終了したときにフラグをfalseに設定
34window.addEventListener('afterprint', () => {
35  isPrinting = false;
36});
37
38
39
40// SP/PCの境界を通過したらリロード
41//==========================================================================================
42// changeイベントを使い、メディアクエリの状態が変化した（ブレークポイントを通過した）タイミングでだけ発火
43mqSP.addEventListener('change', () => {
44  // 印刷操作中でなければブラウザリロード
45  if (!isPrinting) {
46    window.location.reload();
47  }
48});
49
50
51
52// カレントページのナビゲーションにクラスを付与
53//==========================================================================================
54jQuery(function ($) {
55  // 現在のURLオブジェクトを作成
56  const currentUrl = new URL(window.location.href);
57  // ナビゲーションのリンクを取得（空のhref属性や#のみのhref属性は除外）
58  const navLink = $('.js-global-nav a:not([href=""], [href="#"])');
59  // ナビゲーションのリンクごとに処理
60  navLink.each(function () {
61    // href属性のリンク先URL絶対パスをURLオブジェクトとして作成
62    const elementUrl = new URL($(this).prop('href'));
63    // href属性のパスが現在のURLのパスと一致する場合
64    if (currentUrl.pathname === elementUrl.pathname) {
65      $(this).addClass('is-current');
66      // 一致するリンクが見つかったら、以降のループをせずに終了（同一ページへのリンクが複数ある場合は以下はコメントアウト）
67      return false;
68    }
69  });
70});
71
72
73
74// ドロワーメニュー（SP/PC）
75//==========================================================================================
76jQuery(function ($) {
77  // ドロワーメニューが開いているときは背景のbody要素をスクロールさせないためのクラスを付与
78  $('.js-btn-hamburger, .nav-close').on('click', function () {
79    const btnHamburger = $('.js-btn-hamburger');
80    if (btnHamburger.attr('aria-expanded') === 'false') {
81      $('body').addClass('is-nav-open');
82      btnHamburger.removeClass('load').attr('aria-expanded', true);
83    } else {
84      $('body').removeClass('is-nav-open');
85      btnHamburger.attr('aria-expanded', false);
86    }
87  });
88
89  // アコーディオンメニューの開閉（このサイトではSPでもPCでも同一）
90  const trigger = $(".js-global-nav .parent-wrap > button");
91  const panel = $(".js-global-nav .sub");
92
93  // 初期設定
94  trigger.attr({
95    'aria-expanded': false
96  });
97  panel.hide().attr('aria-hidden', true);
98
99  // a要素・button要素以外の時にEnterキーでもクリックイベントが発動するようにする
100  trigger.not('a, button').on('keydown', function (e) {
101    if (e.key === 'Enter') {
102      $(this).trigger('click');
103    }
104  });
105
106  // トリガークリックで開閉
107  trigger.on('click', function () {
108    // クリックした要素のaria-controls属性値を取得
109    const target = $(this).attr('aria-controls');
110    // 取得したaria-controls属性値と同じidの要素を取得
111    const targetElem = $('#' + target);
112    // 取得したidの要素が表示状態だった場合
113    if (targetElem.is('[aria-hidden=false]')) {
114      // 閉じる
115      $(this).attr({
116        'aria-expanded': false
117      });
118      targetElem.attr('aria-hidden', true);
119      targetElem.slideUp(350, 'swing');
120    } else {
121      // 表示状態ではなかった場合は開く
122      $(this).attr({
123        'aria-expanded': true
124      });
125      targetElem.attr('aria-hidden', false);
126      targetElem.slideDown(350, 'swing');
127    }
128    // return false; // a要素の動作をさせずに終了（このサイトではa要素で使ってる箇所はないので一旦コメントアウトした）
129  });
130});
131
132
133
134// スクロール位置に応じてCSSクラスを追加/削除する要素
135// スクロール位置はデータ属性 data-scroll-position="数値" で個別に指定可能（指定がない場合はデフォルトの200px）
136//==========================================================================================
137jQuery(function ($) {

138  const scrollTriggers = $('.js-scroll-trigger');
139  const scrollClass = 'is-scroll';
140
141  $(window).on('load scroll', function () {
142    const windowPos = $(this).scrollTop();
143
144    scrollTriggers.each(function () {
145      const element = $(this);
146      const scrollPosition = element.data('scroll-position') || 200; //デフォルト値は200
147
148      if (windowPos > scrollPosition) {
149        element.addClass(scrollClass);
150      } else {
151        element.removeClass(scrollClass);
152      }
153    });
154  });
155});
156
157
158
159// 画面内に入ったらクラスを付与する要素
160//==========================================================================================
161jQuery(function ($) {
162  $(window).on('load scroll', function () {
163    const elem = $('.js-inview');
164
165    elem.each(function () {
166      const active = 'is-active';
167      const scrollPos = $(window).scrollTop();
168      const elemOffset = $(this).offset().top;
169      const wh = $(window).height();
170
171      if (scrollPos > elemOffset - wh + (wh / 6)) {
172        // 画面の下から1/6の位置まできたら発動
173        $(this).addClass(active);
174      }
175    });
176  });
177});
178
179
180
181// トップページお知らせ 開閉
182//==========================================================================================
183jQuery(function($) {
184  // お知らせブロックごとに件数カウントをするため、eachで回す
185  const newsBlocks = $(".js-notice-frame");
186
187  newsBlocks.each(function(index) {
188    const trigger = $(this).find(".js-news_trigger");
189    const panel = $(this).find(".js-news_body");
190
191    // 初期設定(4件目以降に閉じる属性付与)
192    trigger.slice(3).attr({
193      'aria-expanded': false
194    });
195    // 最初の3件をオープン（終了位置数字は"未満"の数）
196    trigger.slice(0, 3).delay(0).queue(function(){
197      $(this).attr({
198        'aria-expanded': true
199      }).parent().next(panel).slideDown(0, 'swing');
200    });
201    panel.slice(3).hide().attr('aria-hidden', true);
202    panel.slice(0, 3).attr('aria-hidden', false);
203
204    // タイトルクリックで開閉
205    trigger.on('click', function () {
206      const panel = $(this).parent().next(".js-news_body");
207
208      // クリックした要素の次の要素が表示状態だった場合
209      if (panel.is('[aria-hidden=false]')) {
210        // 閉じる
211        $(this).attr({
212          'aria-expanded': false
213        });
214        panel.attr('aria-hidden', true);
215        panel.slideUp(350, 'swing');
216      } else {
217        // 表示状態ではなかった場合は開く
218        $(this).attr({
219          'aria-expanded': true
220        });
221        panel.attr('aria-hidden', false);
222        panel.slideDown(350, 'swing');
223      }
224    });
225  });
226});
227
228
229
230// ページトップへ戻るボタン
231//==========================================================================================
232jQuery(function ($) {
233  //スクロールしてトップ
234  $('.js-page-top').on('click', function () {
235    window.scrollTo(0, 0);
236    return false;
237  });
238});
239
240
241
242// 同じページ内のアンカーリンクだったときはドロワーメニューを閉じる
243//==========================================================================================
244jQuery(function ($) {
245  $('a[href*="#"]:not([role=tab], [href="#"])').on('click', function () {
246    // 現在のページのURLからパスを取得
247    const currentPath = window.location.pathname;
248    // アンカーのhref属性からURLを解析
249    const anchorUrl = new URL($(this).attr('href'), window.location.href);
250    // アンカーのパスと現在のページのパスが同じ場合のみ処理を実行
251    if (anchorUrl.pathname === currentPath) {
252      // ドロワーメニューを閉じる
253      $(".js-btn-hamburger").each(function(i, elem) {
254        $('body').removeClass('is-nav-open');
255        $(elem).attr('aria-expanded', false);
256      });
257      // PC時のサブメニューも閉じる
258      // if (isPC) {
259      //   $(".js-global-nav .sub").attr('aria-hidden', true);
260      //   $(".js-global-nav .parent-wrap > button").attr('aria-expanded', false);
261      // }
262    }
263  });
264});
265
266
267
268// アコーディオンの開閉（detailsとsummary要素）
269// （よくある質問ページ など）
270//==========================================================================================
271jQuery(function ($) {

272  const accordionDetails = $(".js-accordion-details");
273  const accordionSummary = $(".js-accordion-summary");
274  const accordionPanel = $(".js-accordion-panel");
275
276  accordionSummary.each(function (){
277    $(this).on("click", function (event) {
278        // デフォルトの挙動を無効化（実装時現在、アニメーションをつけたい場合はこうするしかないので仕方なく）
279        event.preventDefault();
280
281        if($(this).parent(accordionDetails).attr("open")){
282            // アコーディオンを閉じるときの処理
283            $(this).removeClass('is-open').nextAll(accordionPanel).slideUp(350, function (){
284                // アニメーションの完了後にopen属性を取り除く
285                $(this).parent(accordionDetails).removeAttr("open");
286                // display:none;を消して、ページ内検索にヒットするようにする
287                $(this).show();
288            });
289        } else {
290            // アコーディオンを開くときの処理
291            // open属性を付ける
292            $(this).parent(accordionDetails).attr("open", "true");
293            // いったんdisplay:none;してからslideDownで開く
294            $(this).addClass('is-open').nextAll(accordionPanel).hide().slideDown(350);
295        }
296    })
297  })
298});
299
300
301
302// スマホ・タブレットのとき.js-telクラスをリンクでラップ
303//==========================================================================================
304if (navigator.userAgent.match(/iPhone|iPad|Android|Mobile|Macintosh/) && 'ontouchend' in document) {
305  $('.js-tel').each(function () {
306    const str = $(this).html();
307    if ($(this).children().is('img')) {
308      $(this).html($('<a class="link-tel">').attr('href', 'tel:' + $(this).children().attr('alt').replace(/-/g, '')).append(str + '</a>'));
309    } else {
310      $(this).html($('<a class="link-tel">').attr('href', 'tel:' + $(this).text().replace(/-/g, '')).append(str + '</a>'));
311    }
312  });
313}