https://machiko-dc.com/wp-content/themes/machiko/js/script.js?ver=7.1.2

1jQuery(document).ready(function($) {
2  $('.js-home-hamburger').on('click', function() {
3    $('.js-hamburger').trigger('click');
4  })
5});
6
7// グローバル変数を設定 start-------------------------------
8
9const templateUrl = themeUrl.templateUrl; // テーマのURLをJavaScriptに渡す
10
11// グローバル変数を設定 end-------------------------------
12
13// ヘッダーの高さを取得してIDが入っている要素にscroll-margin-topを設定 start-------------------------------
14function updateHeaderHeight() {
15  const headerInner = document.querySelector('.header-inner');
16  if (headerInner) {
17    const scrollMargin = headerInner.offsetHeight + 20;
18    const id = document.querySelectorAll('[id]');
19    // console.log(id);
20    id.forEach(element => {
21      element.style.scrollMarginTop = scrollMargin + 'px';
22    });
23  }
24}
25// ヘッダーの高さを取得してIDが入っている要素にscroll-margin-topを設定 end-------------------------------
26
27// マッチングハイト(高さを揃える) start----------------------------------------------------------------
28function matchHeight() {
29  const $elements = document.querySelectorAll("[data-mh]");
30  const groups = new Map();
31
32  $elements.forEach((el) => {
33    el.style.height = "auto";
34  });
35
36  $elements.forEach((el) => {
37    const attributeName = el.getAttribute("data-mh");
38    if (!groups.has(attributeName)) {
39      groups.set(attributeName, []);
40    }
41    groups.get(attributeName).push(el);
42  });
43
44  groups.forEach((group) => {
45    const attributeGroups = new Map();
46
47    group.forEach((el) => {
48      const attributeName = el.getAttribute("data-mh");
49      const topPosition = el.getBoundingClientRect().top;
50      const key = attributeName + "_" + topPosition;
51      if (!attributeGroups.has(key)) {
52        attributeGroups.set(key, []);
53      }
54      attributeGroups.get(key).push(el);
55    });
56    attributeGroups.forEach((item) => {
57      const maxHeight = Math.max(...item.map((el) => el.offsetHeight));
58      item.forEach((el2) => {
59        el2.style.height = `${maxHeight}px`;
60      });
61    });
62  });
63}
64// マッチングハイト(高さを揃える) end----------------------------------------------------------------
65
66// ハンバーガーメニューが開いているときはページのスクロールができないようにする start----------------------------------------------------------------
67let currentScroll = 0;
68function bodyFixed() {
69  // console.log('bodyFixed fired!');
70  const body = document.querySelector("body");
71  const headerNav = document.querySelector(".js-header-drawerMenu");
72  if (headerNav.classList.contains("active")) {
73    currentScroll = window.scrollY;
74    body.style.top = - currentScroll + "px";
75    body.classList.add("fixed");
76  } else {
77    body.classList.remove("fixed");
78    document.documentElement.style.scrollBehavior = "auto";
79    window.scrollTo(0, currentScroll);
80    document.documentElement.style.scrollBehavior = "smooth";
81  }
82}
83// ハンバーガーメニューが開いているときはページのスクロールができないようにする end----------------------------------------------------------------
84
85// ヘッダーボタンの初期化 start----------------------------
86function initializeDrawerMenuButton() {
87  const drawerMenu = document.querySelector('.js-header-drawerMenu');
88  const drawerMenuButton = drawerMenu.querySelectorAll('a[href*="#"]');
89  // console.log(drawerMenuButton);
90  drawerMenuButton.forEach(element => {
91    element.addEventListener('click', function(e) {
92      closeNav();
93    });
94  });
95}
96// ヘッダーボタンの初期化 end----------------------------
97
98// ハンバーガーボタンでのナビの開閉 start----------------------------
99function clickHamburger() {
100  const hamburger = document.querySelector(".js-hamburger");
101  const headerNav = document.querySelector(".js-header-drawerMenu");
102  const header = document.querySelector(".js-header");
103  const navMenu = document.querySelector(".header-nav");
104  
105  hamburger.addEventListener("click", () => { 
106    header.classList.toggle("active");
107    hamburger.classList.toggle("active");
108    navMenu.classList.toggle("none");
109    headerNav.classList.toggle("active");
110    bodyFixed();
111  });
112}
113// ハンバーガーボタンでのナビの開閉 end----------------------------
114
115// ナビ外をクリックしたときのナビを閉じる start--------------------------------
116function clickHeaderDrawerMenuBg() {

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

267      indexElements.forEach((element, i) => {
268        const listItem = document.createElement('li');
269        listItem.classList.add('com-index-list-item');
270        const link = document.createElement('a');
271        link.classList.add('com-index-list-item-link');
272        link.href = `#index-${i}`;
273        link.textContent = element.textContent;
274        const newIndexTitleArrow = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
275        newIndexTitleArrow.classList.add('com-index-list-item-link-icon');
276        const newIndexTitleArrowUse = document.createElementNS('http://www.w3.org/2000/svg', 'use');
277        const iconIndex = templateUrl + '/assets/img/icon_arrow_02.svg#icon';
278        newIndexTitleArrowUse.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', iconIndex);
279        newIndexTitleArrow.appendChild(newIndexTitleArrowUse);
280        link.appendChild(newIndexTitleArrow);
281        listItem.appendChild(link);
282        newIndexList.appendChild(listItem);
283
284        // 各要素にIDを付与
285        element.id = `index-${i}`;
286      });
287    }
288  }
289}
290// 目次を生成する関数 end----------------------------
291
292// .page-template-related-pages-listのボタン高さを揃える start----------------------------
293function matchRelatedButtonHeight() {
294  const relatedPagesList = document.querySelector('.page-template-related-pages-list');
295  if (relatedPagesList) {
296    const buttons = relatedPagesList.querySelectorAll('.com-btn03');
297    const maxHeight = Math.max(...Array.from(buttons).map(button => button.offsetHeight));  
298    buttons.forEach(button => {
299      button.style.height = `${maxHeight}px`;
300    });
301  }
302}
303// .page-template-related-pages-listのボタン高さを揃える end----------------------------
304
305// 変換できなかった[get_current_theme_path]を置き換える start----------------------------
306function changeGetCurrentThemePath() {
307  const useElements = document.querySelectorAll('use');
308  useElements.forEach((element) => {
309    const xlinkHrefValue = element.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
310    if (xlinkHrefValue && xlinkHrefValue.includes('[get_current_theme_path]')) {
311      const newHrefValue = xlinkHrefValue.replace('[get_current_theme_path]', templateUrl);
312      element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', newHrefValue);
313    }
314  });
315}
316
317
318// Get width of the Title based on the size of Title-En & Title-Jp
319window.addEventListener("load", () => {
320  document
321    .querySelectorAll('[class$="-box-title"]')
322    .forEach((titleContainer) => {
323      const titleEn = titleContainer.querySelector('[class$="-title-en"]');
324      const titleJp = titleContainer.querySelector('[class$="-title-jp"]');
325
326      if (titleEn && titleJp) {
327        const widthEn = titleEn.offsetWidth;
328        const widthJp = titleJp.offsetWidth;
329        const maxWidth = Math.max(widthEn, widthJp);
330
331        titleContainer.style.width = `${maxWidth}px`;
332      }
333    });
334});
335
336// 画面幅が変わったときに動作する関数 start --------------------------------------
337window.addEventListener("resize", () => {
338  matchHeight();
339  scrollHeader();
340  updateHeaderHeight();
341});
342// 画面幅が変わったときに動作する関数 end --------------------------------------
343
344// スクロールしたときに動作する関数 start --------------------------------------
345window.addEventListener("scroll", () => {
346  scrollHeader();
347  checkAnimationTrigger();
348  // parallaxEffect();
349});
350// スクロールしたときに動作する関数 end --------------------------------------
351
352// ページを(構成だけ)読み込み完了時に動作する関数 start --------------------------------------
353window.addEventListener("DOMContentLoaded", () => {
354  // console.log('DOMContentLoaded fired!');
355  clickHamburger();
356  clickHeaderDrawerMenuBg();
357  makeIndex();
358  scrollHeader();
359  updateHeaderHeight();
360  initializeDrawerMenuButton();
361})
362// ページを(構成だけ)読み込み完了時に動作する関数 end --------------------------------------
363
364// ページを画像まで読み込み完了時に動作する関数 start --------------------------------------
365window.onload = function () {
366  // console.log('window.onload fired!');
367  matchHeight();
368  imgSwitch();
369  matchRelatedButtonHeight();
370  changeGetCurrentThemePath();
371
372  // 共通アニメーション発動
373  const elements = document.querySelectorAll('.anim-fadeIn-1, .anim-fadeIn-2, .anim-fadeIn-3, .anim-fadeIn-4, .anim-fadeIn-5, .anim-fadeIn-6, .anim-slideIn-l-1, .anim-slideIn-l-2, .anim-slideIn-l-3, .anim-slideIn-l-4, .anim-slideIn-l-5, .anim-slideIn-l-6, .anim-slideIn-r-1, .anim-slideIn-r-2, .anim-slideIn-r-3, .anim-slideIn-r-4, .anim-slideIn-r-5, .anim-slideIn-r-6, .anim-slideIn-t-1, .anim-slideIn-t-2, .anim-slideIn-t-3, .anim-slideIn-t-4, .anim-slideIn-t-5, .anim-slideIn-t-6, .anim-slideIn-b-1, .anim-slideIn-b-2, .anim-slideIn-b-3, .anim-slideIn-b-4, .anim-slideIn-b-5, .anim-slideIn-b-6, .anim-scaleIn-1, .anim-scaleIn-2, .anim-scaleIn-3, .anim-scaleIn-4, .anim-scaleIn-5, .anim-scaleIn-6');
374
375  const observer = new IntersectionObserver((entries) => {

376    entries.forEach(entry => {
377      if (entry.isIntersecting) {
378        entry.target.classList.add('in-view');   // 表示領域に入ったとき
379      } else {
380        entry.target.classList.remove('in-view'); // 表示領域から出たとき
381      }
382    });
383  }, {
384    root: null,
385    rootMargin: '0px',
386    threshold: 0.1
387  });
388
389  elements.forEach(el => observer.observe(el));
390};
391// ページを画像まで読み込み完了時に動作する関数 end --------------------------------------