This commit is contained in:
ken 2026-07-07 16:37:21 +08:00
parent aed0edbc74
commit 1b53ef15fe
46 changed files with 538 additions and 198 deletions

View File

@ -291,70 +291,80 @@
$caret2.appendTo('.has-dropdown.level-2');
}
},
ClickMenuHandler: function() {
// 處理主選單切換(漢堡 icon
$(document).on('click', '.navbar-toggle', function (e) {
e.preventDefault();
ClickMenuHandler: function() {
// 處理主選單切換(漢堡 icon
$(document).on('click', '.navbar-toggle', function (e) {
e.preventDefault();
// 確保 .navbar-toggle 放到 .modules-menu 後面
$('.mobile-menu').each(function () {
var $menu = $(this);
if ($menu.find('.modules-menu').length && !$menu.find('.modules-menu + .navbar-toggle').length) {
$menu.find('.modules-menu').after($menu.find('.navbar-toggle'));
}
});
$('.mobile-menu').toggleClass('active');
$('body').toggleClass('noscroll');
$('.mobile-menu .navbar-toggle').removeClass('collapsed');
// 關閉所有下拉選單
$('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500);
$('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened');
// 無障礙:聚焦第一個互動元素
if ($('.mobile-menu').hasClass('active')) {
setTimeout(function () {
$('.modules-menu').find('input, button, select, textarea, a').first().focus();
}, 100);
// 確保 .navbar-toggle 放到 .modules-menu 後面
$('.mobile-menu').each(function () {
var $menu = $(this);
if ($menu.find('.modules-menu').length && !$menu.find('.modules-menu + .navbar-toggle').length) {
$menu.find('.modules-menu').after($menu.find('.navbar-toggle'));
}
});
$('.mobile-menu1 > .menu-drop').click(function(){
var $that = $(this);
var opencheck1 = $that.hasClass('opened');
if ( opencheck1 == 0 ) {
$('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu1 > .menu-drop').not($that).removeClass('opened');
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.siblings('ul').slideDown(500);
$that.addClass('opened');
$('.mobile-menu').toggleClass('active');
$('body').toggleClass('noscroll');
$('.mobile-menu .navbar-toggle').removeClass('collapsed');
} else if (opencheck1 == 1) {
$that.siblings('ul').slideUp(500);
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.removeClass('opened');
// 關閉所有下拉選單
$('.mobile-menu1 > ul, .mobile-menu2 > ul').slideUp(500);
$('.mobile-menu1 > .menu-drop, .mobile-menu2 > .menu-drop').removeClass('opened');
}
})
// 無障礙:聚焦第一個互動元素
if ($('.mobile-menu').hasClass('active')) {
setTimeout(function () {
$('.modules-menu').find('input, button, select, textarea, a').first().focus();
}, 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-menu2 > .menu-drop').click(function(){
var $that = $(this);
var opencheck2 = $that.hasClass('opened');
if ( opencheck2 == 0 ) {
$('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu2 > .menu-drop').not($that).removeClass('opened');
$that.siblings('ul').slideDown(500);
$that.addClass('opened');
} else if (opencheck2 == 1) {
$that.siblings('ul').slideUp(500);
$that.removeClass('opened');
}
})
}
$('.mobile-menu1 > .menu-drop').click(function(){
var $that = $(this);
var opencheck1 = $that.hasClass('opened');
if ( opencheck1 == 0 ) {
$('.mobile-menu1 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu1 > .menu-drop').not($that).removeClass('opened');
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.siblings('ul').slideDown(500);
$that.addClass('opened');
} else if (opencheck1 == 1) {
$that.siblings('ul').slideUp(500);
$('.mobile-menu2 > ul').slideUp(500);
$('.mobile-menu2 > .menu-drop').removeClass('opened');
$that.removeClass('opened');
}
})
$('.mobile-menu2 > .menu-drop').click(function(){
var $that = $(this);
var opencheck2 = $that.hasClass('opened');
if ( opencheck2 == 0 ) {
$('.mobile-menu2 > ul').not($that.siblings('ul')).slideUp(500);
$('.mobile-menu2 > .menu-drop').not($that).removeClass('opened');
$that.siblings('ul').slideDown(500);
$that.addClass('opened');
} else if (opencheck2 == 1) {
$that.siblings('ul').slideUp(500);
$that.removeClass('opened');
}
})
}
};
// 把orbit物件加到window物件裡面並改名為ORBITFRONT來減少名稱衝突的機會
@ -865,7 +875,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;
@ -1141,87 +1151,132 @@ $(function() {
// });
// });
// }
$(function() {
function smartFixIcons() {
var isEn = $('html').attr('lang') === 'en';
$(function() {
function smartFixIcons() {
var isEn = $('html').attr('lang') === 'en';
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' : '關閉視窗'
};
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' : '顯示原始圖片'
};
$('i').each(function() {
var $icon = $(this);
var $parent = $icon.parent();
$('i').each(function() {
var $icon = $(this);
var $parent = $icon.parent();
// 1. 所有圖示先對螢幕閱讀器隱藏
$icon.attr('aria-hidden', 'true');
// 1. 所有圖示先對螢幕閱讀器隱藏
$icon.attr('aria-hidden', 'true');
// 特判:.close-screen-btn 內的圖示,移除無關的 sr-only 並設正確 aria-label
if ($parent.hasClass('close-screen-btn')) {
$parent.find('.sr-only').remove();
$parent.attr('aria-label', '關閉公告視窗');
return;
// 特判:.close-screen-btn 內的圖示,移除無關的 sr-only 並設正確 aria-label
if ($parent.hasClass('close-screen-btn')) {
$parent.find('.sr-only').remove();
$parent.attr('aria-label', labels.closePopup);
if ($icon.next('.sr-only').length === 0) {
$icon.after('<span class="sr-only">' + labels.closePopup + '</span>');
}
return;
}
// 2. 已有 aria-label 或 sr-only 就不重複處理
if ($icon.attr('aria-label') || $icon.next('.sr-only').length > 0 || $parent.find('.sr-only').length > 0) {
return;
// 特判:.gallery-close 內的圖示,移除錯誤的 sr-only 並補正確說明
if ($parent.closest('.gallery-close').length > 0) {
$parent.closest('.gallery-close').find('.sr-only').remove();
$parent.closest('.gallery-close').attr('aria-label', labels.closeGallery);
$parent.closest('.gallery-close').attr('role', 'button');
$parent.closest('.gallery-close').attr('tabindex', '0');
if ($icon.next('.sr-only').length === 0) {
$icon.after('<span class="sr-only">' + labels.closeGallery + '</span>');
}
return;
}
var cls = ($icon.attr('class') || '').toLowerCase();
var labelText = '';
// --- 策略 A常見資訊型圖示 ---
if (cls.includes('calendar')) labelText = labels.calendar;
else if (cls.includes('user') || cls.includes('male')) labelText = labels.user;
else if (cls.includes('tag')) labelText = labels.tag;
else if (cls.includes('clock') || cls.includes('time')) labelText = labels.clock;
else if (cls.includes('map-marker') || cls.includes('location')) labelText = labels.location;
else if (cls.includes('phone')) labelText = labels.phone;
else if (cls.includes('envelope') || cls.includes('mail')) labelText = labels.envelope;
else if (cls.includes('folder')) labelText = labels.folder;
else if (cls.includes('eye')) labelText = labels.eye;
else if (cls.includes('download')) labelText = labels.download;
// --- 策略 B功能性按鈕 ---
var $container = $icon.closest('a, button');
if ($container.length > 0 && $container.text().trim() === '') {
var btnTitle = $container.attr('title');
if (btnTitle) labelText = btnTitle;
else if (cls.includes('search')) labelText = labels.search;
else if (cls.includes('bars') || cls.includes('navicon')) labelText = labels.bars;
else if (cls.includes('print')) labelText = labels.print;
else if (cls.includes('share')) labelText = labels.share;
else if (cls.includes('close') || cls.includes('times')) labelText = labels.close;
// 特判:.gallery-toggle-desc 補說明
if ($parent.closest('.gallery-toggle-desc').length > 0) {
var $toggleBtn = $parent.closest('.gallery-toggle-desc');
if (!$toggleBtn.attr('aria-label')) {
$toggleBtn.attr('aria-label', labels.toggleDesc);
$toggleBtn.attr('role', 'button');
$toggleBtn.attr('tabindex', '0');
}
// --- 3. 執行補強 ---
if (labelText !== '') {
if ($container.length > 0 && $container.text().trim() === '') {
$container.attr('aria-label', labelText);
} else {
$icon.after('<span class="sr-only">' + labelText + '</span>');
}
if ($icon.next('.sr-only').length === 0) {
$icon.after('<span class="sr-only">' + labels.toggleDesc + '</span>');
}
});
}
return;
}
setTimeout(smartFixIcons, 500);
});
// 特判:.gallery-theme-switch 補說明
if ($parent.closest('.gallery-theme-switch').length > 0) {
var $themeBtn = $parent.closest('.gallery-theme-switch');
if (!$themeBtn.attr('aria-label')) {
$themeBtn.attr('aria-label', labels.themeSwitch);
$themeBtn.attr('role', 'button');
$themeBtn.attr('tabindex', '0');
}
if ($icon.next('.sr-only').length === 0) {
$icon.after('<span class="sr-only">' + labels.themeSwitch + '</span>');
}
return;
}
// 2. 已有 aria-label 或 sr-only 就不重複處理
if ($icon.attr('aria-label') || $icon.next('.sr-only').length > 0 || $parent.find('.sr-only').length > 0) {
return;
}
var cls = ($icon.attr('class') || '').toLowerCase();
var labelText = '';
// --- 策略 A常見資訊型圖示 ---
if (cls.includes('calendar')) labelText = labels.calendar;
else if (cls.includes('user') || cls.includes('male')) labelText = labels.user;
else if (cls.includes('tag')) labelText = labels.tag;
else if (cls.includes('clock') || cls.includes('time')) labelText = labels.clock;
else if (cls.includes('map-marker') || cls.includes('location')) labelText = labels.location;
else if (cls.includes('phone')) labelText = labels.phone;
else if (cls.includes('envelope') || cls.includes('mail')) labelText = labels.envelope;
else if (cls.includes('folder')) labelText = labels.folder;
else if (cls.includes('eye')) labelText = labels.eye;
else if (cls.includes('download')) labelText = labels.download;
// --- 策略 B功能性按鈕 ---
var $container = $icon.closest('a, button');
if ($container.length > 0 && $container.text().trim() === '') {
var btnTitle = $container.attr('title');
if (btnTitle) labelText = btnTitle;
else if (cls.includes('search')) labelText = labels.search;
else if (cls.includes('bars') || cls.includes('navicon')) labelText = labels.bars;
else if (cls.includes('print')) labelText = labels.print;
else if (cls.includes('share')) labelText = labels.share;
else if (cls.includes('close') || cls.includes('times')) labelText = labels.close;
else if (cls.includes('image') || cls.includes('photo')) labelText = labels.showOriginal;
}
// --- 3. 執行補強 ---
if (labelText !== '') {
$icon.after('<span class="sr-only">' + labelText + '</span>');
}
});
}
setTimeout(smartFixIcons, 500);
});
// 刪除banner-slide的空連結和空連結目標
for(var i=0;i<$('.w-ba-banner__slide a').length;i++){
if($('.w-ba-banner__slide a').eq(i).attr('href')=="")
@ -3350,6 +3405,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') {
@ -3401,6 +3459,89 @@ $(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);
});
// 執行 member等高計算目前改用flexbox故mark掉 by ika 20160105
// $(window).load(function() {
@ -3408,5 +3549,189 @@ $(document).ready(function() {
// ORBITFRONT.member.equalHeight('.i-member-item-inner');
// }
// });
$(document).ready(function() {
function fixDatepickerA11y() {
var $datepickers = $('input.hasDatepicker');
$datepickers.each(function() {
var $input = $(this);
// 1. 補上 aria 屬性說明日期格式
$input.attr({
'aria-describedby': $input.attr('id') + '-hint',
'autocomplete': 'off'
});
// 2. 在每個 datepicker 後面插入格式提示
if ($('#' + $input.attr('id') + '-hint').length === 0) {
$input.after(
'<span id="' + $input.attr('id') + '-hint" class="sr-only">' +
'請輸入日期格式:西元年/月/日,例如 2026/07/07' +
'</span>'
);
}
// 3. Enter 或 Space 鍵開啟日曆Escape 關閉
$input.off('keydown.datepickerA11y').on('keydown.datepickerA11y', function(e) {
if (e.which === 13 || e.which === 32) {
e.preventDefault();
$(this).datepicker('show');
}
if (e.which === 27) {
$(this).datepicker('hide');
}
});
// 4. 日曆開啟後焦點移入日曆
$input.off('click.datepickerA11y focus.datepickerA11y').on('click.datepickerA11y focus.datepickerA11y', function() {
setTimeout(function() {
var $dpDiv = $('#ui-datepicker-div');
if ($dpDiv.is(':visible')) {
var $focusTarget = $dpDiv.find('a.ui-state-active, a.ui-state-default').first();
if ($focusTarget.length > 0) {
$focusTarget.attr('tabindex', '0').focus();
}
}
}, 100);
});
});
// 5. 日曆內鍵盤操作補強
$(document).off('keydown.dpNav').on('keydown.dpNav', '#ui-datepicker-div a, #ui-datepicker-div span', function(e) {
var $dpDiv = $('#ui-datepicker-div');
if (!$dpDiv.is(':visible')) return;
if (e.which === 13) {
e.preventDefault();
$(this).click();
}
if (e.which === 27) {
var $activeInput = $('input.hasDatepicker').filter(function() {
return $(this).datepicker('widget').is(':visible');
});
$dpDiv.hide();
$activeInput.focus();
}
if (e.which === 9) {
setTimeout(function() {
if (!$.contains($dpDiv[0], document.activeElement)) {
$dpDiv.hide();
}
}, 50);
}
});
// 6. 確保日曆內所有可點元素都有 tabindex
$(document).off('click.dpOpen').on('click.dpOpen', 'input.hasDatepicker', function() {
setTimeout(function() {
$('#ui-datepicker-div a, #ui-datepicker-div td:not(.ui-datepicker-unselectable) a').attr('tabindex', '0');
$('#ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next').attr('tabindex', '0');
}, 100);
});
}
// 延遲執行確保 datepicker 已初始化
setTimeout(fixDatepickerA11y, 800);
});
//日曆無障礙
$(document).ready(function() {
function fixDatepickerA11y() {
var $datepickers = $('input.hasDatepicker');
var $lastFocusedInput = null;
$datepickers.each(function() {
var $input = $(this);
$input.attr({
'aria-describedby': $input.attr('id') + '-hint',
'autocomplete': 'off'
});
if ($('#' + $input.attr('id') + '-hint').length === 0) {
$input.after(
'<span id="' + $input.attr('id') + '-hint" class="sr-only">' +
'請輸入日期格式:西元年/月/日,例如 2026/07/07' +
'</span>'
);
}
$input.off('mousedown.datepickerA11y').on('mousedown.datepickerA11y', function() {
$lastFocusedInput = $(this);
});
$input.off('keydown.datepickerA11y').on('keydown.datepickerA11y', function(e) {
if (e.which === 13 || e.which === 32) {
e.preventDefault();
$lastFocusedInput = $(this);
$(this).datepicker('show');
}
if (e.which === 27) {
$(this).datepicker('hide');
}
});
$input.off('click.datepickerA11y').on('click.datepickerA11y', function() {
$lastFocusedInput = $(this);
setTimeout(function() {
var $dpDiv = $('#ui-datepicker-div');
if ($dpDiv.is(':visible')) {
var $focusTarget = $dpDiv.find('a.ui-state-active, a.ui-state-default').first();
if ($focusTarget.length > 0) {
$focusTarget.attr('tabindex', '0').focus();
}
}
}, 100);
});
$input.datepicker('option', 'onSelect', function() {
var $self = $(this);
setTimeout(function() {
$self.focus();
}, 50);
});
});
$(document).off('keydown.dpNav2').on('keydown.dpNav2', '#ui-datepicker-div a, #ui-datepicker-div span', function(e) {
var $dpDiv = $('#ui-datepicker-div');
if (!$dpDiv.is(':visible')) return;
if (e.which === 13) {
e.preventDefault();
$(this).click();
}
if (e.which === 27) {
$dpDiv.hide();
setTimeout(function() {
if ($lastFocusedInput && $lastFocusedInput.length > 0) {
$lastFocusedInput.focus();
}
}, 50);
}
// ✅ 新增Shift+Tab 在日曆第一個可聚焦元素時,關閉日曆並回到來源 input
if (e.which === 9 && e.shiftKey) {
var $allFocusable = $dpDiv.find('a[tabindex="0"], .ui-datepicker-prev, .ui-datepicker-next');
if ($(this).is($allFocusable.first())) {
e.preventDefault();
$dpDiv.hide();
setTimeout(function() {
if ($lastFocusedInput && $lastFocusedInput.length > 0) {
$lastFocusedInput.focus();
}
}, 50);
}
}
if (e.which === 9 && !e.shiftKey) {
setTimeout(function() {
if (!$.contains($dpDiv[0], document.activeElement)) {
$dpDiv.hide();
}
}, 50);
}
});
$(document).off('click.dpOpen').on('click.dpOpen', 'input.hasDatepicker', function() {
setTimeout(function() {
$('#ui-datepicker-div a, #ui-datepicker-div td:not(.ui-datepicker-unselectable) a').attr('tabindex', '0');
$('#ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next').attr('tabindex', '0');
}, 100);
});
}
setTimeout(fixDatepickerA11y, 800);
});
}(jQuery, window));

View File

@ -11,6 +11,9 @@
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

@ -8,6 +8,11 @@
// Announcement widget
// ## Gerneral styles for widgets
.carousel_images{
.carousel__description{
display: none;
}
}
.s-annc__show-title{
width: 100%;
}
@ -1778,6 +1783,13 @@
.w-annc__widget-title{
margin-top: 0;
}
a{
&:focus{
.w-annc__img-wrap{
padding: 0.2em;
}
}
}
.w-annc__list{
flex-wrap: wrap;
display: flex;

View File

@ -148,18 +148,18 @@
.i-archive-title {
@extend .unity-title;
}
.link { background-color: #1368d4 !important; } /* 對比 4.6:1 */
.txt { background-color: #3a8a40 !important; } /* 對比 4.6:1 */
.xlsx { background-color: #9e3050 !important; } /* 對比 4.6:1 */
.pdf { background-color: #2a7d36 !important; } /* 對比 4.6:1 */
.docx { background-color: #5e46a0 !important; } /* 對比 4.6:1 */
.doc { background-color: #1368d4 !important; } /* 對比 4.6:1 */
.pptx { background-color: #3d4aa0 !important; } /* 對比 4.6:1 */
.jpg { background-color: #8f3333 !important; } /* 對比 4.6:1 */
.zip { background-color: #8a6400 !important; } /* 對比 4.6:1 */
.rar { background-color: #9e5000 !important; } /* 對比 4.6:1 */
.xls { background-color: #3a8a40 !important; } /* 對比 4.6:1 */
.odt { background-color: #767676 !important; } /* 對比 4.6:1 */
.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

@ -21,6 +21,14 @@
//RWD
@import "RWD";
.search_widget{
input:focus, input:hover, input.hover-class {
outline: 3px solid #333 !important;
background: #e6f0ff !important;
transition: all 0.2s ease-in-out !important;
}
}
.visually-hidden{
position: absolute;
width: 1px;

View File

@ -83,13 +83,6 @@
</div>
<div class="contentwrap2">
<div class="marqueeken">
<div class="scroll">
<div class="text1">
NATIONAL FORMOSA UNIVERSITY
</div>
</div>
</div>
<div class="layout-content-inner container">
<div class="column row">
<section class="two-column col-sm-9" data-pp="39"></section>

View File

@ -7,7 +7,7 @@
<div class="w-annc__img-wrap ">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</a>
</div>
<div class="w-annc__meta">

View File

@ -27,7 +27,7 @@
<li class="w-annc__item " >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<div class="w-annc__img-wrap bullseye" style="position:relative">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
<div class="transitionfade"></div>
</div>
<div class="w-annc__content-wrap">

View File

@ -22,7 +22,7 @@
<div class="w-annc__item">
<div class="w-annc__img-wrap">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</div>
<div class="w-annc__content-wrap">
<div class="w-annc__meta">

View File

@ -9,7 +9,7 @@
<li class="w-annc__item col-sm-4">
<div class="w-annc__img-wrap">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</a>
</div>
<div class="w-annc__content-wrap">

View File

@ -6,7 +6,7 @@
<li class="w-annc__item row">
<div class="w-annc__img-wrap col-sm-4 bullseye">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</a>
</div>
<div class="w-annc__content-wrap col-sm-8">

View File

@ -9,7 +9,7 @@
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye" >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
<div class="transitionfade"></div>
</a>
</div>

View File

@ -27,7 +27,7 @@
<li class="w-annc__item">
<div class="w-annc__img-wrap bullseye" >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
<div class="transitionfade"></div>
</a>
</div>

View File

@ -7,7 +7,7 @@
<div class="w-annc__img-wrap ">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</a>
</div>
<div class="w-annc__meta">

View File

@ -9,7 +9,7 @@
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye" >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
<div class="transitionfade"></div>
</a>
</div>

View File

@ -29,7 +29,7 @@
<li class="w-annc__item">
<div class="w-annc__img-wrap bullseye" >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
<div class="transitionfade"></div>
</a>
</div>

View File

@ -7,7 +7,7 @@
<div class="w-annc__img-wrap ">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</a>
</div>
<div class="w-annc__content-wrap card">

View File

@ -6,7 +6,7 @@
<li class="w-annc__item">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}" style="display:block;">
<div class="w-annc__img-wrap ">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</div>
<div class="w-annc__meta">
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">

View File

@ -24,7 +24,7 @@
<p class="w-annc__subtitle">{{subtitle}}</p>
</div>
<div class="w-annc__img-wrap col-sm-4 bullseye">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</div>
</li>
</ul>

View File

@ -9,7 +9,7 @@
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye" style="position:relative">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
<div class="transitionfade"></div>
</a>
</div>

View File

@ -22,9 +22,7 @@
<p class="w-annc__subtitle">{{subtitle}}</p>
<div class="hashtagswrapper">{{orbithashtags}}</div>
{{widget_tags}}
<span class="data-list-tags " data-list="tags" data-level="0">
<a href="{{url}}"><span class="s-annc__tag label label-default">{{tag}}</span></a>
</span>
</div>
</div>
</li>

View File

@ -5,7 +5,7 @@
<ul class="w-annc__list" data-level="0" data-list="custom_announcements">
<li class="w-annc__item">
<div class="w-annc__img-wrap bullseye">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</div>
<div class="w-annc__meta">
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">

View File

@ -12,7 +12,7 @@
<ul class="w-annc__list row" data-level="0" data-list="custom_announcements">
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</div>
<div class="w-annc__content-wrap">
<div class="w-annc__meta">

View File

@ -27,7 +27,7 @@
<div class="w-annc__item">
<div class="w-annc__img-wrap">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</div>
<div class="w-annc__content-wrap">
<div class="w-annc__meta">

View File

@ -9,7 +9,7 @@
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap">
<a href="{{link_to_show}}" title="{{title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</a>
</div>
<div class="w-annc__content-wrap">

View File

@ -5,7 +5,7 @@
<ul class="w-annc__list" data-level="0" data-list="custom_announcements">
<li class="w-annc__item row">
<div class="w-annc__img-wrap col-sm-4 bullseye">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</div>
<div class="w-annc__content-wrap col-sm-8">
<div class="w-annc__meta">

View File

@ -24,7 +24,7 @@
<p class="w-annc__subtitle">{{subtitle}}</p>
</div>
<div class="w-annc__img-wrap col-sm-4 bullseye">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</div>
</li>
</ul>

View File

@ -8,7 +8,7 @@
<ul class="w-annc__list row" data-level="0" data-list="custom_announcements">
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</div>
<div class="w-annc__content-wrap">
<div class="w-annc__meta">

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

@ -6,7 +6,7 @@
<li class="w-annc__item">
<div class="w-annc__img-wrap bullseye">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</a>
</div>
<div class="w-annc__meta">

View File

@ -24,7 +24,7 @@
<li class="w-annc__item">
<div class="w-annc__img-wrap bullseye" style="position:relative">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
<div class="transitionfade"></div>
</a>
</div>

View File

@ -6,7 +6,7 @@
<li class="w-annc__item row">
<div class="w-annc__img-wrap col-sm-4 bullseye">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</a>
</div>
<div class="w-annc__content-wrap col-sm-8">

View File

@ -6,7 +6,7 @@
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye" >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
<div class="transitionfade"></div>
</a>
</div>

View File

@ -24,7 +24,7 @@
<li class="w-annc__item">
<div class="w-annc__img-wrap bullseye" >
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
<div class="transitionfade"></div>
</a>
</div>

View File

@ -21,7 +21,7 @@
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</a>
</div>
<div class="w-annc__content-wrap">

View File

@ -9,7 +9,7 @@
<li class="w-annc__item col-md-6">
<div class="w-annc__img-wrap bullseye" style="position:relative">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
<div class="transitionfade"></div>
</a>
</div>

View File

@ -24,7 +24,7 @@
<p class="w-annc__subtitle">{{subtitle}}</p>
</div>
<div class="w-annc__img-wrap col-sm-4 bullseye">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
</div>
</li>
</ul>

View File

@ -9,7 +9,7 @@
<li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye" style="position:relative">
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" title="{{widget-title}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
<div class="transitionfade"></div>
</a>
</div>

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>

View File

@ -7,7 +7,7 @@
<div class="show-content col-xs-6 col-sm-2">
<div class="show-content-inner">
<div class="show-pic">
<a href="{{link_to_show}}" onclick="window.location.hash = '{{link_to_show}}';GalleryTheater();return false;">
<a href="{{link_to_show}}" onclick="window.location.hash = '{{link_to_show}}';GalleryTheater();return false;" title="{{alt_title}}">
<img class="img" src="{{thumb-src}}" alt="{{alt_title}}">
</a>
<p class="show-description">{{image-description}}</p>