https://hotel-grandmer.com/common/js/setting_option.js

1/* --------------------------------------------------------
2	[Setting Option] ※全ページに関わるものだけ記載
3-------------------------------------------------------- */
4$(document).ready(function() {
5	/* 電話番号へのリンク指定
6	   PC     →  「span」で囲む (リンクにしない)
7	   スマホ  →  「class="tel-link"」をつけたリンク
8	-------------------------------------------------------- */
9	if(!navigator.userAgent.match(/(iPhone|iPad|Android)/)){
10		$("a.tel-link").each(function(){
11			$(this).replaceWith('<span class="tel-link">' + $(this).html() + '</span>');
12		});
13	}
14
15
16	/* スムーススクロール
17	-------------------------------------------------------- */
18	$('a[href^="#"]:not(.nosmooth)').click(function(target){
19		var speed = 500;
20		var href= $(this).attr("href");
21		target = $(href == "#" || href == "" ? 'html' : href);
22		var hHeight = '';
23
24		/* ▽ 固定ヘッダーありの場合の処理 ▽ */
25		// ヘッダー固定が解除されるウィンドウ幅
26		var hFixSize = window.matchMedia('(max-width: 600px)');
27		// 固定ヘッダーの高さ
28		if(!hFixSize.matches) {
29			// 固定ヘッダー（ #header_wrap の箇所は固定ヘッダーのid名に合わせてください ）
30			hHeight = $('#header').outerHeight();
31		}
32		/* △ 固定ヘッダーありの場合の処理 ▽ */
33
34		var position = target.offset().top - hHeight;
35		$("html, body").animate({scrollTop:position}, speed, "swing");
36		return false;
37	});
38
39	/* datepicker
40	-------------------------------------------------------- */
41	var dateFormat = 'yy/mm/dd';
42	if ($('.date_489ban').length) {
43		$('.date_489ban input[name="date"]').datepicker({
44			dateFormat: dateFormat,
45			showButtonPanel: true,
46			showAnim: 'slideDown'
47		});
48	}
49
50/* ----- Setting End ----------------------------------- */
51});
52
53// ページが完全に読み込まれたら実行
54$(window).on('load',function(){
55
56	/* Booking
57	-------------------------------------------------------- */
58	$("#reserve-open, #reserve-main .close").on("click", function () {
59		$("#reserve-main").toggleClass("active");
60		if(!$("#menuOuter").hasClass('active')) {
61			$("html, body").toggleClass('pos_fix');
62		}
63	});
64
65	/* object-fit IE対応
66		object-fitプロパティを指定するimgタグに class="ofi" を追加してください。
67		object-fit: cover; のみの場合のcssはbase.cssに記載してありますが、
68		object-positionなどを別途指定する場合は個別にcssを記述する必要があります。
69	-------------------------------------------------------- */
70	objectFitImages('.ofi', {watchMQ: true});
71
72
73	/* グローバルナビ途中から上部固定にする
74		※最初から一番上にくっついてる場合はこのjsいらないので消してください。
75	-------------------------------------------------------- */
76	var nav = $('#header');						// 固定するナビ領域
77	var storeNav = 600;							// ナビ固定を解除するウィンドウ幅
78
79	//リサイズ時の処理
80	$(window).on('resize', function() {
81		if($(window).width() <= storeNav) {
82			nav.css("left", '');
83		}
84	});
85
86	//スクロール時の処理
87	$(window).scroll(function () {
88		if($(window).width() > storeNav){
89			//fixedの際に横スクロールする処理
90			nav.css("left", -$(window).scrollLeft());
91		}
92	});
93
94
95	/* ページトップへ戻るをフェードインで表示
96	-------------------------------------------------------- */
97	var fade_pos = 200; // このpx分スクロールしたらpagetopを表示させる
98
99	if ($(this).scrollTop() <= fade_pos) {
100		$("#pagetop").css({"display":"none"});
101	}
102	$(window).on('scroll',function() {
103		if ($(this).scrollTop() > fade_pos) {
104			$('#pagetop').fadeIn(500);
105		} else {
106			$('#pagetop').fadeOut(500);
107		}
108	});
109
110
111	/* アコーディオンメニュー
112	-------------------------------------------------------- */
113	var accTrigger = $('.acc_tit'),
114			accSpSize = window.matchMedia('(max-width: 600px)'),
115			accGroup;
116	const accChange = function() {
117		accTrigger.each(function() {
118			if($(this).attr('data-size')){
119				if(accSpSize.matches && $(this).attr('data-size') == 'sp') {
120					if($(this).attr('data-group')) {
121						accGroup = $(this).attr('data-group');
122						$('.acc_con[data-group="'+accGroup+'"]').addClass('acc_con').hide();
123					} else {
124						$(this).next().addClass('acc_con').hide();
125					}
126					return true;
127				}
128
129				$(this).next().css('display','').removeClass('acc_con');
130			}
131		});
132	}
133	accSpSize.addListener(accChange);
134	accChange();
135	$('.acc_con').hide();
136	$('.acc_tit').on("click",function(){
137		$(this).toggleClass("active")
138		if($(this).attr('data-group')) {
139			accGroup = $(this).attr('data-group');
140			console.log($('.acc_con[data-group="'+accGroup+'"]'));
141			$('.acc_con[data-group="'+accGroup+'"]').slideToggle(300);
142		} else {
143			$(this).next(".acc_con").slideToggle(300);
144		}
145	});
146
147
148	/* windowリサイズ時の遅延処理 + facebookのリサイズ処理
149	-------------------------------------------------------- */
150	var fbTimer = false;	// タイマー準備
151	var fbWrap = $('#fb_col');	// page pluginの親要素（ここの幅に合わせてpage pluginをリサイズします）
152	var fbSize = fbWrap.width(); // 親要素の横幅初期幅
153	var fbSize_re;
154
155	$(window).on("orientationchange resize",function() {
156		// リサイズ後の放置時間が指定ミリ秒以下なら何もしない(リサイズ中に何度も処理が行われるのを防ぐ)
157		if (fbTimer !== false) {
158			clearTimeout(fbTimer);
159		}
160
161		// 放置時間が指定ミリ秒以上なので処理を実行
162		fbTimer = setTimeout(function() {
163			// リサイズ後の親要素の横幅を取得
164			fbSize_re = fbWrap.width();
165
166			// リサイズ前の親要素の横幅とリサイズ後の親要素の横幅が異なる場合
167			if ( fbSize !== fbSize_re ) {
168				//facebookのリサイズ処理
169				boxWidth=Math.floor(fbSize_re); // 親要素の横幅から小数点を切り捨て
170				currentWidth=fbWrap.find('.fb-page').attr('data-width');
171				if(boxWidth != currentWidth){
172					fbWrap.find('.fb-page').attr('data-width', boxWidth);
173					FB.XFBML.parse();
174				}
175
176				// 次回以降使えるようにリサイズ後の幅を保存
177				fbSize = $(window).width();
178			}
179		}, 200);
180	});
181
182
183	/* 別ページから特定ID箇所へ移動するときに固定ヘッダー分位置をずらす
184	 * aタグのリンクを下記のように設定してください。
185	 * <a href="hoge/?id=id名">hogehoge</a>
186	-------------------------------------------------------- */
187	// urlパラメータの取得
188	var moveArg = new Object;
189	var movePrm = location.search.substring(1).split('&');
190	var moveFlg = false;

191	for(var i=0 ; movePrm[i] ; i++) {
192		var kv = movePrm[i].split('=');
193		moveArg[kv[0]]=kv[1];
194
195		if(kv[0] == 'id') {
196			moveFlg = true;
197		}
198	}
199
200	if( moveFlg ) {
201		var target = $('#' + moveArg['id']);
202		var hHeight = '';
203
204		/* ▽ 固定ヘッダー有りの場合の処理 ▽ */
205		// ヘッダー固定が解除されるウィンドウ幅
206		var hFixSize = window.matchMedia('(max-width: 600px)');
207		// 固定ヘッダーの高さ
208		if(!hFixSize.matches) {
209			// 固定ヘッダー（ #header_wrap の箇所は固定ヘッダーのid名に合わせてください ）
210			hHeight = $('#header').outerHeight();
211		}
212		/* △ 固定ヘッダー有りの場合の処理 △ */
213
214		var position = target.offset().top - hHeight;
215		$("html, body").animate({scrollTop:position}, 500, "swing");
216	}
217
218
219/* ----- Setting End ----------------------------------- */
220});