https://www.niseko-nic.com/wp-content/themes/niseko-nic/js/utils.js?ver=20260723829

1// JavaScript Document
2
3// スマホのとき.telクラスをリンクでラップ
4//==========================================================================================
5if ( navigator.userAgent.match( /(iPhone|Android|Mobile)/ ) ) {
6	jQuery( function( $ ) {
7		$( '.tel, .tel2' ).each( function() {
8			const str = $( this ).html();
9			if ( $( this ).children().is( 'img' ) ) {
10				$( this ).html( $( '<a class="link-tel">' ).attr( 'href', 'tel:' + $( this ).children().attr( 'alt' ).replace( /-/g, '' ) ).append( str + '</a>' ) );
11			} else {
12				$( this ).html( $( '<a class="link-tel">' ).attr( 'href', 'tel:' + $( this ).text().replace( /-/g, '' ) ).append( str + '</a>' ) );
13			}
14		} );
15	} );
16}
17
18// ページトップへ戻るボタン
19//==========================================================================================
20jQuery( function( $ ) {
21	//トップへ戻るボタン
22	const topBtn = $( '#page-top' );
23	topBtn.hide();
24	//スクロールが200に達したらボタン表示
25	$( window ).scroll( function() {
26		if ( $( this ).scrollTop() > 200 ) {
27			topBtn.fadeIn();
28		} else {
29			topBtn.fadeOut();
30		}
31	} );
32	//スクロールしてトップ
33	topBtn.click( function() {
34		$( 'body,html' ).animate( {
35			scrollTop: 0,
36		}, 500 );
37		return false;
38	} );
39} );
40
41// ドロップダウンメニュー
42//==========================================================================================
43// PC CSSのみで実装
44// ただし、ページ読み込み時に一瞬表示されてしまうことがあるのでCSSでdisplay:none;にしてあるのをJSが読み込まれたらフェードインを指定しておき解除する
45// jQuery( window ).on( 'load', function() {
46// 	// SPハンバーガー内の.subを含んでしまわないようにセレクタを工夫
47// 	jQuery( '.main-navigation .sub-menu' ).addClass( 'load' );
48// } );
49
50// ドロワーメニューが開いているときは背景のhtml要素をスクロールさせないためのクラスを付与
51jQuery(function ($) {
52	let st;
53	$('#js-btnHamburger').click(function () {
54		if ($(this).attr('aria-expanded') === 'false') {
55			st = $(window).scrollTop(); // ブラウザ全体のスクロール位置を取得
56			$('html').addClass('is-fixed').css({'top': -st});
57			$(this).attr('aria-expanded', true);
58			$('.nav-web-reserve').hide();
59		} else {
60			$('html').removeClass('is-fixed').css({'top': 0});
61			$(window).scrollTop(st);
62			$(this).attr('aria-expanded', false);
63			if (window.matchMedia( '(min-width: 769px)' ).matches) {
64				$('.nav-web-reserve').show();
65			}
66		}
67	});
68
69	/* ブラウザバックしたときにiOSでメニューが開いたままになるので、ブラウザバックしたらリロード（主にiOS対策）
70       ※ window.onpageshow では2回以上戻ったときに効かないとのことで popstate を使用
71       popstateはアドレスバーが変わると発火する（同一ページ内のアンカーリンクや別タブへのアンカーも）ので、スムーススクロールのスクリプトにa要素のデフォルト動作（アドレスバーの状態を変更）させずに終了する return false; などをつけるか、リロード以外の動作でなんとかする */
72	history.replaceState(null, document.getElementsByTagName('title')[0].innerHTML, null);
73	window.addEventListener('popstate', function(e) {
74		// リロードさせる場合
75		// window.location.reload();
76
77		// リロード以外の動作で
78		$("#js-btnHamburger").each(function(i, elem) {
79		  $('html').removeClass('is-fixed').css({'top': 0});
80		  $(elem).attr('aria-expanded', false);
81		});
82
83	});
84});
85
86
87// フェードインの汎用トリガー
88//==========================================================================================
89jQuery( function( $ ) {
90	$( window ).scroll( function() {
91		const elem = $( '.js-fadeIn' );
92
93		elem.each( function() {
94			const active = 'active';
95			const scrollPos = $( window ).scrollTop();
96			const elemOffset = $( this ).offset().top;
97			const wh = $( window ).height();
98
99			if ( scrollPos > elemOffset - wh + ( wh / 7 ) ) {

100				// 画面の下から1/7の位置まできたら発動
101				$( this ).addClass( active );
102			}
103		} );
104	} );
105	$( window ).scroll(); // ファーストビューに該当要素が入っている場合に即時に呼び出す
106} );
107
108
109// タブ切り替え
110//==========================================================================================
111jQuery(function ($) {
112  const tab = $('.js-tab-list [role="tab"]'),
113        tabpanel = $('[role="tabpanel"]');
114
115  tab.stop().on("click", function () {
116    const id = $(this).attr('href'); // idを取得
117    $(".js-tab-body").find("*").removeClass("active"); // タブコンテンツ内のスクロールフェードイン用
118    
119    // タブボタンの状態変更
120    tab.attr('aria-selected', false);
121    $(this).attr('aria-selected', true);
122    
123    // タブコンテンツの状態変更
124    tabpanel.attr('aria-hidden', true);
125    $(id).attr('aria-hidden', false);
126
127    // タブが表示された後に slick を再計算（重要！）
128    setTimeout(function () {
129      $(id).find('.thumb_slider, .thumb').slick('setPosition');
130    }, 100);
131
132    // タブコンテンツ内のスクロールフェードイン用
133    $(window).scroll();
134
135    return false;
136  });
137});
138
139
140
141// アンカー付きで別ページからタブがあるページに遷移してきた場合に、タブの処理をしてスクロール
142//==========================================================================================
143jQuery(function($){
144	const hash = location.hash;
145	// hashに値があれば
146	if (hash !== '') {
147		// ダイレクトにハッシュの位置に行かないよう、一旦トップに。ただし、処理が追いつかなくて一瞬ハッシュ位置が表示される場合が多い
148		$('body,html').stop().scrollTop(0); // Chromeでタブパネル内にアンカー先があるときに効かないことがある
149
150		// 一旦全部のタブコンテンツを非表示に、全部のタブボタンを非選択状態に
151		$('[role=\"tabpanel\"]').attr('aria-hidden', true);
152		$('.js-tab-list [role=\"tab\"]').attr('aria-selected', false);
153
154		// hashがタブボタンだった場合
155		if ($(hash).is('[role=tab]')) {
156			// hashを持つタブコンテンツを表示
157			const id = hash.slice(1); // #を削除
158			$('[aria-labelledby=\"' + id + '\"]').attr('aria-hidden', false);
159
160			// 該当のタブボタンを選択状態に
161			$(hash).attr('aria-selected', true);
162		} else {
163			const has = $('.tab-panel').has(hash); // hashを持つタブコンテンツ要素を取得
164
165			// hashを持つタブコンテンツを表示
166			has.attr('aria-hidden', false);
167
168			// 該当のタブボタンを選択状態に
169			const id = has.attr('id'); // idを取得
170			$('[aria-controls=\"' + id + '\"]').attr('aria-selected', true);
171		}
172
173		// hashの位置にスクロール
174		setTimeout(function () {
175			const mq = window.matchMedia('(max-width:767px)');
176			// PCの固定ヘッダー高さpx
177			let headerHeight = 0;
178			// SPだけ固定ヘッダー
179			if (mq.matches) {
180				// ヘッダーの高さをpxで取得
181				headerHeight = $('#masthead').outerHeight();
182			}
183			const tt = $(hash).offset().top;
184			$('html,body').stop().animate({ scrollTop: tt - headerHeight - 10 }, 500, 'swing');
185		}, 300);
186	}
187});
188
189
190// ページ内スムーススクロール
191//==========================================================================================
192jQuery( function( $ ) {
193	$( 'a[href^="#"]' ).not('[role=tab]').click( function() {
194
195    // rem単位をpx単位に変換する
196    // function convertRemToPx(rem) {
197    // 	const fontSize = getComputedStyle(document.documentElement).fontSize;
198    // 	return rem * parseFloat(fontSize);
199    // }
200    // const headerHeight = convertRemToPx(5.2);
201    // console.log(headerHeight);
202
203    const href = $( this ).attr( 'href' );
204    const target = $( href );
205		var datacheck = $(this).data('check');
206
207    // アンカー先がタブボタンだった場合
208    if (target.is('[role=tab]')) {
209      // タブボタンの状態変更
210      $('.js-tab-list [role="tab"]').attr('aria-selected', false);
211      target.attr('aria-selected', true);

212      // タブコンテンツの状態変更
213      const id = href.slice(1); // #を削除
214      $('[role="tabpanel"]').attr('aria-hidden', true);
215      $('[aria-labelledby="' + id + '"]').attr('aria-hidden', false);
216    }
217
218    // アンカー先の親要素がタブボタンだった場合
219		if (datacheck == 'moveless') {
220			const tabname = $(this).data('tab');
221			$('[role=\"tabpanel\"]').attr('aria-hidden', true);
222			$('.js-tab-list [role=\"tab\"]').attr('aria-selected', false);
223			$('[aria-labelledby=\"' + tabname + '\"]').attr('aria-hidden', false);
224			$('#'+tabname).attr('aria-selected', true);
225    }
226
227    const mq = window.matchMedia('(max-width:767px)');
228    // PCの固定ヘッダー高さpx
229    let headerHeight = 0;
230    // SPの固定ヘッダー高さ
231    if (mq.matches) {
232      // ヘッダーの高さをpxで取得
233      headerHeight = $('#masthead').outerHeight();
234    }
235
236    const tt = target.offset().top;
237    $( 'body,html' ).stop().animate( { scrollTop: tt - headerHeight - 10 }, 500, 'swing' );
238    return false; // ブラウザバック対策用のpopstateがアンカーでアドレスバーが変わると発火してリロードしてしまうので、a要素のデフォルト動作を防止する（アドレスバーにアンカーを付与しないで終了する）	
239
240	} );
241} );
242
243
244// FAQ/お問い合わせページ よくある質問、プライバシーポリシー アコーディオン
245//==========================================================================================
246jQuery( function( $ ) {
247	const tab = $(".js-accordion-tab"),
248		panel = $(".js-accordion-panel");
249
250	// 初期設定
251	tab.attr({
252		'aria-selected': false,
253		'aria-expanded': false
254	});
255	panel.hide().attr('aria-hidden', true);
256
257	// タイトルクリックで開閉
258	tab.on('click', function () {
259		// クリックした要素の次の要素が表示状態だった場合
260		if ($(this).next().is(':visible')) {
261			// 閉じる
262			$(this).attr({
263				'aria-selected': false,
264				'aria-expanded': false
265			});
266			$(this).next().attr('aria-hidden', true);
267			$(this).removeClass('open').next().slideUp(350, 'swing');
268		} else {
269			// 表示状態ではなかった場合は開く
270			$(this).attr({
271				'aria-selected': true,
272				'aria-expanded': true
273			});
274			$(this).next().attr('aria-hidden', false);
275			$(this).addClass('open').next().slideDown(350, 'swing');
276		}
277	});
278});
279
280
281// 当院についてページ メディア情報のMasonry
282//==========================================================================================
283// DOMの変化が起こった時の処理
284var observer = new MutationObserver(function(){
285	const $grid = jQuery('.grid').imagesLoaded(function(){
286		$grid.masonry({
287			itemSelector: '.grid-item',
288			columnWidth: '.grid-sizer',
289			percentPosition: true
290		});
291	});
292});
293// 監視対象の要素オブジェクト
294const elem = document.getElementById('media-tab');
295// 監視時のオプション（属性値）
296const config = {
297	attributes: true
298};
299
300// 監視対象の要素が存在すれば変化監視をスタート
301if(elem){
302	observer.observe(elem, config);
303}
304
305// jQuery(function ($) {
306// 	// ページロード時にアクティブではないタブにいるとレイアウトが崩れるのでタブクリックのタイミングで発火
307// 	$('#media-tab').stop().on('click', function () {
308// 		const $grid = $('.grid').imagesLoaded(function(){
309// 			$grid.masonry({
310// 				itemSelector: '.grid-item'
311// 			});
312// 		});
313// 	});
314// });
315
316
317	
318
319   
320jQuery( function( $ ) {
321   
322  // 「.modal_open」をクリックしたらモーダルと黒い背景を表示する
323  $('.modal_open').click(function(){
324 
325    // 黒い背景をbody内に追加
326    $('body').append('<div class="modal_bg"></div>');
327    $('.modal_bg').fadeIn();
328 
329    // data-targetの内容をIDにしてmodalに代入
330    var modal = '#' + $(this).attr('data-target');
331 
332    // モーダルをウィンドウの中央に配置する
333    function modalResize(){
334        var w = $(window).width();
335        var h = $(window).height();
336 
337        var x = (w - $(modal).outerWidth(true)) / 2;
338        var y = (h - $(modal).outerHeight(true)) / 2;
339 
340    // 上からの位置を固定する
341    var fixedTopPosition = 50;
342    $(modal).css({ 'left': x + 'px', 'top': fixedTopPosition + 'px' });
343    }
344 
345    // modalResizeを実行
346    modalResize();
347 

348    // modalをフェードインで表示
349    $(modal).fadeIn();
350 
351    // .modal_bgか.modal_closeをクリックしたらモーダルと背景をフェードアウトさせる
352    $('.modal_bg, .modal_close').off().click(function(){
353        $('.modal_box').fadeOut();
354        $('.modal_bg').fadeOut('slow',function(){
355            $('.modal_bg').remove();
356        });
357    });
358 
359    // ウィンドウがリサイズされたらモーダルの位置を再計算する
360    $(window).on('resize', function(){
361        modalResize();
362    });
363 
364    // .modal_switchを押すとモーダルを切り替える
365    $('.modal_switch').click(function(){
366 
367      // 押された.modal_switchの親要素の.modal_boxをフェードアウトさせる
368      $(this).parents('.modal_box').fadeOut();
369 
370      // 押された.modal_switchのdata-targetの内容をIDにしてmodalに代入
371      var modal = '#' + $(this).attr('data-target');
372 
373      // モーダルをウィンドウの中央に配置する
374      function modalResize(){
375          var w = $(window).width();
376          var h = $(window).height();
377 
378          var x = (w - $(modal).outerWidth(true)) / 2;
379          var y = (h - $(modal).outerHeight(true)) / 2;
380 
381    // 上からの位置を固定する
382    var fixedTopPosition = 50;
383    $(modal).css({ 'left': x + 'px', 'top': fixedTopPosition + 'px' });
384 //$(modal).css({'left': x + 'px','top': y + 'px'});
385      }
386 
387      // modalResizeを実行
388      modalResize();
389 
390      $(modal).fadeIn();
391 
392      // ウィンドウがリサイズされたらモーダルの位置を再計算する
393      $(window).on('resize', function(){
394          modalResize();
395      });
396    });
397  });
398	
399	
400$('.thumb_slider').slick({
401  dots: true,
402  arrows: true,
403  asNavFor: '.thumb',
404  lazyLoad: 'ondemand', // ←★これを追加！
405  infinite: true,
406  speed: 500,
407  fade: false
408});
409
410$('.thumb').slick({
411  asNavFor: '.thumb_slider',
412  focusOnSelect: true,
413  slidesToShow: 4,
414  slidesToScroll: 1,
415  arrows: false,
416  lazyLoad: 'ondemand' // ←★これも追加！
417});
418	
419});
420
421// Placement History about-en.php 
422jQuery(function ($) {
423
424  $('.js-student-history').hide();
425
426  $('.js-toggle-history').on('click', function (e) {
427    e.preventDefault();
428
429    $('.js-student-history').slideToggle();
430
431  });
432
433});