https://www.starcat.co.jp/js/common_202401.js

1
2
3//▽ブレイクポイント
4const maxPCInt = 1200;
5const contentWidthInt = 1100;
6const minPCInt = 769;
7const maxTBInt = 768;
8const maxSPInt = 370;
9const minPC = '(min-width: '+ minPCInt +'px)';
10const maxPC = '(max-width: '+ maxPCInt +'px)';
11const contentWidth = '(max-width: '+ contentWidthInt +'px)';
12const maxTB = '(max-width:'+ maxTBInt +'px)';
13const maxSP = '(max-width:'+ maxSPInt +'px)';
14const matchMinPC = window.matchMedia('(min-width: '+ minPCInt +'px)').matches;
15const matchMaxPC = window.matchMedia('(max-width: '+ maxPCInt +'px)').matches;
16const matchContentWidth = window.matchMedia('(max-width: '+ contentWidthInt +'px)').matches;
17const matchMaxTB = window.matchMedia('(max-width:'+ maxTBInt +'px)').matches;
18const matchMaxSP = window.matchMedia('(max-width:'+ maxSPInt +'px)').matches;
19
20
21//▽▽▽イベント用▽▽▽
22$(function(){
23	overScrollList();
24	bannerSlider();
25	serviceBannerSlider();
26	globalNavResize();
27});
28//▽リサイズ時にリロード
29var ua = navigator.userAgent;
30var timer = false;
31
32// start 20250715
33var isiOS = /iPad|iPhone|iPod/.test(ua);
34var isAndroidMobile = /Android/.test(ua) && /Mobile/.test(ua);
35var isTablet = /iPad/.test(ua) || (/Android/.test(ua) && !/Mobile/.test(ua));
36var isMacDesktop = /Macintosh/.test(ua) && ('ontouchend' in document);
37
38$(window).on('resize', function() {
39  if (isiOS || isAndroidMobile) {
40    // スマホ
41  } else if (isTablet) {
42    globalNavResize();
43  } else if (isMacDesktop) {
44    // iOSデスクトップ表示モード → PC判定しない
45    globalNavResize();
46  } else {
47    setTimeout(function () {
48      location.reload();
49    }, 500);
50  }
51});
52// end 20250715
53
54/* 20250715
55$(window).on('resize', function() {
56    console.log(ua,timer);
57    // スマホ用の処理
58    if (ua.indexOf('iPhone') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0 )) {
59    }
60    // タブレット用の処理
61    else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) {
62      globalNavResize();
63    }
64    // PC用の処理
65    else {
66      setTimeout(function () {
67        location.reload();
68      }, 500);
69    }
70}); */
71
72//▽scrollイベントまとめ
73$(window).on('scroll', function() {
74	fixedglobalNav();
75	firstMessageImgHide();
76});
77
78//||||| 共通 |||||
79//▽onclickした要素にactiveを付与
80function target(id) {
81  if ($(id).prop('id')=="mypageButton" && !$('.showPC.commonNav').is(':visible')) {
82    $("#mypageButtonTB").stop().toggleClass('active');
83    $('[onclick*="target"]').not("#mypageButtonTB").removeClass('active');
84  } else {
85    $(id).stop().toggleClass('active');
86    $('[onclick*="target"]').not(id).removeClass('active');
87    //targetの縦、横、位置を取得
88    //複製したものが取得したものと同じになるようにする
89    //リサイズしてもactiveの取得をし続け可変にする
90  }
91}
92//▽表示した要素にactiveを付与（html構成を気にしなくていいもの）
93function toggleOpen(id) {
94	$(id).stop().slideToggle().toggleClass('active');
95}
96//▽onclickした要素を非表示にする
97function targetHide(id) {
98	$(id).fadeOut();
99}
100//▽モーダルトグル
101function modalToggle(id) {
102  if (["navEntryArea","navServiceArea","navSupportInfoArea","navProceduresArea","navServiceArea","navSupportInfoArea","navProceduresArea"].includes($(id).prop('id'))) {
103    // PCのみ
104    if ($('.showPC.commonNav').is(':visible')) {
105	  var headerHeight = $('header').height();
106      var windowScrollTop = $(window).scrollTop();
107      if (windowScrollTop > headerHeight) {
108        $('#'+$(id).prop('id')+' .modalContents').css('top', ($('header').height())+'px');
109      }
110      else {
111        $('#'+$(id).prop('id')+' .modalContents').css('top', ($('header').height()-windowScrollTop)+'px');
112      }
113    }
114  }
115  // ご利用中の方モーダルコンテンツの場合
116  if ($(id).prop('id')=="menuCustomerArea") {
117    if ($('.showPC.commonNav').is(':visible')) {
118      var headerInnerHeight = $('header .inner').height();
119      var windowScrollTop = $(window).scrollTop();
120      if (headerInnerHeight >= windowScrollTop) {
121        $('#menuCustomerArea .modalContents').css('top', (headerInnerHeight-windowScrollTop)+'px');
122      } else {
123        $('#menuCustomerArea .modalContents').css('top', '');
124      }
125    } else {
126      var headerHeight = $('header').height() + $('.showTB.commonNav').outerHeight();
127      var windowScrollTop = $(window).scrollTop();
128      if (headerHeight >= windowScrollTop) {
129        $('#menuCustomerArea .modalContents').css('top', (headerHeight-windowScrollTop-10)+'px');
130      } else {
131        $('#menuCustomerArea .modalContents').css('top', '');
132      }
133    }
134  }
135
136	$(id).stop().fadeToggle().toggleClass('active');
137	if($(id).hasClass('active')){
138		$('html').css({'overflow-y':'hidden'});
139		//他のモーダルを非表示
140		$('.modalArea').not(id).removeClass('active').hide();
141	}else{
142		$('html').css({'overflow-y':'auto'});
143	}
144}
145//▽モーダルを表示
146function modalOpen(id) {
147	$(id).stop().addClass('active').fadeIn();
148	$('html').css({'overflow-y':'hidden'});
149	//他のモーダルを非表示
150	$('.modalArea').not(id).removeClass('active').hide();
151}
152//▽モーダルをボタンで閉じる
153function modalClose(id) {
154    $('[onclick*="target"]').not("#mypageButtonTB").removeClass('active');
155	$(id).removeClass('active').fadeOut();
156	$('html').css({'overflow-y':'auto'});
157}
158//▽モーダルのコンテンツ外を押下して閉じる（ついでにonclickに付与したactiveも削除）
159$(function(){
160	$('.modalArea').on('click',function(){
161		const onclickContent = $(this).prop('id');
162		$('[onclick*="'+ onclickContent +'"]').removeClass('active');
163		$(this).stop().removeClass('active').fadeOut();
164		$('html').css({'overflow-y':'auto'});
165	});
166	//モーダルクローズボタン
167	$('[onclick*="modalClose"]').on('click',function(){
168		const closeContent = $(this).closest('.modalArea').prop('id');
169		$('[onclick*="'+ closeContent +'"]').removeClass('active');
170	});
171	$('.modalContents').on('click', function(modalContents){
172		modalContents.stopPropagation();
173	});
174});
175
176//||||| 個別設定 |||||
177//▽グローバルナビが特定の幅の時だけslick
178function globalNavResize(){
179	const globalNavSlickContent = $('.globalNav:not(.notSlick) .nav.showPC');
180	if(window.matchMedia('(min-width:'+ minPCInt +'px) and (max-width:'+ (maxPCInt+60) +'px)').matches){
181		$(globalNavSlickContent).not('.slick-initialized').slick({
182			infinite: false,
183			variableWidth: true,
184			arrows: true,
185			dots: false,
186			swipe: true
187		});
188	}else{
189		$(globalNavSlickContent).has('.slick-initialized').slick('unslick');
190	}
191}
192$(function() {
193  $('.globalNav:not(.notSlick) .nav.showPC').on('afterChange beforeChange swipe', function(event, slick, currentSlide) {
194    var slickListWidth = $('.globalNav:not(.notSlick) .nav.showPC .slick-list').width();
195    var slideWidth = 0;
196    $('.globalNav:not(.notSlick) .nav.showPC .slick-slide').each(function() {
197      if ($(this).hasClass("slick-active")) {
198        return false;
199      }
200      slideWidth += $(this).outerWidth(true); // 各要素の外部幅を合計に追加します
201    });

202    var totalWidth = 0;
203    $('.globalNav:not(.notSlick) .nav.showPC .slick-slide').each(function() {
204        totalWidth += $(this).outerWidth(true); // 各要素の外部幅を合計に追加します
205    });
206    if (slickListWidth > (totalWidth - slideWidth)) {
207      $('.globalNav:not(.notSlick) .nav.showPC .slick-next').css('pointer-events', 'none');
208    } else {
209      $('.globalNav:not(.notSlick) .nav.showPC .slick-next').css('pointer-events', 'auto');
210    }
211  });
212});
213//▽グローバルナビのスマホ版デザイン用要素複製
214// $(function() {
215// 	$('.nav.showTB').on('click', function(){
216// 		$(this).clone(true).prependTo('body').addClass('copy');
217// 	});
218// });
219//scroll時のグローバルナビの固定
220function fixedglobalNav() {
221	const headerHeight = $('header').outerHeight();
222	if ($(window).scrollTop() > headerHeight) {
223		$('header').addClass('overHeader');
224	} else {
225		$('header').removeClass('overHeader');
226	}
227}
228//▽「メニューの位置が変わりました」の挙動
229function firstMessageImgHide() {
230	if ($(window).scrollTop() > 500) {
231		// 特定の要素を超えた
232		$('#firstMessageImg').fadeOut();
233	}
234}
235$(function() {
236  firstMessageImgToggle();
237  $(window).on('resize', function() {
238    firstMessageImgToggle();
239  });
240  $("#firstMessageImg").click(function() {
241    targetHide("#firstMessageImg");
242    $.cookie('btnFlg', 'on', { expires: 30,path: '/' }); //cookieの保存
243  });
244});
245
246function firstMessageImgToggle() {
247  if ($.cookie('btnFlg') != 'on' && $(window).width() < minPCInt && $(window).scrollTop() <= 500) {
248    $("#firstMessageImg").show();
249  } else {
250    $("#firstMessageImg").hide();
251  }
252}
253
254//▽スライドバナー
255function bannerSlider() {
256	$('#bannerSlider').slick({
257		autoplay: true,
258		slidesToShow: 3,
259		dots: true,
260		centerMode: true,
261		responsive: [
262			{
263				breakpoint: 768,
264				settings: {
265					slidesToShow: 1
266				}
267			}
268		]
269	});
270}
271
272//▽サービスバナースライダー
273function serviceBannerSlider() {
274	const serviceBannerArea = $('#serviceBannerArea .inner');
275	if(matchMaxTB){
276		$(serviceBannerArea).not('.slick-initialized').slick({
277			dots: true,
278			variableWidth: true,
279			slidesToShow: 1,
280			centerMode: true
281		});
282	}else{
283		$(serviceBannerArea).has('.slick-initialized').slick('unslick');
284	}
285}
286
287
288//自作スライダー
289function overScrollList() {
290	$('.overScrollList').each(function() {
291		//リスト数
292		let overScrollListLength = 0;
293
294		$(this).find('section').each(function(overScrollListIndex) {
295			overScrollListLength = overScrollListIndex;
296		});
297		//リスト数を取得
298		overScrollListLength = overScrollListLength+1;//※1始め
299		//=========スライド初期設定=========
300		//初期カレント
301		$(this).find('section:eq(0)').addClass('current');
302		//=========ナビゲーション初期表示=========
303		$(this).after(
304			'<ul class="listNav"></ul>'
305		);
306		for(let nav = 0; nav < overScrollListLength; nav++) {
307			$(this).next('.listNav').append('<li></li>');
308		}
309		//初期カレント
310		$(this).next('.listNav').children('li:eq(0)').addClass('current');
311		//=========ボタンエリア初期表示=========
312		// for(let nav=0; nav< (listLength-1); nav++) {
313		// 	$(this).find('.buttonArea').prepend('<li><button type="button">次へ</button></li>');
314		// }
315		// $(this).find(".buttonArea li:not(:eq(0))").hide();
316
317		//リストのコンテンツ幅
318		let slideWidth = $(this).find('section').parent().width() / overScrollListLength;
319
320		// コンテンツ幅が親要素のウィンドウ幅を超えていたら発動
321		if($(this).width() > $(window).width()) {
322			$(this).addClass('active');
323
324			//--------------------------------------フリック処理--------------------------------------
325			$(this).on({
326				//フリック開始時
327				'touchstart': function(e) {
328					//タッチポイントからの距離を取得
329					$(this).data("touchX", e.touches[0].pageX).data("moveX", 0);
330				},
331				//フリック中
332				'touchmove': function(e) {
333					$(this).data("moveX",e.touches[0].pageX-$(this).data("touchX"));
334				},
335				//フリック終了
336				'touchend': function() {
337					const slideCurrent = $(this).find('section.current').index();//カレントを取得※1始め
338					if($(this).data("moveX") > 10){
339						//右スワイプの場合
340						//最初の要素以外
341						if(slideCurrent != 0){
342							$(this).animate({
343								'left':-slideWidth * (slideCurrent -1),
344								'margin-right':-slideWidth * (slideCurrent -1)
345							});

346							//-------スライド-------
347							$(this).find('section:not(:eq(' + (slideCurrent -1) + '))').removeClass('current');
348							$(this).find('section:eq(' + (slideCurrent -1) + ')').addClass('current');
349							//-------ナビゲーション-------
350							$(this).next('.listNav').children('li:not(:eq(' + (slideCurrent -1) + '))').removeClass('current');
351							$(this).next('.listNav').children('li:eq(' + (slideCurrent -1) + ')').addClass('current');
352							//-------ボタンエリア-------
353							// $(this).closest('.slider').find('.buttonArea li:not(:eq(' + (slideCurrent -1) + '))').hide();
354							// $(this).closest('.slider').find('.buttonArea li:eq(' + (slideCurrent -1) + ')').show();
355						}
356					}else if($(this).data("moveX") < -10){
357						//左スワイプの場合
358						//最後の要素以外
359						if(slideCurrent != overScrollListLength-1){
360							$(this).animate({
361								'left':-slideWidth * (slideCurrent +1),
362								'margin-right':-slideWidth * (slideCurrent +1)
363							});
364							//-------スライド-------
365							$(this).find('section:not(:eq(' + (slideCurrent +1) + '))').removeClass('current');
366							$(this).find('section:eq(' + (slideCurrent +1) + ')').addClass('current');
367							//-------ナビゲーション-------
368							$(this).next('.listNav').children('li:not(:eq(' + (slideCurrent +1) + '))').removeClass('current');
369							$(this).next('.listNav').children('li:eq(' + (slideCurrent +1) + ')').addClass('current');
370							//-------ボタンエリア-------
371							// $(this).closest('.slider').find('.buttonArea li:not(:eq(' + (slideCurrent +1) + '))').hide();
372							// $(this).closest('.slider').find('.buttonArea li:eq(' + (slideCurrent +1) + ')').show();
373
374						}
375					}
376				}
377			});
378			//--------------------------------------マウスドラッグ処理--------------------------------------
379			let isMouseDown = false;
380			let startX;
381			let scrollLeft;
382			$(this).on({
383				'mousedown': function(e) {
384					isMouseDown = true;
385					startX = e.pageX - $(this).offset().left;
386					scrollLeft = $(this).scrollLeft();
387				},
388				'mousemove': function(e) {
389					if(!isMouseDown) return;
390					e.preventDefault();
391					const x = e.pageX - $(this).offset().left;
392					walk = (x - startX) * 3; //scroll-fast
393				},
394				'mouseup': function() {
395					const slideCurrent = $(this).find('section.current').index();//カレントを取得※1始め
396					if(walk > 100){
397						//右スワイプの場合
398						if(slideCurrent != 0){
399							$(this).animate({
400								left:-slideWidth * (slideCurrent -1),
401								'margin-right':-slideWidth * (slideCurrent -1)
402							});
403							//-------スライド-------
404							$(this).find('section:not(:eq(' + (slideCurrent -1) + '))').removeClass('current');
405							$(this).find('section:eq(' + (slideCurrent -1) + ')').addClass('current');
406							//-------ナビゲーション-------
407							$(this).next('.listNav').children('li:not(:eq(' + (slideCurrent -1) + '))').removeClass('current');
408							$(this).next('.listNav').children('li:eq(' + (slideCurrent -1) + ')').addClass('current');
409							//-------ボタンエリア-------
410							// $(this).closest('.slider').find('.buttonArea li:not(:eq(' + (slideCurrent -1) + '))').hide();
411							// $(this).closest('.slider').find('.buttonArea li:eq(' + (slideCurrent -1) + ')').show();
412						}
413					}else if(walk < -100){
414						//左スワイプの場合
415						//最後の要素以外
416						if(slideCurrent != overScrollListLength-1){
417							$(this).animate({
418								left:-slideWidth * (slideCurrent +1),
419								'margin-right':-slideWidth * (slideCurrent +1)
420							});
421							//-------スライド-------
422							$(this).find('section:not(:eq(' + (slideCurrent +1) + '))').removeClass('current');
423							$(this).find('section:eq(' + (slideCurrent +1) + ')').addClass('current');
424							//-------ナビゲーション-------
425							$(this).next('.listNav').children('li:not(:eq(' + (slideCurrent +1) + '))').removeClass('current');
426							$(this).next('.listNav').children('li:eq(' + (slideCurrent +1) + ')').addClass('current');
427							//-------ボタンエリア-------
428							// $(this).closest('.slider').find('.buttonArea li:not(:eq(' + (slideCurrent +1) + '))').hide();
429							// $(this).closest('.slider').find('.buttonArea li:eq(' + (slideCurrent +1) + ')').show();
430
431						}
432					}
433					isMouseDown = false;
434				},
435				'mouseleave': function() {
436					isMouseDown = false;
437				}
438			});
439		}
440	});
441}
442

443//jsで生成した要素用※一番下に書かないとプラグインに影響がある
444// $(document).on('click', '[onclick*="modalToggle('+ id +')"].active', function () {
445// 	$(id).fadeOut().removeClass('active');
446
447
448