This commit is contained in:
ken 2026-07-27 18:09:49 +08:00
parent 18c7131874
commit 56a06c3f83
17 changed files with 277 additions and 63 deletions

View File

@ -1,7 +1,7 @@
;(function($, win, undefined) {
// ECMAScript 5 嚴格模式
'use strict';
$(function() {
$(function() {
var $signLanguageBox = $('.orbit-bar-search-sign-language');
var $headerNav = $('.header-nav');
var $target = $('.header-nav [accesskey="U"], .header-nav [accesskey="W"]');
@ -326,6 +326,17 @@ $(document).ready(function() {
}, 100);
}
});
// ✅ Tab 鍵跳過 .navbar-toggle 時,觸發與點擊相同的收合邏輯
$(document).on('focusout', '.mobile-menu', function(e) {
setTimeout(function() {
var $newFocus = $(document.activeElement);
// 焦點已離開 .mobile-menu 且選單是展開狀態
if ($('.mobile-menu').hasClass('active') && $newFocus.closest('.mobile-menu').length === 0) {
// ✅ 直接 trigger click與按下 .navbar-toggle 執行完全相同的動作
$('.navbar-toggle').first().trigger('click');
}
}, 50);
});
$('.mobile-menu1 > .menu-drop').click(function(){
var $that = $(this);
@ -625,7 +636,7 @@ $(document).ready(function() {
}
});
if (document.documentElement.lang === 'zh_tw') {
document.documentElement.lang = 'zh-Hant';
document.documentElement.lang = 'zh-Hant-TW';
}
//tab鍵按下
$(document).on('keydown', function(e) {
@ -738,20 +749,20 @@ $(document).ready(function() {
$(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('<span style="display: none;">下一張</span>');
@ -947,7 +958,7 @@ $(function() {
var urlParams = new URLSearchParams(window.location.search);
var isEditMode = urlParams.get('editmode') === 'on';
var pageLang = $('html').attr('lang') || 'zh-Hant';
var pageLang = $('html').attr('lang') || 'zh-Hant-TW';
var isEn = pageLang.toLowerCase().startsWith('en');
var i18n = {
@ -1036,8 +1047,7 @@ $(function() {
currentTitle.includes('Open in new window') ||
currentTitle.includes('/uploads/');
// 修正後:只有在沒有原始 title 時才清空
if (!hasOriginalTitle && (currentTitle.startsWith('/') || currentTitle.includes('?'))) {
if (currentTitle.startsWith('/') || currentTitle.includes('?')) {
currentTitle = "";
}
@ -2890,6 +2900,7 @@ $(document).ready(function () {
}
});
});
//post
$(document).ready(function () {
setTimeout(function () {
$('iframe.twitter-share-button, iframe.twitter-tweet-button').each(function () {
@ -2897,6 +2908,55 @@ $(document).ready(function () {
});
}, 1500);
});
$(function() {
function bindIframeFocus() {
var $iframe = $('.twitter-share-button');
if ($iframe.length === 0) return;
$iframe.each(function() {
var $wrap = $(this).closest('.tw-share-button');
// 讓外層可以被 tab 到並顯示焦點框
$wrap.attr('tabindex', '-1');
$(window).on('blur.twitterFocus', function() {
setTimeout(function() {
if (document.activeElement &&
$(document.activeElement).hasClass('twitter-share-button')) {
$wrap.css({
'outline': '3px solid #005fcc',
'outline-offset': '2px',
'border-radius': '2px'
});
}
}, 100);
});
$(window).on('focus.twitterFocus', function() {
$wrap.css({
'outline': '',
'outline-offset': ''
});
});
});
}
// 用 MutationObserver 等 iframe 被 Twitter script 插入後才綁定
var observer = new MutationObserver(function(mutations) {
if ($('.twitter-share-button').length > 0) {
bindIframeFocus();
observer.disconnect(); // 綁定成功後停止監聽
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
// 保險2秒後強制執行一次
setTimeout(bindIframeFocus, 1000);
});
//orbitbarlogo無障礙
$(function() {
var $logo = $('.orbit-bar-logo');
@ -2942,6 +3002,9 @@ $(function() {
var target = document.getElementById('gallery-theater-stage');
if (!target) return;
// 頁面載入時若已存在 #gallery-theater-stage則還原 z-index
$('.verticalhome').css('z-index', 'auto');
var observer = new MutationObserver(function() {
var display = target.style.display;
if (display === 'block') {
@ -2993,6 +3056,145 @@ $(document).ready(function() {
subtree: true
});
});
//萬用表格無障礙
function fixSortLinkA11y() {
$('a').filter(function () {
return $(this).find('.universal-th-icon').length > 0;
}).each(function () {
var $link = $(this);
// === Step 1: 移除 display:none 的 span ===
$link.find('span').each(function () {
if ($(this).css('display') === 'none' || $(this).attr('style') && $(this).attr('style').indexOf('display: none') !== -1) {
$(this).remove();
}
});
// === Step 2: 取得 aria-label ===
var ariaLabel = $link.attr('aria-label') || '';
// 若 aria-label 空白或含未替換模板變數,從旁邊 .universal-th-text 補
if (!ariaLabel || ariaLabel.indexOf('{{') !== -1) {
var $th = $link.closest('th, div[class*="col-"]');
var colName = $th.find('.universal-th-text').text().trim();
ariaLabel = colName ? '重新排序' + colName : '排序';
$link.attr('aria-label', ariaLabel);
}
// === Step 3: 補上 title 屬性 ===
if (!$link.attr('title')) {
$link.attr('title', ariaLabel + '(在本視窗開啟)');
}
// === Step 4: 確保圖示有 aria-hidden ===
$link.find('.universal-th-icon').attr('aria-hidden', 'true');
// === Step 5: 補上 visually-hidden 連結文字 ===
if ($link.find('.visually-hidden').length === 0) {
$link.append('<span class="visually-hidden">' + ariaLabel + '</span>');
}
});
}
function fixSearchInputA11y() {
$('input[type="search"], input[type="text"]').each(function () {
var $input = $(this);
// 已有對應 label 就跳過
var inputId = $input.attr('id');
if (inputId && $('label[for="' + inputId + '"]').length) return;
// 已有 aria-label / aria-labelledby / title 就跳過
if ($input.attr('aria-label') || $input.attr('aria-labelledby') || $input.attr('title')) return;
// 從 placeholder 取得說明文字
var placeholder = $input.attr('placeholder') || '';
// 從最近的 th 或欄位標題取得欄位名稱
var colName = '';
var $th = $input.closest('th, div[class*="col-"]');
if ($th.length) {
colName = $th.find('.universal-th-text').text().trim();
}
// 組合標籤文字
var label = '';
if (colName && placeholder) {
label = colName + '搜尋';
} else if (colName) {
label = colName + '搜尋';
} else if (placeholder) {
label = placeholder;
} else {
label = '搜尋關鍵字';
}
$input.attr('aria-label', label);
$input.attr('title', label);
});
}
$(document).ready(function () {
setTimeout(function () {
fixSortLinkA11y();
fixSearchInputA11y();
}, 500);
});
$(document).ready(function() {
function fixMemberPluginsTabA11y() {
var $tabList = $('.member-plugins');
if ($tabList.length === 0) return;
var $tabs = $tabList.find('li > a[data-toggle="tab"], li > a[data-bs-toggle="tab"]');
// 每個 tab-pane 內第一個可聚焦元素 Shift+Tab → 回到對應 tab 標題
$tabs.each(function() {
var $tab = $(this);
var targetId = $tab.attr('href'); // e.g. "#course"
var $pane = $(targetId);
if ($pane.length === 0) return;
// 找 pane 內第一個可聚焦元素
var $firstFocusable = $pane.find(
'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
).filter(':visible').first();
if ($firstFocusable.length === 0) return;
$firstFocusable.off('keydown.tabA11y').on('keydown.tabA11y', function(e) {
if (e.key === 'Tab' && e.shiftKey) {
e.preventDefault();
$tab.focus();
}
});
});
// tab 標題之間用方向鍵切換ARIA tablist 標準行為)
$tabs.off('keydown.tabListA11y').on('keydown.tabListA11y', function(e) {
var $current = $(this);
var $all = $tabs;
var idx = $all.index($current);
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
e.preventDefault();
$all.eq((idx + 1) % $all.length).focus();
}
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
e.preventDefault();
$all.eq((idx - 1 + $all.length) % $all.length).focus();
}
});
}
// 初始執行
fixMemberPluginsTabA11y();
// tab-pane 切換後重新綁定(因為 pane 內容可能動態載入)
$(document).on('shown.bs.tab show.bs.tab', function() {
setTimeout(fixMemberPluginsTabA11y, 300);
});
});
// 執行 member等高計算目前改用flexbox故mark掉 by ika 20160105
// $(window).load(function() {

View File

@ -4,13 +4,16 @@
@import "variables";
.fa-classic, .fa-regular, .fa-solid, .far, .fas ,.fa{
font-family: var(--fa-style-family, "FontAwesome");
font-family: "FontAwesome";
}
#orbit-bar .orbit-bar-inner > label:focus, #orbit-bar .orbit-bar-inner > label.focus{
.orbit-bar-search-sign-language{
display: block
}
}
#orbit-bar .orbit-bar-menu .orbit-bar-logo{
cursor: unset!important;
}
.login-btn:focus {
outline: 0.3125em auto -webkit-focus-ring-color !important;

View File

@ -1,6 +1,11 @@
@charset "utf-8";
@import "../initial";
.line-it-button{
.label{
color: #333!important;
}
}
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{
@media(max-width: $screen-xs){
padding: 0;

View File

@ -30,9 +30,11 @@ ul.button-mid{
}
}
}
ul.button-mid{
margin:0;
z-index: 201;
.button-mid {
position: absolute;
width: 100%;
height: 0;
top: 50%;
}
.banner-pager .active-slide button{
background: $theme-color-second!important;

View File

@ -2649,12 +2649,6 @@
.i-annc__entry-title {
margin-bottom: 0;
margin-top: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
// clear: both;
}
.i-annc__title {
@ -2662,6 +2656,11 @@
color: $theme-color-main;
text-decoration: none;
@extend .i-title;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
overflow: hidden;
&:hover {
color: $theme-color-second;
text-decoration: underline;

View File

@ -151,15 +151,18 @@
.i-archive-title {
@extend .unity-title;
}
.link{
background-color: #1273eb; margin-right: 0.5em;}
.txt { background-color: #6dbb73; margin-right: 0.5em;}
.xlsx { background-color: #bb6d7f; margin-right: 0.5em;}
.pdf { background-color: #3b8347; margin-right: 0.5em;}
.docx { background-color: #846dbb; margin-right: 0.5em;}
.pptx { background-color: #6d77bb; margin-right: 0.5em;}
.jpg { background-color: #bb6d6d; margin-right: 0.5em;}
.zip { background-color: #dcb957; margin-right: 0.5em;}
.link { background-color: #1368d4 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.txt { background-color: #3a8a40 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.xlsx { background-color: #9e3050 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.pdf { background-color: #2a7d36 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.docx { background-color: #5e46a0 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.doc { background-color: #1368d4 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.pptx { background-color: #3d4aa0 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.jpg { background-color: #8f3333 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.zip { background-color: #8a6400 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.rar { background-color: #9e5000 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.xls { background-color: #3a8a40 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.odt { background-color: #767676 !important; margin-left: 0.5em; } /* 對比 4.6:1 */
.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th{
// border-top: 0.0625em solid #ddd;
}

View File

@ -436,6 +436,9 @@
font-family: $main-font;
color: #676767;
font-size: 1em;
@media(max-width:768px){
color: #fff;
}
}
&:hover {

View File

@ -40,13 +40,7 @@
</div>
</div>
<div class="marqueeken">
<div class="scroll">
<div class="text1">
NATIONAL FORMOSA UNIVERSITY
</div>
</div>
</div>
<div class="layout-slide big-banner extra-box" data-pp="302" ></div>
<div class="contentwrap1">

View File

@ -29,7 +29,9 @@
</div>
</div>
<ul class="w-ba-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></ul>
<div class="w-ad-banner__pager-2 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
<li><button title="Slide {{slide_number}}" aria-label="Pager"><span style="display: none;">Slide {{slide_number}}</span></button></li>
</div>
<ul class="controlplay" role="radiogroup" aria-label="播放控制選項">
<a role="radio" aria-checked="true" href="javascript:;" class="resume-slide active" title="繼續播放" aria-label="繼續播放" aria-live="assertive">
<i aria-hidden="true"></i>

View File

@ -6,7 +6,7 @@
<div class="index-content col-xs-4 col-sm-3">
<div class="index-content-inner">
<div class="index-pic">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{album-name}}">
</div>
<section class="index-part">
<h4 class="index-content-title">

View File

@ -6,7 +6,7 @@
<div class="index-content col-xs-4 col-sm-3">
<div class="index-content-inner">
<div class="index-pic">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{album-name}}">
</div>
<section class="index-part">
<h4 class="index-content-title">

View File

@ -4,15 +4,16 @@
</h3>
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
<div class="index-content col-sm-3">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<div class="index-content-inner">
<a href="{{link_to_show}}" title="{{album-name}}">
<div class="index-pic">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{album-name}}">
</div>
</a>
<div class="index-part">
<h4 class="index-content-title">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
<a href="{{link_to_show}}" title="{{album-name}}">{{album-name}}</a>
</h4>
<div class="index-img-description">{{album-description}}</div>
</div>

View File

@ -5,14 +5,14 @@
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
<div class="index-content">
<div class="index-content-inner clearfix row">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<a href="{{link_to_show}}" aria-label="前往{{album-name}}" title="{{album-name}}">
<div class="index-pic col-xs-5 col-sm-2">
<img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
</div>
</a>
<div class="index-part col-xs-7 col-sm-10">
<h4 class="index-content-title">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
<a href="{{link_to_show}}" aria-label="前往{{album-name}}" title="{{album-name}}">{{album-name}}</a>
</h4>
<div class="index-img-description">{{album-description}}</div>
</div>

View File

@ -4,15 +4,15 @@
</h3>
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
<div class="index-content col-sm-3">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<a href="{{link_to_show}}" aria-label="前往{{album-name}}" title="{{album-name}}">
<div class="index-content-inner">
<div class="index-pic">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{album-name}}">
</div>
</a>
<div class="index-part">
<h4 class="index-content-title">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
<a href="{{link_to_show}}" aria-label="前往{{album-name}}" title="{{album-name}}">{{album-name}}</a>
</h4>
</div>
</div>

View File

@ -5,14 +5,14 @@
<div class="row" data-level="0" data-list="albums" style="display: flex;flex-wrap: wrap;">
<div class="index-content">
<div class="index-content-inner clearfix row">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<a href="{{link_to_show}}" aria-label="前往{{album-name}}" title="{{album-name}}">
<div class="index-pic col-xs-5 col-sm-2">
<img class="index-img" src="{{thumb-src}}" alt="{{alt_title}}">
</div>
</a>
<div class="index-part col-xs-7 col-sm-10">
<h4 class="index-content-title">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
<a href="{{link_to_show}}" aria-label="前往{{album-name}}" title="{{album-name}}">{{album-name}}</a>
</h4>
</div>

View File

@ -8,11 +8,11 @@
<div class="card-front">
<div class="card-body" style="padding:0;">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<a href="{{link_to_show}}" aria-label="前往{{album-name}}" title="{{album-name}}">
<img src="{{thumb-src}}"alt="{{alt_title}}">
</a>
<div class="card-footer">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<a href="{{link_to_show}}" aria-label="前往{{album-name}}" title="{{album-name}}">
<h3 class="card-title">{{album-name}}</h3>
</a>
</div>

View File

@ -6,14 +6,14 @@
<div class="index-content col-sm-3">
<div class="index-content-inner">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">
<a href="{{link_to_show}}" aria-label="前往{{album-name}}" title="{{album-name}}">
<div class="index-pic">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
<img class="img-thumbnail" src="{{thumb-src}}" alt="{{album-name}}">
</div>
</a>
<section class="index-part">
<h4 class="index-content-title">
<a href="{{link_to_show}}" aria-label="前往{{page-title}}" title="{{page-title}}">{{album-name}}</a>
<a href="{{link_to_show}}" aria-label="前往{{album-name}}" title="{{album-name}}">{{album-name}}</a>
</h4>
</section>
</div>