https://tabi-navis.com/blog/wp-content/themes/jinr/lib/js/common.js?ver=7.1.2

1// JavaScript Document
2
3// Androidのユーザーエージェント判別（CSSハック用）
4(function ($) {
5	if (navigator.userAgent.indexOf('Android') > 0) { 
6		let body = document.getElementsByTagName('body')[0]; 
7		body.classList.add('android'); 
8	}
9})(jQuery);
10
11// YouTubeの全画面表示対策
12(function ($) {
13	var remove = function () {
14		$('#sidebar').removeClass('animate');
15	};
16	setTimeout(remove, 1700);
17})(jQuery);
18
19
20(function ($) {
21	$('.js--hamburger-trigger').click(function () {
22		// クラス追加でデザイン変更
23		$(this).toggleClass('js--hamburger-active');
24		$('html').toggleClass('js--hamburger-hidden');
25		$('.o--hamburger-menu-container').toggleClass('js--hamburger-open');
26	});
27})(jQuery);
28
29//ヘッダーのsearchform
30(function ($) {
31	$('#headerSearch').click(function () {
32		$(this).toggleClass('js--btn-active');
33		if ($(this).hasClass('js--btn-active')) {
34			$(this).removeClass('js--btn-nonactive');
35			$(this).find('#headerSearchIcon').removeClass('jin-ifont-searchthin').addClass('jin-ifont-batuthin');
36			$(this).find('#headerSearchLabel').html('CLOSE');
37		} else {
38			$(this).addClass('js--btn-nonactive');
39			$(this).find('#headerSearchIcon').removeClass('jin-ifont-batuthin').addClass('jin-ifont-searchthin');
40			$(this).find('#headerSearchLabel').html('SEARCH');
41		}
42		$('#HeaderSearchForm').toggleClass('js--form-active');
43		$('#searchFormText').focus();
44	});
45	$(document).on('click', function (e) {
46		if ($('#headerSearch').hasClass('js--btn-active')) {
47			if (!$(e.target).closest('#HeaderSearchForm').length && !$(e.target).closest('#headerSearch').length) {
48				$('#headerSearch').toggleClass('js--btn-active');
49				$('#headerSearch').addClass('js--btn-nonactive');
50				$('#HeaderSearchForm').removeClass('js--form-active');
51				$('#headerSearch').find('#headerSearchIcon').removeClass('jin-ifont-batuthin').addClass('jin-ifont-searchthin');
52				$('#headerSearch').find('#headerSearchLabel').html('SEARCH');
53			}
54		}
55	});
56})(jQuery);
57
58
59//　アコーディオンを動かす
60(function ($) {
61	$('.a--accordion-title').click(function () {
62		if ($(this).prevAll('.a--accordion-toggle').hasClass('js-accordion-toggle')) {
63			$(this).prevAll('.a--accordion-toggle').removeClass('js-accordion-toggle');
64		} else {
65			$(this).prevAll('.a--accordion-toggle').addClass('js-accordion-toggle');
66		}
67		$(this).next('.c--accordion-contents').slideToggle(270);
68	});
69})(jQuery);
70
71//CVボタンの表示制御
72(function ($) {
73	$(window).on('load scroll', function () {
74		if ($(this).scrollTop() > 600) {
75			$('#cvButton').addClass('js--cvb-active');
76		} else {
77			$('#cvButton').removeClass('js--cvb-active');
78		}
79	});
80	$(document).ready(function () {
81		if ($('#cvButton').length) {
82			$('#commonFooter').addClass('js--cvb-display');
83		}
84	});
85})(jQuery);
86
87//SNSシェアボタンにあるURLコピー
88(function ($) {
89	$('#jinrCopyUrl').click(function () {
90		var url = $(this).data('url');
91		navigator.clipboard.writeText(url);
92		// フラッシュメッセージ表示
93		$('#jinrCopySuccess,#jinrCopySuccessBg').fadeIn(450, function () {
94			$(this).delay(600).fadeOut(450);
95		});
96	});
97})(jQuery);
98
99//関連記事のスクロール
100(function ($) {
101	// 関連記事がある記事のみ
102	const relatedPostInner = document.getElementById('jinrRelatedPostInner');
103	if (!relatedPostInner) return;
104
105	const scrollTarget = document.getElementsByClassName('o--postlist-inner')[0];
106	const clientWidth = scrollTarget.clientWidth;
107	const scrollWidth = scrollTarget.scrollWidth;
108
109	// 必要な要素が取得されなかった場合は早期returnする
110	if (!scrollTarget) return;
111	if (!clientWidth) return;
112	if (!scrollWidth) return;
113
114	const postCount = relatedPostInner.querySelectorAll('.o--postlist-item').length;
115
116	if (postCount >= 5) {
117		relatedPostInner.querySelector('.o--postlist-inner').insertAdjacentHTML('beforebegin', '<span class="a--scroll-btn a--scroll-prev"></span>');
118		relatedPostInner.querySelector('.o--postlist-inner').insertAdjacentHTML('afterend', '<span class="a--scroll-btn a--scroll-next js--scroll-active"></span>');
119	} else {
120		return;
121	}
122	const scrollPrev = document.querySelector('.a--scroll-prev');
123	const scrollNext = document.querySelector('.a--scroll-next');
124
125	let timeoutId;
126	scrollTarget.addEventListener(
127		'scroll',
128		function () {
129			clearTimeout(timeoutId);
130			scrollPrev.classList.add('js--scroll-active');
131			scrollNext.classList.add('js--scroll-active');
132			if (scrollWidth - (clientWidth + scrollTarget.scrollLeft) == 0) {
133				scrollNext.classList.remove('js--scroll-active');
134				scrollPrev.classList.add('js--scroll-active');
135			}
136			if (scrollTarget.scrollLeft == 0) {
137				scrollPrev.classList.remove('js--scroll-active');
138			}
139		},
140		true
141	);
142
143	relatedPostInner.addEventListener('click', (e) => {
144		if (e.target.classList.contains('a--scroll-next')) {
145			$('#jinrRelatedPostInner .d--postlist-slider').animate(
146				{
147					scrollLeft: scrollTarget.scrollLeft + 1092,
148				},
149				300
150			);
151			if (!scrollTarget.scrollLeft == 0) {
152				e.target.classList.add('js--scroll-active');
153			}
154			scrollTarget.onscroll = function () {
155				if (scrollWidth - (clientWidth + scrollTarget.scrollLeft) == 0) {
156					e.target.classList.remove('js--scroll-active');
157				}
158			};
159			scrollTarget.addEventListener(
160				'scroll',
161				function () {
162					scrollTarget.onscroll = function () {
163						if (scrollWidth - (clientWidth + scrollTarget.scrollLeft) == 0) {
164							e.target.classList.remove('js--scroll-active');
165						}
166					};
167				},
168				true
169			);
170		}
171	});
172	relatedPostInner.addEventListener('click', (e) => {
173		if (e.target.classList.contains('a--scroll-prev')) {
174			$('#jinrRelatedPostInner .d--postlist-slider').animate(
175				{
176					scrollLeft: scrollTarget.scrollLeft - 1092,
177				},
178				300
179			);
180			scrollTarget.addEventListener(
181				'scroll',
182				function () {
183					scrollTarget.onscroll = function () {
184						if (scrollTarget.scrollLeft == 0) {
185							e.target.classList.remove('js--scroll-active');
186						}
187					};
188				},
189				true
190			);
191			scrollTarget.scrollLeft -= 100;
192			if (!scrollTarget.scrollLeft == 0) {
193				e.target.classList.add('js--scroll-active');
194				e.target.classList.add('js--scroll-active');
195			}
196		}
197	});
198})(jQuery);
199
200(function ($) {
201	function jinrArrowButtonWidget(id) {
202		const widgetWrapper = document.getElementById(id);
203		if (!widgetWrapper) return;
204		const widgetPostSlider = widgetWrapper.getElementsByClassName('d--postlist-slider');
205		if (!widgetPostSlider.length) return;
206		for(let i = 0; i < widgetPostSlider.length; i++){
207			const postCount = widgetPostSlider[i].getElementsByClassName('o--postlist-item').length;
208			if (postCount >= 5) {
209				const clientWidth = widgetPostSlider[i].clientWidth;
210				const scrollWidth = widgetPostSlider[i].scrollWidth;
211				widgetPostSlider[i].insertAdjacentHTML('beforebegin', `<span class="a--scroll-btn a--scroll-prev" data-sli

211der-index="${i}"></span>`);
212				widgetPostSlider[i].insertAdjacentHTML('afterend', `<span class="a--scroll-btn a--scroll-next js--scroll-active" data-slider-index="${i}"></span>`);
213
214				const widgetScrollPrev = widgetWrapper.querySelectorAll('.a--scroll-prev')[i];
215				const widgetScrollNext = widgetWrapper.querySelectorAll('.a--scroll-next')[i];
216
217				let timeoutId;
218				widgetPostSlider[i].addEventListener(
219					'scroll',
220					function () {
221						clearTimeout(timeoutId);
222						if (scrollWidth - (clientWidth + widgetPostSlider[i].scrollLeft) == 0) {
223							widgetScrollNext.classList.remove('js--scroll-active');
224							widgetScrollPrev.classList.add('js--scroll-active');
225						} else {
226							widgetScrollPrev.classList.add('js--scroll-active');
227						}
228						if (widgetPostSlider[i].scrollLeft == 0) {
229							widgetScrollPrev.classList.remove('js--scroll-active');
230							widgetScrollNext.classList.add('js--scroll-active');
231						}
232					},
233					true
234				);
235
236				widgetScrollNext.addEventListener('click', (e) => {
237					const nextsliderIndex = e.target.getAttribute('data-slider-index');
238					const nextslider = widgetPostSlider[nextsliderIndex];
239					$(nextslider).animate(
240						{
241							scrollLeft: nextslider.scrollLeft + 1092,
242						},
243						300
244					);
245					if (!nextslider.scrollLeft == 0) {
246						e.target.classList.add('js--scroll-active');
247					}
248					nextslider.onscroll = function () {
249						if (scrollWidth - (clientWidth + nextslider.scrollLeft) == 0) {
250							e.target.classList.remove('js--scroll-active');
251						}
252					};
253					widgetPostSlider[nextsliderIndex].addEventListener(
254						'scroll',
255						function () {
256							widgetPostSlider[nextsliderIndex].onscroll = function () {
257								if (scrollWidth - (clientWidth + widgetPostSlider[nextsliderIndex].scrollLeft) == 0) {
258									e.target.classList.remove('js--scroll-active');
259								}
260							};
261						},
262						true
263					);
264				});
265				widgetScrollPrev.addEventListener('click', (e) => {
266					const prevSliderIndex = e.target.getAttribute('data-slider-index');
267					const prevSlider = widgetPostSlider[prevSliderIndex];
268					$(prevSlider).animate(
269						{
270							scrollLeft: widgetPostSlider[i].scrollLeft - 1092,
271						},
272						300
273					);
274					widgetPostSlider[prevSliderIndex].addEventListener(
275						'scroll',
276						function () {
277							widgetPostSlider[prevSliderIndex].onscroll = function () {
278								if (widgetPostSlider[prevSliderIndex].scrollLeft == 0) {
279									e.target.classList.remove('js--scroll-active');
280								}
281							};
282						},
283						true
284					);
285					prevSlider.scrollLeft -= 100;
286					if (!prevSlider.scrollLeft == 0) {
287						e.target.classList.add('js--scroll-active');
288						e.target.classList.add('js--scroll-active');
289					}
290				});
291			} else {
292				return;
293			}
294		}
295	}
296	jinrArrowButtonWidget('footer-widget');
297	jinrArrowButtonWidget('jinr-posttop-widget-area');
298	jinrArrowButtonWidget('jinr-postbottom-widget-area');
299	jinrArrowButtonWidget('jinr-relatedpost-bottom-widget-area');
300})(jQuery);
301
302
303//表示アニメーション
304(function ($) {
305	var $target = $('.js--scr-animation');
306	var offset = 100;
307
308	$(window).on('scroll', function() {
309		var scroll = $(window).scrollTop();
310		var h = $(window).height();
311
312		$target.each(function() {
313			var pos = $(this).offset().top;
314			if (scroll > pos - h + offset) {
315				if($(this).hasClass("b--jinr-button")){
316					$(this).children(".o--button-inner").addClass('is-animated');
317				}else{
318					$(this).addClass('is-animated');
319				}
320			}
321		})
322
323	}).trigger('scroll');
324})(jQuery);
325
326// スムーススクロールをRTOCに干渉しないように追加する
327(function ($) {
328	const anchors = document.querySelectorAll('a[href^="#"]'); 
329	const header = document.querySelector('header');
330	let headerOffset = 0;
331	if (header) {
332		if (headerTracking.tracking_info === 'd--header-tracking-on') {
333			headerOffset = header.offsetHeight;
334		}else{
335			headerOffset = 15;
336		}
337	} else {
338		headerOffset = 15;
339	}
340	for ( let i = 0; i < anchors.length; i++ ) {
341		anchors[i].addEventListener('click', (e) => {
342			e.preventDefault();
343			if (e.target.closest('#rtoc-mokuji-wrapper')) {
344				return;
345			} else {
346				const href= anchors[i].getAttribute("href");
347				const target = document.getElementById(href.replace('#', ''));
348				if (target) {
349					const position = window.pageYOffset + target.getBoundingClientRect().top - headerOffset - 30;
350					window.scroll({
351						top: position,      
352						behavior: 'smooth'
353					});
354				}
355			}
356		});
357	}
358})(jQuery);
359
360(function ($) {
361	$.ajax({
362        type: "POST",
363        url: jinr_ajax_common.ajax_url,
364        data: {
365            action: jinr_ajax_common.action,
366            post_id: jinr_ajax_common.post_id
367        }
368    });
369})(jQuery);