https://zuiun.jp/cms-v2/wp-content/themes/zuiun-architecture/assets/js/common.js?ver=1722421220

1//Touchstartイベントのパフォーマンスケア
2document.addEventListener("touchstart", function () {}, { passive: true });
3
4//
5//  スクロール動作の禁止
6//  （perfect scrollbarと併用ではこの設定でOK）
7// =============================================
8// スクロール禁止
9function remove_scroll() {
10  document.addEventListener("wheel", notscroll, { passive: false });
11  document.addEventListener("touchmove", notscroll, { passive: false });
12}
13// スクロール禁止解除
14function activate_scroll() {
15  document.removeEventListener("wheel", notscroll, { passive: false });
16  document.removeEventListener("touchmove", notscroll, { passive: false });
17}
18// スクロール禁止関数
19function notscroll(e) {
20  e.preventDefault();
21}
22
23//
24//  ブレイクポイントのある処理
25// =============================================
26function checkBreakPoint() {
27  if (window.matchMedia("screen and (max-width: 520px)").matches) {
28    //  520px以下
29  } else if (window.matchMedia("screen and (max-width: 880px)").matches) {
30    //  間が存在する場合挿入
31  }
32  if (window.matchMedia("screen and (min-width: 881px)").matches) {
33    //  一定以上の処理
34  }
35}
36//
37//  リサイズ時の実行
38// ---------------------------------------------
39window.addEventListener('resize',function(){
40  checkBreakPoint();
41});
42// ====================================================================
43
44window.addEventListener('load',function(){
45
46  //
47  //  checkBreakPointを採用した場合実行
48  // ---------------------------------------------
49  checkBreakPoint();
50
51  //
52  //  #で始まるアンカーをクリックした場合に処理
53  // =============================================
54  anchorLink: {
55
56    //  htmlに一時的に scroll-behavior を設定
57    // ---------------------------------------------
58    const htmlElem = this.document.querySelector("html");
59    const anchorLinks = this.document.querySelectorAll('a[href^="#"]');
60
61    anchorLinks.forEach(function (elem, index) {
62      elem.addEventListener("click", function () {
63        htmlElem.style.scrollBehavior = "smooth";
64
65        setTimeout(function () {
66          htmlElem.style.scrollBehavior = "";
67        }, 500);
68      });
69    });
70    // ---------------------------------------------
71  } //anchorLink
72
73
74  //
75  //  メニューの開閉動作
76  // =============================================
77
78  const rootElem = this.document.querySelector('html');
79
80  //
81  //  ヘッダーの中にフォーカスした時にビジュアルより手前に移動する
82  // ---------------------------------------------
83  const commonHeader = this.document.querySelector('.l-commonHeader');
84  const clickableElemsInCommonHeader = commonHeader.querySelectorAll('a, button');
85  const frontPageKV = this.document.querySelector('.pg-kvArea');
86  if(frontPageKV){
87    document.addEventListener("keydown", (e) => {
88      if( e.key === 'Tab' ){
89        clickableElemsInCommonHeader.forEach((elem)=>{
90          elem.addEventListener('focus', ()=>{
91            commonHeader.style.zIndex = 14900;
92          });
93        });
94      }
95    });
96  }
97
98  //
99  //  ヘッダー内の全ページメニュー
100  // ---------------------------------------------
101  const headerAllPagesArea = this.document.querySelector('.l-commonHeader__allPagesArea');
102  const headerAllPagesOpener = this.document.querySelectorAll('.c-menuOpenBtn');
103  const headerAllPagesOpenerInHeader = this.document.querySelector('.l-commonHeader .c-menuOpenBtn');
104  const headerAllPagesCloser = this.document.querySelector('.l-commonHeader__allPagesCloser');
105
106  if( headerAllPagesArea ){
107    const headerLinks = headerAllPagesArea.querySelectorAll('a');
108
109    // メニューを開く
110    headerAllPagesOpener.forEach( (opener)=>{
111      opener.addEventListener('click', ()=> {
112        rootElem.classList.add('js-menuOpen');
113      });
114    });
115    // メニューを閉じる
116    headerAllPagesCloser.addEventListener('click', ()=> {
117      rootElem.classList.remove('js-menuOpen');
118      if(headerAllPagesOpenerInHeader){

119        headerAllPagesOpenerInHeader.focus();
120      }
121    });
122
123    // 画面上でキーを押した際
124    document.addEventListener("keydown", (e) => {
125
126      //ESCキーでメニューを閉じる
127      if (e.key === "Escape") {
128
129        // メインメニュー
130        if( rootElem.classList.contains('js-menuOpen') ) {
131          rootElem.classList.remove('js-menuOpen');
132          headerAllPagesOpenerInHeader.focus();
133
134          headerLinks.forEach( (a) => {
135            a.setAttribute("tabindex", "-1");
136          });
137        }
138
139        // サブメニューを閉じる
140        document.querySelectorAll(".l-commonHeaderPages__hasSubMenuItem.js-visible").forEach((li) => {
141          li.classList.remove("js-visible");
142
143          let subMenu = li.querySelector(".l-commonHeaderPages__subMenu");
144          if (subMenu) {
145            subMenu.querySelectorAll("a").forEach((a) => {
146              a.setAttribute("tabindex", "-1");
147            });
148          }
149        });
150      }
151
152      //  Tab操作対応
153      if( e.key === 'Tab' ){
154
155        if( rootElem.classList.contains('js-menuOpen') ) {
156          e.preventDefault();
157
158          let clickableElems = headerAllPagesArea.querySelectorAll('a, .l-commonHeader__allPagesCloser');
159
160          //フォーカス可能な要素を配列に
161          const focusableElems = Array.from(
162            clickableElems
163          );
164          //console.log(clickableElems);
165
166          //フォーカス位置
167          const focusedItemIndex = focusableElems.indexOf(document.activeElement);
168          //console.log(focusedItemIndex);
169
170          if( e.shiftKey ){
171            //Shiftを押している場合
172            if( focusedItemIndex === 0 ){
173              //現在のフォーカスが最初の時:
174              focusableElems[focusableElems.length - 1].focus();
175            } else {
176              //最初じゃない:
177              focusableElems[focusedItemIndex - 1].focus();
178            }
179          } else {
180            //Shiftを押していない
181            if (focusedItemIndex === focusableElems.length - 1) {
182              //今最後の要素にフォーカスしている時は最初に戻る
183              focusableElems[0].focus();
184            } else {
185              //でなければ次へ
186              focusableElems[focusedItemIndex + 1].focus();
187            }
188          }
189        } //メニューが開いているときだけ
190
191      }
192    });
193  } //ヘッダーメニューの存在確認
194
195
196  //
197  //  ヘッダーサブメニュー
198  // ---------------------------------------------
199  const headerPagesItemHasSubMenu = document.querySelectorAll(".l-commonHeaderPages__hasSubMenuItem");
200  if( headerPagesItemHasSubMenu[0] ){
201    headerPagesItemHasSubMenu.forEach((li) => {
202      li.addEventListener("mouseenter", () => {
203        // すべてのliから.js-visibleを削除し、tabindexを-1に設定
204        document.querySelectorAll(".l-commonHeaderPages__hasSubMenuItem").forEach((sibling) => {
205          sibling.classList.remove("js-visible");
206          let subMenu = sibling.querySelector(".l-commonHeaderPages__subMenu");
207          if (subMenu) {
208            subMenu.querySelectorAll("a").forEach((a) => {
209              a.setAttribute("tabindex", "-1");
210            });
211          }
212        });
213
214        // 現在のliに.js-visibleを付与し、tabindexを0に設定
215        li.classList.add("js-visible");
216        let subMenu = li.querySelector(".l-commonHeaderPages__subMenu");
217        if (subMenu) {
218          subMenu.querySelectorAll("a").forEach((a) => {
219            a.setAttribute("tabindex", "0");
220          });
221        }
222      });
223
224      li.addEventListener("mouseleave", () => {
225        document.querySelectorAll(".l-commonHeaderPages__hasSubMenuItem.js-visible").forEach((li) => {
226          li.classList.remove("js-visible");
227          let subMenu = li.querySelector(".l-commonHeaderPages__subMenu");
228          if (subMenu) {
229            subMenu.querySelectorAll("a").forEach((a) => {
230              a.setAttribute("tabindex", "-1");
231            });
232          }
233        });
234      });
235
236      // キー連動動作
237      li.addEventListener("keydown", (e) => {
238        if (e.key === "Enter") {
239          let subMenu = li.querySelector(".l-commonHeaderPages__subMenu");
240          if (subMenu) {
241
242            let isVisible = li.classList.contains("js-visible");
243
244            // すべてのliから.js-visibleを削除し、tabindexを-1に設定
245            document.querySelectorAll(".l-commonHeaderPages__hasSubMenuItem").forEach((sibling) => {
246              sibling.classList.remove("js-visible");
247              let subMenu = sibling.querySelector(".l-commonHeaderPages__subMenu");
248              if (subMenu) {
249                subMenu.querySelectorAll("a").forEach((a) => {
250                  a.setAttribute("tabindex", "-1");
251                });
252              }
253            });
254
255            // 現在のliのjs-visibleをトグルし、tabindexを設定
256            li.classList.toggle("js-visible", !isVisible);
257            subMenu.querySelectorAll("a").forEach((a) => {
258              a.setAttribute("tabindex", isVisible ? "-1" : "0");
259            });
260          }
261        } //Enter key end
262      });
263    });
264  }// サブメニューの存在確認
265
266});