https://wajimanavi.jp/wp-content/themes/wajima-navi-2026/assets/js/common.js?ver=1769510134

1(function() {
2  'use strict';
3
4  //
5  //  サイト共通JavaScript機能
6  //  各機能をモジュール化して管理
7  // =============================================
8
9
10  //
11  //
12  //  デバウンス関数
13  //  短時間に連続して発生するイベントを制御し、最後のイベントから一定時間経過後に1回だけ関数を実行
14  //  https://developer.mozilla.org/ja/docs/Web/API/setTimeout
15  //  https://developer.mozilla.org/ja/docs/Web/API/clearTimeout
16  // ---------------------------------------------
17  function debounce(func, delay) {
18    let timeoutId;
19    return function(...args) {
20      // https://developer.mozilla.org/ja/docs/Web/API/clearTimeout
21      clearTimeout(timeoutId);
22      // https://developer.mozilla.org/ja/docs/Web/API/setTimeout
23      timeoutId = setTimeout(() => func.apply(this, args), delay);
24    };
25  }
26
27  /**
28   * タッチイベントのパフォーマンス最適化
29   * https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
30   */
31  function touchStartOptimization() {
32    // https://developer.mozilla.org/ja/docs/Web/API/Document/addEventListener
33    document.addEventListener("touchstart", function () {}, { passive: true });
34  }
35
36  /**
37   * スクロール制御モジュール
38   * （perfect scrollbarと併用時に使用）
39   */
40  const scrollController = {
41    /**
42     * スクロール禁止関数
43     * https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault
44     */
45    preventScroll: function(event) {
46      event.preventDefault();
47    },
48
49    /**
50     * ドロワー内を除外するスクロール禁止関数
51     * https://developer.mozilla.org/ja/docs/Web/API/Element/closest
52     */
53    preventScrollExceptDrawer: function(event) {
54      // ドロワー内の要素かチェック
55      const isInsideDrawer = event.target.closest('.l-commonHeader__nav');
56
57      // ドロワー内でない場合のみスクロールを禁止
58      if (!isInsideDrawer) {
59        event.preventDefault();
60      }
61    },
62
63    /**
64     * スクロール禁止を有効化
65     * https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
66     */
67    disable: function() {
68      document.addEventListener("wheel", this.preventScroll, { passive: false });
69      document.addEventListener("touchmove", this.preventScroll, { passive: false });
70    },
71
72    /**
73     * スクロール禁止を解除
74     * https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener
75     */
76    enable: function() {
77      document.removeEventListener("wheel", this.preventScroll, { passive: false });
78      document.removeEventListener("touchmove", this.preventScroll, { passive: false });
79    }
80  };
81
82  /**
83   * ブレイクポイント管理モジュール
84   * https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia
85   */
86  const breakPointManager = {
87    /**
88     * ブレイクポイントに応じた処理の実行
89     */
90    checkBreakPoint: function() {
91      if (window.matchMedia("screen and (max-width: calc(0.0625rem * 520))").matches) {
92        // 520px以下の処理
93        this.handleMobile();
94      } else if (window.matchMedia("screen and (max-width: calc(0.0625rem * 880))").matches) {
95        // 521px〜880pxの処理
96        this.handleTablet();
97      }
98
99      if (window.matchMedia("screen and (min-width: calc(0.0625rem * 881))").matches) {
100        // 881px以上の処理
101        this.handleDesktop();
102      }
103    },
104
105    /**
106     * モバイル表示時の処理
107     */
108    handleMobile: function() {
109      // モバイル固有の処理をここに記述
110    },
111
112    /**
113     * タブレット表示時の処理
114     */
115    handleTablet: function() {
116      // タブレット固有の処理をここに記述
117    },
118
119    /**
120     * デスクトップ表示時の処理
121     */
122    handleDesktop: function() {
123      // デスクトップ固有の処理をここに記述
124    },
125
126    /**
127     * リサイズイベントの初期化（デバウンス処理付き）
128     * https://developer.mozilla.org/ja/docs/Web/API/Window/resize_event
129     */
130    initResize: function() {
131      //
132      //  breakPointManagerへ格納した関数の実行のため
133      //  thisをselfに格納、オブジェクトへの参照を固定
134      // ---------------------------------------------
135      const self = this;
136
137      // デバウンス処理を適用したリサイズハンドラー
138      const debouncedResize = debounce(function() {
139        self.checkBreakPoint();
140      }, 300);
141
142      // https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
143      window.addEventListener('resize', debouncedResize);
144    }
145  };
146
147  /**
148   * アンカーリンク処理モジュール
149   */
150  const anchorLinkHandler = {
151    /**
152     * アンカーリンクのスムーススクロール設定
153     * https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll
154     */
155    init: function() {
156      const htmlElement = document.querySelector("html");
157      const anchorLinks = document.querySelectorAll('a[href^="#"]');
158
159      anchorLinks.forEach(function(element) {
160        element.addEventListener("click", function() {
161          htmlElement.style.scrollBehavior = "smooth";
162
163          // https://developer.mozilla.org/ja/docs/Web/API/setTimeout
164          setTimeout(function() {
165            htmlElement.style.scrollBehavior = "";
166          }, 500);
167        });
168      });
169    }
170  };
171
172  /**
173   * メールアドレス変換機能モジュール（Luft方式）
174   */
175  const mailConverter = {
176    /**
177     * 文字列変換関数
178     * https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
179     * https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode
180     */
181    convert: function(encodedString) {
182      let decodedString = "";
183      let charCode = "";
184
185      for (let i = 0; i < encodedString.length; i++) {

186        charCode = encodedString.charCodeAt(i);
187        decodedString += String.fromCharCode(charCode + 1);
188      }
189
190      return decodedString;
191    }
192  };
193
194
195  //
196  //  テーブルのスクロール処理モジュール
197  // ---------------------------------------------
198  const tableScrollHandler = {
199
200    noticeTableIsScrollable: function() {
201      const table = document.querySelector('.c-expandTableInSmallScreen');
202      if (!table) return;
203
204      // 520px以下の時だけヒント要素を制御
205      if (window.matchMedia('(max-width: calc(0.0625rem * 520))').matches) {
206
207        // スクロール位置を取得
208        const scrollLeft = table.scrollLeft;
209        console.log(scrollLeft);
210
211        // スクロール状態に基づいてヒント要素を追加
212        if (scrollLeft <= 70) {
213          // まったく右にスクロールされていない場合：末尾にヒントを追加
214          table.classList.add('js-no-scrolled');
215          table.classList.remove('js-scrolled');
216        } else {
217          // 70px以上スクロールされた場合：最初にヒントを追加
218          table.classList.remove('js-no-scrolled');
219          table.classList.add('js-scrolled');
220        }
221        // 右端まで行った場合は何もしない（ヒント要素なし）
222      } else {
223        // 520pxより大きい場合は既存のヒント要素を削除
224        table.classList.remove('js-no-scrolled');
225        table.classList.remove('js-scrolled');
226      }
227    },
228
229    //
230    //  スクロールイベントの設定
231    // ---------------------------------------------
232    initScrollListener: function() {
233      const table = document.querySelector('.c-expandTableInSmallScreen');
234      if (!table) return;
235
236      // 520px以下の時だけスクロールイベントを設定
237      if (window.matchMedia('(max-width: calc(0.0625rem * 520))').matches) {
238        // デバウンスなしでリアルタイム処理
239        table.addEventListener('scroll', () => {
240          this.noticeTableIsScrollable();
241        });
242      }
243    },
244
245    //
246    //  初期化処理
247    // ---------------------------------------------
248    init: function() {
249      this.noticeTableIsScrollable();
250      this.initScrollListener();
251    }
252  };
253
254
255  //
256  //  初期化関数
257  //  ページ読み込み完了時に実行される処理
258  // ---------------------------------------------
259  function init() {
260    // タッチイベント最適化
261    touchStartOptimization();
262
263    // ブレイクポイント管理の初期化
264    breakPointManager.checkBreakPoint();
265    breakPointManager.initResize();
266
267    // アンカーリンク処理の初期化
268    anchorLinkHandler.init();
269
270    // テーブルのスクロール処理の初期化
271    tableScrollHandler.init();
272  }
273
274  // ページ読み込み完了時に初期化実行
275  // https://developer.mozilla.org/ja/docs/Web/API/Window/load_event
276  window.addEventListener('load', init);
277
278
279  // ウィンドウリサイズ時の処理
280  // https://developer.mozilla.org/ja/docs/Web/API/Window/resize_event
281  window.addEventListener('resize', function() {
282
283    // テーブルのスクロール状態を更新
284    tableScrollHandler.noticeTableIsScrollable();
285  });
286
287})();
288