https://smaregi.jp/shared/js/utils.js

1jQuery.extend(jQuery.easing,
2{
3	easeInQuart: function (x, t, b, c, d)
4	{
5		return c*(t/=d)*t*t*t + b;
6	},
7	easeOutQuint: function (x, t, b, c, d)
8	{
9		return c*((t=t/d-1)*t*t*t*t + 1) + b;
10	},
11	easeInOutQuint: function (x, t, b, c, d)
12	{
13		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
14		return c/2*((t-=2)*t*t*t*t + 2) + b;
15	}
16});
17var UA = function()
18{
19	var ua = navigator.userAgent;
20	var app = navigator.appVersion;
21	var isWin = (app.indexOf("Win", 0) != -1);
22	var isMac = (ua.indexOf("Mac",0) != -1);
23	var isiOS = ((/iPhone/.test(ua) || /iPad/.test(ua))) ? true : false;
24	var isiPhone = (/iPhone/.test(ua)) ? true : false;
25	var isiPod = (/iPod/.test(ua)) ? true : false;
26	var isiPad = (/iPad/.test(ua)) ? true : false;
27	var isAndroid = (ua.indexOf('Android') > 0) ? true : false;
28	var isSphone = (isiOS && isAndroid) ? true : false;
29	var isWii = (ua.indexOf("Nintendo Wii", 0) != -1);
30	var isDSi = (ua.indexOf("Nintendo DSi", 0) != -1);
31	var is3DS = (ua.indexOf("Nintendo 3DS", 0) != -1);
32	var _isTablet = function()
33	{
34		if (isiPhone || isiPod || isAndroid && ua.indexOf('Mobile') >= 0) {
35			return false;
36		}else if (isiPad || isAndroid) {
37			return true;
38		}else {
39			return false;
40		}
41	}
42	return {
43		ua: ua,
44		app: app,
45		isWin: isWin,
46		isMac: isMac,
47		isiOS: isiOS,
48		isiPhone: isiPhone,
49		isiPod: isiPod,
50		isiPad: isiPad,
51		isAndroid: isAndroid,
52		isSphone: isSphone,
53		isWii: isWii,
54		isDSi: isDSi,
55		is3DS: is3DS,
56		isTablet: _isTablet
57	};
58}();
59
60var Util = function()
61{
62	var init = function()
63	{
64		$(function(){
65			//TOPへ戻るアクション
66			var toTop = (function(){
67				 $('.footer-pagetop').on('click',function(){
68					 $('html,body').animate({
69						 scrollTop : 0
70					 } , 500 , 'easeInOutQuint');
71					  return false;
72				 });
73			})();
74			$(window).load(function(){
75				$("#PagetopBtn").initPagetopBtn();
76				_initTooltip();
77				_initGlobalNav();
78			});
79		});
80	}();
81	function _initTooltip()
82	{
83		$('a.tt, [data-toggle="tooltip"]').tooltip({html:true, animation:true, container:'body'});
84	}
85	function _initGlobalNav()
86	{
87		var spMode;
88
89		// if(UA.isiPad) {
90		// 	$('.more').on('click', function() {
91		// 		$('.more').removeClass('active');
92		// 		$(this).toggleClass('active');
93		// 		return false;
94		// 	})
95		// }
96		// For SP (navigation toggle)
97		$('#navTrigger').on('click', function () {
98			$('.global-nav-box, .global-header').toggleClass('active');
99			if( $('.global-nav-box, .global-header').hasClass('active') ) {
100				$('#gNav .more').removeClass('active');
101				$('.global-header-logo img').attr('src', '/shared/img/logo/logo-wht.svg');
102				$('html').addClass('nav-fix');
103			} else {
104				$('.global-header-logo img').attr('src', '/shared/img/logo/logo.svg');
105				$('html').removeClass('nav-fix');
106			}
107			return false;
108		});
109
110		$(window).on('resize', function(e) {
111			var w = $(window).innerWidth();
112			if(w < 1199) {
113				spMode = true;
114			} else {
115				removeNavStyle();
116				spMode = false;
117			}
118		// }).resize();
119    });
120
121		$('.more').on('click', function() {
122			$(this).toggleClass('active');
123				if(spMode == true) {
124					return false;
125				} else {
126					return true;
127				}
128		});
129
130		// グローバルナビ SPのみプルダウン
131		$('.sp-dropdown').on('click', function() {
132			$(this).toggleClass('active');
133		});
134
135		// For PC (dropdpwn内フォーカス時の親要素currentスタイル適用)
136		$('.dropdown').on( 'mouseover', function() {
137			if(spMode == false) {
138				$(this).prev('a').addClass('active');
139			}
140		}).on( 'mouseout', function() {
141			if(spMode == false) {
142				$(this).prev('a').removeClass('active');
143			}
144		});
145
146		function removeNavStyle () {
147			// For SP (remove all classes related to SP navigation style)
148			$('.global-nav-box, .global-header').removeClass('active');
149			$('#gNav .more').removeClass('active');
150			$('html').removeClass('nav-fix');
151			$('.global-header-logo img').attr('src', '/shared/img/logo/logo.svg');
152		}
153	}
154
155}();
156
157$(function(){
158	//ウインドウサイズを判定
159  var winWidth = getWinWidth();
160
161  function getWinWidth()
162  {
163    var w = $(window).innerWidth();
164    if( w >= 993){
165      display = 'xl';
166    }else if( 992 >= w && w >= 769 ){
167      display = 'lg';
168    }else if( 768 >= w && w >= 545 ){
169      display = 'md';
170    }else if( 544 >= w ){
171      display = 'xs';
172    }

173    return display = display;
174  }
175
176  $(window).on('resize',function(){
177    winWidth = getWinWidth();
178    scrollNavPosition();
179  });
180
181	$(window).on('scroll',function(){
182		var y = pageYOffset;
183		reductionHead(y);
184		brandHead(y);
185    scrollNavPosition();
186	});
187	//トップのみヘッダーを変更する
188	function brandHead(y){
189		var actPosition = 1;
190		var topPage = $('.layout').attr('id') === 'topContent';
191		var headStatus = $('#gNav').hasClass('active');
192		if( topPage ){
193			if( y < actPosition) {
194				$('.layout').addClass('branding-header');
195				$('#gNav').find('.global-header-logo img').attr('src','/shared/img/logo/logo-wht.svg');
196			} else {
197				$('.layout').removeClass('branding-header');
198				if( !headStatus ){
199					$('#gNav').find('.global-header-logo img').attr('src','/shared/img/logo/logo.svg');
200				}
201			}
202		}
203	}
204	var y = pageYOffset;
205	brandHead(y);
206	function reductionHead(y)
207	{
208		var actPosition = 70;
209		var actTiming = y > actPosition ;
210
211		if(actTiming){
212			$('.layout').addClass('reduction');
213		}else {
214			$('.layout').removeClass('reduction');
215		}
216	}
217
218  // ページの一番上にバナーがある時のナビゲーションのスクロール位置の調整
219  function scrollNavPosition()
220  {
221    var hasbnnrTop = $("#bnnrTop").length;
222    var y = $(document).scrollTop();
223    var minPos = 0;
224    var maxPos = winWidth == 'xs' ? 60 : 50;
225    var updatedPos = maxPos - y;
226
227    if (hasbnnrTop != 1) {
228      return
229    }
230
231    $(".global-header-inview").addClass('bnnr-top__inview');
232
233    switch(true) {
234      case (updatedPos < minPos):
235        $('.global-header').removeClass('bnnr-top__nav');
236        $(".global-header").addClass('bnnr-top__nav-fix');
237        break;
238      case (updatedPos < maxPos || updatedPos > minPos):
239        $('.global-header').addClass('bnnr-top__nav');
240        $(".global-header").removeClass('bnnr-top__nav-fix');
241        break;
242        default:
243        break;
244    }
245
246  }
247
248	//スマホ版のメニュー展開時
249	MobileNav = function()
250	{
251		function _logoOpen(){
252				$('.global-header-logo img').attr('src' , '/shared/img/logo/logo-wht.svg');
253		}
254		function _logoClose(){
255			var status = $('.layout').hasClass('branding-header');
256			if( status ){
257				$('.global-header-logo img').attr('src' , '/shared/img/logo/logo-wht.svg');
258			}else {
259				$('.global-header-logo img').attr('src' , '/shared/img/logo/logo.svg');
260			}
261		}
262		function _navOpen(){
263			$('#gNav').addClass('active');
264		}
265		function _navClose(){
266			$('#gNav').removeClass('active');
267		}
268		return {
269			logoOpen: function()
270			{
271				 _logoOpen();
272			},
273			logoClose: function()
274			{
275				 _logoClose();
276			},
277			navOpen: function()
278			{
279				 _navOpen();
280			},
281			navClose: function()
282			{
283				_navClose();
284			}
285		}
286	}();
287
288	$('#navTrigger').on('click', function(){
289		if( $('#gNav').hasClass('active') ){
290				MobileNav.logoClose();
291				MobileNav.navClose();
292		}else {
293			MobileNav.logoOpen();
294			MobileNav.navOpen();
295		}
296	});
297
298	//サービス一覧を表示・非表示
299	var toggleServiceList = function(){
300		var toggle_btn = $('.service-list-btn');
301		var close_btn = $('.service .close-btn');
302		var service_class_name = 'active';
303		var pop_up = $('.service');
304
305		//true: ポップアップを非表示にする false: ポップアップを表示する
306		var _toggle = function(bool){
307			if(bool == false){
308	      toggle_btn.addClass(service_class_name);
309	      pop_up.addClass(service_class_name);
310	    }else {
311	      toggle_btn.removeClass(service_class_name);
312	      pop_up.removeClass(service_class_name);
313	    }
314		}
315
316		toggle_btn.on('click', function(){
317			var service_state = $(this).hasClass(service_class_name);
318			_toggle(service_state);
319		});
320
321		//画面外クリックで閉じる
322		$('body').on('click', function(e){
323			var state = pop_up.hasClass(service_class_name);
324			if(!state) return;
325
326			var pop_up_layer = $(e.target).closest('.service').length <= 0;
327			var btn_layer = $(e.target).closest('.service-list-btn').length <= 0;
328			if(pop_up_layer && btn_layer) _toggle(true);
329		});
330
331		close_btn.on('click',function(){
332			_toggle(true);
333			return false;
334		});
335
336	}
337
338	//フッターのナビゲーションをスマホ版のみ開閉
339	var toggleFooterNav = function(){
340		var accordion_class_name = 'active';
341		var trigger_class_name = 'js-footer-accordion-trigger';
342
343		var _isMobile = function(){
344			return $(window).innerWidth() < 1200;
345		}
346
347		var _setTrigger = function($trigger){
348			$trigger
349				.addClass('footer-nav-accordion__trigger ' + trigger_class_name)
350				.attr({
351					'aria-expanded': 'false',
352					'tabindex': '0'
353				});
354
355			if(!$trigger.children('a').length){
356				$trigger.attr({
357					'role': 'button'
358				});
359			}
360		}
361
362		var _initSection = function($section, $heading, $body){
363			if(!$section.length || !$heading.length || !$body.length || $section.hasClass('js-footer-accordion-ready')) return;
364
365			var $trigger = $heading;
366			if(!$trigger.length) return;
367
368			$section.addClass('footer-nav-accordion js-footer-accordion-ready');
369			$body.addClass('footer-nav-accordion__body');
370			_setTrigger($trigger);
371		}
372
373		$('.js-footer-nav-column').each(function(){
374			var $column = $(this);
375
376			if($column.hasClass('footer__other-brands') || $column.hasClass('footer_other-brands')){
377				_initSection(
378					$column,
379					$column.children('.ttl-sm').first().find('p').first(),
380					$column.children('ul').first()
381				);
382				return;
383			}
384
385			$column.children('div').each(function(){
386				var $section = $(this);
387				var $body = $section.children('ul').first();
388				var $heading = $body.prevAll('p').first();
389				_initSection($section, $heading, $body);
390			});
391		});
392
393		$('.' + trigger_class_name).on('click', function(e){
394			if(!_isMobile()) return true;
395			if($(e.target).closest('a').length) return true;
396
397			e.preventDefault();
398			var $trigger = $(this);
399			var $section = $trigger.closest('.footer-nav-accordion');
400			var is_open = !$section.hasClass(accordion_class_name);
401

402			$section.toggleClass(accordion_class_name, is_open);
403			$trigger.attr('aria-expanded', is_open ? 'true' : 'false');
404			return false;
405		});
406
407		$('.' + trigger_class_name).on('keydown', function(e){
408			var key = e.which || e.keyCode;
409			if($(e.target).closest('a').length) return;
410			if(!_isMobile() || (key !== 13 && key !== 32)) return;
411
412			e.preventDefault();
413			$(this).trigger('click');
414		});
415	}
416
417	toggleServiceList();
418	toggleFooterNav();
419
420});
421/**
422 * 機能詳細ナビゲーション用
423 */
424$(function(){
425	initFunctionNav(location.href);
426	$('#functionNav a').bind('click', function(e){
427		var href = $(this).attr('href');
428		var url = location.protocol + '//' + location.host + location.pathname + location.search;
429		var href_url = href.replace(/#.*$/,'');
430		if(href.match(/#/) && url.match(href_url)){
431			initFunctionNav($(e.target).attr('href'));
432		}
433	});
434	function initFunctionNav(current_url)
435	{
436		$('#functionNav > dl > dd').each(function(){
437			$(this).find('ul > li > a').each(function(){
438				var li = $(this).parent();
439				var h = $(this).attr('href');
440				regexp = new RegExp(h + '$', 'g');
441				li.removeClass('current');
442				if(current_url.match(regexp)){
443					var y = li.addClass('current').position().top;
444					$('#functionNav').scrollTop(y);
445				}
446			});
447		});
448	}
449});
450/**
451 *
452 * @param {Object} $
453 */
454(function($){
455	$.fn.initPagetopBtn = function(options)
456	{
457		var defaults = {
458			elementId: 0,
459			activeClassName: 'active'
460		};
461		var options = $.extend(defaults, options);
462		var pagetopbtn = $(this);
463		_check($(window).scrollTop());
464		$(window).scroll(function(){
465			_check($(this).scrollTop());
466		});
467		function _check(py)
468		{
469			if(py <= 0){
470        pagetopbtn.removeClass(options.activeClassName);
471			}else {
472        if(!pagetopbtn.hasClass(options.activeClassName)) pagetopbtn.addClass(options.activeClassName);
473			}
474		}
475	};
476})(jQuery);
477
478/**
479 * Timer
480 * @param {delay} delay millisecond
481 * @param {loop} need loop count
482 */
483TimerUtil = function(delay, loop){
484	_TIMER = "timer";
485	_COMPLETE = "complete";
486	var _timer;
487	var _c = 0;
488	var _limit = 0;
489	_obj = $(this);
490	var init = function(){
491		_setTimer(delay, loop);
492	}();
493	function _setTimer(delay, loop)
494	{
495		_c = 0;
496		_limit = loop;
497	}
498	function _start()
499	{
500		_timer = setInterval(_loop, delay);
501	}
502	function _stop()
503	{
504		_timer = clearInterval(_timer);
505	}
506	function _loop(e)
507	{
508		_c++;
509		_obj.trigger(_TIMER, [_c]);
510		if(_c >= _limit)
511		{
512			_obj.trigger(_COMPLETE, [_c]);
513			clearInterval(_timer);
514		}
515	}
516	return {
517		TIMER : _TIMER,
518		COMPLETE : _COMPLETE,
519		setTimer : function(delay, loop)
520		{
521			_setTimer(delay, loop);
522		},
523		addEventListener : function(event, handler)
524		{
525			_obj.bind(event, handler);
526		},
527		removeEventListener : function(event, handler)
528		{
529			_obj.unbind(event, handler);
530		},
531		start : function()
532		{
533			_start();
534		},
535		stop : function()
536		{
537			_stop();
538		}
539	}
540}
541
542/**
543 * ショールームにある電話番号を、パソコンの時にhrefを無効にする上にクラスをつける
544 */
545 $(function () {
546   if(UA.isiOS || UA.isAndroid) {
547 	 	$('.sp-phone-link').removeClass('inactive-link');
548	 } else {
549		 $('.sp-phone-link').attr('href', 'javascript: void(0)').addClass('inactive-link');
550	 }
551 });
552
553
554//  ナビゲーション用のJS
555
556 $(function() {
557
558  function setGlobalNavigationHeight() {
559    const globalNavReductionClass = 'glbl-hd-reduce';
560    const globalNav = $('.js-glbl-hd, .js-akinaiouen-hd, .js-lp-hd');
561    const functionNavClass = 'function-nav-reduce';
562    const functionNav = $('.js-function-nav');
563    const globalNavBackground = $('.js-glbl-hd-bck');
564    const scrollDistance = $(document).scrollTop();
565    const scrollTrigger = 10;
566    const shoudReduce = scrollDistance >= scrollTrigger ? true : false;
567    shoudReduce == true ? globalNav.addClass(globalNavReductionClass) : globalNav.removeClass(globalNavReductionClass);
568    shoudReduce == true ? globalNavBackground.addClass(globalNavReductionClass) : globalNavBackground.removeClass(globalNavReductionClass);
569    shoudReduce == true ? functionNav.addClass(functionNavClass) : functionNav.removeClass(functionNavClass);
570  }
571  var timer = null;
572  function stickyTopNavigation() {
573    if( $('.js-bnnr-top').length == 0 ) {
574      return
575    }
576    const globalNav = $('.js-glbl-hd');
577    const globalNavStickyClass = 'glbl-hd-sticky';
578    const scrollDistance = $(document).scrollTop();
579    const stickyHeight = $('.js-bnnr-top').height();
580    globalNav.addClass('no-transition');
581    if( scrollDistance < stickyHeight ) {
582      globalNav.removeClass(globalNavStickyClass);
583    } else {
584      globalNav.addClass(globalNavStickyClass);
585    }
586    if(timer !== null) {
587      clearTimeout(timer);
588    }
589    timer = setTimeout(function() {
590      globalNav.removeClass('no-transition');
591    }, 150);
592  }
593
594  $(document).on('scroll load', function () {
595    stickyTopNavigation();
596    setGlobalNavigationHeight();
597  });
598
599  // ハンバーガーメニュー
600  function hamburgerIsVisible() {
601    const winWidth = $(window).width()
602    const hamburgerVisibleTo = 1199;
603    return winWidth <= hamburgerVisibleTo ? true: false;

604  }
605
606  function toggleHamburgerMenu() {
607    $('.js-hamburger').on('click', function(e) {
608      e.stopImmediatePropagation();
609      $('.js-glbl-hd').toggleClass('glbl-hd-active');
610      if( $('.js-glbl-hd').hasClass('glbl-hd-active') ) {
611        $('body').addClass('glbl-hd-body');
612      } else {
613        resetHamburgerNavigation();
614      }
615    })
616  }
617
618  toggleHamburgerMenu();
619
620  function toggleChildNavigtion() {
621    $('.js-glbl-nav-lnk').on('click', function(e) {
622      const hamburgerVisible = hamburgerIsVisible();
623      if( hamburgerVisible == true ) {
624        e.preventDefault();
625        e.stopImmediatePropagation();
626      }
627      // $('.js-glbl-nav-lnk').not($(this)).removeClass('active');
628      if( $(this).hasClass('js-glbl-withGchild') ) {
629        $('.js-glbl-nav-lnk-2').removeClass('active');
630      }
631      $(this).toggleClass('active');
632    })
633  }
634  toggleChildNavigtion();
635
636  function toggleGrandChildNavigation() {
637    const hamburgerVisible = hamburgerIsVisible();
638    if( hamburgerVisible == true ) {
639      $('.js-glbl-nav-lnk-2').on('click', function(e) {
640        e.preventDefault();
641        e.stopImmediatePropagation();
642        // $('.js-glbl-nav-lnk').not($(this)).removeClass('active');
643        $(this).toggleClass('active');
644      })
645    }
646  }
647  toggleGrandChildNavigation();
648
649  function resetHamburgerNavigation(resetHamburger) {
650    $('body').removeClass('glbl-hd-body');
651    $('.js-glbl-nav-lnk').removeClass('active');
652    $('.js-glbl-nav-lnk-2').removeClass('active');
653    if( resetHamburger == true ) {
654      $('.js-glbl-hd').removeClass('glbl-hd-active');
655    }
656  }
657
658  function preventScroll(event) {
659    event.preventDefault();
660  }
661
662  function disableBodyScroll() {
663    const hamburgerVisible = hamburgerIsVisible();
664    if( !hamburgerVisible == true ) {
665      $('.js-glbl-nav__lnk-ctn').on('mouseenter', function() {
666        $('body').addClass('glbl-hd-body');
667        window.addEventListener('wheel', preventScroll, { passive: false });
668      });
669      $('.js-glbl-nav__lnk-ctn').on('mouseleave', function() {
670        $('body').removeClass('glbl-hd-body');
671        window.removeEventListener('wheel', preventScroll, { passive: false });
672      });
673    }
674  }
675  disableBodyScroll();
676
677  function handleShortScreen() {
678    const winHeight = $(window).height();
679    const minScreenHeight = 560;
680    if( winHeight < minScreenHeight) {
681      $('body').addClass('glbl-hd-body-shrt');
682    } else {
683      $('body').removeClass('glbl-hd-body-shrt');
684    }
685  }
686  handleShortScreen();
687
688  function handleWindowResize() {
689    $('.js-glbl-nav-lnk').next().addClass('hide');
690    setTimeout(function(){
691      $('.js-glbl-nav-lnk').next().removeClass('hide');
692    }, 500);
693  }
694
695  function handleChildFade() {
696    $('.js-glbl-nav__lnk-ctn').on('mouseleave', function() {
697
698      var $this = $(this);
699      $this.find('.glbl-nav__child').addClass('hideChild');
700      $this.find('.glbl-nav__child-ctn').addClass('hideChildCtn');
701    });
702  }
703  handleChildFade();
704
705  function delayChildMouseOver() {
706    var t;
707    $('.glbl-nav__lst-wrap').on('mouseenter', function () {
708      window.clearTimeout(t);
709      t = window.setTimeout(function () {
710        $('.js-glbl-nav__hasChild-list').removeClass('deactivate');
711      }, 200);
712    });
713
714    $('.glbl-nav').on('mouseleave', function () {
715      window.clearTimeout(t);
716      $('.js-glbl-nav__hasChild-list').addClass('deactivate');
717    });
718  }
719
720  delayChildMouseOver();
721
722   $(window).resize(function() {
723    const hamburgerVisible = hamburgerIsVisible();
724    if( !hamburgerVisible == true && !$('.js-glbl-hd').hasClass('glbl-hd-active') ) {
725      resetHamburgerNavigation(true);
726    }
727    handleWindowResize();
728    handleShortScreen();
729   });
730
731   function hideHamburgerOnLinkClick() {
732    const navLinkElem = $('.js-glbl-nav__hasChild-list').find('a');
733    navLinkElem.each(function() {
734      $(this).on('click', function() {
735        if( $(this).attr('href').indexOf('#') ) {
736          setTimeout(function() {
737            $('.js-hamburger').click();
738          }, 150);
739        }
740      })
741    })
742   }
743   hideHamburgerOnLinkClick();
744 });