https://www.justsystems.com/shared/js/all.js

1/*------------------------------------------------------------------------------
2
3  機能
4
5------------------------------------------------------------------------------*/
6// 商品情報のメニューを消す
7function navRemove() {
8  $('[data-trigger="sp_nav_btn"]').removeClass('active');
9  $('.mod-subMenu_nav').slideUp(200);
10  $('[data-trigger="dropdown"]').removeClass('active').next().slideUp(200);
11}
12
13/*------------------------------------------------------------------------------
14
15  IEスクロール用
16
17------------------------------------------------------------------------------*/
18$(function() {
19  var userAgent = window.navigator.userAgent.toLowerCase();
20 if( userAgent.match(/(msie|MSIE)/) || userAgent.match(/(T|t)rident/) ) {
21   var isIE = true;
22   var ieVersion = userAgent.match(/((msie|MSIE)\s|rv:)([\d\.]+)/)[3];
23   ieVersion = parseInt(ieVersion);
24   $('body').niceScroll();
25 }
26});
27
28/*------------------------------------------------------------------------------
29
30footerアップデート
31
32------------------------------------------------------------------------------*/
33$(function() {
34  var body=document.getElementsByTagName('body');
35
36  var date=body[0].getAttribute('data-update');
37  var limitDate='2021.01.06';
38
39  var insertTag=document.getElementsByClassName('js-update');
40
41  if(date!=undefined){
42    var tempDate=date.replace('.','');
43    var tempLimit=limitDate.replace('.','');
44
45    if(tempDate>=tempLimit){
46      if(Number(tempDate)>Number(tempLimit)){
47        insertTag[0].innerText=' update '+date;
48      }
49    }
50  }
51});
52
53/*------------------------------------------------------------------------------
54
55  トップへ戻る
56
57------------------------------------------------------------------------------*/
58$(function() {
59  $('[data-trigger="pagetop"]').on('click', function() {
60    var href = $(this).attr("href");
61    var target = $(href == "#" || href == "" ? 'html' : href);
62    var position = target.offset().top;
63    $("html, body").animate({
64      scrollTop: position
65    }, 500, "swing");
66
67    return false;
68  });
69});
70
71/*------------------------------------------------------------------------------
72
73  アンカーリンク
74
75------------------------------------------------------------------------------*/
76function anchorAccordion(id) {
77  let speed = 400;
78  $(id).toggleClass('open');
79  $(id).find('.mod-accordion_content').stop().slideToggle(speed);
80}
81
82(function() {
83  var urlHash = location.hash;
84  var urlParam=location.search;
85
86  $(window).on('load', function() {
87    if(urlHash) {
88      $('body, html').stop().scrollTop(0);
89      setTimeout(function() {
90        scrollToAnker(urlHash);
91      }, 100);
92      if($(urlHash).hasClass('mod-accordion_item')) {
93        anchorAccordion(urlHash);
94      }
95    }
96
97    if(urlParam){
98      urlParam=urlParam.substring(1);
99      var tempHash;
100      var temp01;
101      temp01=urlParam.split('&');
102
103      var hashFlag=false;
104
105      Array.prototype.forEach.call(temp01,function(item){
106        var temp02;
107        temp02=item.split('=');
108        if(temp02[0]=='feature'){
109          tempHash='#'+temp02[1];
110          hashFlag=true;
111        }
112
113      })
114      if(hashFlag==true){
115        window.history.pushState(null,null,location.pathname+tempHash)
116        scrollToAnker(tempHash);
117        if($(tempHash).hasClass('mod-accordion_item')) {
118          anchorAccordion(urlHash);
119        }
120      }
121
122    }
123
124  })
125
126  $('[data-trigger="anchorLink"] a[href^="#"]').on('click', function() {
127    anchorMove(this);
128  });
129
130  $('a[href^="#"][data-trigger="anchorLink"]').on('click', function() {
131    anchorMove(this);
132  });
133
134  function anchorMove(element){
135    var href = $(element).attr("href");
136    var target = $(href == "#" || href == "" ? 'html' : href);
137    if($(href).hasClass('mod-accordion_item')) {
138      anchorAccordion(href);
139    }
140
141    scrollToAnker(target);
142
143    return false;
144  }
145  $('.products_sidenav_item a').on('click',function(e){
146      var link=$(this).attr('href');
147      if(location.pathname+location.hash==link){
148        e.preventDefault();
149      }
150      else{
151        var target=link.replace(location.pathname,'');
152        scrollToAnker(target);
153      }
154
155  })
156
157
158
159  function scrollToAnker(hash) {
160
161    var target = $(hash);
162    var position = target.offset().top - 20;
163    if($('.mod-subMenu').length) {
164      position = target.offset().top - $('.mod-subMenu').height() - 20;
165    }
166    $("html, body").animate({
167      scrollTop: position
168    }, 500, "swing");
169  }
170
171}());
172
173
174/*------------------------------------------------------------------------------
175
176  headerの追従
177
178------------------------------------------------------------------------------*/
179let startPos     = 0,
180    winScrollTop = 0,
181    header_menu  = $('.header_menu'),
182    nav_menu     = $('.mod-subMenu');
183
184$(window).on('load scroll resize', function() {
185  let x         = 768,
186      w         = $(window).width(),
187      h_height = $('.header_menu').height();
188
189  if(w >= x) {
190    $(window).scroll(function () {
191      if ($(this).scrollTop() > h_height) {
192        scroll();
193      } else {
194        header_menu.removeClass('hide');
195        header_menu.removeClass('scroll');
196        header_menu.removeClass('halfway');
197      }
198    });

199  } else {
200    $(window).scroll(function () {
201      if ($(this).scrollTop() > h_height) {
202        scroll();
203      } else {
204        header_menu.removeClass('hide');
205        header_menu.removeClass('scroll');
206        header_menu.removeClass('halfway');
207      }
208    });
209  }
210  startPos = winScrollTop;
211});
212
213function scroll() {
214  winScrollTop = $(this).scrollTop();
215  if (winScrollTop > 0 && winScrollTop >= startPos) {
216    header_menu.addClass('hide');
217    header_menu.addClass('scroll');
218    nav_menu.addClass('scroll');
219    stateOne = true;
220    stateTwo = false;
221  } else {
222    header_menu.removeClass('hide');
223    header_menu.removeClass('scroll');
224    header_menu.addClass('halfway');
225    nav_menu.removeClass('scroll');
226    stateOne = false;
227    stateTwo = true;
228  }
229}
230
231$(window).on('load resize', function() {
232  let x = 768,
233      w = $(window).width();
234
235  if(w >= x) {
236    $('html').removeClass('is-fixed');
237    header_menu.removeClass('active');
238    $('.sp_menu_bg').hide();
239  } else {
240    // $('.header_nav_wrapper').hide();
241    $('.header_utility_search').show();
242    $('.header_utility_btn').removeClass('open');
243  }
244});
245
246/*------------------------------------------------------------------------------
247
248  headerの検索
249
250------------------------------------------------------------------------------*/
251$(function() {
252  $('[data-trigger="header_search"]').on('click', function() {
253    $('.header_utility_search_area').toggleClass('active');
254    $('.header_menu').toggleClass('search');
255
256    return false;
257  })
258});
259
260/*------------------------------------------------------------------------------
261
262  SP時のheaderメニューボタンの挙動
263
264------------------------------------------------------------------------------*/
265$(function() {
266  let speed   = 300;
267  let fadeSpeed = 200;
268  let $search = $('.header_utility_search');
269
270  $('[data-trigger="sp_menu_btn"]').on('click', function() {
271    $(this).stop().toggleClass('open');
272    $('.mod-subMenu_ttl').removeClass('border');
273    $('.header_menu').stop().toggleClass('active');
274    setTimeout(function(){
275      $('.sp_menu_bg').stop().fadeIn(speed);
276    }, 100);
277    navRemove();
278    if($('.header_nav_wrapper').css('display') == 'none') {
279      $('.header_nav_wrapper').stop().fadeIn(fadeSpeed);
280    } else {
281      setTimeout(function(){
282        $('.header_nav_wrapper').stop().fadeOut(100);
283      }, 200);
284    }
285    if($search.css('display') == 'none') {
286      $search.show();
287    } else {
288      $search.hide();
289    }
290    if(!$('.header_menu').hasClass('active')) {
291      setTimeout(function(){
292        $('.sp_menu_bg').stop().fadeOut(100);
293      }, 100);
294    }
295
296  });
297
298  $('[data-trigger="sp_menu_close"]').on('click', function() {
299    stateFixed = false;
300    $(this).fadeOut(speed);
301    $('.header_nav_wrapper').fadeOut(fadeSpeed);
302    $('.header_utility_btn').removeClass('open');
303    $('.mod-subMenu_ttl').removeClass('border');
304    $('.header_menu').removeClass('active');
305    navRemove();
306    $search.show();
307  });
308});
309
310/*------------------------------------------------------------------------------
311
312  footerメニューの開閉
313
314// ------------------------------------------------------------------------------*/
315$(function() {
316  var speed = 400;
317
318  $('[data-trigger="sp_footer_menu"]').on('click', function() {
319    let deviceFlag = (window.matchMedia('(max-width: 767px)').matches);
320
321    if(deviceFlag) {
322      if($(this).hasClass('current')) {
323        $(this).removeClass('current');
324        $(this).next().stop().slideUp(speed);
325      } else {
326        $('[data-trigger="sp_footer_menu"]').removeClass('current');
327        $('[data-trigger="sp_footer_menu"]').next().stop().slideUp(speed);
328        $(this).addClass('current');
329        $(this).next().stop().slideDown(speed);
330      }
331    }
332  });
333});
334
335/*------------------------------------------------------------------------------
336
337  Sub Menu
338
339------------------------------------------------------------------------------*/
340(function() {
341  let speed = 300;
342  let w     = $(window).width();
343
344  $(window).on('reisize load', function() {
345    if(w < 768) {
346      $('[data-trigger="sp_nav_btn"]').on('click', function() {
347        $(this).toggleClass('active');
348        $('[data-trigger="dropdown"]').removeClass('active').next().slideUp(speed);
349        $('.mod-subMenu_nav').stop().slideToggle(speed);
350        $('.sp_menu_bg').stop().fadeToggle(speed);
351        $('.mod-subMenu_ttl').toggleClass('border');
352
353        return false;
354      });
355
356      $('[data-trigger="dropdown"]').on('click', function() {
357        $(this).toggleClass('active');
358        $(this).next().stop().slideToggle(speed);
359
360        return false;
361      });
362    }
363  })
364}());
365
366function eventModal(item){
367  var modalId=item.getAttribute('data-modalId');
368  var modalstatus=item.getAttribute('data-opened');
369
370  modalChangeStatus(modalId,modalstatus);
371
372  function modalChangeStatus(status,modalstatus){
373    var modal=document.querySelectorAll('.js-modal');
374    for(var i=0;i<modal.length;i++){
375      var itemId=modal[i].getAttribute('data-modalId');
376      if(itemId==modalId){
377        modal[i].setAttribute('data-opened',modalstatus);
378      }
379    }
380  }
381}
382
383function visiblePasswd(element){
384  var eleID=element.getAttribute('data-id');
385  var eleChecked=element.checked;
386  var passwdElement=document.querySelectorAll('.passwd-input');
387  for(var i=0;i<passwdElement.length;i++){
388    var itemName=passwdElement[i].getAttribute('name');
389    if(itemName==eleID){
390      if(eleChecked==true){
391        passwdElement[i].setAttribute('type','text');
392      }
393      else{
394        passwdElement[i].setAttribute('type','password');
395      }
396    }
397  }
398};
399
400/*------------------------------------------------------------------------------
401
402  アコーディオン
403
404------------------------------------------------------------------------------*/
405$(window).on('load', function() {
406
407    var device_Flag;
408    var win_w=window.innerWidth;
409    if(win_w<768){
410      device_Flag='sp';
411    }
412    else{
413      device_Flag='pc';
414    }
415   if(device_Flag=='pc'){
416    $('[data-trigger="accordion"]').first().each(function() {

417      $(this).find('.mod-accordion_item:first-child').addClass('open');
418      $(this).find('.mod-accordion_item:first-child').find('.mod-accordion_content').show();
419    });
420    }
421
422  });
423
424
425$(function() {
426  let speed = 400;
427  $('[data-trigger="accordion"]').find('.mod-accordion_ttl').on('click', function() {
428    $(this).parents('.mod-accordion_item').toggleClass('open');
429    $(this).next('.mod-accordion_content').stop().slideToggle(speed);
430  });
431});
432
433/*------------------------------------------------------------------------------
434
435  タブ
436
437------------------------------------------------------------------------------*/
438$(function() {
439
440  $('.mod-tab-content').eq(0).show();
441
442  $('[data-trigger="tab"]').find('li').on('click', function() {
443    let index = $(this).index();
444
445    $('.mod-tab-item').removeClass('current');
446    $(this).addClass('current');
447    $('.mod-tab-content').hide();
448    $('.mod-tab-content').eq(index).fadeIn();
449
450    $.fn.matchHeight._update();
451
452    return false;
453  });
454});
455
456/*------------------------------------------------------------------------------
457
458  ダミー画像を挿入
459
460------------------------------------------------------------------------------*/
461$(function() {
462  const defaultImg = '/jp/products/img/shared/img_default.jpg';
463
464  $('[data-trigger="mod-defaultImg"]').each(function() {
465    $(this).find('img').each(function() {
466      if($(this).attr('src') == '') {
467        $(this).attr('src', defaultImg).css('width', '340');
468      }
469    });
470  });
471});
472
473/*------------------------------------------------------------------------------
474
475  動画
476
477------------------------------------------------------------------------------*/
478function canvas_defer() {
479  var iframes = document.querySelectorAll('.canvas');
480  Array.prototype.forEach.call(iframes, function(iframe){
481    if(iframe.getAttribute('data-src')) {
482      iframe.setAttribute('src', iframe.getAttribute('data-src'));
483    }
484  });
485}
486window.addEventListener('load', canvas_defer);
487
488$(window).on('load scroll', function() {
489	if($('.video').length){
490		var elem = $('.video');
491		elem.each(function () {
492			var elemOffset = $(this).offset().top;
493			var scrollPos = $(window).scrollTop();
494			var wh = $(window).height();
495			if(scrollPos > elemOffset - wh + (wh / 5) ){
496				$(this).find("video")[0].play();
497			}
498		});
499	}
500});
501
502/*------------------------------------------------------------------------------
503
504  カルーセル
505
506------------------------------------------------------------------------------*/
507var mod_swiper;
508var elmSwiper = document.querySelectorAll('.swiper-mod-slide');
509var elmPager  = document.querySelectorAll('.js-swiper-pagination');
510var elmPrev   = document.querySelectorAll('.js-swiper-prev');
511var elmNext   = document.querySelectorAll('.js-swiper-next');
512
513function mod_slideFunc() {
514  var w = $(window).width();
515  var mod_swiper;
516  if(elmSwiper.length > 0) {
517    for(let i = 0; i < elmSwiper.length; i++) {
518      elmSwiper[i].className += i;
519      elmPager[i].className += i;
520      elmPrev[i].className += i;
521      elmNext[i].className += i;
522      mod_swiper = new Swiper('.swiper-mod-slide' + i, {
523        spaceBetween: 50,
524        slidesPerView: 1,
525        allowTouchMove: false,
526        autoplay: {
527          delay: 2000,
528          disableOnInteraction: false,
529        },
530        pagination: {
531          el: '.js-swiper-pagination' + i,
532          clickable: true,
533        },
534        navigation: {
535          nextEl: '.js-swiper-next' + i,
536          prevEl: '.js-swiper-prev' + i,
537          hideOnClick: true,
538        },
539        breakpoints: {
540          767: {
541            allowTouchMove: true,
542            spaceBetween: 30,
543            resistanceRatio: 0,
544          },
545        },
546      });
547    }
548  }
549}
550
551$(window).on('load', function() {
552  mod_slideFunc();
553});
554
555/*------------------------------------------------------------------------------
556
557  導入事例用ラベル
558
559------------------------------------------------------------------------------*/
560$(function() {
561  $('.case_container').eq(0).show();
562
563  $('[data-trigger="tab_label"]').find('li > *').on('click', function() {
564    let index = $(this).parent().index();
565
566    $('[data-trigger="tab_label"] li').removeClass('current');
567    $(this).parent().addClass('current');
568    $('.case_container').hide();
569    $('.case_container').eq(index).fadeIn();
570
571    $.fn.matchHeight._update();
572    return false;
573  });
574});
575
576/*------------------------------------------------------------------------------
577
578  100vh
579
580------------------------------------------------------------------------------*/
581$(document).ready(function() {
582  var hSize = $(window).height();
583  if($(window).width() < 768) {
584    hSize = hSize - 55;
585    $('[data-trigger="view_height"]').height(hSize);
586  }
587});
588
589$(window).resize(function() {
590  var hSize = $(window).height();
591  if($(window).width() < 768) {
592    hSize = hSize - 55;
593    $('[data-trigger="view_height"]').height(hSize);
594  }
595});
596
597/*------------------------------------------------------------------------------
598
599  高さ揃え
600
601------------------------------------------------------------------------------*/
602(function() {
603	var $jsMh = $('.js-mh');
604
605	if ($jsMh.length) {
606		$(window).on('load', function() {
607			$jsMh.each(function() {
608				var $this = $(this);
609				var arrayMhTarget = $this.data('mh-target').split(' ');
610
611				for (var i = 0; i < arrayMhTarget.length; i++) {
612					$this.find(arrayMhTarget[i]).matchHeight();
613				}
614			});
615		});
616	}
617}());
618
619/*------------------------------------------------------------------------------
620
621  画像の位置固定
622
623------------------------------------------------------------------------------*/
624$(function() {
625  $('[data-trigger="fixed-item"]').frix();
626});
627
628/*------------------------------------------------------------------------------
629
630  マウスドラッグスクロール
631
632------------------------------------------------------------------------------*/
633jQuery.prototype.mousedragscrollable = function() {
634  let target;
635  $(this).each(function(i, e) {
636    $(e).mousedown(function(event) {
637      event.preventDefault();
638      target = $(e);
639      $(e).data({
640        "down": true,
641        "move": false,
642        "x": event.clientX,
643        "y": event.clientY,
644        "scrollleft": $(e).scrollLeft(),
645        "scrolltop": $(e).scrollTop(),
646      });
647      return false
648    });

649
650    $(e).click(function(event) {
651      if ($(e).data("move")) {
652        return false
653      }
654    });
655  });
656
657  $(document).mousemove(function(event) {
658    if ($(target).data("down")) {
659      event.preventDefault();
660      let move_x = $(target).data("x") - event.clientX;
661      let move_y = $(target).data("y") - event.clientY;
662      if (move_x !== 0 || move_y !== 0) {
663        $(target).data("move", true);
664      } else { return; };
665      $(target).scrollLeft($(target).data("scrollleft") + move_x);
666      $(target).scrollTop($(target).data("scrolltop") + move_y);
667      return false
668    }
669  }).mouseup(function(event) {
670    $(target).data("down", false);
671    // return false;
672  });
673};
674
675$('.js-dragScroll').mousedragscrollable();
676
677$(function() {
678  var manga_wrapper=$('.product_pullDown');
679    var manga_select=$('.product_pullDown_menu option');
680    var dir=location.pathname+location.hash;
681    manga_select.each(function(index,element) {
682      var val=element.getAttribute('value');
683      if(dir==val){
684        element.setAttribute('selected',true)
685      }
686    })
687});
688
689
690
691/*------------------------------------------------------------------------------
692
693  IE用 Object Fit
694
695------------------------------------------------------------------------------*/
696objectFitImages();