https://visit-abashiri.jp/js/common.js

1(function($) {
2	"use strict";
3
4/* var
5------------------------------------- */
6var $win = $(window),
7	speed = 300,
8	easing = 'swing';
9
10function funcIsDevice() {
11	return $('.js-media-query').css('font-family').replace(/"/g, '');
12}
13
14/*IOS アドレスバーを許容した100vh------------*/
15const setVh = function() {
16	const vh = window.innerHeight * 0.01;
17	document.documentElement.style.setProperty('--vh', vh + 'px');
18}
19window.addEventListener('load', setVh);
20window.addEventListener('resize', setVh);
21
22/* smoothScroll
23------------------------------------- */
24//pagetop btn
25$('a[href="#top"]').on('click', function() {
26	$('body,html').animate({ scrollTop: '0' }, speed, 'swing');
27	return false;
28});
29$(window).on('load',function(){
30	var urlHash = location.hash;
31	if(urlHash){
32		var target = $(urlHash);
33		if( target.length ) {
34			var headerHeight = $('.js-header').innerHeight();
35			var position = target.offset().top;
36			$('body,html').animate({ scrollTop:position }, speed, easing);
37		}
38	}
39});
40//other link
41$('a[href^="#"]:not([href="#top"]):not(".js-no-scroll")').on('click',function(){
42	var href= $(this).attr('href'),
43	target = $(href === '#' || href === '' ? 'html' : href);
44	if( target.length ) {
45		var headerHeight = $('.js-header').innerHeight(),
46		position = target.offset().top;
47		$('body,html').animate({ scrollTop:position }, speed, easing);
48		return false;
49	}
50});
51
52/* pagetop btn
53------------------------------------- */
54var $pagetop = $('.js-pagetop'),
55		$contact = $('.js-contact'),
56		classView = 'is-view';
57$win.on('scroll',function(){
58	// fade appear
59	if($(this).scrollTop() > 300){
60		$pagetop.addClass(classView);
61		$contact.addClass(classView);
62	}else{
63		$pagetop.removeClass(classView);
64		$contact.removeClass(classView);
65	}
66});
67
68/* hamburger menu
69------------------------------------- */
70var $navBtn = $('.js-nav-btn'),
71		$navCon = $('.js-nav-content'),
72		$header = $('.js-header'),
73		class_open = 'is-open';
74function funcNaviOpen(){
75	$navCon.addClass(class_open);
76	$navBtn.addClass(class_open);
77	$header.addClass(class_open);
78}
79function funcNaviReset(){
80	$navCon.removeClass(class_open);
81	$navBtn.removeClass(class_open);
82	$header.removeClass(class_open);
83}
84$navBtn.on('click',function(){
85	if($navCon.hasClass(class_open)) {
86		funcNaviReset();
87		return false;
88	} else {
89		funcNaviOpen();
90		return false;
91	}
92});
93$navCon.on('click',function(event){
94	event.stopPropagation();
95});
96
97
98/* header floating hide
99------------------------------------- */
100if (window.matchMedia('(min-width:1025px)').matches) {
101	//pcのみ
102	$(window).on('scroll', function () {
103		const winScroll = $(window).scrollTop();
104		const scrollHeight = $(document).height();
105		const scrollPos = $(window).height() + winScroll;
106		const footerHeight = $('.footer').height();
107
108		if (scrollHeight - scrollPos <= footerHeight) {
109			$header.fadeOut();
110		} else {
111			$header.fadeIn();
112		}
113	});
114}
115
116/* toggle
117------------------------------------- */
118if ( $('.js-toggle-trigger').length > 0 ){
119	var $toggleTrigger = $('.js-toggle-trigger'),
120			classActive = 'is-active';
121	$toggleTrigger.on('click',function(){
122		$(this).toggleClass(classActive);
123		$(this).next('.js-toggle-content').slideToggle(speed);
124	});
125}
126
127	//toggle SP only
128// if (funcIsDevice() === 'sp') {
129// 	if ( $('.js-toggle-trigger-sp').length > 0 ){
130// 		var $toggleTriggerSp = $('.js-toggle-trigger-sp'),
131// 				classActive = 'is-active';
132// 		$toggleTriggerSp.on('click',function(){
133// 			$(this).toggleClass(classActive);
134// 			$(this).next('.js-toggle-content-sp').slideToggle(speed);
135// 		});
136// 	}
137// }
138
139/* tab switch
140------------------------------------- */
141if ( $('.js-switch-tab').length > 0 ){
142	var $switchTabList = $('.js-switch-tab-list'),
143		$switchTab = $('.js-switch-tab'),
144		$switchConList = $('.js-switch-content-list'),
145		$switchCon = $('.js-switch-content'),
146		classActive = 'is-active';
147
148	$switchTab.on('click',function(){
149		//num set
150		var $parent = $(this).parent($switchTabList),
151			$children = $parent.children($switchTab),
152			num = $children.index(this),
153			$content = $parent.next($switchConList).children($switchCon);
154		$content.removeClass(classActive);
155		$content.eq(num).addClass(classActive);
156		//class="is-active" set in tab
157		$children.removeClass(classActive);
158		$(this).addClass(classActive);
159	});
160}
161
162/* slickスライダー
163------------------------------------- */
164if ( $('.js-m-slider').length > 0 ){
165	$(function(){
166		var slider = $('.js-m-slider').slick({
167			autoplay: true,
168			slidesToShow: 1,

169			arrows: false,
170			dots: true,
171			pauseOnFocus: false,
172			pauseOnHover: false,
173			variableWidth: true,
174			centerMode: true,
175		});
176	});
177}
178
179if ( $('.js-m-gourmet').length > 0 ){
180	$(function(){
181		var slider = $('.js-m-gourmet').slick({
182			autoplay: true,
183			slidesToShow: 1,
184			arrows: false,
185			dots: true,
186			pauseOnFocus: false,
187			pauseOnHover: false,
188		});
189	});
190}
191
192if ( $('.js-m-recommend').length > 0 ){
193	$(function(){
194		var json = '/js/spot_' + $('.js-m-recommend').data('genre') + '.json';
195		var h1 = $('.m-single-box__tit').first().text();
196		var itemCount = 0;
197
198		$.ajax({
199			url: json,
200			type: 'GET',
201			dataType: 'json',
202		}).done(function(data) {
203			var randomArry = [];
204			var arryCount = 4;
205			var max = data.length;
206
207			//jsonの記事数が4件より少ないの場合最大数変更
208			if(max < 4) {
209				arryCount = max;
210			}
211
212			//乱数4つ生成（同記事の場合は掲載しないため）
213			function numGenerate(){
214				var randomNum = Math.floor(Math.random() * max);
215				//重複なければpush
216				if (randomArry.indexOf(randomNum) == -1){
217					randomArry.push(randomNum);
218				}
219				//4つになるまで繰り返す
220				if ( randomArry.length < arryCount ) {
221					numGenerate();
222				}
223			}
224			numGenerate();
225
226			//html生成
227			randomArry.forEach(function(value){
228				//掲載ページと同一タイトルの場合は出力しない。３つ出力。
229				if(data[value]['name'] !== h1 && itemCount < 3) {
230					var html = '<a class="m-recommend-area__item" href="' + data[value]['url'] + '">';
231					html += '<div class="m-recommend-area__img"><img src="' + data[value]['img'] + '" alt=""></div>';
232					if(data[value]['genre']) {
233						html += '<ul class="m-tags-list"><li class="m-tags-list__item">' + data[value]['genre'] + '</li></ul>';
234					}
235					html += '<h3 class="m-recommend-area__tit m-tit02--blue">' + data[value]['name'] + '</h3>';
236					html += '</a>';
237					$('.js-m-recommend').append(html);
238					itemCount++;
239				}
240			});
241
242			var slider = $('.js-m-recommend').slick({
243				autoplay: false,
244				slidesToShow: 3,
245				arrows: false,
246				dots: false,
247				pauseOnFocus: false,
248				pauseOnHover: false,
249				responsive: [{
250					breakpoint: 767,
251					settings: {
252						slidesToShow: 1,
253						dots: true,
254						variableWidth: true,
255					}
256				}]
257			});
258		});
259	});
260}
261
262
263/* クリップボードコピー
264------------------------------------- */
265var clipboard = new Clipboard('.js-copy-btn');
266$(function(){
267	$('.js-copy-btn').click(function(){
268		$(this).addClass('copied');
269		setTimeout($.proxy(function(){
270			$(this).removeClass('copied');
271		} ,this),2500);
272	});
273});
274
275/* チェックボックス全選択、全解除
276------------------------------------- */
277$(function(){
278	$('#js-chackAll').on('click', function () {
279		$('.js-check').prop( 'checked', true );
280	});
281	$('#js-unchackAll').on('click', function () {
282		$('.js-check').prop( 'checked', false );
283	});
284});
285
286/* matchHeight
287------------------------------------- */
288$(function() {
289	$('.js-match').matchHeight();
290});
291
292/* modal
293------------------------------------- */
294const html = $('html');
295
296$('.js-modal-img').modaal({
297	type: 'image',
298	after_open: function(modal_wrapper) {
299		html.css(
300			'overflow-y', 'hidden'
301			)
302	},
303
304	before_close: function(modal_wrapper) {
305		html.css(
306			'overflow-y', 'auto'
307			)
308	}
309});
310
311$('.js-modal-inline').modaal({
312	content_source: '#inline',
313});
314
315$('.js-modal-target').each( function(){
316	const modalTarget = $(this).data('target');
317
318	$(this).modaal({
319		content_source: modalTarget,
320
321		after_open: function(modal_wrapper) {
322			html.css(
323				'overflow-y', 'hidden'
324				)
325		},
326
327		before_close: function(modal_wrapper) {
328			html.css(
329				'overflow-y', 'auto'
330				)
331		}
332	});
333
334});
335
336/* scroll-hint
337------------------------------------- */
338$(function() {
339	new ScrollHint('.js-scrollable', {
340		applyToParents: true,
341		i18n: {
342			scrollable: 'スクロールできます'
343		}
344	});
345});
346
347/* tab
348------------------------------------- */
349$(function () {
350	let tab = $('.js-tab-item');
351	let tabBody = $('.js-tab-page');
352	let hash = location.hash;
353	let tabname;
354	let tabids;
355
356	//ハッシュの#抜き
357	if (hash.length) {
358		tabname = hash.slice(1);
359	} else {
360		let tabname = "tab1";
361	}
362
363	//タブメニューのIDをすべて取得
364	tabids = tab.map(function () {
365		return $(this).attr('id');
366	}).get();
367
368	//取得したidとハッシュが一致するかチェック
369	let tabid = tabids.filter(function (value) {
370		return value == tabname;
371	});
372
373	//もしURLにハッシュがあれば
374	if (hash) {
375		//アクティブクラスリセット
376		tab.removeClass('is-active');
377		tabBody.removeClass('is-show');
378
379		//取得したidが何番目かチェック
380		let tabNum = $.inArray(tabname, tabids);
381		if (tabname == tabid) {
382			tab.eq(tabNum).addClass('is-active');
383			tabBody.eq(tabNum).addClass('is-show');
384
385		} else {
386			tab.eq(0).addClass('is-active');
387			tabBody.eq(0).addClass('is-show');
388		}
389	}
390
391	tab.on('click', function () {
392		const index = $(this).index();
393		tab.removeClass('is-active');
394		$(this).addClass('is-active');
395		tabBody.removeClass('is-show').eq(index).addClass('is-show');
396	});
397});
398})(jQuery);