https://austinstevens.net/wp-content/themes/cocoon-master/skins/sk…?ver=7.1.2&fver=20241223071150

1// スキングレイッシュ独自機能
2// ---------------------------------------------
3// スマートフォンなどのタッチデバイスで:hoverが微妙な見た目になることの対策
4// 参考:https://www.webdesignleaves.com/pr/plugins/ontouchstart-event-handler.html
5// ---------------------------------------------
6// 空の ontouchstart 属性を body 要素に設定
7document.getElementsByTagName('body')[0].setAttribute('ontouchstart', '');
8
9// ---------------------------------------------
10// navi sub-menu の表示OFF
11// Front,Archives,Other
12// .skin-grayish .navi-in>ul>li>.sub-menu
13// ---------------------------------------------
14
15// PC navi
16const PCNaviIn = document.querySelector(".skin-grayish #navi-in");
17
18// submenuがあるかどうか
19const PCsubmenu = document.querySelectorAll(".skin-grayish .navi-in>ul>li:not(.header-snsicon-submenu)>.sub-menu");
20const numberOfElements = PCsubmenu.length;
21const submenuArray = Array.from(PCsubmenu);
22
23// submenu Scrolltype
24const AllPageSubmenuScrolltype = (ActiveElement) => {
25  const headerElement = ActiveElement;
26  const scrollPosition = window.scrollY;
27  const scrollThreshold = 300;
28
29  if (scrollPosition > scrollThreshold) {
30    headerElement.setAttribute(
31      "data-active", "ture"
32    );
33
34  } else {
35    headerElement.setAttribute(
36      "data-active", "false"
37    );
38  }
39};
40
41
42// submenuが画面右端からはみ出る場合の処理
43const PCsubmenuRightCare = (event) => {
44  const windowWidth = window.innerWidth;
45
46  submenuArray.forEach((submenuItem, index) => {
47    const itemRect = submenuItem.getBoundingClientRect();
48    const itemAnchorElement = submenuItem.querySelector('li > a');
49    if (itemAnchorElement) {
50      const itemComputedStyle = window.getComputedStyle(itemAnchorElement);
51      const itemPaddingLeft = parseFloat(itemComputedStyle.paddingLeft);
52      const itemPaddingRight = parseFloat(itemComputedStyle.paddingRight);
53
54      const itemRectRight = itemRect.right + (itemPaddingRight * 4);
55      const itemWidthTwice = (itemRect.width * 1.2) + itemPaddingLeft + itemPaddingRight;
56
57      if (itemRectRight > windowWidth) {
58        submenuItem.style.left = 'auto';
59      } else {
60        if ((windowWidth - itemRectRight) > itemWidthTwice) {
61          submenuItem.style.left = '';
62        }
63      }
64    }
65  });
66}
67
68let PCsubmenuRightCare_waitTimer;
69const ResizePCsubmenuRightCare = (event) => {
70  clearTimeout(PCsubmenuRightCare_waitTimer);
71  PCsubmenuRightCare_waitTimer = setTimeout(function () {
72    PCsubmenuRightCare(event);
73  }, 100);
74
75}
76const loadPCsubmenuRightCare = (event) => {
77  PCsubmenuRightCare(event);
78};
79
80const SubmenuScrolltype = () => {
81  AllPageSubmenuScrolltype(PCNaviIn);
82};
83
84// ---------------------------------------------
85// 画面幅1023px以下ではIntersectionObserver監視しないようにする
86// ---------------------------------------------
87
88const mediaQueryList1023 = window.matchMedia('(max-width: 1023px)');
89function headerSubmenuOffChange(e) {
90  if (e.matches) {
91    window.removeEventListener('load', loadPCsubmenuRightCare);
92    window.removeEventListener('resize', ResizePCsubmenuRightCare);
93    window.removeEventListener('scroll', SubmenuScrolltype);
94
95  } else {
96    window.addEventListener('load', loadPCsubmenuRightCare);
97    window.addEventListener('resize', ResizePCsubmenuRightCare);
98    window.addEventListener('scroll', SubmenuScrolltype);
99
100    loadPCsubmenuRightCare();
101    SubmenuScrolltype();
102
103  }
104  mediaQueryList1023.addEventListener("change", headerSubmenuOffChange);
105}
106if (numberOfElements > 0) {
107  headerSubmenuOffChange(mediaQueryList1023);
108}
109
110// ---------------------------------------------
111// 投稿or固定ページのSNSシェアボタン
112// 指定セクション(main)で表示
113// ---------------------------------------------
114let Ftobserver;
115let flagObserver;
116
117const scrolDispOff_snsshare = (dispOffSection, targetItem) => {
118
119  const targetOffItem = targetItem;
120  const targetSection = dispOffSection;
121
122  if (!targetOffItem || !targetSection) return;
123
124  const doWhenIntersect = (entries, obs) => {
125    if (flagObserver === 'false') {
126      obs.unobserve(entries[0].target);
127    } else {
128      if (entries[0].isIntersecting) {
129        activateTargetOn();
130      } else {
131        activateTargetOff();
132      }
133    }
134  };
135
136  const options = {
137    root: null,
138    // rootMargin: "0%",
139    rootMargin: "-50% 0px", // ビューポートの中心を判定基準にする
140    threshold: 0
141  };
142
143  Ftobserver = new IntersectionObserver(doWhenIntersect, options);
144

145  Ftobserver.observe(targetSection);
146
147  const activateTargetOff = () => {
148    if (targetOffItem.dataset.scroldisp === 'on') {
149      targetOffItem.dataset.scroldisp = 'off';
150    }
151  };
152  const activateTargetOn = () => {
153    if (targetOffItem.dataset.scroldisp === 'off') {
154      targetOffItem.dataset.scroldisp = 'on';
155    }
156  };
157
158};
159const footerOffItem = document.querySelector('.skin-grayish .article-header .sns-share');
160// const scrolOffSection = document.getElementById('footer');
161const scrolOffSection = document.getElementById('main');
162
163// ---------------------------------------------
164// 画面幅1400px以下ではIntersectionObserver監視しないようにする
165// ---------------------------------------------
166
167const mediaQueryList1400 = window.matchMedia('(max-width: 1400px)');
168function footerOffChange(e) {
169  if (e.matches) {
170    footerOffItem.setAttribute('data-scroldisp', 'on');
171    flagObserver = 'false';
172
173  } else {
174    footerOffItem.setAttribute('data-scroldisp', 'off');
175    flagObserver = 'true';
176    scrolDispOff_snsshare(scrolOffSection, footerOffItem);
177  }
178  mediaQueryList1400.addEventListener("change", footerOffChange);
179}
180if (footerOffItem) {
181  footerOffChange(mediaQueryList1400);
182}
183
184// ---------------------------------------------
185// breadcrumb 画面幅834px　〜　1400px以下
186// ---------------------------------------------
187const mediaQueryList834to1400 = window.matchMedia('(min-width: 835px) and (max-width: 1400px)');
188
189const breadcrumb = document.querySelector('.skin-grayish .breadcrumb');
190const mainContents = document.querySelector('.skin-grayish .content .main');
191let mainContentsRect;
192let timer_breadcrumb;
193
194const breadcrumbLeftSet = () => {
195  if (!breadcrumb) return;
196  mainContentsRect = mainContents.getBoundingClientRect();
197  mainContentsRect_x = Math.round(mainContentsRect.left);
198  // for iPhone
199  let safeLeft = getComputedStyle(document.documentElement).getPropertyValue('--safeareainsetleft');
200  let safeLeftValue = safeLeft.split('px');
201
202  mainContentsRect_x_after = mainContentsRect_x - safeLeftValue[0];
203  breadcrumb.style.paddingLeft = mainContentsRect_x_after + 28 + 'px';
204
205};
206
207const breadcrumb_waitTime = 500;//for FireFox
208
209const breadcrumbLeftReset = () => {
210  if (!breadcrumb) return;
211  breadcrumb.style.paddingLeft = '';
212};
213
214function breadcrumbLeftOn(e) {
215  if (e.matches) {
216    breadcrumbLeftSet();
217    window.addEventListener('load', breadcrumbLeftSet);
218    window.addEventListener('resize', breadcrumbLeftSet);
219
220  } else {
221    window.removeEventListener('load', breadcrumbLeftSet);
222    window.removeEventListener('resize', breadcrumbLeftSet);
223
224    setTimeout(breadcrumbLeftReset, breadcrumb_waitTime);
225
226    // breadcrumbLeftReset();
227  }
228  mediaQueryList834to1400.addEventListener("change", breadcrumbLeftOn);
229}
230
231if (breadcrumb) {
232  breadcrumbLeftOn(mediaQueryList834to1400);
233}
234
235// ---------------------------------------------
236// フロントページタイプ：カテゴリーごと
237// 表示カテゴリーが設定されていない場合疑似要素を非表示にする
238// ---------------------------------------------
239const listColumns_Category = document.querySelector('.skin-grayish .front-page-type-category .list-columns');
240const listColumns_Category2col = document.querySelector('.skin-grayish .front-page-type-category-2-columns .list-columns');
241const listColumns_Category3col = document.querySelector('.skin-grayish .front-page-type-category-3-columns .list-columns');
242
243const listColumns_Selectors = [
244  '.skin-grayish .front-page-type-category .list-columns',
245  '.skin-grayish .front-page-type-category-2-columns .list-columns',
246  '.skin-grayish .front-page-type-category-3-columns .list-columns'
247];
248const listColumns_CategoryType_childChk = () => {
249  listColumns_Selectors.forEach((childChk_target) => {
250    const listColumns_Category_target = document.querySelector(childChk_target);
251
252    if (listColumns_Category_target) {
253      const numberlistColumns_child = listColumns_Category_target.childElementCount;
254
255      if (numberlistColumns_child < 1) {
256        document.documentElement.style.setProperty('--listColumns_Category_displayOn', `none`);
257        document.documentElement.style.setProperty('--listColumns_Category_23cols', `0rem`);
258      } else {
259        document.documentElement.style.setProperty('--listColumns_Category_displayOn', `block`);
260        document.documentElement.style.setProperty('--listColumns_Category_23cols', `5rem`);
261      }
262    }
263  });
264};
265if (listColumns_Category || listColumns_Category2col || listColumns_Category3col) {
266  listColumns_CategoryType_childChk();
267}
268
269
270// ---------------------------------------------
271// Front以外のページについて（PC時）
272// グローバルメニューの折り返し時にメニューの高さを変更する
273// ---------------------------------------------
274const PCotherHeader = document.querySelector(".skin-grayish:not(.front-top-page) #header-in");
275
276const PCotherNaviIn = document.querySelector(".skin-grayish:not(.front-top-page) .navi-in .menu-top.menu-header.menu-pc");
277
278const PCotherNaviInList = document.querySelectorAll(".skin-grayish:not(.front-top-page) .navi-in>ul>li");
279
280const otherPageHeaderWrap = () => {
281  if (!PCotherNaviIn || !PCotherHeader) return;
282
283  const PCotherHeader_Height = PCotherHeader.clientHeight;
284  const PCotherNaviIn_Height = PCotherNaviIn.clientHeight;
285  // console.log("PCotherHeader_Height: " + PCotherHeader_Height);
286  // console.log("PCotherNaviIn_Height: " + PCotherNaviIn_Height);
287

288  if (PCotherNaviIn_Height > PCotherHeader_Height) {
289    // Naviの方がHeaderより高いとき : flex wrapしたとき
290    PCotherNaviInList.forEach((item) => {
291      item.style.height = 'auto';
292    });
293  } else {
294    PCotherNaviInList.forEach((item) => {
295      item.style.height = '100%';
296    });
297  }
298};
299const otherNavi_HeightResize = (flag) => {
300  if (flag === 'true') {
301    window.addEventListener('load', otherPageHeaderWrap);
302    window.addEventListener('resize', otherPageHeaderWrap);
303    otherPageHeaderWrap();
304  } else {
305    // 指定サイズ以下ではイベント削除
306    window.removeEventListener('load', otherPageHeaderWrap);
307    window.removeEventListener('resize', otherPageHeaderWrap);
308  }
309};
310
311function otherNaviIn_Ctrl(e) {
312  if (e.matches) {
313    otherNavi_HeightResize('false');
314
315  } else {
316    otherNavi_HeightResize('true');
317
318  }
319  mediaQueryList1023.addEventListener("change", otherNaviIn_Ctrl);
320
321}
322
323if (PCotherHeader && PCotherNaviIn) {
324  otherNaviIn_Ctrl(mediaQueryList1023);
325}
326
327// ---------------------------------------------
328// 検索フォーム（PC時）
329// ---------------------------------------------
330
331const menuContent = document.querySelector(".header-container .navi .js-searchMenuDialog-content");
332const menuOpen = document.querySelector(".header-container .navi .js-searchMenuDialog-open");
333const menuClose = document.querySelector(".header-container .navi .js-searchMenuDialog-close");
334const menuCloseBack = document.querySelector(".header-container .navi .js-searchMenuDialog-back");
335const menuContentSearch = document.getElementById("gnavi-search-menu-content");
336
337//
338if (menuOpen) {
339  menuOpen.addEventListener("click", async () => {
340    menuContent.removeAttribute("style");
341    menuContent.showModal();
342
343  });
344}
345const closeMenu = () => {
346  menuContent.close();
347};
348if (menuClose) {
349  menuClose.addEventListener("click", closeMenu);
350}
351if (menuCloseBack) {
352  menuCloseBack.addEventListener("click", closeMenu);
353}
354if (menuContent) {
355  menuContent.addEventListener("close", async (e) => {
356    await waitDialogAnimation(e.target)
357    menuContent.style.display = "none";
358  })
359}
360
361const waitDialogAnimation = (dialog) => Promise.allSettled(
362  Array.from(dialog.getAnimations()).map(animation => animation.finished)
363);
364if (menuContentSearch) {
365  menuContentSearch.addEventListener('click', (event) => {
366    event.stopPropagation();
367  });
368}
369
370mediaQueryList1023.addEventListener('change', (e) => {
371  if (e.matches) {
372    // 画面幅が1023px以下になったときにmenuContentを閉じる
373    if (menuContent) {
374      menuContent.close();
375    }
376  }
377});
378
379