https://www.hondacars-kusu.co.jp/assets/js/common.js?20261009094718

1'use strict';
2
3var MutJs = MutJs || {};
4
5(function() {
6
7    var $win   = $(window);
8    var scrollEventTimer = null;
9    var resizeEventTimer = null;
10    var winW, winH, isDesktopW;
11
12    MutJs.scrollTop = 0;
13
14    MutJs.Init = function() {
15        this.setTelLink();
16        this.setHeaderInteraction();
17        this.setAnchorScroll();
18        this.removeLoader();
19    };
20
21
22    /* Loader解除
23    =============================== */
24    MutJs.Init.prototype.removeLoader = function() {
25        $("#js-loader").addClass('is-loaded');
26    }
27
28    /* スマホの場合電話番号をセット
29    =============================== */
30    MutJs.Init.prototype.setTelLink = function() {
31      if ( ( mutUA.Mobile || mutUA.Tablet ) && !mutUA.Desktop ) {
32        $('.js-tel').each(function() {
33            var txt = $(this).text();
34            $(this).addClass('_active');
35            $(this).attr('href', 'tel:' + txt.replace(/-/g, ''));
36        });
37      } else {
38        $('.js-tel').addClass('_inactive');
39      }
40    }
41
42
43    /* アンカースクロール
44    =============================== */
45    MutJs.Init.prototype.setAnchorScroll = function() {
46        $(document).on('click', '.js-scroll', function(e) {
47            e.preventDefault();
48            var speed    = 500;
49            var fixHeaderHeight = $('#js-header').innerHeight();
50            var href     = $(this).attr("href");
51            var $target  = $(href == "#" || href == "" ? 'html' : href);
52            var position = $target.offset().top - fixHeaderHeight;
53            $("html, body").animate({scrollTop:position}, speed, "easeOutSine");
54        });
55    }
56
57
58    /* Headerのナビ関係
59    =============================== */
60    MutJs.Init.prototype.setHeaderInteraction = function() {
61        $('#js-menu-trigger').on('click', function(e) {
62            e.preventDefault();
63            $(this).toggleClass('is-open');
64            $('#js-header-nav').toggleClass('is-open');
65        });
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    function watchIntersection() {
84
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 -200px 0px'
112        });
113
114        // observeするDOMを取得
115        const $targets = $('*[data-intersection]');
116
117        $targets.each(function(j, el){
118            observer.observe(el);
119        });
120    }
121
122
123    /* 発動
124    =============================== */
125
126    function onLoad() {
127        MutJs.init = new MutJs.Init();
128        deSVG('[src$=".svg"]', true);
129        onResized();
130        watchIntersection();
131    }
132
133
134    function onResized() {
135        onScrolled();
136        winW = $win.innerWidth();
137        winH = $win.innerHeight();
138        isDesktopW = $('#js-menu-trigger').is(':hidden');
139
140        if (isDesktopW) {

141            $('.js-header-nav-anchor').removeClass('is-open').next().removeAttr('style');
142            $('#js-menu-drawer').css("height", "");
143        } else {
144            $('#js-menu-drawer').css("height", winH);
145        }
146    }
147
148    function onResize(){
149        clearTimeout(resizeEventTimer);
150        resizeEventTimer = setTimeout(function() {
151            onResized();
152        }, 20 );
153    }
154
155    function onScrolled() {
156        MutJs.scrollTop = $win.scrollTop();
157    }
158
159    function onScroll(){
160        clearTimeout(scrollEventTimer);
161        scrollEventTimer = setTimeout(function() {
162            onScrolled();
163        }, 20 );
164    }
165
166    $win.on({
167        'load': onLoad,
168        // 'scroll': onScroll,
169        'resize': onResize
170    });
171
172})();
173
174
175/* from <img src="*.svg"> to <svg />
176https://github.com/benhowdle89/deSVG
177=============================== */
178
179(function() {
180    "use strict";
181
182    var desvg = function(selector, removeInlineCss) {
183        removeInlineCss = removeInlineCss || false;
184
185        var images,
186            imagesLength,
187            sortImages = {},
188
189            // load svg file
190            loadSvg = function (imgURL, replaceImages) {
191                // set up the AJAX request
192                var xhr = new XMLHttpRequest();
193                xhr.open('GET', imgURL, true);
194
195                xhr.onload = function() {
196                    var xml,
197                        svg,
198                        paths,
199                        replaceImagesLength;
200
201                    // get the response in XML format
202                    xml = xhr.responseXML;
203                    replaceImagesLength = replaceImages.length;
204
205                    // bail if no XML
206                    if (!xml) {
207                        return;
208                    }
209
210                    // this will be the <svg />
211                    svg = xml.documentElement;
212
213                    // get all the SVG paths
214                    paths = svg.querySelectorAll('path');
215
216                    if (removeInlineCss) {
217                        // if `removeInlineCss` is true then remove the style attributes from the SVG paths
218                        for (var i = 0; i < paths.length; i++) {
219                            paths[i].removeAttribute('style');
220                        }
221                    }
222                    svg.removeAttribute('xmlns:a');
223
224                    while(replaceImagesLength--) {
225                        replaceImgWithSvg(replaceImages[replaceImagesLength], svg.cloneNode(true));
226                    }
227                };
228
229                xhr.send();
230            },
231
232            // replace the original <img /> with the new <svg />
233            replaceImgWithSvg = function (img, svg) {
234                var imgID = img.id,
235                    imgClasses = img.getAttribute('class');
236
237                if (imgID) {
238                    // re-assign the ID attribute from the <img />
239                    svg.id = imgID;
240                }
241
242                if (imgClasses) {
243                    // re-assign the class attribute from the <img />
244                    svg.setAttribute('class', imgClasses + ' replaced-svg');
245                }
246
247                svg.setAttribute('data-src', img.getAttribute('src'));
248
249                img.parentNode.replaceChild(svg, img);
250            };
251
252
253
254        // grab all the elements from the document matching the passed in selector
255        images = document.querySelectorAll(selector);
256        imagesLength = images.length;
257
258        // sort images array by image url
259        while (imagesLength--) {
260            var _img = images[imagesLength],
261              _imgURL;
262
263            if (_img.getAttribute('data-src')) {
264              _imgURL = _img.getAttribute('data-src')
265            } else {
266              _imgURL = _img.getAttribute('src')
267            }
268
269            if (sortImages[_imgURL]) {
270                sortImages[_imgURL].push(_img);
271            } else {
272                sortImages[_imgURL] = [_img];
273            }
274        }
275
276        // loops over the matched urls
277        for (var key in sortImages) {
278            if (sortImages.hasOwnProperty(key)) {
279                loadSvg(key, sortImages[key]);
280            }
281        }
282
283    };
284
285    window.deSVG = desvg;
286})();
287
288var LazyImg = {};
289
290document.addEventListener('DOMContentLoaded', function(){

291    LazyImg = {
292        image: $('img[data-src]'),
293        imageLen: $('img[data-src]').length,
294        bg: $('*[data-bg-image]:not("[style]")'),
295        loadedLen: 0,
296        isDane: false,
297        init: function init() {
298            var _this3 = this;
299
300            this.image.attr('src', '');
301
302            if (!this.imageLen) {
303                this.commonLoaded();
304                this.loaded();
305            } else {
306                this.image.on('load', function () {
307                    _this3.loadedLen++;
308
309                    if (_this3.loadedLen == _this3.imageLen) {
310                        _this3.commonLoaded();
311
312                        _this3.loaded();
313                    }
314                });
315            }
316        },
317        set: function set() {
318            this.image.each(function (i) {
319                $(this).attr('src', $(this).attr('data-src'));
320            });
321        },
322        desvg: function desvg() {
323            _desvg('[data-src$=".svg"]', true);
324        },
325        commonLoaded: function commonLoaded() {
326            //console.log('done');
327            this.bg.each(function (i) {
328                if ($(this).attr('data-bg-image')) {
329                    $(this).attr('style', 'background-image: url(' + $(this).attr('data-bg-image') + ')');
330                }
331            });
332            this.isDane = true;
333        },
334        loaded: function loaded() {
335            return false;
336        }
337    }
338
339    LazyImg.init();
340})
341
342$(window).on('load', function(){
343    LazyImg.set();
344});