diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js index 7556ced..efa7d40 100644 --- a/assets/javascripts/app.js +++ b/assets/javascripts/app.js @@ -1,5 +1,35 @@ ;(function($, win, undefined) { // ECMAScript 5 嚴格模式 + $(function() { + var $signLanguageBox = $('.orbit-bar-search-sign-language'); + var $headerNav = $('.header-nav'); + var $target = $('.header-nav [accesskey="U"], .header-nav [accesskey="W"]'); + + // 移除 color: inherit !important + $target.each(function() { + $(this)[0].style.removeProperty('color'); + }); + + function handleNavMove() { + var windowWidth = window.innerWidth; + + if (windowWidth > 768) { + if ($signLanguageBox.length && $signLanguageBox.find('[accesskey="U"], [accesskey="W"]').length === 0) { + $signLanguageBox.prepend($target); + } + } else { + if ($headerNav.length && $headerNav.find('[accesskey="U"], [accesskey="W"]').length === 0) { + $headerNav.append($target); + } + } + } + + handleNavMove(); + + $(window).on('resize', function() { + handleNavMove(); + }); + }); 'use strict'; $(function() { // 1. 定義變數，減少重複選取 DOM 的效能消耗 @@ -629,7 +659,7 @@ } }); if (document.documentElement.lang === 'zh_tw') { - document.documentElement.lang = 'zh-Hant'; + document.documentElement.lang = 'zh-Hant-TW'; } //tab鍵按下 $(document).on('keydown', function(e) { @@ -742,20 +772,20 @@ $(this).attr("style", newStyle); } }); - //表格scope - $("table").each(function() { - $(this).find("tr").each(function(rowIndex) { - $(this).find("th").each(function(colIndex) { - if (rowIndex === 0) { - // 第一列的 th，適用於該欄 - $(this).attr("scope", "col"); - } else if (colIndex === 0) { - // 其他列的第一個 th，適用於該行 - $(this).attr("scope", "row"); - } - }); - }); - }); + // //表格scope + // $("table").each(function() { + // $(this).find("tr").each(function(rowIndex) { + // $(this).find("th").each(function(colIndex) { + // if (rowIndex === 0) { + // // 第一列的 th，適用於該欄 + // $(this).attr("scope", "col"); + // } else if (colIndex === 0) { + // // 其他列的第一個 th，適用於該行 + // $(this).attr("scope", "row"); + // } + // }); + // }); + // }); $(".banner-pager button").addClass('banner-pagerbtn'); $(".banner-pager button").attr("type","button"); $(".banner-pager button").append('下一張'); @@ -799,13 +829,14 @@ $(document).ready(function() { removeEmptyTitles(); }); - $(".w-annc__img-wrap a").each(function () { - var $this = $(this); - // 確保 內沒有文字節點 (避免重複添加) - if ($this.text().trim() === "") { - $this.append('公告圖片'); - } - }); + + // $(".w-annc__img-wrap a").each(function () { + // var $this = $(this); + // // 確保 內沒有文字節點 (避免重複添加) + // if ($this.text().trim() === "") { + // $this.append('公告圖片'); + // } + // }); $(".widget-link__widget-title").each(function () { if ($(this).text().trim() === "") { $(this).append('公告標題'); @@ -874,7 +905,7 @@ var isLinkImage = $parentA.length > 0 && $parentA.text().replace(/\u00a0/g, '').trim() === ""; // --- 1. 處理「裝飾性圖片」標註 --- - if (currentAlt === "announcement image" || currentAlt === "裝飾圖片" || currentTitle === "裝飾圖片") { + if (currentAlt === "announcement image" || currentAlt === "裝飾圖片" || currentTitle === "裝飾圖片" || currentAlt === "這是一張圖片" || currentTitle === "這是一張圖片") { $img.attr('alt', ''); $img.removeAttr('title'); return; @@ -919,197 +950,374 @@ setTimeout(fixImageAccessibility, 500); }); - // 有連結目的之所有a標籤的無障礙處理 - $(function() { - /** - * 全站無障礙 AA 級補強 (多語系偵測版) - */ - function fixAccessibilityAll() { - // --- 0. 網址參數判斷 --- - var urlParams = new URLSearchParams(window.location.search); - var isEditMode = urlParams.get('editmode') === 'on'; - var pageLang = $('html').attr('lang') || 'zh-Hant'; - var isEn = pageLang.toLowerCase().startsWith('en'); +// 有連結目的之所有a標籤的無障礙處理 +$(function() { + // Bootstrap 會把原始 title 搬到 data-bs-original-title，先還原回來 + $('a[data-bs-original-title]').each(function() { + var $a = $(this); + var originalTitle = $a.attr('data-bs-original-title'); + if (originalTitle && originalTitle.trim() !== '') { + $a.attr('title', originalTitle); + } + }); - var i18n = { - langBtn: isEn ? 'Open language menu in this window' : '在本視窗開啟語言選單', - newWin: isEn ? '(Open in new window)' : '(在新視窗開啟)', - selfWin: isEn ? '(Open in this window)' : '(在本視窗開啟)', - link: isEn ? 'Link' : '連結' - }; + /** + * 全站無障礙 AA 級補強 (整合 HM1240400C 與 HM1240401C 規範) + */ + function fixAccessibilityAll() { + // --- 0. 環境與語言偵測 --- + //1200ms 後執行（確保所有其他 function 執行完畢後才處理） + //Part 1：修正語言選單按鈕 + //Part 2：掃描所有 + //├─ 排除 navbar-brand、javascript: 連結 + //├─ 空連結 → 隱藏 + //├─ 文字是路徑/空 → 補隱藏 span + //├─ 圖片+文字共存 → 圖片 alt 清空 + //├─ 無 title → 自動產出 title + //├─ 有 title 但與連結文字或圖片 alt 重複 → 只保留開窗提示 + //├─ 有 title 出現空括號 () → 清除並補上正確開窗提示 + //└─ 移除 aria-label + var urlParams = new URLSearchParams(window.location.search); + var isEditMode = urlParams.get('editmode') === 'on'; - // --- Part 1: 語言選單修正 --- - var $langBtn = $('#languagebutton'); - if ($langBtn.length > 0) { - $langBtn.attr('title', i18n.langBtn); - $langBtn.removeAttr('aria-label'); - } + var pageLang = $('html').attr('lang') || 'zh-Hant-TW'; + var isEn = pageLang.toLowerCase().startsWith('en'); - // --- Part 2: 全站連結處理 --- - $('a').each(function() { - var $a = $(this); - var href = ($a.attr('href') || '').toLowerCase(); - if (!href || href.startsWith('javascript:')) return; + var i18n = { + langBtn: isEn ? 'Open language menu in this window' : '在本視窗開啟語言選單', + newWin: isEn ? 'Open in new window' : '在新視窗開啟', + selfWin: isEn ? 'Open in this window' : '在本視窗開啟', + link: isEn ? 'Link' : '連結', + openImg: isEn ? 'Open image' : '開啟圖片內容', + sort: isEn ? 'Sort' : '排序' + }; - // 清理   與 空白 - var linkText = $a.text().replace(/\u00a0/g, '').trim(); - var $img = $a.find('img'); - var currentTitle = ($a.attr('title') || '').trim(); - - // --- 【新增修正：隱藏空連結】 --- - // 若網址沒有 editmode=on 時，判定 a 裡面文字為空且沒有圖片，則隱藏 - if (!isEditMode && linkText === "" && $img.length === 0) { - $a.hide(); - return; // 跳過後續處理 - } + // --- Part 1: 語言選單修正 --- + var $langBtn = $('#languagebutton'); + if ($langBtn.length > 0) { + $langBtn.attr('title', i18n.langBtn); + $langBtn.removeAttr('aria-label'); + } - // A. 視窗動作規範 - var isNewWindow = ($a.attr('target') === '_blank'); - var windowTask = isNewWindow ? i18n.newWin : i18n.selfWin; + // --- Part 2: 全站連結與圖片邏輯處理 --- + $('a').each(function() { + var $a = $(this); - // B. 偵測檔案類型 - var fileExt = ""; - var fileMatches = href.match(/\.(pdf|doc|docx|xls|xlsx|ppt|pptx|odt|ods|odp|zip|rar|jpg|png|csv)$/); - if (fileMatches) { - fileExt = fileMatches[1].toLowerCase(); - } - - // C. 智慧修正與標題補充 - var hasBadSymbol = currentTitle.includes('()') || - currentTitle.includes('另開新視窗') || - currentTitle.includes('Open in new window'); - - if (linkText === "" && $img.length > 0) { - // 【純圖片連結】替代文字邏輯 - var rawAlt = ($img.attr('alt') || '').trim(); - var forbidden = ['這是一張圖片', '圖片', 'image', 'photo', '圖', '']; - var imgAlt = forbidden.some(function(txt) { return rawAlt.toLowerCase() === txt; }) - ? ($a.attr('aria-label') || i18n.link) : rawAlt; - - var fileInfo = fileExt ? '[' + fileExt.toUpperCase() + '] ' : ''; - - // 確保具備標題與圖片 alt - $a.attr('title', (fileInfo + imgAlt + " " + windowTask).trim()); - $img.attr('alt', imgAlt); - } - else if (linkText !== "") { - // 【有文字連結】 - if (fileExt !== "" || hasBadSymbol || currentTitle === "") { - var isTag = $a.hasClass('label') || $a.hasClass('tag') || $a.find('[class*="tag"]').length > 0; - - if (fileExt !== "") { - $a.attr('title', linkText + " ." + fileExt + " " + windowTask); - } else if (linkText.length <= 6 || isTag) { - $a.attr('title', linkText + " " + windowTask); - } else { - $a.attr('title', windowTask); - } - } - } - - // --- 修正後的 Part D 最終清理 --- - $a.removeAttr('aria-label'); - - // 只有當「真正可見的文字」存在時，才將圖片設為裝飾性 - // 使用 clone() 移除隱藏元件後再計算文字，確保準確度 - var visibleText = $a.clone().find(':hidden, style, script').remove().end().text().replace(/\u00a0/g, '').trim(); - - if (visibleText !== "" && $img.length > 0) { - $img.attr('alt', ''); - } else { - // 如果文字是隱藏的 (如你的範例)，則必須保留或補強圖片 alt - var rawAlt = ($img.attr('alt') || '').trim(); - if (rawAlt === "") { - // 如果連圖片 alt 都沒寫，就從 a 的 title 抓 - var cleanTitle = currentTitle.replace(/\(在本視窗開啟\)|\(在新視窗開啟\)/g, '').trim(); - $img.attr('alt', cleanTitle || i18n.link); - } - } - }); + // 【條件 1：排除特定 class】 + if ($a.hasClass('navbar-brand')) { + return; } - setTimeout(function() { - fixAccessibilityAll(); - }, 600); + var href = ($a.attr('href') || '').toLowerCase(); + if (!href || href.startsWith('javascript:')) return; + + // --- 關鍵修正：先偵測是否有原始 title --- + var rawTitleAttr = $a.attr('title'); + var hasOriginalTitle = (typeof rawTitleAttr !== 'undefined' && rawTitleAttr !== false && rawTitleAttr.trim() !== ""); + + // 清理   與 空白 + var linkText = $a.text().replace(/\u00a0/g, '').trim(); + var $img = $a.find('img'); + var $icons = $a.find('i, svg'); + var currentTitle = ($a.attr('title') || '').trim(); + + // ✅ 在 D 區塊清空 alt 之前，先記錄圖片原始 alt + var imgAltOriginal = $img.length > 0 ? ($img.attr('alt') || '').trim() : ''; + + // --- 【修正 1：隱藏空連結】 --- + if (!isEditMode && linkText === "" && $img.length === 0 && $icons.length === 0) { + $a.hide(); + return; + } + + // --- 【修正 2：文字語意防禦】 --- + if ((linkText === "" || linkText.startsWith('/') || linkText.includes('?')) && $img.length === 0 && $icons.length === 0) { + var accessibleText = i18n.link; + if (href.includes('sort')) { + accessibleText = i18n.sort; + } + + var $span = $a.find('span'); + if ($span.length > 0) { + $span.text(accessibleText); + } else { + $a.append('' + accessibleText + ''); + $span = $a.find('span').last(); + } + + $span.css({ + 'display': 'inline-block', 'position': 'absolute', 'width': '1px', 'height': '1px', + 'padding': '0', 'margin': '-1px', 'overflow': 'hidden', 'clip': 'rect(0, 0, 0, 0)', + 'white-space': 'nowrap', 'border': '0' + }); + linkText = accessibleText; + } + + // A. 視窗動作規範 + var isNewWindow = ($a.attr('target') === '_blank'); + var windowTask = isNewWindow ? i18n.newWin : i18n.selfWin; + + // B. 偵測檔案類型 + var fileExt = ""; + var fileMatches = href.match(/\.(pdf|doc|docx|xls|xlsx|ppt|pptx|odt|ods|odp|zip|rar|jpg|png|csv)$/); + if (fileMatches) { + fileExt = fileMatches[1].toLowerCase(); + } + + // C. 智慧修正標題判斷 + var hasBadSymbol = currentTitle.includes('()') || + currentTitle.includes('Open in new window') || + currentTitle.includes('/uploads/'); + + if (currentTitle.startsWith('/') || currentTitle.includes('?')) { + currentTitle = ""; + } + + // D. 處理【HM1240400C】：圖片與文字毗鄰時，替代文字只能有一份 + if (($img.length > 0 || $icons.length > 0) && linkText !== "") { + if ($img.length > 0) { + $img.attr('alt', ''); + } + + var $hiddenSpans = $a.find('span').filter(function() { + return $(this).css('display') === 'none' || $(this).attr('style')?.includes('display: none'); + }); + + if ($hiddenSpans.length > 0) { + $hiddenSpans.each(function() { + var $span = $(this); + if ($span.text().includes('/uploads/')) { + $span.text(i18n.openImg); + } + + $span.css({ + 'display': 'inline-block', + 'position': 'absolute', + 'width': '1px', + 'height': '1px', + 'padding': '0', + 'margin': '-1px', + 'overflow': 'hidden', + 'clip': 'rect(0, 0, 0, 0)', + 'white-space': 'nowrap', + 'border': '0' + }); + }); + } + } + + // E. 重新計算標題 (關鍵邏輯：若 hasOriginalTitle 為真，則不進入此區塊) + if (!hasOriginalTitle) { + if (linkText === "" && $img.length > 0) { + var rawAlt = ($img.attr('alt') || '').trim(); + var forbidden = ['這是一張圖片', '圖片', 'image', 'photo', '圖', '']; + var imgAlt = forbidden.some(function(txt) { return rawAlt.toLowerCase() === txt; }) + ? ($a.attr('aria-label') || i18n.link) : rawAlt; + + var fileInfo = fileExt ? '[' + fileExt.toUpperCase() + '] ' : ''; + $a.attr('title', (fileInfo + imgAlt + " " + windowTask).trim()); + $img.attr('alt', imgAlt); + } + else if (linkText !== "") { + if (fileExt !== "" || hasBadSymbol || currentTitle === "" || currentTitle.includes('/uploads/')) { + if (fileExt !== "") { + $a.attr('title', linkText + " ." + fileExt + " " + windowTask); + } else { + $a.attr('title', windowTask); + } + } + } + } + + // ✅ 符合 HM1240404E：title 不應與連結文字或圖片 alt 重複 + if (hasOriginalTitle && currentTitle !== "") { + var titleWithoutWindow = currentTitle + .replace('(在本視窗開啟)', '') + .replace('(在新視窗開啟)', '') + .replace('Open in this window', '') + .replace('Open in new window', '') + .replace('另開新視窗前往', '') + .replace('另開新視窗', '') + .trim(); + + // ✅ title 去掉開窗字串後，若與連結文字或圖片原始 alt 相同，則只保留開窗提示 + if ( + (titleWithoutWindow === linkText && linkText !== i18n.link) || + (imgAltOriginal !== '' && titleWithoutWindow === imgAltOriginal) + ) { + $a.attr('title', windowTask); + } + + // ✅ 最終清理：若 title 出現空括號 () 則移除並補上正確開窗提示 + var finalTitle = ($a.attr('title') || '').trim(); + if (finalTitle.includes('()')) { + finalTitle = finalTitle.replace(/\(\)/g, '').trim(); + $a.attr('title', finalTitle + ' ' + windowTask); + } + } + + // F. 最終清理：移除冗餘 label，避免螢幕閱讀器唸兩次 + $a.removeAttr('aria-label'); }); - // if (location.href.search('editmode=on') === -1) { - // // 1. 處理圖片 alt 重複問題 (保持原邏輯但優化) - // $('a').has('img').each(function () { - // const $link = $(this); - // const linkText = $link.text().trim(); + // ✅ G. 補強特定連結（須在迴圈外，因為 javascript: 連結被迴圈跳過） + $('.btn-o a').each(function() { + var $a = $(this); + if (!$a.attr('target')) { + $a.attr('target', '_blank'); + $a.attr('rel', 'noopener noreferrer'); + } + $a.attr('title', isEn ? 'Share to X Open in new window' : '分享至 X 在新視窗開啟'); + }); - // $link.find('img').each(function () { - // const $img = $(this); - // const altText = $img.attr('alt')?.trim(); + $('.print-button a').each(function() { + var $a = $(this); + if (!$a.attr('title') || $a.attr('title').trim().toLowerCase() === 'print') { + $a.attr('title', isEn ? 'Print this page' : '列印此頁'); + } + }); - // if (altText && altText === linkText) { - // $img.attr('alt', ''); - // } - // }); - // }); - // } - $(function() { - function smartFixIcons() { - $('i').each(function() { - var $icon = $(this); - var $parent = $icon.parent(); + $('a.i-archive__file-name').each(function () { + var $a = $(this); + var isNewWindow = ($a.attr('target') === '_blank'); + $a.attr('title', isNewWindow ? i18n.newWin : i18n.selfWin); + }); + } - // 1. 基本安全：所有圖示先對螢幕閱讀器隱藏 (避免讀出 Unicode 亂碼) - $icon.attr('aria-hidden', 'true'); + // ✅ 延遲 800ms 確保所有其他 function 執行完畢後才處理 + setTimeout(function() { + fixAccessibilityAll(); + }, 800); +}); - // 2. 檢查：如果已經有 aria-label 或旁邊已有 sr-only，就不重複處理 - if ($icon.attr('aria-label') || $icon.next('.sr-only').length > 0 || $parent.find('.sr-only').length > 0) { - return; - } + +$(function() { + function smartFixIcons() { + var isEn = $('html').attr('lang') === 'en'; - var cls = ($icon.attr('class') || '').toLowerCase(); - var labelText = ''; + var labels = { + calendar : isEn ? 'Date: ' : '日期：', + user : isEn ? 'Author: ' : '發布者：', + tag : isEn ? 'Tag: ' : '標籤：', + clock : isEn ? 'Time: ' : '時間：', + location : isEn ? 'Location: ' : '地點：', + phone : isEn ? 'Phone: ' : '電話：', + envelope : isEn ? 'Email: ' : '信箱：', + folder : isEn ? 'Category: ' : '分類：', + eye : isEn ? 'Views: ' : '瀏覽次數：', + download : isEn ? 'Download: ' : '下載檔案：', + search : isEn ? 'Search' : '搜尋', + bars : isEn ? 'Menu' : '選單', + print : isEn ? 'Print this page' : '列印此頁', + share : isEn ? 'Share' : '分享至社群', + close : isEn ? 'Close window' : '關閉視窗', + closePopup : isEn ? 'Close announcement' : '關閉公告視窗', + closeGallery: isEn ? 'Close gallery' : '關閉相簿', + toggleDesc : isEn ? 'Show or hide image description' : '顯示或隱藏圖片說明', + themeSwitch : isEn ? 'Switch gallery theme': '切換相簿主題', + showOriginal: isEn ? 'Show original image' : '顯示原始圖片' + }; - // --- 策略 A：常見資訊型圖示 (自動識別內容意義) --- - if (cls.includes('calendar')) labelText = '日期：'; - else if (cls.includes('user') || cls.includes('male')) labelText = '發布者：'; - else if (cls.includes('tag')) labelText = '標籤：'; - else if (cls.includes('clock') || cls.includes('time')) labelText = '時間：'; - else if (cls.includes('map-marker') || cls.includes('location')) labelText = '地點：'; - else if (cls.includes('phone')) labelText = '電話：'; - else if (cls.includes('envelope') || cls.includes('mail')) labelText = '信箱：'; - else if (cls.includes('folder')) labelText = '分類：'; - else if (cls.includes('eye')) labelText = '瀏覽次數：'; - else if (cls.includes('download')) labelText = '下載檔案：'; - - // --- 策略 B：功能性按鈕 (如果 i 放在 或