https://www.sinyuhotel.co.jp/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	▼画像：2パターン用意し、PC用に「_pc」タブレット＆スマホ用に「_sp」を追加。
18	▼HTML：下記クラス+データサイズを該当する画像のimgタグに追加
19	600で切り替え → class="switch" data-size="sp"
20	-------------------------------------------------------- */
21	var $setElem = $('.switch'),
22			pcName = '_pc',
23			spName = '_sp',
24			spSize = window.matchMedia('(max-width: 600px)');
25
26	const imgSize = function(){
27		$setElem.each(function(){
28			if($(this).attr('data-size')=='sp' && spSize.matches) {
29				$(this).attr('src',$(this).attr('src').replace(pcName,spName));
30			} else {
31				$(this).attr('src',$(this).attr('src').replace(spName,pcName));
32			}
33		});
34	};
35	spSize.addListener(imgSize);
36	imgSize();
37
38
39	/* スムーススクロール
40	-------------------------------------------------------- */
41	$('a[href^="#"]:not(.nosmooth)').click(function(){
42		var speed = 500;
43		var href= $(this).attr("href");
44		var target = $(href == "#" || href == "" ? 'html' : href);
45		var hHeight = '';
46
47		/* ▽ 固定ヘッダーありの場合の処理 ▽ */
48	// ヘッダー固定が解除されるウィンドウ幅
49	var hFixSize = window.matchMedia('(max-width: 600px)');
50	// 固定ヘッダーの高さ
51	if(!hFixSize.matches) {
52		// 固定ヘッダー（ #header_wrap の箇所は固定ヘッダーのid名に合わせてください ）
53		hHeight = $('#header_wrap').outerHeight() + 20;
54	}
55		/* △ 固定ヘッダーありの場合の処理 ▽ */
56
57		var position = target.offset().top - hHeight;
58		$("html, body").animate({scrollTop:position}, speed, "swing");
59		return false;
60	});
61
62/* ----- Setting End ----------------------------------- */
63});
64
65// ページが完全に読み込まれたら実行
66$(window).on('load',function(){
67
68
69
70	/* グローバルナビ途中から上部固定にする
71		※最初から一番上にくっついてる場合はこのjsいらないので消してください。
72	-------------------------------------------------------- */
73	var nav = $('#header_wrap');						// 固定するナビ領域
74	var con = $('#contents_wrap');	// ナビ領域の次の要素（ナビがfixedになった時に位置がずれないように上にpaddingを確保する要素）
75	var navTop = nav.offset().top;	// 固定するナビまでの高さを算出
76	var navHeight = $("#header_wrap").height(); // nav_wrap の高さを取得
77	var storeNav = 600;							// ナビ固定を解除するウィンドウ幅
78	function navFix() {
79		if($(this).scrollTop() >= navHeight && $(window).width() > storeNav) {
80			if(!nav.hasClass('fixed')) {
81				nav.addClass('fixed');	// fixed クラスを追加
82				//con.css('padding-top', parseInt(con.css('padding-top'))+parseInt(navHeight)+'px');	// コンテンツ領域上部にgnav分の余白を確保
83			}
84		} else if(nav.hasClass('fixed')) {
85			nav.removeClass('fixed').css('top','');
86			//con.css('padding-top','');
87		}
88	}
89	navFix();
90
91	//リサイズ時の処理
92	$(window).on('resize', function() {
93		if(nav.hasClass('fixed')) {
94			if(navTop != con.offset().top) {
95				navTop = con.offset().top;
96			}
97		} else if(navTop != nav.offset().top) {
98			navTop = nav.offset().top;
99		}
100		navFix();
101	});
102
103	//スクロール時の処理
104	$(window).scroll(function () {
105		var winTop = $(this).scrollTop();
106		navFix();
107		//if(nav.hasClass('fixed')){
108			//fixedの際に横スクロールする処理
109			nav.css("left", -$(window).scrollLeft());
110		//}
111	});
112
113

114	/* ページトップへ戻るをフェードインで表示
115	-------------------------------------------------------- */
116	var fade_pos = 200; // このpx分スクロールしたらpagetopを表示させる
117
118	// bodyのid名でfadeInするタイミングを変更することができます
119	if($('body').attr('id') == 'home') {
120		// bodyのid名がhomeだったら500pxスクロールでpagetop表示
121		fade_pos = 500;
122	}
123
124	if ($(this).scrollTop() <= fade_pos) {
125		$("#pagetop").css({"display":"none"});
126	}
127	$(window).on('scroll',function() {
128		if ($(this).scrollTop() > fade_pos) {
129			$('#pagetop').fadeIn(500);
130		} else {
131			$('#pagetop').fadeOut(500);
132		}
133	});
134
135
136	/* アコーディオンメニュー
137	-------------------------------------------------------- */
138	var accTrigger = $('.acc_tit'),
139			accSpSize = window.matchMedia('(max-width: 600px)');
140	const accChange = function() {
141		accTrigger.each(function() {
142			if($(this).attr('data-size')){
143				if(accSpSize.matches && $(this).attr('data-size') == 'sp') {
144					// 600px以下でアコーディオンにしたい時はこっち
145					$(this).next().addClass('acc_contents').hide();
146					return true;
147				}
148
149				$(this).next().css('display','').removeClass('acc_contents');
150			}
151		});
152	}
153	accSpSize.addListener(accChange);
154	accChange();
155	$('.acc_contents').hide();
156	$('.acc_tit').on("click",function(){
157		var acc = $(this);
158		acc.toggleClass("active").next(".acc_contents").slideToggle(300);
159	});
160
161
162	/* windowリサイズ時の遅延処理 + facebookのリサイズ処理
163	-------------------------------------------------------- */
164	var fbTimer = false;	// タイマー準備
165	var fbWrap = $('.box_fb');	// page pluginの親要素（ここの幅に合わせてpage pluginをリサイズします）
166	var fbSize = fbWrap.width(); // 親要素の横幅初期幅
167	var fbSize_re;
168		$(window).on("orientationchange resize",function() {
169		// リサイズ後の放置時間が指定ミリ秒以下なら何もしない(リサイズ中に何度も処理が行われるのを防ぐ)
170		if (fbTimer !== false) {
171			clearTimeout(fbTimer);
172		}
173			// 放置時間が指定ミリ秒以上なので処理を実行
174		fbTimer = setTimeout(function() {
175			// リサイズ後の親要素の横幅を取得
176			fbSize_re = fbWrap.width();
177				// リサイズ前の親要素の横幅とリサイズ後の親要素の横幅が異なる場合
178			if ( fbSize !== fbSize_re ) {
179				//facebookのリサイズ処理
180				boxWidth=Math.floor(fbSize_re); // 親要素の横幅から小数点を切り捨て
181				currentWidth=fbWrap.find('.fb-page').attr('data-width');
182				if(boxWidth != currentWidth){
183					fbWrap.find('.fb-page').attr('data-width', boxWidth);
184					FB.XFBML.parse();
185				}
186					// 次回以降使えるようにリサイズ後の幅を保存
187				fbSize = $(window).width();
188			}
189		}, 200);
190	});
191
192
193	/* 別ページから特定ID箇所へ移動するときに固定ヘッダー分位置をずらす
194	 * aタグのリンクを下記のように設定してください。
195	 * <a href="hoge/?id=id名">hogehoge</a>
196	-------------------------------------------------------- */
197// urlパラメータの取得
198var moveArg = new Object;
199var movePrm = location.search.substring(1).split('&');
200var moveFlg = false;
201for(var i=0 ; movePrm[i] ; i++) {
202	var kv = movePrm[i].split('=');
203	moveArg[kv[0]]=kv[1];
204
205	if(kv[0] == 'id') {
206		moveFlg = true;
207	}
208}
209
210if( moveFlg ) {
211	var target = $('#' + moveArg['id']);
212	var hHeight = '';
213
214	/* ▽ 固定ヘッダー有りの場合の処理 ▽ */
215	// ヘッダー固定が解除されるウィンドウ幅
216	var hFixSize = window.matchMedia('(max-width: 600px)');
217	// 固定ヘッダーの高さ
218	if(!hFixSize.matches) {
219		// 固定ヘッダー（ #header_wrap の箇所は固定ヘッダーのid名に合わせてください ）
220		hHeight = $('#header_wrap').outerHeight() + 20;
221	}
222	/* △ 固定ヘッダー有りの場合の処理 △ */
223
224	var position = target.offset().top - hHeight;
225	$("html, body").animate({scrollTop:position}, 500, "swing");
226}
227
228
229/* ----- Setting End ----------------------------------- */
230});
231
232
233$(function () {
234	// 発行されたUrlを設定してください
235	var calendarUrl = 'https://reserve.489ban.net/client/sinyuhotel/0/plan/allcalendarjs?plan_type=1&days=28';
236
237	// カレンダー表示を呼び出します
238	createAllRoomcalendar(calendarUrl);
239
240	// カレンダー表示処理
241	function createAllRoomcalendar(url) {
242		$.getJSON(url, function (data) {
243			var threshold = data['threshold'];
244			var num = 0;
245			for (var i in data['vacants']) {
246				num = num + 1;
247				var d = data['vacants'][i];
248				var mark;
249				if (d['vacant'] == 0) {
250					mark = '×';
251				} else if (d['vacant'] <= threshold) {
252					mark = '△';
253				} else {
254					mark = '〇';
255				}
256				if($(window).width() > 600) {
257					if (num <= 14) {
258						$('#calendar tr').eq(0).append('<th></th>');
259						$('#calendar tr').eq(1).append('<td></td>');
260					} else {
261						$('#calendar tr').eq(2).append('<th></th>');
262						$('#calendar tr').eq(3).append('<td></td>');
263					}
264				} else {
265					$('#calendar').append('<tr></tr>');
266					$('#calendar').append('<tr></tr>');
267					$('#calendar').append('<tr></tr>');
268					$('#calendar').append('<tr></tr>');
269					if (num <= 7) {
270						$('#calendar tr').eq(0).append('<th></th>');
271						$('#calendar tr').eq(1).append('<td></td>');
272					} else if(num <= 14) {
273						$('#calendar tr').eq(2).append('<th></th>');
274						$('#calendar tr').eq(3).append('<td></td>');
275					} else if(num <= 21) {
276						$('#calendar tr').eq(4).append('<th></th>');
277						$('#calendar tr').eq(5).append('<td></td>');
278					} else {
279						$('#calendar tr').eq(6).append('<th></th>');
280						$('#calendar tr').eq(7).append('<td></td>');
281					}
282				}
283				$('#calendar th:last').append(d['day']);
284				if (d['vacant'] > 0) {
285					$('#calendar td:last').append('<a href="' + d['search_link'] + '">' + mark + '</a>');
286				} else {
287					$('#calendar td:last').append(mark);
288				}
289			}
290		});
291	}
292});