update
This commit is contained in:
parent
c9b96eea16
commit
6bd265047c
|
|
@ -1101,56 +1101,59 @@ $(function() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// E. 重新計算標題 (關鍵邏輯:若 hasOriginalTitle 為真,則不進入此區塊)
|
// E. 重新計算標題 (關鍵邏輯:若 hasOriginalTitle 為真,則不進入此區塊)
|
||||||
if (!hasOriginalTitle) {
|
if (!hasOriginalTitle) {
|
||||||
if (linkText === "" && $img.length > 0) {
|
if (linkText === "" && $img.length > 0) {
|
||||||
var rawAlt = ($img.attr('alt') || '').trim();
|
var rawAlt = ($img.attr('alt') || '').trim();
|
||||||
var forbidden = ['這是一張圖片', '圖片', 'image', 'photo', '圖', ''];
|
var forbidden = ['這是一張圖片', '圖片', 'image', 'photo', '圖', ''];
|
||||||
var imgAlt = forbidden.some(function(txt) { return rawAlt.toLowerCase() === txt; })
|
var imgAlt = forbidden.some(function(txt) { return rawAlt.toLowerCase() === txt; })
|
||||||
? ($a.attr('aria-label') || i18n.link) : rawAlt;
|
? ($a.attr('aria-label') || i18n.link) : rawAlt;
|
||||||
|
|
||||||
var fileInfo = fileExt ? '[' + fileExt.toUpperCase() + '] ' : '';
|
var fileInfo = fileExt ? '[' + fileExt.toUpperCase() + '] ' : '';
|
||||||
$a.attr('title', (fileInfo + imgAlt + " " + windowTask).trim());
|
$a.attr('title', (fileInfo + imgAlt + " " + windowTask).trim());
|
||||||
$img.attr('alt', imgAlt);
|
$img.attr('alt', imgAlt);
|
||||||
}
|
}
|
||||||
else if (linkText !== "") {
|
else if (linkText !== "") {
|
||||||
if (fileExt !== "" || hasBadSymbol || currentTitle === "" || currentTitle.includes('/uploads/')) {
|
if (fileExt !== "" || hasBadSymbol || currentTitle === "" || currentTitle.includes('/uploads/')) {
|
||||||
if (fileExt !== "") {
|
if (fileExt !== "") {
|
||||||
$a.attr('title', linkText + " ." + fileExt + " " + windowTask);
|
$a.attr('title', linkText + " ." + fileExt + " " + windowTask);
|
||||||
} else {
|
} else {
|
||||||
$a.attr('title', windowTask);
|
$a.attr('title', windowTask);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// ✅ 符合 HM1240404E:title 不應與連結文字或圖片 alt 重複
|
// ✅ 符合 HM1240404E:title 不應與連結文字或圖片 alt 重複
|
||||||
if (hasOriginalTitle && currentTitle !== "") {
|
if (hasOriginalTitle && currentTitle !== "") {
|
||||||
var titleWithoutWindow = currentTitle
|
var titleWithoutWindow = currentTitle
|
||||||
.replace('(在本視窗開啟)', '')
|
.replace('(在本視窗開啟)', '')
|
||||||
.replace('(在新視窗開啟)', '')
|
.replace('(在新視窗開啟)', '')
|
||||||
.replace('Open in this window', '')
|
.replace('Open in this window', '')
|
||||||
.replace('Open in new window', '')
|
.replace('Open in new window', '')
|
||||||
.replace('另開新視窗前往', '')
|
.replace('另開新視窗前往', '')
|
||||||
.replace('另開新視窗', '')
|
.replace('另開新視窗', '')
|
||||||
.trim();
|
.trim();
|
||||||
|
|
||||||
// ✅ title 去掉開窗字串後,若與連結文字或圖片原始 alt 相同,則只保留開窗提示
|
// ✅ title 去掉開窗字串後,若與連結文字或圖片原始 alt 相同,則只保留開窗提示
|
||||||
if (
|
// ✅ 新增:若 linkText 包含副檔名且 title 也是同樣檔名,也只保留開窗提示
|
||||||
(titleWithoutWindow === linkText && linkText !== i18n.link) ||
|
if (
|
||||||
(imgAltOriginal !== '' && titleWithoutWindow === imgAltOriginal)
|
(titleWithoutWindow === linkText && linkText !== i18n.link) ||
|
||||||
) {
|
(imgAltOriginal !== '' && titleWithoutWindow === imgAltOriginal) ||
|
||||||
$a.attr('title', windowTask);
|
(fileExt !== '' && linkText.toLowerCase().endsWith('.' + fileExt) && titleWithoutWindow === linkText)
|
||||||
}
|
) {
|
||||||
|
$a.attr('title', windowTask);
|
||||||
// ✅ 最終清理:若 title 出現空括號 () 則移除並補上正確開窗提示
|
return; // ✅ 加上 return,避免繼續執行後面的清理邏輯造成二次污染
|
||||||
var finalTitle = ($a.attr('title') || '').trim();
|
|
||||||
if (finalTitle.includes('()')) {
|
|
||||||
finalTitle = finalTitle.replace(/\(\)/g, '').trim();
|
|
||||||
$a.attr('title', finalTitle + ' ' + windowTask);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ✅ 最終清理:若 title 出現空括號 () 則移除並補上正確開窗提示
|
||||||
|
var finalTitle = ($a.attr('title') || '').trim();
|
||||||
|
if (finalTitle.includes('()')) {
|
||||||
|
finalTitle = finalTitle.replace(/\(\)/g, '').trim();
|
||||||
|
$a.attr('title', finalTitle + ' ' + windowTask);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// F. 最終清理:移除冗餘 label,避免螢幕閱讀器唸兩次
|
// F. 最終清理:移除冗餘 label,避免螢幕閱讀器唸兩次
|
||||||
$a.removeAttr('aria-label');
|
$a.removeAttr('aria-label');
|
||||||
});
|
});
|
||||||
|
|
@ -1184,6 +1187,47 @@ $(function() {
|
||||||
fixAccessibilityAll();
|
fixAccessibilityAll();
|
||||||
}, 800);
|
}, 800);
|
||||||
});
|
});
|
||||||
|
// 修正漢堡選單按鈕無障礙
|
||||||
|
$(function() {
|
||||||
|
function fixNavbarToggleA11y() {
|
||||||
|
var isEn = $('html').attr('lang') === 'en';
|
||||||
|
var label = isEn ? '開啟或關閉導覽選單' : '開啟或關閉導覽選單';
|
||||||
|
|
||||||
|
$('.navbar-toggle').each(function() {
|
||||||
|
var $btn = $(this);
|
||||||
|
|
||||||
|
// 修正 title
|
||||||
|
$btn.attr('title', label);
|
||||||
|
|
||||||
|
// 修正 sr-only 文字(原本是 "Toggle navigation")
|
||||||
|
var $sr = $btn.find('.sr-only');
|
||||||
|
if ($sr.length) {
|
||||||
|
$sr.text(label);
|
||||||
|
} else {
|
||||||
|
$btn.prepend('<span class="sr-only">' + label + '</span>');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 補上 aria-label
|
||||||
|
$btn.attr('aria-label', label);
|
||||||
|
|
||||||
|
// 補上 aria-expanded(依據目前是否展開)
|
||||||
|
if (!$btn.attr('aria-expanded')) {
|
||||||
|
var isExpanded = !$btn.hasClass('collapsed');
|
||||||
|
$btn.attr('aria-expanded', isExpanded ? 'true' : 'false');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 點擊時同步更新 aria-expanded
|
||||||
|
$btn.off('click.navA11y').on('click.navA11y', function() {
|
||||||
|
setTimeout(function() {
|
||||||
|
var isExpanded = !$('.navbar-toggle').hasClass('collapsed');
|
||||||
|
$('.navbar-toggle').attr('aria-expanded', isExpanded ? 'true' : 'false');
|
||||||
|
}, 50);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(fixNavbarToggleA11y, 500);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
$(function() {
|
$(function() {
|
||||||
|
|
@ -2313,7 +2357,7 @@ $(document).ready(function() {
|
||||||
if ($(window).width() <769) {
|
if ($(window).width() <769) {
|
||||||
$('.modules-menu-level-0').after($('.header-nav'));
|
$('.modules-menu-level-0').after($('.header-nav'));
|
||||||
}else{
|
}else{
|
||||||
$('.navbar-header').before($('.header-nav'));
|
$('.navbar-header').after($('.header-nav'));
|
||||||
};
|
};
|
||||||
$('.sitemenu-vertical .sitemenu-dropdown-toggle').click(function(){
|
$('.sitemenu-vertical .sitemenu-dropdown-toggle').click(function(){
|
||||||
$('.sitemenu-vertical .dropdown-menu').slideToggle();
|
$('.sitemenu-vertical .dropdown-menu').slideToggle();
|
||||||
|
|
@ -2381,7 +2425,7 @@ $(document).ready(function() {
|
||||||
|
|
||||||
$('.modules-menu-level-0').after($('.header-nav'));
|
$('.modules-menu-level-0').after($('.header-nav'));
|
||||||
}else{
|
}else{
|
||||||
$('.navbar-header').before($('.header-nav'));
|
$('.navbar-header').after($('.header-nav'));
|
||||||
};
|
};
|
||||||
|
|
||||||
if ($(window).width() > 821) {
|
if ($(window).width() > 821) {
|
||||||
|
|
@ -3166,6 +3210,16 @@ $(document).ready(function () {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
$('.internal-page .ad-banner-widget-0 .w-ad-banner__image').attr('alt', '');
|
$('.internal-page .ad-banner-widget-0 .w-ad-banner__image').attr('alt', '');
|
||||||
}, 800);
|
}, 800);
|
||||||
|
setTimeout(function() {
|
||||||
|
var found = false;
|
||||||
|
$('.navbar-header a[accesskey="M"]').each(function() {
|
||||||
|
if (found) {
|
||||||
|
$(this).remove();
|
||||||
|
} else {
|
||||||
|
found = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
// 執行 member等高計算,目前改用flexbox故mark掉 by ika 20160105
|
// 執行 member等高計算,目前改用flexbox故mark掉 by ika 20160105
|
||||||
// $(window).load(function() {
|
// $(window).load(function() {
|
||||||
// if ($('.index-member-3').length && $(window).width() > 992) {
|
// if ($('.index-member-3').length && $(window).width() > 992) {
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@ a[accesskey] {
|
||||||
a[accesskey] {
|
a[accesskey] {
|
||||||
position: relative!important;
|
position: relative!important;
|
||||||
margin-left: -0.9375em;
|
margin-left: -0.9375em;
|
||||||
color: transparent !important;
|
color: transparent ;
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
.go-back-top {
|
.go-back-top {
|
||||||
background:#00000080;
|
background:#2760b0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.625em 0.75em;
|
padding: 0.625em 0.75em;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
clear: both;
|
clear: both;
|
||||||
color: #E4E4E4;
|
color: #E4E4E4;
|
||||||
background: url(/assets/bg_footer.png) repeat #24436E;
|
background: url(/assets/bg_footer.png) repeat #183864;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 2em 0;
|
padding: 2em 0;
|
||||||
color: $theme-color-main;
|
color: $theme-color-main;
|
||||||
|
|
|
||||||
|
|
@ -95,6 +95,9 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
@media(max-width:768px){
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
ul{
|
ul{
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -139,14 +142,6 @@
|
||||||
margin-top: 1em!important;
|
margin-top: 1em!important;
|
||||||
margin-bottom: 1em!important;
|
margin-bottom: 1em!important;
|
||||||
}
|
}
|
||||||
@media (min-width: 769px){
|
|
||||||
float: none!important;
|
|
||||||
}
|
|
||||||
// @media (max-width: $screen-sm) {
|
|
||||||
// width: 100%;
|
|
||||||
// display: flex;
|
|
||||||
// flex-flow: row-reverse;
|
|
||||||
// }
|
|
||||||
.navbar-brand {
|
.navbar-brand {
|
||||||
line-height: 2.125em;
|
line-height: 2.125em;
|
||||||
color: $theme-color-main;
|
color: $theme-color-main;
|
||||||
|
|
|
||||||
|
|
@ -2010,6 +2010,9 @@ a.w-annc__more.btn.btn-primary.pull-right {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
background: #2f4877!important;
|
background: #2f4877!important;
|
||||||
|
.en{
|
||||||
|
color: #f2f2f2!important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.w-annc__more-wrap{
|
.w-annc__more-wrap{
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
|
|
|
||||||
|
|
@ -21,21 +21,23 @@
|
||||||
|
|
||||||
<div class="outdropdowns kenjohn">
|
<div class="outdropdowns kenjohn">
|
||||||
<div class="dropdowns">
|
<div class="dropdowns">
|
||||||
<div class="header-nav container no-print">
|
<div class="container">
|
||||||
<a id="accesskey_top" accesskey="U" title="accesskey top" href="#" title="Toolbar">:::</a>
|
<div class="navbar-header">
|
||||||
{{header-data}}
|
<a title="{{site_title_1}}" class="navbar-brand" href="{{home_link_1}}"><img class="site-logo" src="{{logo_url_1}}" alt="site-logo"></a>
|
||||||
</div>
|
<script>$(document).ready(function(){var url =$('.site-logo').eq(0).attr('src');if(url == "/assets/default-site-logo.png"){$('.navbar-brand').eq(0).remove();};if($('.navbar-brand').length == 2){$('.site-logo').css('height','auto')};$('.site-logo').eq(0).css('margin-right',0);$('.navbar-brand').css('padding-right',0)})</script>
|
||||||
<div class="container navbar-header">
|
<a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a>
|
||||||
<a title="{{site_title_1}}" class="navbar-brand" href="{{home_link_1}}"><img class="site-logo" src="{{logo_url_1}}" alt="site-logo"></a>
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#layout-navigation">
|
||||||
<script>$(document).ready(function(){var url =$('.site-logo').eq(0).attr('src');if(url == "/assets/default-site-logo.png"){$('.navbar-brand').eq(0).remove();};if($('.navbar-brand').length == 2){$('.site-logo').css('height','auto')};$('.site-logo').eq(0).css('margin-right',0);$('.navbar-brand').css('padding-right',0)})</script>
|
<span class="sr-only">Toggle navigation</span>
|
||||||
<a title="{{site_title}}" class="navbar-brand" href="{{home_link}}"><img class="site-logo" src="{{logo_url}}" alt="site-logo"> {{site_name}}</a>
|
<span class="icon-bar icon-bar-top"></span>
|
||||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#layout-navigation">
|
<span class="icon-bar icon-bar-middle"></span>
|
||||||
<span class="sr-only">Toggle navigation</span>
|
<span class="icon-bar icon-bar-bottom"></span>
|
||||||
<span class="icon-bar icon-bar-top"></span>
|
</button>
|
||||||
<span class="icon-bar icon-bar-middle"></span>
|
|
||||||
<span class="icon-bar icon-bar-bottom"></span>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="header-nav no-print">
|
||||||
|
<a id="accesskey_top" accesskey="U" title="accesskey top" href="#" title="Toolbar">:::</a>
|
||||||
|
{{header-data}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="collapse navbar-collapse modules-menu" id="layout-navigation">
|
<div class="collapse navbar-collapse modules-menu" id="layout-navigation">
|
||||||
<a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>
|
<a id="accesskey_menu" title="accesskey menu" accesskey="M" href="#" title="Main menu">:::</a>
|
||||||
<%= render_menu %>
|
<%= render_menu %>
|
||||||
|
|
|
||||||
|
|
@ -17,8 +17,7 @@
|
||||||
<ul class="i-archive-files-list" data-list="files" data-level="2">
|
<ul class="i-archive-files-list" data-list="files" data-level="2">
|
||||||
<li>
|
<li>
|
||||||
<span class="description" style="clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
|
<span class="description" style="clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
|
||||||
<a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
|
<a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}<span class="label label-primary {{file-type}}">{{file-type}}</span></a>
|
||||||
<span class="label label-primary {{file-type}}">{{file-type}}</span>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -19,8 +19,7 @@
|
||||||
<ul class="i-archive-files-list" data-list="files" data-level="2">
|
<ul class="i-archive-files-list" data-list="files" data-level="2">
|
||||||
<li>
|
<li>
|
||||||
<span class="description" style="clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
|
<span class="description" style="clear: both;widivh: 100%;position: relative;display: block;">{{description}}</span>
|
||||||
<a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}</a>
|
<a href="{{file-url}}" class="i-archive-files-item" target="{{target}}" title="{{file-name}}">{{file-name}}<span class="label label-primary {{file-type}}">{{file-type}}</span></a>
|
||||||
<span class="label label-primary {{file-type}}">{{file-type}}</span>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,14 @@
|
||||||
<div class="marquee-1" module="text_marquee" data-ps="">
|
<div class="marquee-1" module="text_marquee" data-ps="">
|
||||||
<div class="marquee-1-controls">
|
<div class="marquee-1-controls">
|
||||||
<ul class="controlplay" role="radiogroup" aria-label="播放控制選項">
|
<div class="controlplay">
|
||||||
<a role="radio" aria-checked="true" href="javascript:;" class="resume-slide active" title="繼續播放" aria-label="繼續播放" aria-live="assertive">
|
<button type="button" class="marquee-toggle-btn" title="暫停跑馬燈" aria-label="暫停跑馬燈" aria-pressed="false">
|
||||||
<i aria-hidden="true"></i>
|
<i class="marquee-icon" aria-hidden="true"></i>
|
||||||
<p style="display: none;">繼續播放</p>
|
<span class="visually-hidden">暫停跑馬燈</span>
|
||||||
</a>
|
</button>
|
||||||
<a role="radio" aria-checked="false" href="javascript:;" class="pause-slide" title="暫停播放" aria-label="暫停播放" aria-live="assertive">
|
</div>
|
||||||
<i aria-hidden="true"></i>
|
|
||||||
<p style="display: none;">暫停播放</p>
|
|
||||||
</a>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="marquee" data-level="0" data-list="texts" aria-live="polite" aria-atomic="true">
|
<ul class="marquee" data-level="0" data-list="texts" aria-live="polite" aria-atomic="true" aria-label="跑馬燈公告">
|
||||||
<li>{{content}}</li>
|
<li>{{content}}</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -26,8 +22,7 @@
|
||||||
var isPaused = false;
|
var isPaused = false;
|
||||||
var timer = null;
|
var timer = null;
|
||||||
|
|
||||||
var $resumeBtn = main_div.find(".resume-slide");
|
var $toggleBtn = main_div.find(".marquee-toggle-btn");
|
||||||
var $pauseBtn = main_div.find(".pause-slide");
|
|
||||||
var $marquee = main_div.find("ul.marquee");
|
var $marquee = main_div.find("ul.marquee");
|
||||||
|
|
||||||
main_div.find("ul.marquee li").hide();
|
main_div.find("ul.marquee li").hide();
|
||||||
|
|
@ -39,7 +34,7 @@
|
||||||
current_text = (current_text > total_texts ? 0 : current_text);
|
current_text = (current_text > total_texts ? 0 : current_text);
|
||||||
last_text = (current_text === 0 ? total_texts : current_text - 1);
|
last_text = (current_text === 0 ? total_texts : current_text - 1);
|
||||||
|
|
||||||
var speed = $(".marquee > li > a").eq(current_text).attr("speed") || 3000;
|
var speed = main_div.find(".marquee > li > a").eq(current_text).attr("speed") || 3000;
|
||||||
|
|
||||||
main_div.find("ul.marquee li").eq(last_text).slideUp(500);
|
main_div.find("ul.marquee li").eq(last_text).slideUp(500);
|
||||||
main_div.find("ul.marquee li").eq(current_text).slideDown(500);
|
main_div.find("ul.marquee li").eq(current_text).slideDown(500);
|
||||||
|
|
@ -52,30 +47,51 @@
|
||||||
function pause() {
|
function pause() {
|
||||||
isPaused = true;
|
isPaused = true;
|
||||||
clearTimeout(timer);
|
clearTimeout(timer);
|
||||||
$pauseBtn.attr("aria-checked", "true").addClass("active");
|
|
||||||
$resumeBtn.attr("aria-checked", "false").removeClass("active");
|
|
||||||
// aria-live 暫停時設 off,避免螢幕報讀繼續讀
|
|
||||||
$marquee.attr("aria-live", "off");
|
$marquee.attr("aria-live", "off");
|
||||||
|
|
||||||
|
// 切換按鈕狀態:aria-pressed="true" 表示目前已暫停
|
||||||
|
$toggleBtn
|
||||||
|
.attr("aria-pressed", "true")
|
||||||
|
.attr("aria-label", "繼續跑馬燈")
|
||||||
|
.attr("title", "繼續跑馬燈")
|
||||||
|
.find("span.visually-hidden").text("繼續跑馬燈");
|
||||||
|
$toggleBtn.addClass("is-paused");
|
||||||
|
|
||||||
|
// 暫停後讓目前顯示的 li 內連結可被 Tab
|
||||||
|
main_div.find("ul.marquee li").removeAttr("tabindex");
|
||||||
|
main_div.find("ul.marquee li:visible a").attr("tabindex", "0");
|
||||||
|
main_div.find("ul.marquee li:hidden a").attr("tabindex", "-1");
|
||||||
}
|
}
|
||||||
|
|
||||||
function resume() {
|
function resume() {
|
||||||
isPaused = false;
|
isPaused = false;
|
||||||
$resumeBtn.attr("aria-checked", "true").addClass("active");
|
|
||||||
$pauseBtn.attr("aria-checked", "false").removeClass("active");
|
|
||||||
$marquee.attr("aria-live", "polite");
|
$marquee.attr("aria-live", "polite");
|
||||||
var speed = $(".marquee > li > a").eq(current_text).attr("speed") || 3000;
|
|
||||||
|
// 切換按鈕狀態:aria-pressed="false" 表示目前播放中
|
||||||
|
$toggleBtn
|
||||||
|
.attr("aria-pressed", "false")
|
||||||
|
.attr("aria-label", "暫停跑馬燈")
|
||||||
|
.attr("title", "暫停跑馬燈")
|
||||||
|
.find("span.visually-hidden").text("暫停跑馬燈");
|
||||||
|
$toggleBtn.removeClass("is-paused");
|
||||||
|
|
||||||
|
// 恢復播放,li 內連結不在 Tab 順序
|
||||||
|
main_div.find("ul.marquee li").removeAttr("tabindex");
|
||||||
|
main_div.find("ul.marquee li a").attr("tabindex", "-1");
|
||||||
|
|
||||||
|
var speed = main_div.find(".marquee > li > a").eq(current_text).attr("speed") || 3000;
|
||||||
timer = setTimeout(textTransform, speed);
|
timer = setTimeout(textTransform, speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 播放/暫停按鈕
|
// 單一切換按鈕
|
||||||
$resumeBtn.on("click", function(e) {
|
$toggleBtn.on("click keydown", function(e) {
|
||||||
|
if (e.type === "keydown" && e.keyCode !== 13 && e.keyCode !== 32) return;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
if (isPaused) resume();
|
if (isPaused) {
|
||||||
});
|
resume();
|
||||||
|
} else {
|
||||||
$pauseBtn.on("click", function(e) {
|
pause();
|
||||||
e.preventDefault();
|
}
|
||||||
if (!isPaused) pause();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
// 焦點進入跑馬燈區域時自動暫停
|
// 焦點進入跑馬燈區域時自動暫停
|
||||||
|
|
@ -93,8 +109,8 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
// 初始狀態:播放中
|
// 初始狀態:播放中
|
||||||
$resumeBtn.addClass("active").attr("aria-checked", "true");
|
main_div.find("ul.marquee li").removeAttr("tabindex");
|
||||||
$pauseBtn.attr("aria-checked", "false");
|
main_div.find("ul.marquee li a").attr("tabindex", "-1");
|
||||||
|
|
||||||
timer = setTimeout(textTransform, 500);
|
timer = setTimeout(textTransform, 500);
|
||||||
})();
|
})();
|
||||||
|
|
@ -118,7 +134,7 @@
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.marquee-1 .controlplay a {
|
.marquee-1 .controlplay button.marquee-toggle-btn {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
@ -128,53 +144,47 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-decoration: none;
|
|
||||||
transition: background 0.15s;
|
transition: background 0.15s;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.marquee-1 .controlplay a:hover,
|
.marquee-1 .controlplay button.marquee-toggle-btn:hover,
|
||||||
.marquee-1 .controlplay a:focus {
|
.marquee-1 .controlplay button.marquee-toggle-btn:focus {
|
||||||
background: #f0f0f0;
|
background: #f0f0f0;
|
||||||
outline: 2px solid #005fcc;
|
outline: 2px solid #005fcc;
|
||||||
outline-offset: 2px;
|
outline-offset: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* resume icon:play 三角形 */
|
/* 播放中:顯示 pause icon(兩條直線) */
|
||||||
.marquee-1 .controlplay .resume-slide i::before {
|
.marquee-1 .controlplay button.marquee-toggle-btn:not(.is-paused) .marquee-icon {
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 4px 0 4px 8px;
|
|
||||||
border-color: transparent transparent transparent #555;
|
|
||||||
margin-left: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* pause icon:兩條直線 */
|
|
||||||
.marquee-1 .controlplay .pause-slide i {
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.marquee-1 .controlplay .pause-slide i::before,
|
.marquee-1 .controlplay button.marquee-toggle-btn:not(.is-paused) .marquee-icon::before,
|
||||||
.marquee-1 .controlplay .pause-slide i::after {
|
.marquee-1 .controlplay button.marquee-toggle-btn:not(.is-paused) .marquee-icon::after {
|
||||||
content: '';
|
content: '';
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 3px;
|
width: 3px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background: #555;
|
background: #ff4500;
|
||||||
border-radius: 1px;
|
border-radius: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* active 狀態顏色 */
|
/* 已暫停:顯示 play icon(三角形) */
|
||||||
.marquee-1 .controlplay .resume-slide.active i::before {
|
.marquee-1 .controlplay button.marquee-toggle-btn.is-paused .marquee-icon::before {
|
||||||
|
content: '';
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-width: 5px 0 5px 10px;
|
||||||
border-color: transparent transparent transparent #32D9C3;
|
border-color: transparent transparent transparent #32D9C3;
|
||||||
|
margin-left: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.marquee-1 .controlplay .pause-slide.active i::before,
|
.marquee-1 .controlplay button.marquee-toggle-btn.is-paused .marquee-icon::after {
|
||||||
.marquee-1 .controlplay .pause-slide.active i::after {
|
display: none;
|
||||||
background: #ff4500;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<li class="widget-content">
|
<li class="widget-content">
|
||||||
<div class="link-img-wrap{{display_image}}">
|
<div class="link-img-wrap{{display_image}}">
|
||||||
<a href="{{link_to_show}}" target="{{target}}" title="{{img_description}}">
|
<a href="{{link_to_show}}" target="{{target}}" title="{{img_description}}">
|
||||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
<img src="{{img_src}}" alt="{{img_description}}">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<span data-list="statuses" data-level="1">
|
<span data-list="statuses" data-level="1">
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
<div class="link-img-wrap{{display_image}}">
|
<div class="link-img-wrap{{display_image}}">
|
||||||
<a href="{{link_to_show}}" target="{{target}}" title="{{img_description}}">
|
<a href="{{link_to_show}}" target="{{target}}" title="{{img_description}}">
|
||||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
<img src="{{img_src}}" alt="{{img_description}}">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="widget-content-title">
|
<div class="widget-content-title">
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<li class="widget-content widget-content-horizontal ">
|
<li class="widget-content widget-content-horizontal ">
|
||||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||||
<div class="link-img-wrap{{display_image}}">
|
<div class="link-img-wrap{{display_image}}">
|
||||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
<img src="{{img_src}}" alt="{{img_description}}">
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="widget-content-title">
|
<div class="widget-content-title">
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<li class="widget-content widget-content-horizontal col-sm-6">
|
<li class="widget-content widget-content-horizontal col-sm-6">
|
||||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||||
<div class="link-img-wrap{{display_image}}">
|
<div class="link-img-wrap{{display_image}}">
|
||||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
<img src="{{img_src}}" alt="{{img_description}}">
|
||||||
</div>
|
</div>
|
||||||
<div class="widget-content-title">
|
<div class="widget-content-title">
|
||||||
<a class="" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</a>
|
<a class="" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">{{title}}</a>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
<div class="hex-border">
|
<div class="hex-border">
|
||||||
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
<a href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||||
<div class="link-img-wrap{{display_image}}">
|
<div class="link-img-wrap{{display_image}}">
|
||||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
<img src="{{img_src}}" alt="{{img_description}}">
|
||||||
</div>
|
</div>
|
||||||
<a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}" onclick="{{onclick}}">{{title}}</a>
|
<a class="widget-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}" onclick="{{onclick}}">{{title}}</a>
|
||||||
<span data-list="statuses" data-level="1">
|
<span data-list="statuses" data-level="1">
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<li class="index-content">
|
<li class="index-content">
|
||||||
<a class="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
<a class="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||||
<div class="link-img-wrap{{display_image}}">
|
<div class="link-img-wrap{{display_image}}">
|
||||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
<img src="{{img_src}}" alt="{{img_description}}">
|
||||||
</div>
|
</div>
|
||||||
<h4>
|
<h4>
|
||||||
{{title}}
|
{{title}}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
<li class="index-content col-md-4 col-sm-4">
|
<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="index-content-title" href="{{link_to_show}}" target="{{target}}" title="{{title_text}}">
|
||||||
<div class="link-img-wrap{{display_image}}">
|
<div class="link-img-wrap{{display_image}}">
|
||||||
<img src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
<img src="{{img_src}}" alt="{{img_description}}">
|
||||||
</div>
|
</div>
|
||||||
<h4>
|
<h4>
|
||||||
<span class="link-title">
|
<span class="link-title">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue