https://www.hondamobility-chubu.com/hc/assets/js/common.js?20261008081812

1'use strict';
2/*
3各ページ個別jsで拡張
4
5・on load
6MutJs.loaded = function() {}
7
8・scroll
9MutJs.scrolled = function() {}
10
11・resize
12MutJs.resized = function() {}
13
14・画像遅延ロード時
15MutJs.LazyImg.loaded = function() {}
16*/
17
18var MutJs = {
19  // for throttle
20  ticking: false,
21  loadingTimer: null,
22  isDesktopW: true,
23  winW: 0,
24  scrTop: 0,
25  isLoaded: false,
26  init: function () {
27    this.sizeUpdate();
28    this.setDOM();
29    this.LazyImg.init();
30    this.setHeaderFunc();
31    this.initTab();
32    this.setClickEvent();
33    this.setModal();
34    this.removeLoaderTimer();
35
36    if (!this.isLoaded) {
37      $(window).on('load', () => {
38        this.commonLoaded();
39      });
40    } else {
41      this.commonLoaded();
42    }
43
44    document.addEventListener('scroll', this.scrolling.bind(this), {
45      passive: true
46    });
47    window.addEventListener('resize', this.resizing.bind(this), {
48      passive: true
49    });
50  },
51  commonLoaded: function () {
52    this.isLoaded = true;
53    this.LazyImg.set();
54    this.setIntersection();
55    this.setSlider();
56    this.loaded();
57    this.removeLoader();
58    this.setHashAnchor();
59    this.commonResized();
60    this.commonScrolled();
61  },
62  commonScrolled: function () {
63    this.scrTop = $(window).scrollTop();
64    $(".js-x-scroll").css("left", "-" + $(window).scrollLeft() + "px");
65    this.setPagetop();
66    this.scrolled();
67  },
68  commonResized: function () {
69    this.sizeUpdate();
70    this.resized();
71  },
72  setViewport: function () {
73    // !mutUA.DesktopだけだとiOS13以上のiPadが拾えないので個別に判定
74    var ua = window.navigator.userAgent.toLowerCase();
75    var isPortable = !mutUA.Desktop || ua.indexOf('macintosh') && 'ontouchend' in document;
76
77    if (isPortable && this.winW <= 375) {
78      $('meta[name="viewport"]').attr('content', 'width=375');
79    } else if (isPortable && this.winW >= 768 && this.winW <= 1080) {
80      $('meta[name="viewport"]').attr('content', 'width=1080');
81    } else {
82      $('meta[name="viewport"]').attr('content', 'width=device-width, initial-scale=1');
83    }
84  },
85  setDOM: function () {
86    if (mutUA.Mobile && !mutUA.Desktop) {
87      $('.js-tel').each(function () {
88        $(this).addClass('_active');
89
90        if (!$(this).attr('href')) {
91          $(this).attr('href', 'tel:' + $(this).text().replace(/-/g, ''));
92        }
93      });
94    } else {
95      $('.js-tel').addClass('_inactive').removeAttr('href');
96    }
97  },
98  setSlider: function () {
99    $('#js-common-slider').each(function () {
100      var $thisSlider = $(this);
101      $thisSlider.slick({
102        dots: true,
103        arrows: false,
104        autoplay: true,
105        autoplaySpeed: 5000,
106        slidesToShow: 3,
107        responsive: [{
108          breakpoint: 768,
109          settings: {
110            slidesToShow: 2
111          }
112        }, {
113          breakpoint: 430,
114          settings: {
115            slidesToShow: 1
116          }
117        }]
118      });
119    });
120
121    if ($('#js-car-slider').length) {
122      $('#js-car-slider').slick({
123        dots: true,
124        arrows: false,
125        autoplay: true,
126        autoplaySpeed: 5000,
127        slidesToShow: 1
128      });
129    }
130  },
131  setPagetop: function () {
132    var pagetop = $('#js-pagetop');
133
134    if (this.scrTop > 60) {
135      pagetop.addClass('is-visible');
136    } else {
137      pagetop.removeClass('is-visible');
138    }
139
140    // if (this.scrTop + $(window).height() > pagetop.offset().top + pagetop.innerHeight()) {
141    //  pagetop.addClass('is-static');
142    // } else {
143    //  pagetop.removeClass('is-static');
144    // }
145
146  },
147  scrolling: function () {
148    var that = this;
149    this.ticking = false;
150
151    if (!this.ticking) {
152      requestAnimationFrame(function () {
153        that.ticking = false;
154        that.commonScrolled();
155      });
156      this.ticking = true;
157    }
158  },
159  resizing: function () {
160    var that = this;
161    this.ticking = false;
162
163    if (!this.ticking) {
164      requestAnimationFrame(function () {
165        that.ticking = false;
166        that.commonResized();
167      });
168      this.ticking = true;
169    }
170  },
171  loaded: function () {// console.log('common loaded');
172  },
173  scrolled: function () {// console.log('common scrolled');
174  },
175  resized: function () {// console.log('common resized');
176  },
177  sizeUpdate: function () {
178    this.winW = $(window).innerWidth();
179    this.winH = $(window).innerHeight();
180    this.isDesktopW = window.matchMedia('(min-width: 768px)').matches;
181    let vw = document.body.clientWidth * 0.01;
182    document.documentElement.style.setProperty('--vw', `${vw}px`);

183    let vh = window.innerHeight * 0.01;
184    document.documentElement.style.setProperty('--vh', `${vh}px`);
185    this.setViewport();
186  },
187  initTab: function () {
188    // valで指定したdata-tabを持つタブに切り替える
189    function switchTab(val, group) {
190      if (!group) {
191        var $channel = $(`*[data-tab-id="${val}"]`);
192        var $controller = $(`*[data-tab-for="${val}"]`);
193
194        if (val == "all") {
195          // 'all'だったら全data-tab-idを対象に変更
196          $channel = $('*[data-tab-id]');
197        }
198
199        $('*[data-tab-for].is-current').removeClass('is-current');
200        $controller.addClass('is-current');
201
202        if ($channel.length) {
203          if ($('select[data-tab-select]').length && $('select[data-tab-select]').val() != val) {
204            $('select[data-tab-select]').val(val);
205          }
206
207          $('*[data-tab-id]').removeClass('is-current');
208          $channel.addClass('is-current');
209        }
210      } else {
211        var $channel = $(`*[data-tab-id="${val}"][data-tab-group-id="${group}"]`);
212        var $controller = $(`*[data-tab-for="${val}"][data-tab-group-for="${group}"]`);
213
214        if (val == "all") {
215          // 'all'だったら全data-tab-idを対象に変更
216          $channel = $(`*[data-tab-id][data-tab-group-id="${group}"]`);
217        }
218
219        $(`*[data-tab-for][data-tab-group-for="${group}"].is-current`).removeClass('is-current');
220        $controller.addClass('is-current');
221
222        if ($channel.length) {
223          if ($('select[data-tab-select]').length && $('select[data-tab-select]').val() != val) {
224            $('select[data-tab-select]').val(val);
225          }
226
227          $(`*[data-tab-id][data-tab-group-id="${group}"]`).removeClass('is-current');
228          $channel.addClass('is-current');
229        }
230      }
231
232      return false;
233    }
234
235    // click動作
236    $('body').on('click', '*[data-tab-for]', function (e) {
237      e.preventDefault();
238
239      if (!$(this).hasClass('is-current')) {
240        let groupFor = $(this).data('tab-group-for') || "";
241        switchTab($(this).data('tab-for'), groupFor);
242      }
243    });
244
245    // select型の場合
246    $('body').on('change', 'select[data-tab-select]', function (e) {
247      switchTab($(this).val());
248    });
249
250    // #ハッシュ付きだったらそのタブをcurrentに
251    if (!!location.hash) {
252      var $hashTab = $('*[data-tab-id="' + location.hash.slice(1) + '"]');
253
254      if ($hashTab.length) {
255        switchTab(location.hash.slice(1));
256      }
257    }
258  },
259  setHeaderFunc: function () {
260    var that = this;
261    $('.js-header-menu-toggle').on('click', function (e) {
262      e.preventDefault();
263      $(this).toggleClass('is-open');
264      $('body').toggleClass('is-header-menu-open');
265    });
266
267    $(document).on('click', '.js-next-toggle', function (e) {
268      e.preventDefault();
269      $(this).toggleClass('is-open').next().slideToggle();
270      return false;
271    });
272
273    if (!!('ontouchstart' in window || navigator.msPointerEnabled) && !mutUA.Desktop) {
274      $('.js-header-nav-anchor').on('click', function (e) {
275        e.preventDefault();
276      });
277    }
278  },
279  openModal: function (id) {
280    $('*[data-modal-id="' + id + '"]').fadeIn();
281  },
282  closeModal: function () {
283    $('*[data-modal-id]').fadeOut();
284  },
285  setModal: function () {
286    var that = this;
287
288    // click動作
289    $(document).on('click', '*[data-modal-for]', function (e) {
290      e.preventDefault();
291      that.openModal($(this).attr('data-modal-for'));
292    });
293    $(document).on('click', '*[data-modal-contents]', function (e) {
294      e.stopPropagation();
295    });
296    $(document).on('click', '*[data-modal-close]', function (e) {
297      e.preventDefault();
298      that.closeModal();
299    });
300  },
301  setIntersection: function () {
302    // 出現アニメーション用
303    $('.c-section').attr('data-intersection', 'once');
304
305    // observeしたときのaction定義
306    const action = entry => {
307      // entry.target に検出したDOMが入ってくる
308      // entry.isIntersecting に画面内かどうかが入ってくる
309      const $target = $(entry.target);
310
311      if (!$target.attr('data-intersection')) {
312        $target.attr('data-intersection', 'once');
313      }
314
315      // onceの設定だったらtrueを消さない
316      if ($target.attr('data-intersection') != 'repeat' && $target.attr('data-intersecting') == 'true') {
317        return false;

318      }
319
320      $target.attr('data-intersecting', entry.isIntersecting);
321    };
322
323    // IntersectionObserverの利用
324    const observer = new IntersectionObserver(entries => {
325      entries.forEach(entry => {
326        action(entry);
327      });
328    }, {
329      rootMargin: '0px 0px -30px 0px'
330    });
331
332    // observeするDOMを取得
333    const $targets = $('*[data-intersection]');
334    $targets.each(function (j, el) {
335      observer.observe(el);
336    });
337  },
338  removeLoaderTimer: function () {
339    this.loadingTimer = setTimeout(() => {
340      this.removeLoader();
341    }, 3000);
342  },
343  removeLoader: function () {
344    $('body').addClass('is-loaded');
345    clearTimeout(this.loadingTimer);
346  },
347  anchorScroll: function (hash) {
348    var speed = 500;
349    var hdrH = $('#js-header').height();
350
351    if (hash == "#" || hash == "") {
352      var $target = $('html');
353    } else {
354      var $target = $('*[data-anchor-id="' + hash.slice(1) + '"]');
355    }
356
357    if ($target.length) {
358      var position = $target.offset().top;
359
360      if ($target.hasClass('c-section') && !$target.hasClass('_bg')) {
361        position = $target.prev().offset().top + $target.prev().innerHeight();
362      }
363
364      var anchorPosition = position - hdrH;
365      $("html, body").animate({
366        scrollTop: anchorPosition
367      }, speed, "easeOutSine");
368    }
369  },
370  setHashAnchor: function () {
371    if (location.hash && location.hash.indexOf('#wp') == -1) {
372      this.anchorScroll(location.hash);
373    }
374  },
375  setClickEvent: function () {
376    var that = this;
377
378    // アンカースクロール
379    $('#js-wrapper').on('click', '.js-scroll', function (e) {
380      e.preventDefault();
381      that.anchorScroll($(this).attr("href"));
382    });
383
384    // toggle
385    $('#js-wrapper').on('click', '.js-sitemap-toggle', function (e) {
386      $(this).toggleClass('is-open').next().slideToggle(300);
387    });
388
389    // 汎用toggle
390    $(document).on('click', '*[data-toggle-for]', function (e) {
391      e.preventDefault();
392      var toggleId = $(this).data('toggle-for');
393      $(this).toggleClass('is-show');
394      $('*[data-toggle-id="' + toggleId + '"]').toggleClass('is-show').slideToggle();
395    });
396  },
397  LazyImg: {
398    image: $('img[data-src]'),
399    imageLen: $('img[data-src]').length,
400    loadedLen: 0,
401    init: function () {
402      this.image.attr('src', '');
403      var isLazyLoaded = setTimeout(() => {
404        this.desvg();
405        this.loaded();
406      }, 7500);
407      this.image.bind('load', () => {
408        this.loadedLen++;
409
410        if (this.loadedLen == this.imageLen) {
411          this.desvg();
412          this.loaded();
413          clearTimeout(isLazyLoaded);
414        }
415      });
416    },
417    set: function () {
418      this.image.each(function (i) {
419        $(this).attr('src', $(this).attr('data-src'));
420      });
421    },
422    desvg: function () {
423      desvg('[src$=".svg"]:not([data-desvg="false"]', true);
424    },
425    loaded: function () {
426      return false;
427    }
428  }
429};
430$(window).on('load', () => {
431  MutJs.isLoaded = true;
432});
433$(function () {
434  MutJs.init();
435});
436
437// svgファイルの色変え用に展開する
438function desvg(selector, removeInlineCss) {
439  removeInlineCss = removeInlineCss || false;
440
441  var images,
442      imagesLength,
443      sortImages = {},
444  // load svg file
445  loadSvg = function (imgURL, replaceImages) {
446    // set up the AJAX request
447    var xhr = new XMLHttpRequest();
448    xhr.open('GET', imgURL, true);
449
450    xhr.onload = function () {
451      var xml, svg, paths, replaceImagesLength;
452
453      // get the response in XML format
454      xml = xhr.responseXML;
455      replaceImagesLength = replaceImages.length;
456
457      // bail if no XML
458      if (!xml) {
459        return;
460      }
461
462      // this will be the <svg />
463      svg = xml.documentElement;
464
465      // get all the SVG paths
466      paths = svg.querySelectorAll('path');
467
468      if (removeInlineCss) {
469        // if `removeInlineCss` is true then remove the style attributes from the SVG paths
470        for (var i = 0; i < paths.length; i++) {
471          paths[i].removeAttribute('style');
472        }
473      }
474
475      svg.removeAttribute('xmlns:a');
476
477      while (replaceImagesLength--) {
478        replaceImgWithSvg(replaceImages[replaceImagesLength], svg.cloneNode(true));
479      }
480    };
481
482    xhr.send();
483  },
484  // replace the original <img /> with the new <svg />
485  replaceImgWithSvg = function (img, svg) {
486    var imgID = img.id,
487        imgClasses = img.getAttribute('class');
488
489    if (imgID) {
490      // re-assign the ID attribute from the <img />
491      svg.id = imgID;
492    }
493
494    if (imgClasses) {
495      // re-assign the class attribute from the <img />
496      svg.setAttribute('class', imgClasses + ' replaced-svg');
497    }
498
499    svg.setAttribute('data-src', img.getAttribute('src'));
500    img.parentNode.replaceChild(svg, img);
501  };
502
503  // grab all the elements from the document matching the passed in selector
504  images = document.querySelectorAll(selector);
505  imagesLength = images.length;
506
507  // sort images array by image url
508  while (imagesLength--) {
509    var _img = images[imagesLength],
510        _imgURL;
511
512    if (_img.getAttribute('data-src')) {
513      _imgURL = _img.getAttribute('data-src');
514    } else {
515      _imgURL = _img.getAttribute('src');
516    }
517
518    if (sortImages[_imgURL]) {
519      sortImages[_imgURL].push(_img);
520    } else {
521      sortImages[_imgURL] = [_img];
522    }
523  }
524
525  // loops over the matched urls
526  for (var key in sortImages) {
527    if (sortImages.hasOwnProperty(key)) {
528      loadSvg(key, sortImages[key]);
529    }
530  }
531}
532
533// slickAddClassMoving
534var slickAddClassMoving = function slickAddClassMoving(slider) {
535  slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
536    var $this = $(this);
537    var isLastSlideNext = currentSlide - nextSlide === slick.slideCount - 1;
538    var isFirstSlidePrev = nextSlide - currentSlide === slick.slideCount - 1;
539    var $target = $this.find('.slick-slide[data-slick-index="' + nextSlide + '"]');
540
541    if (isLastSlideNext) {
542      $target = $this.find('.slick-slide[data-slick-index="' + (currentSlide + 1) + '"]');
543      $this.find('.slick-slide').addClass('last-to-first');
544    }
545
546    if (isFirstSlidePrev) {
547      $target = $this.find('.slick-slide[data-slick-index="' + (currentSlide - 1) + '"]');
548      $this.find('.slick-slide').addClass('first-to-last');
549    }
550
551    $this.find('.slick-slide').removeClass('is-moving');
552    $target.addClass('is-moving');
553  });
554  slider.on('afterChange', function (event, slick, currentSlide) {
555    $(this).find('.slick-slide').removeClass('last-to-first').removeClass('first-to-last').removeClass('is-moving');
556  });
557};