https://www.hondacars-kanonji.co.jp/assets/js/common.js?20261006171352

1'use strict';
2
3var MutJs = MutJs || {};
4
5(function () {
6  var $win = $(window);
7  var scrollEventTimer = null;
8  var resizeEventTimer = null;
9  var winW, winH, isDesktopW;
10  MutJs.scrollTop = 0;
11
12  MutJs.Init = function () {
13    this.setTelLink();
14    this.setHeaderInteraction();
15    this.setAnchorScroll();
16    this.removeLoader();
17  };
18  
19  /* Loader解除
20  =============================== */
21
22  MutJs.Init.prototype.removeLoader = function () {
23    $("#js-loader").addClass('is-loaded');
24  };
25  
26  /* スマホの場合電話番号をセット
27  =============================== */
28
29  MutJs.Init.prototype.setTelLink = function () {
30    if ((mutUA.Mobile || mutUA.Tablet) && !mutUA.Desktop) {
31      $('.js-tel').each(function () {
32        var txt = $(this).text();
33        $(this).addClass('_active');
34        $(this).attr('href', 'tel:' + txt.replace(/-/g, ''));
35      });
36    } else {
37      $('.js-tel').addClass('_inactive');
38    }
39  };
40  
41  /* アンカースクロール
42  =============================== */
43
44  MutJs.Init.prototype.setAnchorScroll = function () {
45    $(document).on('click', '.js-scroll', function (e) {
46      e.preventDefault();
47      var speed = 500;
48      var fixHeaderHeight = $('#js-header').innerHeight();
49      var href = $(this).attr("href");
50      var $target = $(href == "#" || href == "" ? 'html' : href);
51      var position = $target.offset().top - fixHeaderHeight;
52      $("html, body").animate({
53        scrollTop: position
54      }, speed, "easeOutSine");
55    });
56  };
57  
58  /* Headerのナビ関係
59  =============================== */
60
61  MutJs.Init.prototype.setHeaderInteraction = function () {
62    $('#js-menu-trigger').on('click', function (e) {
63      e.preventDefault();
64      $(this).toggleClass('is-open');
65      $('#js-header-nav').toggleClass('is-open');
66    });
67    $('.js-header-nav-anchor').on('click', function (e) {
68      if (!isDesktopW) {
69        e.preventDefault();
70        $(this).toggleClass('is-open').next().slideToggle();
71      }
72    });
73
74    if (!!('ontouchstart' in window || navigator.msPointerEnabled) && !mutUA.Desktop) {
75      $('.js-header-nav-anchor').on('click', function (e) {
76        e.preventDefault();
77      });
78    }
79  };
80  
81  /* 出現アニメーション用
82  =============================== */
83
84  function watchIntersection() {
85    $('.c-sub-title').attr('data-intersection', 'once');
86
87    // observeしたときのaction定義
88    const action = entry => {
89      // entry.target に検出したDOMが入ってくる
90      // entry.isIntersecting に画面内かどうかが入ってくる
91      const $target = $(entry.target);
92
93      if (!$target.attr('data-intersection')) {
94        $target.attr('data-intersection', 'once');
95      }
96
97      // onceの設定だったらtrueを消さない
98      if ($target.attr('data-intersection') != 'repeat' && $target.attr('data-intersecting') == 'true') {
99        return false;
100      }
101
102      $target.attr('data-intersecting', entry.isIntersecting);
103    };
104
105    // IntersectionObserverの利用
106    const observer = new IntersectionObserver(entries => {
107      entries.forEach(entry => {
108        action(entry);
109      });
110    }, {
111      rootMargin: '0px 0px -50px 0px'
112    });
113
114    // observeするDOMを取得
115    const $targets = $('*[data-intersection]');
116    $targets.each(function (j, el) {
117      observer.observe(el);
118    });
119  }
120  
121  /* 発動
122  =============================== */
123
124  function onLoad() {
125    MutJs.init = new MutJs.Init();
126    deSVG('[src$=".svg"]', true);
127    onResized();
128    watchIntersection();
129  }
130
131  function onResized() {
132    onScrolled();
133    winW = $win.innerWidth();
134    winH = $win.innerHeight();
135    isDesktopW = $('#js-menu-trigger').is(':hidden');
136
137    if (isDesktopW) {
138      $('.js-header-nav-anchor').removeClass('is-open').next().removeAttr('style');
139      $('#js-menu-drawer').css("height", "");
140    } else {
141      $('#js-menu-drawer').css("height", winH);
142    }
143  }
144
145  function onResize() {
146    clearTimeout(resizeEventTimer);
147    resizeEventTimer = setTimeout(function () {
148      onResized();
149    }, 20);
150  }
151
152  function onScrolled() {
153    MutJs.scrollTop = $win.scrollTop();
154  }
155
156  function onScroll() {
157    clearTimeout(scrollEventTimer);
158    scrollEventTimer = setTimeout(function () {
159      onScrolled();
160    }, 20);
161  }
162
163  $win.on({
164    'load': onLoad,
165    // 'scroll': onScroll,
166    'resize': onResize
167  });
168})();
169
170/* from <img src="*.svg"> to <svg />
171https://github.com/benhowdle89/deSVG
172=============================== */
173
174(function () {
175  "use strict";
176
177  var desvg = function (selector, removeInlineCss) {
178    removeInlineCss = removeInlineCss || false;
179
180    var images,
181        imagesLength,

182        sortImages = {},
183        loadSvg = function (imgURL, replaceImages) {
184      var xhr = new XMLHttpRequest();
185      xhr.open('GET', imgURL, true);
186
187      xhr.onload = function () {
188        var xml, svg, paths, replaceImagesLength;
189
190        // get the response in XML format
191        xml = xhr.responseXML;
192        replaceImagesLength = replaceImages.length;
193
194        // bail if no XML
195        if (!xml) {
196          return;
197        }
198
199        // this will be the <svg />
200        svg = xml.documentElement;
201
202        // get all the SVG paths
203        paths = svg.querySelectorAll('path');
204
205        if (removeInlineCss) {
206          // if `removeInlineCss` is true then remove the style attributes from the SVG paths
207          for (var i = 0; i < paths.length; i++) {
208            paths[i].removeAttribute('style');
209          }
210        }
211
212        svg.removeAttribute('xmlns:a');
213
214        while (replaceImagesLength--) {
215          replaceImgWithSvg(replaceImages[replaceImagesLength], svg.cloneNode(true));
216        }
217      };
218
219      xhr.send();
220    },
221        replaceImgWithSvg = function (img, svg) {
222      // replace the original <img /> with the new <svg />
223      var imgID = img.id,
224          imgClasses = img.getAttribute('class');
225
226      if (imgID) {
227        // re-assign the ID attribute from the <img />
228        svg.id = imgID;
229      }
230
231      if (imgClasses) {
232        // re-assign the class attribute from the <img />
233        svg.setAttribute('class', imgClasses + ' replaced-svg');
234      }
235
236      svg.setAttribute('data-src', img.getAttribute('src'));
237      img.parentNode.replaceChild(svg, img);
238    };
239
240    // grab all the elements from the document matching the passed in selector
241    images = document.querySelectorAll(selector);
242    imagesLength = images.length;
243
244    // sort images array by image url
245    while (imagesLength--) {
246      var _img = images[imagesLength],
247          _imgURL;
248
249      if (_img.getAttribute('data-src')) {
250        _imgURL = _img.getAttribute('data-src');
251      } else {
252        _imgURL = _img.getAttribute('src');
253      }
254
255      if (sortImages[_imgURL]) {
256        sortImages[_imgURL].push(_img);
257      } else {
258        sortImages[_imgURL] = [_img];
259      }
260    }
261
262    // loops over the matched urls
263    for (var key in sortImages) {
264      if (sortImages.hasOwnProperty(key)) {
265        loadSvg(key, sortImages[key]);
266      }
267    }
268  };
269
270  window.deSVG = desvg;
271})();
272
273var LazyImg = {};
274document.addEventListener('DOMContentLoaded', function () {
275  LazyImg = {
276    image: $('img[data-src]'),
277    imageLen: $('img[data-src]').length,
278    bg: $('*[data-bg-image]:not("[style]")'),
279    loadedLen: 0,
280    isDane: false,
281    init: function init() {
282      var _this3 = this;
283
284      this.image.attr('src', '');
285
286      if (!this.imageLen) {
287        this.commonLoaded();
288        this.loaded();
289      } else {
290        this.image.on('load', function () {
291          _this3.loadedLen++;
292
293          if (_this3.loadedLen == _this3.imageLen) {
294            _this3.commonLoaded();
295
296            _this3.loaded();
297          }
298        });
299      }
300    },
301    set: function set() {
302      this.image.each(function (i) {
303        $(this).attr('src', $(this).attr('data-src'));
304      });
305    },
306    desvg: function desvg() {
307      _desvg('[data-src$=".svg"]', true);
308    },
309    commonLoaded: function commonLoaded() {
310      //console.log('done');
311      this.bg.each(function (i) {
312        if ($(this).attr('data-bg-image')) {
313          $(this).attr('style', 'background-image: url(' + $(this).attr('data-bg-image') + ')');
314        }
315      });
316      this.isDane = true;
317    },
318    loaded: function loaded() {
319      return false;
320    }
321  };
322  LazyImg.init();
323});
324$(window).on('load', function () {
325  LazyImg.set();
326});