https://www.hondacars-maebashichuo.jp/assets/js/common.js?20261009050517

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  winH: 0,
25  scrTop: 0,
26  isLoaded: false,
27  init: function () {
28    this.sizeUpdate();
29    this.setDOM();
30    this.LazyImg.init();
31    this.setHeaderFunc();
32    this.initTab();
33    this.setClickEvent();
34    this.setModal();
35    this.removeLoaderTimer();
36
37    if (!this.isLoaded) {
38      $(window).on('load', () => {
39        this.commonLoaded();
40      });
41    } else {
42      this.commonLoaded();
43    }
44
45    document.addEventListener('scroll', this.scrolling.bind(this), {
46      passive: true
47    });
48    window.addEventListener('resize', this.resizing.bind(this), {
49      passive: true
50    });
51  },
52  commonLoaded: function () {
53    this.isLoaded = true;
54    this.LazyImg.set();
55    this.setIntersection();
56    this.setSlider();
57    this.loaded();
58    this.removeLoader();
59    this.setHashAnchor();
60    this.commonResized();
61    this.commonScrolled();
62  },
63  commonScrolled: function () {
64    this.scrTop = $(window).scrollTop();
65    $(".js-x-scroll").css("left", "-" + $(window).scrollLeft() + "px");
66    this.setPagetop();
67    this.scrolled();
68  },
69  commonResized: function () {
70    this.sizeUpdate();
71    this.resized();
72  },
73  setViewport: function () {
74    // !mutUA.DesktopだけだとiOS13以上のiPadが拾えないので個別に判定
75    var ua = window.navigator.userAgent.toLowerCase();
76    var isPortable = !mutUA.Desktop || ua.indexOf('macintosh') && 'ontouchend' in document;
77
78    if (isPortable && this.winW <= 375) {
79      $('meta[name="viewport"]').attr('content', 'width=375');
80    } else if (isPortable && this.winW >= 768 && this.winW <= 1280) {
81      $('meta[name="viewport"]').attr('content', 'width=1280');
82    } else {
83      $('meta[name="viewport"]').attr('content', 'width=device-width, initial-scale=1');
84    }
85  },
86  setDOM: function () {
87    desvg('[src$=".svg"]', true);
88
89    if (mutUA.Mobile && !mutUA.Desktop) {
90      $('.js-tel').each(function () {
91        $(this).addClass('_active');
92
93        if (!$(this).attr('href')) {
94          $(this).attr('href', 'tel:' + $(this).text().replace(/-/g, ''));
95        }
96      });
97    } else {
98      $('.js-tel').addClass('_inactive').removeAttr('href');
99    }
100  },
101  initTab: function () {
102    // valで指定したdata-tabを持つタブに切り替える
103    function switchTab(val) {
104      var $channel = $('*[data-tab-id="' + val + '"]');
105      var $controller = $('*[data-tab-for="' + val + '"]');
106
107      if (val == "all") {
108        // 'all'だったら全data-tab-idを対象に変更
109        $channel = $('*[data-tab-id]');
110      }
111
112      $('*[data-tab-for].is-current').removeClass('is-current');
113      $controller.addClass('is-current');
114
115      if ($channel.length) {
116        if ($('select[data-tab-select]').length && $('select[data-tab-select]').val() != val) {
117          $('select[data-tab-select]').val(val);
118        }
119
120        $('*[data-tab-id]').removeClass('is-current');
121        $channel.addClass('is-current');
122      }
123
124      return false;
125    }
126
127    // click動作
128    $(document).on('click', '*[data-tab-for]', function (e) {
129      e.preventDefault();
130
131      if (!$(this).hasClass('is-current')) {
132        switchTab($(this).data('tab-for'));
133      }
134    });
135
136    // select型の場合
137    $('body').on('change', 'select[data-tab-select]', function (e) {
138      switchTab($(this).val());
139    });
140
141    // #ハッシュ付きだったらそのタブをcurrentに
142    if (!!location.hash) {
143      var $hashTab = $('*[data-tab-id="' + location.hash.slice(1) + '"]');
144
145      if ($hashTab.length) {
146        switchTab(location.hash.slice(1));
147      }
148    }
149  },
150  setSlider: function () {
151    $('.js-slider').each(function () {
152      var $thisSlider = $(this);
153      $thisSlider.parent().append('<div class="slick-arrow-holder"></div>');
154      $thisSlider.slick({
155        dots: true,
156        arrows: true,
157        autoplay: true,
158        slidesToShow: 1,
159        appendArrows: $thisSlider.parent().find('.slick-arrow-holder')
160      });
161    });
162  },
163  setPagetop: function () {
164    var pagetop = $('#js-pagetop');
165
166    if (this.scrTop > 60) {
167      pagetop.addClass('is-visible');
168    } else {
169      pagetop.removeClass('is-visible');
170    }
171
172    // if (this.scrTop + $(window).height() > pagetop.offset().top + pagetop.innerHeight()) {
173    //  pagetop.addClass('is-static');
174    // } else {
175    //  pagetop.removeClass('is-static');
176    // }
177
178  },
179  scrolling: function () {
180    var that = this;
181    this.ticking = false;

182
183    if (!this.ticking) {
184      requestAnimationFrame(function () {
185        that.ticking = false;
186        that.commonScrolled();
187      });
188      this.ticking = true;
189    }
190  },
191  resizing: function () {
192    var that = this;
193    this.ticking = false;
194
195    if (!this.ticking) {
196      requestAnimationFrame(function () {
197        that.ticking = false;
198        that.commonResized();
199      });
200      this.ticking = true;
201    }
202  },
203  loaded: function () {// console.log('common loaded');
204  },
205  scrolled: function () {// console.log('common scrolled');
206  },
207  resized: function () {// console.log('common resized');
208      $('body').removeClass('is-toggle-menu-open');
209      $('.js-header-nav-anchor').removeClass('is-open').next().removeAttr('style');
210  },
211  sizeUpdate: function () {
212    this.winW = $(window).innerWidth();
213    this.winH = $(window).innerHeight();
214    this.isDesktopW = $(window).width() >= 1280;
215    this.setViewport();
216    let vh = window.innerHeight * 0.01;
217    document.documentElement.style.setProperty('--vh', `${vh}px`);
218  },
219  setHeaderFunc: function () {
220    var that = this;
221    $('#js-header-toggle').on('click', function (e) {
222      e.preventDefault();
223      $('body').toggleClass('is-toggle-menu-open');
224    });
225    $('.js-header-nav-anchor').on('click', function (e) {
226        e.preventDefault();
227        $(this).toggleClass('is-open').next().slideToggle();
228    });
229    if (!!('ontouchstart' in window || navigator.msPointerEnabled) && !mutUA.Desktop) {
230      $('.js-header-nav-anchor').on('click', function (e) {
231        e.preventDefault();
232      });
233    }
234  },
235  openModal: function openModal(id) {
236    $('*[data-modal-id="' + id + '"]').fadeIn();
237  },
238  closeModal: function closeModal() {
239    $('*[data-modal-id]').fadeOut();
240  },
241  setModal: function setModal() {
242    var that = this;
243
244    $(document).on('click', '*[data-modal-for]', function (e) {
245      e.preventDefault();
246      that.openModal($(this).attr('data-modal-for'));
247    });
248    $(document).on('click', '*[data-modal-contents]', function (e) {
249      e.stopPropagation();
250    });
251    $(document).on('click', '*[data-modal-close]', function (e) {
252      e.preventDefault();
253      that.closeModal();
254    });
255  },
256  setIntersection: function () {
257    // 出現アニメーション用
258    $('.c-section').attr('data-intersection', 'once');
259
260    // observeしたときのaction定義
261    const action = entry => {
262      // entry.target に検出したDOMが入ってくる
263      // entry.isIntersecting に画面内かどうかが入ってくる
264      const $target = $(entry.target);
265
266      if (!$target.attr('data-intersection')) {
267        $target.attr('data-intersection', 'once');
268      }
269
270      // onceの設定だったらtrueを消さない
271      if ($target.attr('data-intersection') != 'repeat' && $target.attr('data-intersecting') == 'true') {
272        return false;
273      }
274
275      $target.attr('data-intersecting', entry.isIntersecting);
276    };
277
278    // IntersectionObserverの利用
279    const observer = new IntersectionObserver(entries => {
280      entries.forEach(entry => {
281        action(entry);
282      });
283    }, {
284      rootMargin: '0px 0px -30px 0px'
285    });
286
287    // observeするDOMを取得
288    const $targets = $('*[data-intersection]');
289    $targets.each(function (j, el) {
290      observer.observe(el);
291    });
292  },
293  removeLoaderTimer: function () {
294    this.loadingTimer = setTimeout(() => {
295      this.removeLoader();
296    }, 3000);
297  },
298  removeLoader: function () {
299    $('body').addClass('is-loaded');
300    clearTimeout(this.loadingTimer);
301  },
302  initCalendar: function () {
303    cal_init();
304
305    $(document).on('click', '#js-calendar-current', function (e) {
306      e.preventDefault();
307      let current = $('#js-calendar').attr('data-calendar-current');
308      $('#js-calendar').attr('data-calendar-current', (current * 1 - 1));
309    });
310
311    $(document).on('click', '#js-calendar-next', function (e) {
312      e.preventDefault();
313      let current = $('#js-calendar').attr('data-calendar-current');
314      $('#js-calendar').attr('data-calendar-current', (current * 1 + 1));
315    });
316  },

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