https://hakatad-c.com/wp-content/themes/is-hakata/js/script.js?ver=1785977770

1// テーマのURLをJavaScriptに渡す
2const templateUrl = themeUrl.templateUrl;
3
4// //内部リンク----------------------------------------------------------------
5var Ease = {
6  easeInOut: function (t) {
7    return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
8  },
9};
10var duration = 1000;
11function initializeSmoothScroll() {
12  function smoothScrollTo(targetElement) {
13    var currentPosition =
14      document.documentElement.scrollTop || document.body.scrollTop;
15    var headerHeight = window.innerWidth > 834 ? 80 : 60;
16    var targetPosition =
17      window.pageYOffset +
18      targetElement.getBoundingClientRect().top -
19      headerHeight;
20      window.scrollTo(0, targetPosition);
21    // var startTime = performance.now();
22    // var loop = function (nowTime) {
23    //   var time = nowTime - startTime;
24    //   var normalizedTime = time / duration;
25    //   if (normalizedTime < 1) {
26    //     window.scrollTo(
27    //       0,
28    //       currentPosition +
29    //         (targetPosition - currentPosition) * Ease.easeInOut(normalizedTime)
30    //     );
31    //     requestAnimationFrame(loop);
32    //   } else {
33    //     window.scrollTo(0, targetPosition);
34    //   }
35    // };
36    // requestAnimationFrame(loop);
37  }
38
39  var smoothScroll = document.querySelectorAll('a[href^="#"]');
40  var smoothScrollTriggers = Array.prototype.slice.call(smoothScroll, 0);
41  smoothScrollTriggers.forEach(function (smoothScrollTrigger) {
42    smoothScrollTrigger.addEventListener("click", function (e) {
43      var href = smoothScrollTrigger.getAttribute("href");
44      var targetElement = document.getElementById(href.replace("#", ""));
45      if (targetElement) {
46        e.preventDefault();
47        e.stopPropagation();
48        // closeNav();
49        smoothScrollTo(targetElement);
50      }
51    });
52  });
53
54  if (window.location.hash) {
55    var targetElement = document.getElementById(
56      window.location.hash.replace("#", "")
57    );
58    if (targetElement) {
59      smoothScrollTo(targetElement);
60    }
61  }
62};
63
64// マッチングハイト(高さを揃える)
65function matchHeight() {
66  const $elements = document.querySelectorAll("[data-mh]");
67  const groups = new Map();
68
69  $elements.forEach((el) => {
70    el.style.height = "auto";
71  });
72
73  $elements.forEach((el) => {
74    const attributeName = el.getAttribute("data-mh");
75    if (!groups.has(attributeName)) {
76      groups.set(attributeName, []);
77    }
78    groups.get(attributeName).push(el);
79  });
80
81  groups.forEach((group) => {
82    const attributeGroups = new Map();
83
84    group.forEach((el) => {
85      const attributeName = el.getAttribute("data-mh");
86      const topPosition = el.getBoundingClientRect().top;
87      const key = attributeName + "_" + topPosition;
88      if (!attributeGroups.has(key)) {
89        attributeGroups.set(key, []);
90      }
91      attributeGroups.get(key).push(el);
92    });
93    attributeGroups.forEach((item) => {
94      const maxHeight = Math.max(...item.map((el) => el.offsetHeight));
95      item.forEach((el2) => {
96        el2.style.height = `${maxHeight}px`;
97      });
98    });
99  });
100}
101
102// ハンバーガーメニューが開いているときはページのスクロールができないようにする
103let currentScroll = 0;
104
105function bodyFixed() {
106  const body = document.querySelector("body");
107  const headerNav = document.querySelector(".js-header-drawerMenu");
108  if (headerNav.classList.contains("active")) {
109    currentScroll = window.scrollY;
110    setTimeout(() => {
111      body.classList.add("fixed");
112    }, 500);
113  } else {
114    body.classList.remove("fixed");
115    document.documentElement.style.scrollBehavior = "auto";
116    window.scrollTo(0, currentScroll);
117    document.documentElement.style.scrollBehavior = "smooth";
118  }
119}
120
121
122// ハンバーガーボタンでのナビの開閉
123function clickHamburger() {
124  const hamburger = document.querySelector(".js-hamburger");
125  const headerNav = document.querySelector(".js-header-drawerMenu");
126  const header = document.querySelector(".js-header");
127  const navMenu = document.querySelector(".header-nav");
128  
129  hamburger.addEventListener("click", () => { 
130    header.classList.toggle("active");
131    hamburger.classList.toggle("active");
132    navMenu.classList.toggle("none");
133    headerNav.classList.toggle("active");
134    bodyFixed();
135  });
136}
137
138// ナビ外をクリックしたときのナビを閉じる
139function clickHeaderDrawerMenuBg() {

140  const headerNavBg = document.querySelector(".js-header-drawerMenu-bg");
141
142  headerNavBg.addEventListener("click", () => {
143    closeNav()
144  });
145}
146
147// ナビを閉じ、ハンバーガーボタンを非アクティブにする
148function closeNav() {
149  const hamburger = document.querySelector(".js-hamburger");
150  const headerNav = document.querySelector(".js-header-drawerMenu");
151  const header = document.querySelector(".js-header");
152  const navMenu = document.querySelector(".header-nav");
153
154  header.classList.remove("active");
155  hamburger.classList.remove("active");
156  navMenu.classList.remove("none");
157  headerNav.classList.remove("active");
158  bodyFixed();
159}
160
161// ヘッダーのスクロールイベント
162function scrollHeader() {
163  const header = document.querySelector(".js-header");
164  // const getHeader = document.querySelector(".header");
165  if (document.body.classList.contains('home')) {
166    if (window.scrollY > 0) {
167      // getHeader.classList.add("visible");
168      header.classList.add("__scroll");
169    } else {
170      // getHeader.classList.remove("visible");
171      if (!header.classList.contains("active")) {
172        header.classList.remove("__scroll");
173      }
174    }
175    // ヘッダーが一番上にいるときと、そうでないときで表示の切り替え
176    // if (!header.classList.contains("active")) {
177    //   header.classList.add("active");
178    // }
179  }else {
180    // ヘッダーが一番上にいるときと、そうでないときで表示の切り替え
181    header.classList.add("__scroll");
182  }
183}
184
185//スクロール位置によってアニメーションを実行する----------------------------
186function checkAnimationTrigger() {
187  const animationItem = document.getElementsByClassName("js-animation_item");
188  for (let i = 0; i < animationItem.length; i++) {
189    const rect = animationItem[i].getBoundingClientRect().top;
190    const scroll = window.pageYOffset || document.documentElement.scrollTop;
191    const offset = rect + scroll;
192    const windowHeight = window.innerHeight; // 現在のブラウザの高さ
193    if (scroll > offset - windowHeight + windowHeight * 0.4) {
194      animationItem[i].classList.add("active");
195    }
196  }
197}
198
199// 画像切り替え
200function imgSwitch() {
201  const imgSwitchItemOverlay = document.getElementsByClassName("js-img_switch-item-overlay");
202  const imgSwitchItemOverlayThumb = document.getElementsByClassName("js-img_switch-item-overlay-thumb");
203  const imgSwitchBase = document.getElementsByClassName("js-img_switch-base");
204
205  let startX;
206
207  for (let i = 0; i < imgSwitchItemOverlayThumb.length; i++) {
208    imgSwitchItemOverlayThumb[i].addEventListener("mousedown", startDrag);
209    imgSwitchItemOverlayThumb[i].addEventListener("touchstart", startDrag);
210
211    function startDrag(e) {
212      e.preventDefault();
213      const imgWidth = imgSwitchBase[i].offsetWidth;
214      const imgLeft = imgSwitchBase[i].getBoundingClientRect().left;
215
216      function onMove(e) {
217        const clientX = e.touches ? e.touches[0].clientX : e.clientX;
218        const moveX = ((clientX - imgLeft) / imgWidth) * 100;
219        if (moveX < 0) {
220          imgSwitchItemOverlay[i].style.width = "0%";
221        } else if (moveX > 100) {
222          imgSwitchItemOverlay[i].style.width = "100%";
223        } else {
224          imgSwitchItemOverlay[i].style.width = moveX + "%";
225        }
226      }
227
228      function onEnd() {
229        document.removeEventListener("mousemove", onMove);
230        document.removeEventListener("mouseup", onEnd);
231        document.removeEventListener("touchmove", onMove);
232        document.removeEventListener("touchend", onEnd);
233      }
234
235      document.addEventListener("mousemove", onMove);
236      document.addEventListener("mouseup", onEnd);
237      document.addEventListener("touchmove", onMove);
238      document.addEventListener("touchend", onEnd);
239    }
240  }
241}
242
243
244// パララックス効果を適用する関数
245// function parallaxEffect() {
246//   const aboutWrapper = document.querySelector(".home-about-wrapper");
247//   const aboutBg = document.querySelector(".home-about-bg");
248//   const wrapperOffsetTop = -aboutWrapper.getBoundingClientRect().top;
249//   aboutBg.style.transform = `translateY(${wrapperOffsetTop * 0.7}px)`;
250// }
251
252// 目次を生成する関数
253function makeIndex() {
254  const pageElement = document.querySelector('.page');
255  if (pageElement) {
256    // "data-index"属性を持つ要素がある場合は目次を生成
257    const indexElements = pageElement.querySelectorAll('[data-index]');
258    if(indexElements.length > 0) {
259      let index = pageElement.querySelector('.com-index');  
260      // 目次が無い場合はコンテツの一番上に目次を生成する
261      if (!index) {
262        const newContent = document.createElement('div');
263        newContent.classList.add('com-contentWidth', 'com-spacer-section');
264        const newIndex = document.createElement('div');
265        newIndex.classList.add('com-index');
266        const pageTemplate = document.querySelector('.page-template');
267        pageTemplate.insertBefore(newContent, pageTemplate.firstChild);
268        newContent.insertBefore(newIndex, newContent.firstChild);
269        index = newIndex;
270      }
271  
272      // 目次のタイトル部を生成する
273      const newIndexTitle = document.createElement('h4');
274      newIndexTitle.classList.add('com-index-title', 'com-spacer-small');
275      const newIndexTitleIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
276      newIndexTitleIcon.classList.add('com-index-title-icon');
277      const newIndexTitleIconUse = document.createElementNS('http://www.w3.org/2000/svg', 'use');
278      const iconIndex = templateUrl + '/assets/img/icon_index.svg#icon';
279      newIndexTitleIconUse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', iconIndex);
280      newIndexTitleIcon.appendChild(newIndexTitleIconUse);
281      newIndexTitle.appendChild(newIndexTitleIcon);
282      newIndexTitle.appendChild(document.createTextNode('目次'));
283      index.insertBefore(newIndexTitle, index.firstChild);
284  
285      // 目次のリスト部を生成する
286      const newIndexList = document.createElement('ul');
287      newIndexList.classList.add('com-index-list');
288      index.appendChild(newIndexList);

289      indexElements.forEach((element, i) => {
290        const listItem = document.createElement('li');
291        listItem.classList.add('com-index-list-item');
292        const link = document.createElement('a');
293        link.classList.add('com-index-list-item-link');
294        link.href = `#index-${i}`;
295        link.textContent = element.textContent;
296        const newIndexTitleArrow = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
297        newIndexTitleArrow.classList.add('com-index-list-item-link-icon');
298        const newIndexTitleArrowUse = document.createElementNS('http://www.w3.org/2000/svg', 'use');
299        const iconIndex = templateUrl + '/assets/img/icon_arrow_02.svg#icon';
300        newIndexTitleArrowUse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', iconIndex);
301        newIndexTitleArrow.appendChild(newIndexTitleArrowUse);
302        link.appendChild(newIndexTitleArrow);
303        listItem.appendChild(link);
304        newIndexList.appendChild(listItem);
305
306        // 各要素にIDを付与
307        element.id = `index-${i}`;
308      });
309    }
310  }
311}
312
313// .page-template-related-pages-listのボタン高さを揃える
314function matchRelatedButtonHeight() {
315  const relatedPagesList = document.querySelector('.page-template-related-pages-list');
316  if (relatedPagesList) {
317    const buttons = relatedPagesList.querySelectorAll('.com-btn03');
318    const maxHeight = Math.max(...Array.from(buttons).map(button => button.offsetHeight));  
319    buttons.forEach(button => {
320      button.style.height = `${maxHeight}px`;
321    });
322  }
323}
324
325// 変換できなかった[get_current_theme_path]を置き換える
326function changeGetaCurrentThemePath() {
327  const useElements = document.querySelectorAll('use');
328  useElements.forEach((element) => {
329    const xlinkHrefValue = element.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
330    if (xlinkHrefValue && xlinkHrefValue.includes('[get_current_theme_path]')) {
331      const newHrefValue = xlinkHrefValue.replace('[get_current_theme_path]', templateUrl);
332      element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', newHrefValue);
333    }
334  });
335}
336
337// Google翻訳ウィジェットの表示を強制（display:flex !important）
338// function fixGoogleTranslateGadgetDisplay() {
339//   const apply = () => {
340//     document.querySelectorAll('div.skiptranslate.goog-te-gadget').forEach((el) => {
341//       el.classList.add('adjust');
342//       // el.style.setProperty('display', 'flex', 'important');
343//     });
344//   };
345//   apply();
346//   const observer = new MutationObserver(apply);
347//   observer.observe(document.documentElement, { childList: true, subtree: true });
348// }
349
350window.addEventListener("resize", () => {
351  const headerNav = document.querySelector(".js-header-drawerMenu");
352  if (headerNav.classList.contains("active")) {
353    // クラス名js-header-drawerMenuの要素のクラスにactiveが含まれている場合の処理
354    closeNav();
355  }
356  matchHeight();
357});
358
359window.addEventListener("scroll", () => {
360  // scrollHeader();
361  checkAnimationTrigger();
362  // parallaxEffect();
363});
364
365window.onload = function () {
366  // clickHamburger();
367  // clickHeaderDrawerMenuBg();
368  matchHeight();
369  imgSwitch();
370  makeIndex();
371  matchRelatedButtonHeight();
372  initializeSmoothScroll();
373  changeGetaCurrentThemePath();
374  // 上部にある関数定義自体がコメントアウト済みのため、この行だけが残っており
375  // 実ブラウザで ReferenceError: fixGoogleTranslateGadgetDisplay is not defined が発生していた。
376  // （この関数は翻訳ウィジェットに adjust クラスを付けて見た目を整えるもので、
377  //   定義が無効な現状では元々効いていない。機能を戻すなら定義側のコメントアウトを解除してから）
378  // fixGoogleTranslateGadgetDisplay();
379};
380
381// Get width of the Title based on the size of Title-En & Title-Jp
382window.addEventListener("load", () => {
383  document
384    .querySelectorAll('[class$="-box-title"]')
385    .forEach((titleContainer) => {
386      const titleEn = titleContainer.querySelector('[class$="-title-en"]');
387      const titleJp = titleContainer.querySelector('[class$="-title-jp"]');
388
389      if (titleEn && titleJp) {
390        const widthEn = titleEn.offsetWidth;
391        const widthJp = titleJp.offsetWidth;
392        const maxWidth = Math.max(widthEn, widthJp);
393
394        titleContainer.style.width = `${maxWidth}px`;
395      }
396    });
397});