This commit is contained in:
parent
201020ddb9
commit
67ebf8d8db
|
|
@ -2127,28 +2127,68 @@ $(document).ready(function () {
|
|||
|
||||
//rucaptcha-image
|
||||
$(document).ready(function () {
|
||||
// >>> 修正：先確認頁面上真的有驗證碼圖片，再往下執行，避免沒有驗證碼的頁面也發出多餘的 wav 請求
|
||||
if ($('.rucaptcha-image').length) {
|
||||
$('.rucaptcha-image').removeAttr('onload');
|
||||
// 檢查是否已插入過
|
||||
if (!$('#captcha_audio').length) {
|
||||
const audioButton = $(`
|
||||
<button
|
||||
title="播放驗證碼語音"
|
||||
type="button"
|
||||
onclick="document.getElementById('captcha_audio').play();"
|
||||
class="fas fa-volume-up"
|
||||
aria-label="播放驗證碼語音"
|
||||
role="button"
|
||||
style="font-size: 1.5em; color: #333; cursor: pointer; border: 2px solid #333; padding: 0.2em;">
|
||||
<span class="sr-only">播放驗證碼語音</span>
|
||||
</button>
|
||||
`);
|
||||
const audio = $('<audio id="captcha_audio" src="/rucaptcha/?format=wav&locale=zh_tw"></audio>');
|
||||
$('.rucaptcha-image').after(audioButton, audio);
|
||||
}
|
||||
function fixCaptchaImgA11y() {
|
||||
setTimeout(function () {
|
||||
// ✅ 先確認頁面上真的有驗證碼圖片，再往下執行
|
||||
if (!$('.rucaptcha-image').length) return;
|
||||
|
||||
var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
|
||||
var isEn = pageLang.startsWith('en');
|
||||
|
||||
var i18n = {
|
||||
alt: isEn ? 'Captcha image, click to refresh' : '驗證碼圖片，點擊可更換',
|
||||
title: isEn ? 'Captcha image, click to refresh' : '驗證碼圖片，點擊可更換',
|
||||
label: isEn ? 'Click to refresh captcha' : '點擊更換驗證碼',
|
||||
audioBtn: isEn ? 'Play captcha audio' : '播放驗證碼語音',
|
||||
audioSrc: isEn ? '/rucaptcha/?format=wav&locale=en' : '/rucaptcha/?format=wav&locale=zh_tw'
|
||||
};
|
||||
|
||||
var $captchaImg = $('.rucaptcha-image');
|
||||
|
||||
// ✅ 移除 onload
|
||||
$captchaImg.removeAttr('onload');
|
||||
|
||||
// ✅ 補上有意義的 alt、role、tabindex、title
|
||||
$captchaImg.attr({
|
||||
'alt': i18n.alt,
|
||||
'title': i18n.title,
|
||||
'role': 'button',
|
||||
'tabindex': '0',
|
||||
'aria-label': i18n.label
|
||||
});
|
||||
|
||||
// ✅ Enter / Space 觸發更換驗證碼
|
||||
$captchaImg.off('keydown.captchaA11y').on('keydown.captchaA11y', function (e) {
|
||||
if (e.which === 13 || e.which === 32) {
|
||||
e.preventDefault();
|
||||
$(this).trigger('click');
|
||||
}
|
||||
});
|
||||
|
||||
// ✅ 插入語音按鈕和 audio（若還沒插入過）
|
||||
if (!$('#captcha_audio').length) {
|
||||
var $audioButton = $(
|
||||
'<button ' +
|
||||
'title="' + i18n.audioBtn + '" ' +
|
||||
'type="button" ' +
|
||||
'onclick="document.getElementById(\'captcha_audio\').play();" ' +
|
||||
'class="fas fa-volume-up" ' +
|
||||
'aria-label="' + i18n.audioBtn + '" ' +
|
||||
'role="button" ' +
|
||||
'style="font-size: 1.5em; color: #333; cursor: pointer; border: 2px solid #333; padding: 0.2em;">' +
|
||||
'<span class="sr-only">' + i18n.audioBtn + '</span>' +
|
||||
'</button>'
|
||||
);
|
||||
|
||||
var $audio = $('<audio id="captcha_audio" src="' + i18n.audioSrc + '"></audio>');
|
||||
|
||||
$captchaImg.after($audioButton, $audio);
|
||||
}
|
||||
|
||||
}, 500);
|
||||
}
|
||||
// <<< 修正結束
|
||||
|
||||
fixCaptchaImgA11y();
|
||||
});
|
||||
|
||||
//萬用表格searchbtn2
|
||||
|
|
@ -3517,4 +3557,59 @@ $(function() {
|
|||
fixLabelForMismatch();
|
||||
});
|
||||
|
||||
//bannercontrolplay
|
||||
$(function() {
|
||||
function fixBannerPlayPauseA11y() {
|
||||
setTimeout(function() {
|
||||
var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
|
||||
var isEn = pageLang.startsWith('en');
|
||||
|
||||
var i18n = {
|
||||
resume: isEn ? 'Play' : '繼續播放',
|
||||
pause: isEn ? 'Pause' : '暫停播放'
|
||||
};
|
||||
|
||||
$('.w-ba-banner').each(function() {
|
||||
var $banner = $(this);
|
||||
var $controlplay = $banner.find('.controlplay');
|
||||
|
||||
// ✅ 把 radiogroup 改為一般容器
|
||||
$controlplay.removeAttr('role aria-label');
|
||||
|
||||
// ✅ 繼續播放按鈕
|
||||
var $resume = $banner.find('.resume-slide');
|
||||
$resume
|
||||
.attr('role', 'button')
|
||||
.attr('aria-pressed', $resume.hasClass('active') ? 'true' : 'false')
|
||||
.attr('aria-label', i18n.resume)
|
||||
.attr('title', i18n.resume)
|
||||
.removeAttr('aria-checked aria-live');
|
||||
|
||||
// ✅ 暫停播放按鈕
|
||||
var $pause = $banner.find('.pause-slide');
|
||||
$pause
|
||||
.attr('role', 'button')
|
||||
.attr('aria-pressed', $pause.hasClass('active') ? 'true' : 'false')
|
||||
.attr('aria-label', i18n.pause)
|
||||
.attr('title', i18n.pause)
|
||||
.removeAttr('aria-checked aria-live');
|
||||
|
||||
// ✅ 點擊後同步 aria-pressed
|
||||
$resume.off('click.bannerA11y').on('click.bannerA11y', function() {
|
||||
$resume.attr('aria-pressed', 'true');
|
||||
$pause.attr('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
$pause.off('click.bannerA11y').on('click.bannerA11y', function() {
|
||||
$pause.attr('aria-pressed', 'true');
|
||||
$resume.attr('aria-pressed', 'false');
|
||||
});
|
||||
});
|
||||
|
||||
}, 800);
|
||||
}
|
||||
|
||||
fixBannerPlayPauseA11y();
|
||||
});
|
||||
|
||||
}(jQuery, window));
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ ul.button-mid{
|
|||
width: 100%;
|
||||
height: 0;
|
||||
top: 50%;
|
||||
z-index: 201;
|
||||
}
|
||||
.banner-pager .active-slide button{
|
||||
background: $theme-color-second!important;
|
||||
|
|
@ -44,6 +45,7 @@ ul.button-mid{
|
|||
width: 100%;
|
||||
height: 0;
|
||||
top: 50%;
|
||||
z-index: 201;
|
||||
}
|
||||
.next-button, .prev-button {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -47,20 +47,23 @@
|
|||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
var flag = 1;
|
||||
$('.pause-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
|
||||
});
|
||||
$('.resume-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
|
||||
});
|
||||
$('.next-button').off('click').on('click',function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
|
||||
$('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
|
||||
$(this).addClass('active')
|
||||
$(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active')
|
||||
});
|
||||
$('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
|
||||
$(this).addClass('active')
|
||||
$(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active')
|
||||
});
|
||||
$('[data-subpart-id="{{subpart-id}}"] .next-button').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
|
||||
|
||||
})
|
||||
$('.prev-button').off('click').on('click',function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
|
||||
});
|
||||
})
|
||||
$('[data-subpart-id="{{subpart-id}}"] .prev-button').click(function(){
|
||||
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
|
||||
});
|
||||
/* 修正點：處理 Pager 無障礙朗讀文字 */
|
||||
$('.cycle-slideshow').on('cycle-post-initialize', function(event, optionHash) {
|
||||
var $container = $(this).closest('.w-ba-banner');
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
data-cycle-slides=".w-annc__item" >
|
||||
<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}}">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}" >
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
|
||||
<div class="transitionfade"></div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<ul class="w-annc__list row" data-level="0" data-list="announcements">
|
||||
<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}}">
|
||||
<a href="{{link_to_show}}" aria-label="前往{{widget-title}}">
|
||||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
|
||||
<div class="transitionfade"></div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</h3>
|
||||
<ul class="list-unstyled" data-list="web_link" data-level="0">
|
||||
<li class="index-content">
|
||||
<a class="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<a class="" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<div class="link-img-wrap{{display_image}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</h3>
|
||||
<ul class="list-unstyled" data-list="web_link" data-level="0">
|
||||
<li class="index-content col-md-4 col-sm-4">
|
||||
<a class="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<a class="" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||
<div class="link-img-wrap{{display_image}}">
|
||||
<img src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue