PageSourceSearch

https://www.kh.edu.tw/js/BoeRWD.js

js kh.edu.tw collected 2026-09-24 08:54:44 UTC 16,810 bytes, 498 lines download raw bytes

1// RWD 模式判斷設定
2var _RWDMode  = 0; // 是否進入 RWD 模式 1: 是 0:否
3var _RWDMoveL = 0; // 是否移動左方功能選單 1:是 0:否
4var _RWDMoveR = 0; // 是否移動右方功能選單 1:是 0:否
5
6// 選單開關圖檔的寬度與高度 (像素)
7// 選單開關圖檔高度如有異動須同步修改 CSS 全域變數 --RWDAreaHeight
8var _ImgWidth      = 40;
9var _ImgHeight     = 40;
10var _ImgOpenTitle  = "開啟選單";
11var _ImgCloseTitle = "關閉選單";
12
13// 選單開關圖檔的位址
14var _OpenImg  = "/theme/default/images/BoeRWDOpen.svg";
15var _CloseImg = "/theme/default/images/BoeRWDClose.svg";
16
17// 新增選單開關區塊 (固定在螢幕上方) div 並設定 id 屬性
18var _DivArea = document.createElement("div");
19_DivArea.setAttribute("id", "RWD_DivArea");
20_DivArea.setAttribute("aria-label", "響應式網頁選單連結區");
21
22// 左方選單開關 開始 *****
23// 新增左方選單開關 div 並設定 id 屬性
24var _DivL = document.createElement("div");
25_DivL.setAttribute("id", "RWD_DivL");
26_DivL.setAttribute("aria-label", "左方選單開關區");
27
28// 左方選單開關 a 的屬性內容 
29var _OpenTitle  = "開啟左方選項連結區(Alt+L)";
30var _OpenHref   = "javascript:go_rwd('Open');";
31var _CloseTitle = "關閉左方選項連結區(Alt+L)";
32var _CloseHref  = "javascript:go_rwd('Close');";
33
34// 左方選單開關圖檔的 ID
35var _ImgIDL     = "RWD_ImgL";
36
37// 新增左方選單開關 a 並設定相關屬性
38var _AnchorL = document.createElement("a");
39_AnchorL.setAttribute("aria-haspopup", "true");
40_AnchorL.setAttribute("aria-expanded", "false");
41_AnchorL.id        = "RWD_AnchorL"; 
42_AnchorL.role      = "button";
43_AnchorL.title     = _OpenTitle;  
44_AnchorL.href      = _OpenHref;  
45_AnchorL.innerHTML = "<img id=\"" + _ImgIDL       + "\" " +
46                     "width=\""   + _ImgWidth     + "\" " +
47                     "height=\""  + _ImgHeight    + "\" " +
48                     "src=\""     + _OpenImg      + "\" " + 
49                     "alt=\""     + _ImgOpenTitle + "\" " +
50                     "style=\"vertical-align: middle;\">" ;
51 	
52// 將左方選單開關 a 加入選單開關 div 中
53_DivL.appendChild(_AnchorL);
54		
55// 將左方選單開關 div 加入選單開關區塊 div 中
56_DivArea.appendChild(_DivL);
57// 左方選單開關 結束 *****
58
59// 右方選單開關 開始 *****
60// 新增右方選單開關 div 並設定 id 屬性
61var _DivR = document.createElement("div");
62_DivR.setAttribute("id", "RWD_DivR");
63_DivR.setAttribute("aria-label", "右方選單開關區");
64
65// 右方選單開關 a 的屬性內容 
66var _OpenTitleR  = "開啟右方相關連結區(Alt+R)";
67var _OpenHrefR   = "javascript:go_rwd_r('Open');";
68var _CloseTitleR = "關閉右方相關連結區(Alt+R)";
69var _CloseHrefR  = "javascript:go_rwd_r('Close');";
70
71// 右方選單開關圖檔的 ID
72var _ImgIDR      = "RWD_ImgR";
73
74// 新增右方選單開關 a 並設定相關屬性
75var _AnchorR = document.createElement("a");
76_AnchorR.setAttribute("aria-haspopup", "true");
77_AnchorR.setAttribute("aria-expanded", "false");
78_AnchorR.id        = "RWD_AnchorR"; 
79_AnchorR.role      = "button";
80_AnchorR.title     = _OpenTitleR;
81_AnchorR.href      = _OpenHrefR;
82_AnchorR.innerHTML = "<img id=\"" + _ImgIDR       + "\" " +
83                     "width=\""   + _ImgWidth     + "\" " +
84                     "height=\""  + _ImgHeight    + "\" " +
85                     "src=\""     + _OpenImg      + "\" " + 
86                     "alt=\""     + _ImgOpenTitle + "\" " +
87                     "style=\"vertical-align: middle;\">" ;
88	
89// 將右方選單開關 a 加入選單開關 div 中
90_DivR.appendChild(_AnchorR);
91		
92// 將右方選單開關 div 加入選單開關區塊 div 中
93_DivArea.appendChild(_DivR);
94// 右方選單開關 結束 *****
95
96// 將選單開關區塊 div 移到上方框架 #SkipToMC 之後
97var _DSkipToMC = document.getElementById("SkipToMC");
98_DSkipToMC.after(_DivArea);
99
100// 建立「body」物件 
101var _BD = document.querySelector("body");
102
103// 建立左方功能選單物件
104var _MenuL = document.getElementById("navRef"); 
105
106// 建立左方選單開關圖檔物件
107var _ImgL = document.getElementById(_ImgIDL);
108
109// 建立右方功能選單物件
110var _MenuR = document.getElementById("extRef");
111
112// 建立右方選單開關圖檔物件
113var _ImgR = document.getElementById(_ImgIDR);
114
115// 建立快捷鍵 #DivAccessL、#DivAccessR DIV 物件
116var _DivAccessL = document.getElementById("Div_AccessLink_L");
117var _DivAccessR = document.getElementById("Div_AccessLink_R");
118
119// 建立快捷鍵 #AccessLinkL、#AccessLinkR 物件
120var _AccessLinkL = document.getElementById("AccessLink_L");
121var _AccessLinkR = document.getElementById("AccessLink_R");
122
123// 設定:當視窗往下捲動時將選單開關區塊固定在螢幕上方
124window.addEventListener("scroll", (e) => {
125   if ( window.pageYOffset >= _ImgHeight || window.scrollY >= _ImgHeight ) {
126      _DivArea.classList.add("RWD_DivAreaFixed");  
127   }
128   else {
129      _DivArea.classList.remove("RWD_DivAreaFixed");
130   }
131});
132
133// 調整左方功能選單高度函數
134function go_resize() {
135   if ( (((window.innerHeight - _ImgHeight + 2) / 16) + "rem") != _MenuL.style.height ) {
136      _MenuL.style.height = ((window.innerHeight - _ImgHeight + 2) / 16) + "rem";
137   }
138}
139
140// 關閉左方功能選單函數
141function _CloseMenuL() { 
142   go_rwd('Close'); 
143}
144
145// 調整右方功能選單高度函數
146function go_resize_r() {
147   if ( (((window.innerHeight - _ImgHeight + 2) / 16) + "rem") != _MenuR.style.height ) {
148   _MenuR.style.height = ((window.innerHeight - _ImgHeight + 2) / 16) + "rem";
149   }
150}
151
152// 關閉右方功能選單的函數
153function _CloseMenuR() { 
154   go_rwd_r('Close'); 
155}
156
157// 取消或恢復物件焦點
158function _DelOrRecoverTabIndex(_D, _N) {
159   if ( _N != 0 && _N != -1 ) return;
160
161   // 取得物件中具有焦點的元素
162   var _E = _D.querySelectorAll("a[href], button, input, select, textarea, [tabindex], iframe");
163   _E.forEach(element => {
164   // 確保元素不在 disabled 狀態後再取消或恢復焦點
165   if ( !element.disabled ) {
166      // 設置 tabindex:0->恢復 -1->取消
167      element.tabIndex = _N;
168   }
169   });
170
171   // 例外處理:右方功能選單「圖片輪播」DIV #ad_photo_1001 的 tabIndex = -1
172   var _Tmp = document.getElementById("ad_photo_1001");
173   if ( _Tmp ) _Tmp.tabIndex = -1;   
174}
175
176// 取消或恢復非功能選單中的物件焦點
177function _GoDoTabIndex(_N) {
178   if ( _N != 0 && _N != -1 ) return;
179
180   // 建立需要取消或恢復焦點的物件 
181   var _Tmp_1 = document.getElementById("banner");    // 網站導覽
182   var _Tmp_2 = document.getElementById("contentTd"); // 主要內容框架
183   var _Tmp_3 = document.getElementById("foot");      // 下方框架
184
185   // 取消或恢復焦點
186   if ( _Tmp_1 ) _DelOrRecoverTabIndex(_Tmp_1, _N);
187   if ( _Tmp_2 ) _DelOrRecoverTabIndex(_Tmp_2, _N);
188   if ( _Tmp_3 ) _DelOrRecoverTabIndex(_Tmp_3, _N);
189  
190   // 如果尚未移動右方功能選單則取消或恢復焦點 
191   if ( _RWDMoveR == 0 && typeof _DivR !== "undefined" && !_DivR.offsetHeight )
192   _DelOrRecoverTabIndex(_MenuR, _N);
193}
194
195// 切換模式 (RWD、Normal)
196function _GoSwitchRWD(_M) {
197   // RWD 模式
198   if ( _M == 1 ) {
199      _RWDMode  = 1;
200      // 將左方功能選單 移到選單開關 div 之後並取消焦點
201      if ( _RWDMoveL == 0 ) {
202         _RWDMoveL = 1;
203         _DivL.after(_MenuL);
204         _DelOrRecoverTabIndex(_MenuL, -1);
205        
206         // 設定左方功能選單 DIV 的 tabIndex = -1
207         _MenuL.tabIndex = -1;
208
209         // 隱藏快捷鍵 DIV
210         _DivAccessL.style.display = "none";
211
212         // 設定快捷鍵
213         _AccessLinkL.setAttribute("accesskey", "");
214         _AnchorL.setAttribute("accesskey", "L");
215      } 
216
217      // 將右方功能選單 移到選單開關 div 之後並取消焦點
218      if ( _RWDMoveR == 0 && typeof _DivR !== "undefined" && _DivR.offsetHeight ) {
219         _RWDMoveR = 1;
220         _DivR.after(_MenuR);
221         _DelOrRecoverTabIndex(_MenuR, -1);
222        
223         // 設定右方功能選單 DIV 的 tabIndex = -1
224         _MenuR.tabIndex = -1;
225
226         // 隱藏快捷鍵 DIV
227         _DivAccessR.style.display = "none";
228
229         // 設定快捷鍵
230         _AccessLinkR.setAttribute("accesskey", "");
231         _AnchorR.setAttribute("accesskey", "R");
232      }
233
234      // 右方功能選單 回到原位、恢復焦點
235      if ( _RWDMoveR == 1 && typeof _DivR !== "undefined" && !_DivR.offsetHeight ) {
236         _RWDMoveR = 0;
237
238         // 顯示快捷鍵 DIV
239         _DivAccessR.style.display = "block";
240
241         // 恢復快捷鍵
242         _AccessLinkR.setAttribute("accesskey", "R");
243         _AnchorR.setAttribute("accesskey", "");
244
245         // 回到原位
246         document.getElementById("extTd").appendChild(_MenuR);
247      
248         // 恢復焦點
249         _DelOrRecoverTabIndex(_MenuR, 0);
250         _MenuR.style.height = "";
251      }
252   }
253   // Normal 模式
254   else {
255      _RWDMode  = 0;
256      // 左方功能選單 回到原位、恢復焦點
257      if ( _RWDMoveL == 1 ) {
258         _RWDMoveL = 0;
259
260         // 顯示快捷鍵 DIV
261         _DivAccessL.style.display = "block";
262
263         // 恢復快捷鍵
264         _AccessLinkL.setAttribute("accesskey", "L");
265         _AnchorL.setAttribute("accesskey", "");
266
267         // 回到原位
268         document.getElementById("navTd").appendChild(_MenuL);
269
270         // 恢復焦點
271         _DelOrRecoverTabIndex(_MenuL, 0);
272         _MenuL.style.height = "";
273      }
274
275      // 右方功能選單 回到原位、恢復焦點
276      if ( _RWDMoveR == 1 ) {
277         _RWDMoveR = 0;
278
279         // 顯示快捷鍵 DIV
280         _DivAccessR.style.display = "block";
281
282         // 恢復快捷鍵
283         _AccessLinkR.setAttribute("accesskey", "R");
284         _AnchorR.setAttribute("accesskey", "");
285
286         // 回到原位
287         document.getElementById("extTd").appendChild(_MenuR);
288      
289         // 恢復焦點
290         _DelOrRecoverTabIndex(_MenuR, 0);
291         _MenuR.style.height = "";
292      }
293   }
294}
295
296// 判斷是否關閉左方功能選單
297function _CloseMenuJudgeL(E) {  
298   var _P = E.srcElement.parentElement;
299   var _S = E.srcElement.parentElement.nextElementSibling;        
300   if ( E.srcElement.localName == "a") {
301      if ( !(_P !== "undefined" && _P.localName == "div" && 
302             _S !== "undefined" && _S.localName == "ul"  && _S.innerText != "" ) ) {
303         _CloseMenuL();
304      }
305   }
306}
307
308// 左方功能選單「開」、「關」函數
309function go_rwd(_T) {     
310   // 「開」左方功能選單
311   if ( _T == "Open" ) {
312
313      // 恢復左方功能選單焦點
314      _DelOrRecoverTabIndex(_MenuL, 0);
315
316      // 為避免左、右雙方功能選單同時「開」判斷如右方功能選單已「開」則「關」
317      if ( _MenuR && _AnchorR && _AnchorR.title == _CloseTitle ) {
318         go_rwd_r("Close");
319      }
320
321      // 展開功能選單
322      _MenuL.style.height = ((window.innerHeight - _ImgHeight + 2) / 16) + "rem";
323
324      // 設定選單開關圖檔為「關」
325      _ImgL.alt = _ImgCloseTitle;
326      _ImgL.src = _CloseImg;
327
328      // 設定選單開關 a 的屬性內容
329      _AnchorL.setAttribute("aria-expanded", "true");
330      _AnchorL.title = _CloseTitle;
331      _AnchorL.href  = _CloseHref;
332
333      // 設定:網頁鎖定
334      _BD.classList.add("RWD_DivOpen");
335
336      // 設定:當視窗高度改變時調整左方功能選單高度
337      window.addEventListener("resize", go_resize);
338
339      // 設定:在左方功能選單區域「外」按下滑鼠則關閉左方功能選單
340      window.addEventListener("click", _CloseMenuL);
341
342      // 設定:在左方功能選單區域「內」按下滑鼠時不做任何處理
343      _MenuL.onclick = function (e) { e.stopPropagation(); }
344      
345      // 設定:在左方選單開關區域「內」按下滑鼠時不做任何處理
346      _AnchorL.onclick = function (e) { e.stopPropagation(); }
347
348      // 設定:判斷是否關閉左方功能選單
349      _MenuL.addEventListener("click", _CloseMenuJudgeL);
350
351      // 取消非功能選單之物件焦點
352      _GoDoTabIndex(-1);
353   }
354   // 「關」左方功能選單
355   else if ( _T == "Close" ) {
356
357      // 取消左方功能選單焦點
358      _DelOrRecoverTabIndex(_MenuL, -1);
359
360      // 收合功能選單
361      _MenuL.scrollTop    = 0;
362      _MenuL.style.height = "0rem";
363
364      // 設定選單開關圖檔為「開」
365      _ImgL.alt = _ImgOpenTitle;
366      _ImgL.src = _OpenImg;
367
368      // 設定選單開關 a 的屬性內容
369      _AnchorL.setAttribute("aria-expanded", "false");
370      _AnchorL.title = _OpenTitle;
371      _AnchorL.href  = _OpenHref;
372
373      // 取消:網頁鎖定
374      _BD.classList.remove("RWD_DivOpen");
375
376      // 取消:當視窗高度改變時調整左方功能選單高度
377      window.removeEventListener("resize", go_resize);
378
379      // 取消:在左方功能選單區域「外」按下滑鼠則關閉左方版面
380      window.removeEventListener("click", _CloseMenuL);
381
382      // 取消:在左方功能選單區域「內」按下滑鼠時不做任何處理
383      _MenuL.onclick = null; 
384      
385      // 取消:在左方選單開關區域「內」按下滑鼠時不做任何處理
386      _AnchorL.onclick = null;
387
388      // 取消:判斷是否關閉左方功能選單
389      _MenuL.removeEventListener("click", _CloseMenuJudgeL);
390
391      // 恢復非功能選單之物件焦點
392      _GoDoTabIndex(0);
393   }		
394}
395
396// 判斷是否關閉右方功能選單
397function _CloseMenuJudgeR(E) {  
398  if ( E.srcElement.localName == "img") {
399     if ( E.srcElement.id != "PausePlayImg_1001" ) {
400        _CloseMenuR();
401     }
402  }
403}
404
405// 右方功能選單「開」、「關」函數
406function go_rwd_r(_T) {  
407  // 「開」右方功能選單
408  if ( _T == "Open" ) {
409     // 恢復右方功能選單焦點
410     _DelOrRecoverTabIndex(_MenuR, 0);
411
412     // 為避免左、右雙方功能選單同時「開」判斷如左方功能選單已「開」則「關」
413     if ( _MenuL && _AnchorL && _AnchorL.title == _CloseTitleR ) {
414        go_rwd("Close");
415     }
416     
417     // 展開功能選單
418     _MenuR.style.height = ((window.innerHeight - _ImgHeight + 2) / 16) + "rem";
419     
420     // 設定選單開關圖檔為「關」
421     _ImgR.alt = _ImgCloseTitle;
422     _ImgR.src = _CloseImg;
423
424     // 設定選單開關 a 的屬性內容
425     _AnchorR.setAttribute("aria-expanded", "true");
426     _AnchorR.title = _CloseTitleR;
427     _AnchorR.href  = _CloseHrefR;
428
429     // 設定:網頁鎖定
430     _BD.classList.add("RWD_DivOpen");
431
432     // 設定:當視窗高度改變時調整右方功能選單高度
433     window.addEventListener("resize", go_resize_r);
434
435     // 設定:在右方功能選單區域「外」按下滑鼠則關閉右方版面
436     window.addEventListener("click", _CloseMenuR);
437
438     // 設定:在右方功能選單區域「內」按下滑鼠時不做任何處理
439     _MenuR.onclick = function (e) { e.stopPropagation(); }
440
441     // 設定:在右方選單開關區域「內」按下滑鼠時不做任何處理
442     _AnchorR.onclick = function (e) { e.stopPropagation(); }
443
444     // 設定:判斷是否關閉右方功能選單
445     _MenuR.addEventListener("click", _CloseMenuJudgeR);
446
447     // 取消非功能選單之物件焦點
448     _GoDoTabIndex(-1);
449  }
450  // 「關」右方功能選單
451  else if ( _T == "Close" ) {
452     // 取消右方功能選單焦點
453     _DelOrRecoverTabIndex(_MenuR, -1);
454
455     // 收合功能選單
456     _MenuR.scrollTop    = 0;
457     _MenuR.style.height = "0rem";
458
459     // 設定選單開關圖檔為「開」
460     _ImgR.alt = _ImgOpenTitle;
461     _ImgR.src = _OpenImg;
462
463     // 設定選單開關 a 的屬性內容
464     _AnchorR.setAttribute("aria-expanded", "false");
465     _AnchorR.title = _OpenTitleR;
466     _AnchorR.href  = _OpenHrefR;
467
468     // 取消:網頁鎖定
469     _BD.classList.remove("RWD_DivOpen");
470
471     // 取消:當視窗高度改變時調整右方功能選單高度
472     window.removeEventListener("resize", go_resize_r);
473
474     // 取消:在右方功能選單區域「外」按下滑鼠則關閉右方版面
475     window.removeEventListener("click", _CloseMenuR);
476     
477     // 取消:在右方功能選單區域「內」按下滑鼠時不做任何處理
478      _MenuR.onclick = null;
479
480     // 取消:在右方選單開關區域「內」按下滑鼠時不做任何處理
481     _AnchorR.onclick = null;
482
483     // 取消:判斷是否關閉右方功能選單
484     _MenuR.removeEventListener("click", _CloseMenuJudgeR);
485
486     // 恢復非功能選單之物件焦點
487     _GoDoTabIndex(0);
488  }     
489}
490
491// 觀察選單開關 _DivL 如高度 > 0 則表示進入 RWD 模式
492var _ResizeObserver_MenuL = new ResizeObserver(function () {
493   if ( _DivL.offsetHeight ) _GoSwitchRWD(1);
494   else                      _GoSwitchRWD(0);
495});
496_ResizeObserver_MenuL.observe(_BD);
497
498

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.