https://gofukuoka.jp/js/common.js

1$(function(){
2
3var $window = $(window),
4		breakPoint = 820, //ブレイクポイントの設定
5		winW = $window.width(), //画面の横幅
6		winH = $window.height(), //画面の縦幅
7		// anchorSpeed = 400, //アンカーリンクのスムーズスクロールのスピード
8		resizeTimer = false,
9		menuOpenFlag = false;
10
11/* change Img
12*********************************************/
13function changeImgSp(){
14	$('.change-img').each(function(){
15		$(this).attr("src",$(this).attr("src").replace(/_pc\./, '_sp.'));
16	});
17}
18function changeImgPc(){
19	$('.change-img').each(function(){
20		$(this).attr("src",$(this).attr("src").replace(/_sp\./, '_pc.'));
21	});
22}
23
24/* menu
25*********************************************/
26// 1つのボタンで開閉する場合
27$(document).on('click', '.menu-btn', function(){
28	let expanded = $(this).attr('aria-expanded') === 'true',
29			controls = $(this).attr('aria-controls');
30	$(this).attr('aria-expanded', !expanded).toggleClass('is-open');
31
32	if($(this).hasClass('is-open')) { //開いているとき（閉じる動作）
33		// .menu-btn の 直後に #naviがない場合
34		// setTimeout(function() {
35		// 	$($('#navi').find('a').eq(0)).focus();
36		// }, 400);
37		$('#' + controls).fadeIn().attr('aria-hidden', 'false');
38		$(this).attr({
39			'aria-label': 'サイトメニューを閉じる',
40			'aria-expanded': 'true'
41		});
42	} else { //閉じている（開く動作）
43		menuClose();
44	}
45	menuOpenFlag = !expanded;
46});
47
48// メニュー内にアンカーリンクがある場合
49$('#navi a[href^="#"]').click(function () {
50	menuClose();
51});
52
53// メガメニュー内のリンクをクリックした場合はハンバーガーメニューも閉じる
54$(document).on('click', '.gnavi__contents a', function () {
55	menuClose();
56});
57
58// メニューを閉じる
59function menuClose() {
60	$('.menu-btn').removeClass('is-open').attr({
61		'aria-label': 'サイトメニューを開く',
62		'aria-expanded': 'false'
63	});
64	$('#navi').fadeOut().attr('aria-hidden', 'true');
65	menuOpenFlag = false;
66}
67
68$('.js-lang-btn').each(function(){
69	var $trigger = $(this);
70	var $target = $trigger.next('.js-lang-content');
71	
72	$trigger.add($target)
73		.on('mouseenter focusin', function() {
74			$target.addClass('is-open');
75		})
76		.on('mouseleave focusout', function() {
77			$target.removeClass('is-open');
78		});
79});
80
81
82/* mega menu
83*********************************************/
84$(document).on("click", ".gnavi__trg", function () {
85	let $this = $(this);
86	let expanded = $(this).attr("aria-expanded") === "true",
87		controls = $(this).attr("aria-controls");
88
89	// 他に開いているメガメニューがあれば閉じる
90	if (!$this.hasClass("is-opened") && breakPoint < winW) {
91		megaMenuClose();
92	}
93
94	$this.toggleClass("is-opened").attr("aria-expanded", !expanded);
95	$("#" + controls)
96		// .slideToggle(300)
97		// .toggle(0)
98		// .toggleClass('is-opend')
99		.attr("aria-hidden", expanded);
100	if( breakPoint < winW ) {
101		$("#" + controls).slideToggle(300);
102	} else {
103		$("#" + controls).toggle(0).toggleClass('is-opend');
104	}
105
106	if (!$(".l-body").hasClass("is-menu-opend")) {
107		menuOpenFlag = !expanded;
108	}
109
110	// if (breakPoint < winW) {
111		//pc
112		// $(".l-body").toggleClass("is-no-action");
113	// }
114
115	// is-megamenu-opend クラス制御
116	if ($(".gnavi__trg.is-opened").length) {
117		$(".l-body").addClass("is-megamenu-opend");
118	} else {
119		$(".l-body").removeClass("is-megamenu-opend");
120	}
121	console.log(menuOpenFlag);
122});
123
124function megaMenuClose() {
125	$this = $(".gnavi__trg.is-opened");
126	if ($this.length > 0) {
127		let expanded = $this.attr("aria-expanded") === "true",
128			controls = $this.attr("aria-controls");
129		$this.removeClass("is-opened").attr("aria-expanded", "false");
130		// $('#' + controls).slideToggle(400,"easeOutQuart").attr('aria-hidden', 'true');
131		$("#" + controls).attr("aria-hidden", expanded);
132		if( breakPoint < winW ) {
133			$("#" + controls).slideToggle(300);
134		} else {
135			$("#" + controls).toggleClass('is-opend');
136			$("#" + controls).delay(300).toggle(0);
137		}
138		// if (breakPoint < winW) {
139			//pc
140			// $(".l-body").toggleClass("is-no-action");
141			// scrollBlocker(false);
142		// }
143		$(".l-body").removeClass("is-megamenu-opend");
144	}
145}
146$(document).on(
147	"click",

148	".l-body.is-megamenu-opend, .l-navi a, .modal-gnavi__close",
149	function () {
150		menuOpenFlag = false;
151		megaMenuClose();
152	}
153);
154
155/* modal系OPEN時のfocus制御
156*********************************************/
157$( document ).keydown( function( event ) { // キーイベント
158	// modal系OPEN時のfocus制御
159	if ( menuOpenFlag ) { // モーダルメニューが開かれていた場合
160		var modalMenuElements = $( '[aria-hidden="false"]:not(.js-accordion-content)' ).find( 'a, button' );
161		// ナビメニューが .l-header の中に入っていないときは↓の分岐はコメントアウトしてください
162		if( $('.menu-btn.is-open').length > 0 ) {
163			modalMenuElements = $( '.l-header' ).find( 'a, button' );
164		}
165		// フォーカスが当たっている要素
166		var activeEl = document.activeElement;
167		// モーダルメニュー内でフォーカスを当てたい最初の要素
168		var firstEl = modalMenuElements[0];
169		// モーダルメニュー内でフォーカスを当てたい最後の要素
170		var lastEl = modalMenuElements[ modalMenuElements.length - 1 ];
171		// タブキーを押されたかどうか
172		var tabKey = ( 9 === event.keyCode );
173		// Shiftキーが押されているかどうか
174		var shiftKey = event.shiftKey;
175		// escキーを押されたかどうか
176		var escKey = ( 27 === event.keyCode );
177		// 最後の要素でタブキーが押された場合は、最初の要素にフォーカスを当てる
178		if ( ! shiftKey && tabKey && lastEl === activeEl ) {
179			event.preventDefault();
180			firstEl.focus();
181		}
182		// 最初の要素でタブキー+Shiftキーが押された場合は、最後の要素にフォーカスを当てる
183		if ( shiftKey && tabKey && firstEl === activeEl ) {
184			event.preventDefault();
185			lastEl.focus();
186		}
187		if( escKey ) {
188			menuClose();
189		}
190	}
191});
192
193/* swiper
194*********************************************/
195// area guide
196$('.areaguide-slide').each(function(){
197	var itemLength = $(this).find('.areaguide-slide__item').length;
198	let areaguideLoopOptions;
199	if (winW <= 820 && itemLength === 1) {
200		areaguideLoopOptions = false;
201	} else if (winW >= 821 && itemLength <= 3) {
202		areaguideLoopOptions = false;
203	} else {
204		areaguideLoopOptions = true;
205	}
206	new Swiper(this, {
207		loop: areaguideLoopOptions,
208		// slidesPerView: 1.71,
209		slidesPerView: 'auto',
210		spaceBetween: 28,
211		centeredSlides: true,
212		navigation: {
213			nextEl: '.swiper-button-next',
214			prevEl: '.swiper-button-prev',
215		},
216		pagination: {
217			el: '.swiper-pagination',
218			clickable: true,
219		},
220		breakpoints: {
221			821: { //821px以上
222				slidesPerView: 3,
223				spaceBetween: 14,
224				centeredSlides: false,
225			}
226		}
227	});
228});
229
230// post-list
231var postListSwiper = new Swiper('.post-list-slide', {
232	// loop: true,
233	slidesPerView: 1.06,
234	spaceBetween: 10,
235	navigation: {
236		nextEl: '.swiper-button-next',
237		prevEl: '.swiper-button-prev',
238	},
239	pagination: {
240		el: '.swiper-pagination',
241		clickable: true,
242	},
243	breakpoints: {
244		821: { //821px以上
245			slidesPerView: 3,
246			spaceBetween: 50,
247		}
248	}
249});
250
251// 詳細ページ画像スライダー
252var editorSwiper = new Swiper('.js-swiper', {
253	slidesPerView: 1,
254	spaceBetween: 30,
255	navigation: {
256			nextEl: '.swiper-button-next',
257			prevEl: '.swiper-button-prev',
258	},
259	pagination: {
260			el: '.js-pgn',
261			clickable: true,
262	},
263});
264
265//things to do
266$('.todo-item-slide').each(function() {
267	var loopSet = true;
268	var $childNum = $($(this).find('.post-item')).length;
269	if(winW >= 821 && winW < 1260) {
270		if($childNum<=2) {
271			loopSet = false;
272		}
273	} else if(winW >= 1260) {
274		if($childNum<=3) {
275			loopSet = false;
276		}
277	}
278	var todoSwiper = new Swiper(this, {
279		loop: loopSet,
280		// slidesPerView: 3.85,
281		spaceBetween: '2.8%',
282		navigation: {
283			nextEl: '.swiper-button-next',
284			prevEl: '.swiper-button-prev',
285		},
286		pagination: {
287			el: '.swiper-pagination',
288			clickable: true,
289		},
290		breakpoints: {
291			821: { //821px以上
292				slidesPerView: 2.5,
293			},
294			1260: { //1260px以上
295				slidesPerView: 3.85,
296			}
297		}
298	});
299})
300
301//gallery01
302var gallery01Swiper = new Swiper('.gallery-1', {
303	loop: true,
304	slidesPerView: 1.63,
305	spaceBetween: 10,
306	navigation: {
307		nextEl: '.swiper-button-next',
308		prevEl: '.swiper-button-prev',
309	},
310	pagination: {
311		el: '.swiper-pagination',
312		clickable: true,
313	},
314	breakpoints: {
315		821: { //821px以上
316			slidesPerView: 2.56,
317			spaceBetween: '3.1%',
318		},
319	}
320})
321
322//gallery02
323var gallery02Swiper = new Swiper('.gallery-2', {
324	loop: true,
325	slidesPerView: 2,
326	spaceBetween: 10,
327	centeredSlides: true,

328	navigation: {
329		nextEl: '.swiper-button-next',
330		prevEl: '.swiper-button-prev',
331	},
332	pagination: {
333		el: '.swiper-pagination',
334		clickable: true,
335	},
336	breakpoints: {
337		821: { //821px以上
338			slidesPerView: 4.57,
339			spaceBetween: '1.05%',
340		},
341	}
342})
343
344/* Season Background処理
345*********************************************/
346let running = false;
347let queuedSeason = null;
348let currentSeason = null;
349
350const $bg = $('.seasonal-highlights__bg');
351
352function runFade(season) {
353	if (season === currentSeason) return;
354	if (running) {
355		queuedSeason = season;
356		return;
357	}
358
359	running = true;
360
361	$bg.stop(true, false).fadeTo(200, 0, function () {
362		$bg.css('background-image', `url("../img/common/bg_season_${season}.jpg")`);
363		currentSeason = season;
364
365		$bg.fadeTo(200, 1, function () {
366			running = false;
367
368			if (queuedSeason && queuedSeason !== season) {
369				const next = queuedSeason;
370				queuedSeason = null;
371				runFade(next);
372			}
373		});
374	});
375}
376
377$('.seasonal-highlights__season').hover(
378	function () {
379		const season = this.className.match(/--(spring|summer|autumn|winter)/)[1];
380		runFade(season);
381	},
382	function () {} 
383);
384
385$('.seasonal-highlights__seasons').mouseleave(function () {
386	queuedSeason = null;
387
388	if (!running && currentSeason !== null) {
389		$bg.stop(true, false).fadeTo(200, 0, function () {
390			currentSeason = null;
391		});
392	}
393});
394
395
396/* micromodal
397*********************************************/
398// MicroModal.init({
399// 	disableScroll: true,
400// 	awaitOpenAnimation: true,
401// 	awaitCloseAnimation: true,
402// 	disableFocus: true,
403// });
404
405
406/* page-top
407*********************************************/
408var topBtn = $('.page-top');
409topBtn.hide();
410//消える
411$(window).scroll(function () {
412	if ($(this).scrollTop() > 10) {
413		topBtn.fadeIn();
414	} else {
415		topBtn.fadeOut();
416	}
417});
418//スクロールしてトップ
419topBtn.click(function () {
420	$('body,  html').animate({
421		scrollTop: 0
422	}, 500);
423	return false;
424});
425
426/* scroll アニメーション
427*********************************************/
428// var $visibleArea = winH / 4 * 3;
429// var startPos = 0;
430
431// $(window).on('resize scroll', function(){
432// 	var scroll = $(window).scrollTop();
433
434// 	// 画面に入ったら下からふわっと表示
435// 	// $('.scrollin').each(function(){
436// 	// 	var elemPos = $(this).offset().top;
437// 	// 	if (scroll > elemPos - $visibleArea){
438// 	// 		$(this).addClass('is-visible');
439// 	// 	}
440// 	// });
441
442// 	// ヘッダー下にスクロール中は非表示にする
443// 	// if(scroll > 60 && scroll > startPos ){
444// 	// 	$('.l-header').addClass('l-header--minimum');
445// 	// }else{
446// 	// 	$('.l-header').removeClass('l-header--minimum')
447// 	// }
448// 	// startPos = scroll;
449
450// });
451
452/* accordion
453*********************************************/
454$('.js-accordion-btn').on('click', function() {
455	// ariaの書き換え
456	let expanded = $(this).attr('aria-expanded') === 'true',
457			controls = $(this).attr('aria-controls');
458	$(this).attr('aria-expanded', !expanded);
459	$('#' + controls).attr('aria-hidden', expanded);
460
461	// buttonに開閉状態のクラス付与
462	$(this).toggleClass('is-open');
463
464	// content開閉
465	$('#' + controls).slideToggle(200);
466
467	// トリガーボタンにある矢印アイコンのaltの変更
468	var tglIon = $(this).find('.js-accordion-icon');
469	if( $(tglIon).length>0 ) {
470		if( $(this).attr('aria-expanded') == 'false' ) {
471			tglIon.attr('alt', 'Open');
472		} else {
473			tglIon.attr('alt', 'Close');
474		}
475	}
476});
477
478$('.js-accordion-btn').each(function() {
479	if($(this).hasClass('is-open')) {
480		let controls = $(this).attr('aria-controls');
481		$(this).attr('aria-expanded', 'true');
482		$('#' + controls).attr('aria-hidden', 'false');
483
484			// content開閉
485		$('#' + controls).show();
486
487		// トリガーボタンにある矢印アイコンのaltの変更
488		var tglIon = $(this).find('.js-accordion-icon');
489		if( $(tglIon).length>0 ) {
490			tglIon.attr('alt', 'Close');
491		}
492	}
493});
494
495/* tab
496*********************************************/
497$('.js-tab').each(function () {
498	const $tab = $(this);
499	const $tabListItem = $tab.children().find('> .js-tablist .js-tablist__item');
500	const $tabContent = $tab.find('>

500 .gnavi__contents > [role="tabpanel"], > .areaguide__detail > [role="tabpanel"]');
501	let tabFocus = 0;
502
503	// 初期設定
504	$tabListItem.attr('tabindex', '-1');
505	const $defaultActive = $tabListItem.filter('[aria-selected="true"]');
506	$defaultActive.removeAttr('tabindex');
507
508	const defaultControls = $defaultActive.attr('aria-controls');
509	$tab.find('#' + defaultControls).removeClass('is-hidden');
510
511	// ------- 関数: タブ切り替え -------
512	function tabFunc($this) {
513		const controls = $this.attr('aria-controls');
514
515		// reset
516		$tabListItem.attr({
517			'aria-selected': 'false',
518			'tabindex': '-1'
519		});
520		$tabContent.addClass('is-hidden');
521
522		// 選択されたタブ
523		$this.attr('aria-selected', 'true').removeAttr('tabindex');
524
525		// パネル表示
526		$tab.find('#' + controls).removeClass('is-hidden');
527	}
528
529	// ------- クリックイベント -------
530	$tabListItem.on('click', function () {
531		tabFunc($(this));
532		tabFocus = $tabListItem.index(this); // 現在の位置を更新
533	});
534
535	// ------- キーボード操作（左右キー） -------
536	$tabListItem.on('keydown', function (e) {
537
538		if (e.keyCode === 39 || e.keyCode === 37) {
539
540			if (e.keyCode === 39) { // →
541				tabFocus++;
542				if (tabFocus >= $tabListItem.length) tabFocus = 0;
543
544			} else if (e.keyCode === 37) { // ←
545				tabFocus--;
546				if (tabFocus < 0) tabFocus = $tabListItem.length - 1;
547			}
548
549			$tabListItem.eq(tabFocus).focus();
550			tabFunc($tabListItem.eq(tabFocus));
551		}
552	});
553});
554
555/* smooth scroll （基本的には使わない→cssのscroll-behavior: smooth;にて対応）
556*********************************************/
557// var headerHeight = 0;
558// // var headerHeight = $('.l-header').outerHeight(); //headerが常時追従の場合はこれをアンコメント
559// var urlHash = location.hash;
560
561// if(urlHash) {
562// 	$('body,html').stop().scrollTop(0);
563// 	setTimeout(function(){
564// 		var target = $(urlHash);
565// 		smoothScroll(target);
566// 	}, 100);
567// }
568// $('.anchor').click(function() {
569// 	var href= $(this).attr("href");
570// 	var target = $(href);
571// 	smoothScroll(target);
572// 	return false;
573// });
574
575// function smoothScroll(target) {
576// 	var position = target.offset().top - headerHeight;
577// 	$("html, body").animate({scrollTop:position}, anchorSpeed, "swing");
578// }
579
580/********************************************
581 [PC ONLY]
582*********************************************/
583function pcSizeOnly(){
584
585	/* 画像PC/SP切り替え
586	*******************************************/
587	changeImgPc();
588
589	/* メニューのreset（SPのみがハンバーガーボタンの場合）
590	*******************************************/
591	$('#navi').removeAttr('style').removeAttr('aria-hidden');
592
593}
594// PCメニューサイズ用分岐
595// function pcMenuSizeOnly(){
596
597// }
598
599/********************************************
600 [SP ONLY]
601*********************************************/
602function spSizeOnly(){
603
604	/* 画像PC/SP切り替え
605	*******************************************/
606	changeImgSp();
607	
608	/* メニューのreset（SPのみがハンバーガーボタンの場合）
609	*******************************************/
610	$('#navi').attr('aria-hidden', 'true');
611	$('.menu-btn').removeClass('is-open').attr({
612		'aria-label': 'サイトメニューを開く',
613		'aria-expanded': 'false'
614	});
615	
616}
617// SPメニューサイズ用分岐
618// function spMenuSizeOnly(){
619
620// }
621
622/********************************************
623 [PC/SP切り替え] 以下編集不可
624*********************************************/
625function descriminateBp(){
626	winW = $window.width();
627	if(winW <= breakPoint){
628		spSizeOnly();
629	}else if(winW > breakPoint){
630		pcSizeOnly();
631	}
632	// ブレイクポイントを増やす場合
633	// if(winW <= 1000){
634	// 	spMenuSizeOnly();
635	// }else if(winW > 1000){
636	// 	pcMenuSizeOnly();
637	// }
638}
639descriminateBp();
640$window.resize(function() {
641	if(winW > $window.width() || winW < $window.width()){
642		if (resizeTimer !== false) {
643			clearTimeout(resizeTimer);
644		}
645		resizeTimer = setTimeout(descriminateBp, 200);
646	}
647});
648
649});
650
651
652/********************************************
653ページ内遷移　画像遅延読み込み対策
654*********************************************/
655
656$(window).on('load', function () {
657  var hash = window.location.hash;
658  if (!hash) return;
659
660  // Chrome判定
661  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
662

663  var delay = isChrome ? 500 : 0; // Chromeだけ遅らせる
664
665  setTimeout(function () {
666    var $target = $(hash);
667    if (!$target.length) return;
668
669    var offset = 100;
670    var position = $target.offset().top - offset;
671
672    $('html, body').scrollTop(position);
673  }, delay);
674});