update
This commit is contained in:
parent
7df26ca66d
commit
fe9da05c9e
|
|
@ -2188,7 +2188,8 @@ $(function() {
|
|||
//萬用表格searchbtn2
|
||||
$(document).ready(function () {
|
||||
$('.searchbtn2').click(function (event) {
|
||||
event.preventDefault(); // 防止預設行為
|
||||
event.preventDefault();
|
||||
event.stopPropagation(); // ✅ 加這行，防止冒泡到 .ken-click
|
||||
$(".searchbox").slideToggle(300, function () {
|
||||
updateAriaExpanded();
|
||||
});
|
||||
|
|
@ -2205,74 +2206,117 @@ $(function() {
|
|||
// 預設 aria-expanded 為 false
|
||||
$(".searchbtn2").attr("aria-expanded", "false");
|
||||
});
|
||||
//強制保持全站search展開
|
||||
// searchbtn2 Tab 鍵聚焦時自動展開 .searchbox
|
||||
$(document).ready(function() {
|
||||
function fixSearchbtn2FocusA11y() {
|
||||
setTimeout(function() {
|
||||
|
||||
var isMouseClick = false;
|
||||
|
||||
// 滑鼠按下時標記
|
||||
$('.searchbtn2').on('mousedown', function() {
|
||||
isMouseClick = true;
|
||||
setTimeout(function() { isMouseClick = false; }, 300);
|
||||
});
|
||||
|
||||
// focus 事件：只有 Tab 聚焦（非滑鼠）才自動展開
|
||||
$('.searchbtn2').on('focus', function() {
|
||||
if (isMouseClick) return; // 滑鼠點擊來的 focus，跳過
|
||||
|
||||
var $searchbox = $('.searchbox');
|
||||
if (!$searchbox.is(':visible')) {
|
||||
$searchbox.slideDown(300, function() {
|
||||
$('.searchbtn2').attr('aria-expanded', 'true');
|
||||
$('.searchbtn2').closest('.ken-click').addClass('ken-click2');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
}, 500);
|
||||
}
|
||||
|
||||
fixSearchbtn2FocusA11y();
|
||||
});
|
||||
// 強制保持全站search展開
|
||||
$(document).ready(function () {
|
||||
|
||||
//search移位
|
||||
function moveSearchIfWide() {
|
||||
if ($('.input-search').is(':focus')) return;
|
||||
|
||||
if ($(window).width() > 769) {
|
||||
// 如果已經在正確位置就不動
|
||||
if (!$('.modules-menu-level-0 .searchclass').length) {
|
||||
$('.searchclass').appendTo('.header-nav');
|
||||
}
|
||||
} else {
|
||||
if (!$('.navbar-header .searchclass').length) {
|
||||
$('.navbar-brand').after($('.searchclass'));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$(document).ready(moveSearchIfWide);
|
||||
$(window).on('resize', moveSearchIfWide);
|
||||
|
||||
const $searchBox = $('.search-box');
|
||||
const $input = $searchBox.find('.input-search');
|
||||
const $btn = $('.btn-search');
|
||||
|
||||
// 輔助函式：安全地檢查輸入框是否為空
|
||||
// 解決 Cannot read properties of undefined (reading 'trim')
|
||||
function isInputEmpty() {
|
||||
if ($input.length === 0) return true; // 如果找不到 input，視為空
|
||||
var val = $input.val();
|
||||
return !val || val.toString().trim() === '';
|
||||
}
|
||||
|
||||
// // search移位
|
||||
// function moveSearchIfWide() {
|
||||
// // 如果 input 正在輸入中，不要移動位置，避免鍵盤消失或閃爍
|
||||
// if ($input.is(':focus')) return;
|
||||
|
||||
// if ($(window).width() > 769) {
|
||||
// // 如果已經在正確位置就不動
|
||||
// if (!$('.modules-menu-level-0 .searchclass').length) {
|
||||
// $('.searchclass').appendTo('.modules-menu-level-0');
|
||||
// }
|
||||
// } else {
|
||||
// // 行動版位置
|
||||
// if ($('.navbar-brand').length > 0) {
|
||||
// $('.navbar-brand').after($('.searchclass'));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // 初始化與 Resize 監聽
|
||||
// moveSearchIfWide();
|
||||
// $(window).on('resize', moveSearchIfWide);
|
||||
|
||||
// 點擊 btn 時：若未展開則展開，展開後才可送出
|
||||
$btn.on('click', function (e) {
|
||||
if (!$searchBox.hasClass('searching')) {
|
||||
e.preventDefault(); // 第一次點擊不送出
|
||||
// 延遲讓 Android 不會立即 blur
|
||||
setTimeout(() => {
|
||||
$searchBox.addClass('searching');
|
||||
$input[0].focus(); // 用 DOM 方式較穩
|
||||
}, 100);
|
||||
} else if (!$input.val().trim()) {
|
||||
// 沒有輸入值 → 不送出，focus 回去
|
||||
e.preventDefault();
|
||||
$input[0].focus();
|
||||
}
|
||||
// 有輸入值就正常送出
|
||||
if (!$searchBox.hasClass('searching')) {
|
||||
e.preventDefault(); // 第一次點擊不送出
|
||||
// 延遲讓 Android 不會立即 blur
|
||||
setTimeout(() => {
|
||||
$searchBox.addClass('searching');
|
||||
if ($input.length > 0) $input[0].focus();
|
||||
}, 100);
|
||||
} else if (isInputEmpty()) {
|
||||
// 沒有輸入值 → 不送出，focus 回去
|
||||
e.preventDefault();
|
||||
if ($input.length > 0) $input[0].focus();
|
||||
}
|
||||
// 有輸入值就正常送出
|
||||
});
|
||||
|
||||
// 點外面收起（無字才收）
|
||||
$(document).on('click touchstart', function (e) {
|
||||
if (
|
||||
!$searchBox.is(e.target) &&
|
||||
$searchBox.has(e.target).length === 0 &&
|
||||
!$input.val().trim()
|
||||
) {
|
||||
$searchBox.removeClass('searching');
|
||||
}
|
||||
});
|
||||
|
||||
// focus 時延遲加 .searching，避免 Android 被打斷
|
||||
$input.on('focus', function () {
|
||||
setTimeout(() => {
|
||||
$searchBox.addClass('searching');
|
||||
}, 50);
|
||||
});
|
||||
|
||||
// blur 時延遲移除 .searching，避免太早發生
|
||||
$input.on('blur', function () {
|
||||
setTimeout(() => {
|
||||
if (!$input.val().trim()) {
|
||||
$searchBox.removeClass('searching');
|
||||
if (
|
||||
$searchBox.length > 0 &&
|
||||
!$searchBox.is(e.target) &&
|
||||
$searchBox.has(e.target).length === 0 &&
|
||||
isInputEmpty()
|
||||
) {
|
||||
$searchBox.removeClass('searching');
|
||||
}
|
||||
}, 150);
|
||||
});
|
||||
|
||||
// focus 時延遲加 .searching
|
||||
$input.on('focus', function () {
|
||||
setTimeout(() => {
|
||||
$searchBox.addClass('searching');
|
||||
}, 50);
|
||||
});
|
||||
|
||||
// blur 時延遲移除 .searching
|
||||
$input.on('blur', function () {
|
||||
setTimeout(() => {
|
||||
if (isInputEmpty()) {
|
||||
$searchBox.removeClass('searching');
|
||||
}
|
||||
}, 150);
|
||||
});
|
||||
});
|
||||
// 當文件物件模型(DOM)載入後，執行init函數
|
||||
|
|
|
|||
|
|
@ -28,7 +28,17 @@
|
|||
<div class="w-ad-banner__pager-1 w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}" data-list="images" data-level="0">
|
||||
<li><button title="Slide {{slide_number}}"><span style="display: none;">Slide {{slide_number}}</span></button></li>
|
||||
</div>
|
||||
<ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.resume") %></p></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i><p style="display: none;"><%= I18n.t("ad_banner.pause") %></p></a></ul>
|
||||
<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>
|
||||
<p style="display: none;"><%= I18n.t("ad_banner.resume") %></p>
|
||||
</a>
|
||||
|
||||
<a role="radio" aria-checked="false" href="javascript:;" class="pause-slide" title="暫停播放" aria-label="暫停播放" aria-live="assertive">
|
||||
<i aria-hidden="true"></i>
|
||||
<p style="display: none;"><%= I18n.t("ad_banner.pause") %></p>
|
||||
</a>
|
||||
</ul>
|
||||
<ul class="button-mid">
|
||||
<i class="fa fa-angle-left prev-button" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
|
||||
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
|
||||
|
|
@ -51,7 +61,22 @@
|
|||
})
|
||||
$('[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');
|
||||
var $slides = $(this).find('.w-ba-banner__slide');
|
||||
var $pagerButtons = $container.find(".banner-pager button");
|
||||
|
||||
$pagerButtons.each(function(index) {
|
||||
var slideTitle = $slides.eq(index).data('cycle-title') || "";
|
||||
var ariaLabel = "第 " + (index + 1) + " 張投影片 " + slideTitle;
|
||||
$(this).attr({
|
||||
"aria-label": ariaLabel,
|
||||
"title": ariaLabel
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.w-ba-banner .controlplay .resume-slide.active i{
|
||||
|
|
|
|||
|
|
@ -13,12 +13,11 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
.universal-th-text{
|
||||
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
white-space: normal;
|
||||
}
|
||||
white-space: pre !important;
|
||||
}
|
||||
.universal-dropdown-menu {
|
||||
padding: 15px 18px;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
Loading…
Reference in New Issue