https://www.hondamobility-chubu.com/corporate/assets/js/index.js?081811

1'use strict';
2
3let svgLineFn = {
4  //rect
5  getRectLength: function (el) {
6    return el.getAttribute('width') * 2 + el.getAttribute('height') * 2;
7  },
8  //polygon
9  getPolygonLength: function (el) {
10    var points = el.getAttribute('points');
11    points = points.split(" ");
12    var x1 = null,
13        x2,
14        y1 = null,
15        y2,
16        lineLength = 0,
17        x3,
18        y3;
19
20    for (var i = 0; i < points.length; i++) {
21      var coords = points[i].split(",");
22
23      if (x1 == null && y1 == null) {
24        if (/(\r\n|\n|\r)/gm.test(coords[0])) {
25          coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm, "");
26          coords[0] = coords[0].replace(/\s+/g, "");
27        }
28
29        if (/(\r\n|\n|\r)/gm.test(coords[1])) {
30          coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm, "");
31          coords[0] = coords[1].replace(/\s+/g, "");
32        }
33
34        x1 = coords[0];
35        y1 = coords[1];
36        x3 = coords[0];
37        y3 = coords[1];
38      } else {
39        if (coords[0] != "" && coords[1] != "") {
40          if (/(\r\n|\n|\r)/gm.test(coords[0])) {
41            coords[0] = coords[0].replace(/(\r\n|\n|\r)/gm, "");
42            coords[0] = coords[0].replace(/\s+/g, "");
43          }
44
45          if (/(\r\n|\n|\r)/gm.test(coords[1])) {
46            coords[0] = coords[1].replace(/(\r\n|\n|\r)/gm, "");
47            coords[0] = coords[1].replace(/\s+/g, "");
48          }
49
50          x2 = coords[0];
51          y2 = coords[1];
52          lineLength += Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
53          x1 = x2;
54          y1 = y2;
55
56          if (i == points.length - 2) {
57            lineLength += Math.sqrt(Math.pow(x3 - x1, 2) + Math.pow(y3 - y1, 2));
58          }
59        }
60      }
61    }
62
63    return lineLength;
64  },
65  //line
66  getLineLength: function (el) {
67    var x1 = el.getAttribute('x1');
68    var x2 = el.getAttribute('x2');
69    var y1 = el.getAttribute('y1');
70    var y2 = el.getAttribute('y2');
71    var lineLength = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
72    return lineLength;
73  },
74  //circle
75  getCircleLength: function (el) {
76    return 2 * Math.PI * el.getAttribute('r');
77  },
78  //path
79  getPathLength: function (el) {
80    return el.getTotalLength();
81  },
82  //ellipse
83  getEllipseLength: function (el) {
84    var rx = parseInt(el.attr('rx'));
85    var ry = parseInt(el.attr('ry'));
86    var h = Math.pow(rx - ry, 2) / Math.pow(rx + ry, 2);
87    var totalLength = Math.PI * (rx + ry) * (1 + 3 * h / (10 + Math.sqrt(4 - 3 * h)));
88    return totalLength;
89  },
90  //polyline
91  getPolylineLength: function (el) {
92    var totalLength = 0;
93    var prevPos;
94
95    for (var i = 0; i < el.points.numberOfItems; i++) {
96      var pos = el.points.getItem(i);
97
98      if (i > 0) {
99        totalLength += Math.sqrt(Math.pow(pos.x - prevPos.x, 2) + Math.pow(pos.y - prevPos.y, 2));
100      }
101
102      prevPos = pos;
103    }
104
105    return totalLength;
106  },
107  getLength: function (el) {
108    var len;
109
110    switch (el.tagName.toLowerCase()) {
111      case 'rect':
112        len = svgLineFn.getRectLength(el);
113        break;
114
115      case 'circle':
116        len = svgLineFn.getCircleLength(el);
117        break;
118
119      case 'ellipse':
120        len = svgLineFn.getEllipseLength(el);
121        break;
122
123      case 'line':
124        len = svgLineFn.getLineLength(el);
125        break;
126
127      case 'path':
128        len = svgLineFn.getPathLength(el);
129        break;
130
131      case 'polyline':
132        len = svgLineFn.getPolylineLength(el);
133        break;
134
135      case 'polygon':
136        len = svgLineFn.getPolygonLength(el);
137        break;
138
139      default:
140        break;
141    }
142
143    len += 30;
144    return len;
145  }
146};
147var polylines = document.querySelectorAll('.js-index-mv-logo svg path');
148
149for (var i = 0; i < polylines.length; i++) {
150  (function (polyline) {
151    var len = svgLineFn.getLength(polyline);
152    polyline.setAttributeNS(null, 'style', '--stroke-dashoffset: ' + -len + '; --stroke-dasharray: ' + len + ', ' + len + ';');
153  })(polylines[i]);
154}
155
156function slickBlogSlider() {
157  if (!$('#js-index-blog-slider').hasClass('slick-initialized')) {
158    $('#js-index-blog-slider').slick({
159      dots: true,

160      arrows: false,
161      autoplay: true,
162      autoplaySpeed: 5000,
163      slidesToShow: 1
164    });
165  }
166}
167
168function unslickBlogSlider() {
169  if ($('#js-index-blog-slider').hasClass('slick-initialized')) {
170    $('#js-index-blog-slider').slick('unslick');
171  }
172}
173
174MutJs.resized = function () {
175  if (!this.isDesktopW) {
176    slickBlogSlider();
177  } else {
178    unslickBlogSlider();
179  }
180};
181
182MutJs.scrolled = function () {
183  if (this.scrTop + this.winH > $('#js-index-head').children().first().offset().top) {
184    $('body').addClass('is-scrolled');
185  } else {
186    $('body').removeClass('is-scrolled');
187  }
188
189  $('#js-index-bg-canvas').children().each((i, v) => {
190    let bg = $(v);
191    let sec = $(`.js-index-bg-section[data-id="${bg.attr('data-id')}"]`);
192    let top = sec.offset().top;
193    let btm = top + sec.innerHeight();
194
195    if (top - this.winH * 0.5 < this.scrTop) {
196      bg.addClass('is-show');
197    } else {
198      bg.removeClass('is-show');
199    }
200
201    if (btm - this.winH * 0.5 < this.scrTop) {
202      bg.addClass('is-scrolled');
203    } else {
204      bg.removeClass('is-scrolled');
205    }
206  });
207};