https://shirokanedai-st-dc.com/js/common.js

1/** 公開パス（ルート直下: '/', サブディレクトリ: '/dental/' など） */
2const SITE_BASE = '/';
3
4/** 先頭スラッシュのパスに SITE_BASE を前置 */
5const prefixRoot = (val) => {
6  if (!val) return val;
7  if (/^(https?:)?\/\//i.test(val) || val.startsWith('#') || val.startsWith('tel:') ||
8      val.startsWith('mailto:') || val.startsWith('data:')) return val;
9  if (val.startsWith('/')) return SITE_BASE.replace(/\/+$/,'/') + val.replace(/^\/+/, '');
10  return val;
11};
12
13/** include要素1個を読み込んで置換 */
14async function mountInclude(host) {
15  const includePath = host?.dataset.include;
16  if (!includePath) return;
17
18  const includeURL = new URL(includePath, location.href);
19  const res = await fetch(includeURL, { credentials: 'same-origin' });
20  if (!res.ok) { host.textContent = 'Load failed.'; return; }
21
22  const html = await res.text();
23  const tpl = document.createElement('template');
24  tpl.innerHTML = html;
25
26  // data-href → href
27  tpl.content.querySelectorAll('[data-href]').forEach(a => {
28    const v = a.getAttribute('data-href');
29    a.setAttribute('href', prefixRoot(v));
30    a.removeAttribute('data-href');
31  });
32  // src の補正
33  tpl.content.querySelectorAll('[src]').forEach(el => {
34    const v = el.getAttribute('src');
35    const nv = prefixRoot(v);
36    if (nv !== v) el.setAttribute('src', nv);
37  });
38
39  // ヘッダーの h1 差し替え（data-title があれば）
40  const pageTitle = host.dataset.title;
41  if (pageTitle) {
42    const h1 = tpl.content.querySelector('[data-header-title]');
43    if (h1) h1.textContent = pageTitle;
44  }
45
46  // 年号置換（footer）
47  const y = tpl.content.querySelector('[data-year]');
48  if (y) y.textContent = new Date().getFullYear();
49
50  // DOM置換
51  const mounted = tpl.content;
52  host.replaceWith(mounted);
53
54  // マウント通知（必要なら他の初期化でフック可能）
55  document.dispatchEvent(new CustomEvent('fragment:mounted', {
56    detail: { url: includeURL.pathname }
57  }));
58}
59
60/** ページ内のすべての [data-include] をマウント */
61(async () => {
62  const hosts = Array.from(document.querySelectorAll('[data-include]'));
63  for (const host of hosts) {
64    await mountInclude(host);
65  }
66  // 挿入後、状態計算が必要な処理を同期
67  // 例：スクロールヘッダー等（jQuery使用時は下記トリガでもOK）
68  if (typeof $ !== 'undefined' && $.fn && $(window).trigger) {
69    $(window).trigger('resize').trigger('scroll');
70  }
71})();
72
73//
74
75$(document).ready(function(){
76    $(window).bind(('load'),function(){
77        //Gnavi
78        //console.log('load ok');
79        $('.over').click(function(){
80            var sub =  $(this).find('.submenu');
81            
82            if (sub.hasClass('act')) {
83                        sub.removeClass('act');
84                    } else {
85                        sub.addClass('act');
86            }
87        });
88        //Under
89                
90        // $('.over').hover(function(){
91        //     $(this).find('.submenu').stop().slideUp();
92        // });
93
94            // $('.over').hover(function () {
95            //     if ($(this).hasClass('flag')) {
96            //         return false;
97            //     } else {
98            //         $(this).find('.submenu').stop().slideToggle();
99            //     }
100            // });
101            // $('.over').click(function () {
102            //     if($(this).hasClass('flag')){
103            //         if($(this).hasClass('active')){
104            //             $(this).removeClass('active');
105            //             $('.submenu').stop().fadeOut();
106            //         } else {
107            //             $('.over').removeClass('active');
108            //             $('.submenu').stop().fadeOut();
109            //             $(this).addClass('active');
110            //             $(this).find('.submenu').stop().fadeToggle();
111            //         }
112            //     }
113            // });
114    });  
115});
116
117$(function () {
118    "use strict";
119    var obj = {
120        init: function () {
121            this.smoothScroll();
122            this.toTop();
123            this.Gnavi();
124        },
125
126        smoothScroll: function () {
127            //Anchor link
128            $(window).bind('load',function(){
129                $('a[href^="#"]').click(function () {
130                    if ($($(this).attr('href')).length) {
131                        var p = $($(this).attr('href')).offset();
132                        if ($(window).width() > 640) {
133                            $('html,body').animate({
134                                scrollTop: p.top - 150
135                            }, 600);
136                        } else {
137                            $('html,body').animate({
138                                scrollTop: p.top - 85
139                            }, 600);
140                        }
141                    }
142                    return false;

143                });
144
145                //Anchor scroll
146                var hash1 = location.hash;
147                var $root = $('html, body');
148                if (hash1 !== "") {
149                    var top01 = $(hash1).offset().top;
150                    if ($(window).width() > 640) {
151                        $root.animate({scrollTop: top01 - 150}, 600);
152                    } else {
153                        $root.animate({scrollTop: top01 - 85}, 600);
154                    }
155                }
156            });
157            //End anchor link
158        },
159
160        toTop: function () {
161            //toTop
162            $("#totop").hide();
163            $(window).scroll(function () {
164                if ($(this).scrollTop() > 100) {
165                    $('#totop').fadeIn();
166                } else {
167                    $('#totop').fadeOut();
168                }
169            });
170            //End toTop
171        },
172
173        // Gnavi: function () {
174            
175
176        //     //Menu icon
177        //     $('.menu-icon').click(function () {
178        //         if ($(this).hasClass('active')) {
179        //             $('.over,#gnavi,.submenu,.menu-icon').removeClass('active');
180        //         } else {
181        //             $(this).toggleClass('active');
182        //             $('#gnavi').addClass('active');
183        //         }
184        //     });
185        //     $('.close-menu').click(function () {
186        //         $('#gnavi,.over,.submenu,.menu-icon').removeClass('active');
187        //     });
188
189        //     //End Gnavi
190
191        //     //Scrolled header
192        //     $(window).bind("load resize scroll",function () {
193        //         var h = $('#header').outerHeight();
194        //         if ($(this).scrollTop() > h) {
195        //             $('#header').addClass('scrolled');
196        //         } else {
197        //             $('#header').removeAttr('class');
198        //         }
199                
200        //     });
201
202        //     //Reset when responsive
203        //     $(window).bind("load resize", function () {
204        //         var vW = $(window).width();
205        //         if (vW > 640) {
206        //             $('.menu-icon').removeClass('flag');
207        //             $('#gnavi,.menu-icon').removeClass('active');
208        //             $('.submenu').removeAttr('style');
209        //         } else {
210        //             $('#gnavi').removeAttr('style');
211        //         }
212        //     });
213        //     //End Reset when responsive
214        // },
215        Gnavi: function () {
216
217            // === クリック系は「委譲」で ===
218            // Menu icon
219            $(document).on('click', '.menu-icon', function (e) {
220                e.preventDefault();
221                var $btn = $(this);
222                if ($btn.hasClass('active')) {
223                $('.over,#gnavi,.submenu,.menu-icon').removeClass('active');
224                } else {
225                $btn.toggleClass('active');
226                $('#gnavi').addClass('active');
227                }
228            });
229
230            // メニューを閉じる
231            $(document).on('click', '.close-menu', function (e) {
232                e.preventDefault();
233                $('#gnavi,.over,.submenu,.menu-icon').removeClass('active');
234            });
235
236            // === スクロール時のヘッダー ===
237            $(window).on('load resize scroll', function () {
238                var h = $('#header').outerHeight() || 0;
239                if ($(this).scrollTop() > h) {
240                $('#header').addClass('scrolled');
241                } else {
242                // 他のクラスまで消さないように、scrolled だけ外す
243                $('#header').removeClass('scrolled');
244                }
245            });
246
247            // === レスポンシブ時のリセット ===
248            $(window).on('load resize', function () {
249                var vW = $(window).width();
250                if (vW > 640) {
251                $('.menu-icon').removeClass('flag');
252                $('#gnavi,.menu-icon').removeClass('active');
253                $('.submenu').removeAttr('style');
254                } else {
255                $('#gnavi').removeAttr('style');
256                }
257            });
258
259            // ヘッダーが後から挿入されたケースでも初期状態を整える
260            $(window).trigger('resize').trigger('scroll');
261        },
262
263    };
264
265    obj.init();
266
267}

267);
268
269
270// window.addEventListener('load', () => {
271//   const modal = document.createElement('div');
272//   modal.className = 'modal-overlay';
273//   modal.innerHTML = `
274//     <div class="modal-window">
275//       <div class="modal-header">閉院のお知らせ</div>
276//       <div class="modal-body">
277//         平素より当院をご利用いただき誠にありがとうございます。<br><br>
278//         このたび 白金台デンタルクリニック は、令和7年10月3日（金）をもちまして閉院することとなりました。<br><br>
279//         開院以来、地域の皆さまに支えていただきましたこと、心より御礼申し上げます。<br><br>
280//         なお、令和7年10月中旬頃より、白金台デンタルクリニックとして原先生が引き続き同じ場所にて診療を開始される予定です。<br><br>
281//         診療体制は変わりますが、これまでと同様に地域の皆さまの健康をサポートできる歯科医院として継続してまいります。<br><br>
282//         長らくのご愛顧、誠にありがとうございました。
283//       </div>
284//       <button class="modal-close">閉じる</button>
285//     </div>
286//   `;
287//   document.body.appendChild(modal);
288
289//   modal.querySelector('.modal-close').addEventListener('click', () => {
290//     modal.remove();
291//   });
292//     modal.addEventListener('click', (e) => {
293//     if (e.target === modal) {
294//       modal.remove();
295//     }
296//   });
297
298// });