ken
/
nfu-biotech2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

This commit is contained in:
ken 2026-09-22 20:36:00 +08:00
parent 6ee6ff2abe
commit eff1fde007
2 changed files with 230 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

339
assets/javascripts/app.js
View File

@ -3377,138 +3377,259 @@ $(document).ready(function() {
// ORBITFRONT.member.equalHeight('.i-member-item-inner'); // ORBITFRONT.member.equalHeight('.i-member-item-inner');
// } // }
// }); // });
//banner英文
$(function() {
function fixBannerA11yByLang() {
setTimeout(function() {
var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
var isEn = pageLang.startsWith('en');
//banner英文 var i18n = {
$(function() { playControls: isEn ? 'Playback Controls' : '播放控制選項',
function fixBannerA11yByLang() { resume: isEn ? 'Play' : '繼續播放',
setTimeout(function() { pause: isEn ? 'Pause' : '暫停播放',
var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase(); prev: isEn ? 'Previous' : '上一張',
var isEn = pageLang.startsWith('en'); next: isEn ? 'Next' : '下一張',
slide: isEn ? 'Slide' : '第',
slideUnit: isEn ? '' : ' 張投影片'
};
var i18n = { $('.w-ba-banner').each(function() {
playControls: isEn ? 'Playback Controls' : '播放控制選項', var $banner = $(this);
resume: isEn ? 'Play' : '繼續播放',
pause: isEn ? 'Pause' : '暫停播放',
prev: isEn ? 'Previous' : '上一張',
next: isEn ? 'Next' : '下一張',
slide: isEn ? 'Slide' : '第',
slideUnit: isEn ? '' : ' 張投影片'
};
$('.w-ba-banner').each(function() { $banner.find('.controlplay').attr('aria-label', i18n.playControls);
var $banner = $(this);
// ✅ 播放控制選項 radiogroup label $banner.find('.resume-slide').attr({
$banner.find('.controlplay').attr('aria-label', i18n.playControls); 'aria-label': i18n.resume,
'title': i18n.resume
});
$banner.find('.resume-slide p').text(i18n.resume);
// ✅ 繼續播放按鈕 $banner.find('.pause-slide').attr({
$banner.find('.resume-slide').attr({ 'aria-label': i18n.pause,
'aria-label': i18n.resume, 'title': i18n.pause
'title': i18n.resume });
}); $banner.find('.pause-slide p').text(i18n.pause);
$banner.find('.resume-slide p').text(i18n.resume);
// ✅ 暫停播放按鈕 $banner.find('.prev-button').attr('aria-label', i18n.prev);
$banner.find('.pause-slide').attr({ $banner.find('.next-button').attr('aria-label', i18n.next);
'aria-label': i18n.pause,
'title': i18n.pause
});
$banner.find('.pause-slide p').text(i18n.pause);
// ✅ 上一張按鈕 var $slides = $banner.find('.w-ba-banner__slide');
$banner.find('.prev-button').attr('aria-label', i18n.prev); $banner.find('.banner-pager button').each(function(index) {
var slideTitle = $slides.eq(index).data('cycle-title') || '';
var ariaLabel = isEn
? i18n.slide + ' ' + (index + 1) + (slideTitle ? ' ' + slideTitle : '')
: i18n.slide + (index + 1) + i18n.slideUnit + (slideTitle ? ' ' + slideTitle : '');
$(this).attr({ 'aria-label': ariaLabel, 'title': ariaLabel });
});
});
// ✅ 下一張按鈕 // ✅ Cycle2 初始化後重新處理 Pager + 切換後播報當前圖片資訊
$banner.find('.next-button').attr('aria-label', i18n.next); $('.w-ba-banner .cycle-slideshow').on('cycle-post-initialize cycle-after', function(event) {
var $slideshow = $(this);
var $banner = $slideshow.closest('.w-ba-banner');
var $slides = $banner.find('.w-ba-banner__slide');
// ✅ Pager 按鈕 // 更新 Pager aria-label
var $slides = $banner.find('.w-ba-banner__slide'); $banner.find('.banner-pager button').each(function(index) {
$banner.find('.banner-pager button').each(function(index) { var slideTitle = $slides.eq(index).data('cycle-title') || '';
var slideTitle = $slides.eq(index).data('cycle-title') || ''; var ariaLabel = isEn
var ariaLabel = isEn ? i18n.slide + ' ' + (index + 1) + (slideTitle ? ' ' + slideTitle : '')
? i18n.slide + ' ' + (index + 1) + (slideTitle ? ' ' + slideTitle : '') : i18n.slide + (index + 1) + i18n.slideUnit + (slideTitle ? ' ' + slideTitle : '');
: i18n.slide + (index + 1) + i18n.slideUnit + (slideTitle ? ' ' + slideTitle : ''); $(this).attr({ 'aria-label': ariaLabel, 'title': ariaLabel });
$(this).attr({ });
'aria-label': ariaLabel,
'title': ariaLabel
});
});
});
// ✅ Cycle2 初始化後也重新處理 Pager（因為 pager 是動態產生的） // ✅ 問題1：cycle-after 時用 live region 播報當前圖片資訊
$('.w-ba-banner .cycle-slideshow').on('cycle-post-initialize cycle-after', function() { if (event.type === 'cycle-after') {
var $banner = $(this).closest('.w-ba-banner'); var opts = $slideshow.data('cycle.opts');
var $slides = $banner.find('.w-ba-banner__slide'); if (opts) {
$banner.find('.banner-pager button').each(function(index) { var currentIndex = opts.currSlide;
var slideTitle = $slides.eq(index).data('cycle-title') || ''; var $currentSlide = $slides.eq(currentIndex);
var ariaLabel = isEn var currentTitle = $currentSlide.data('cycle-title') || '';
? i18n.slide + ' ' + (index + 1) + (slideTitle ? ' ' + slideTitle : '') var currentAlt = $currentSlide.find('img').attr('alt') || '';
: i18n.slide + (index + 1) + i18n.slideUnit + (slideTitle ? ' ' + slideTitle : ''); var announceText = isEn
$(this).attr({ ? 'Slide ' + (currentIndex + 1) + ' of ' + $slides.length + (currentTitle ? ': ' + currentTitle : (currentAlt ? ': ' + currentAlt : ''))
'aria-label': ariaLabel, : '第 ' + (currentIndex + 1) + ' 張，共 ' + $slides.length + ' 張' + (currentTitle ? '：' + currentTitle : (currentAlt ? '：' + currentAlt : ''));
'title': ariaLabel
});
});
});
}, 800); var $announcer = $banner.find('.banner-announcer');
} if ($announcer.length === 0) {
$announcer = $('<div class="banner-announcer" aria-live="polite" aria-atomic="true" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;"></div>');
$banner.append($announcer);
}
$announcer.text('');
setTimeout(function() {
$announcer.text(announceText);
}, 100);
}
}
});
}, 800);
}
fixBannerA11yByLang();
});
fixBannerA11yByLang();
});
//bannercontrolplay //bannercontrolplay
$(function() { $(function() {
function fixBannerPlayPauseA11y() { function fixBannerPlayPauseA11y() {
setTimeout(function() { setTimeout(function() {
var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase(); var pageLang = ($('html').attr('lang') || 'zh-Hant').toLowerCase();
var isEn = pageLang.startsWith('en'); var isEn = pageLang.startsWith('en');
var i18n = { var i18n = {
resume: isEn ? 'Play' : '繼續播放', resume: isEn ? 'Play' : '繼續播放',
pause: isEn ? 'Pause' : '暫停播放' pause: isEn ? 'Pause' : '暫停播放'
}; };
$('.w-ba-banner').each(function() { $('.w-ba-banner').each(function() {
var $banner = $(this); var $banner = $(this);
var $controlplay = $banner.find('.controlplay'); var $controlplay = $banner.find('.controlplay');
var $slideshow = $banner.find('.cycle-slideshow');
// ✅ 把 radiogroup 改為一般容器 $controlplay.removeAttr('role aria-label');
$controlplay.removeAttr('role aria-label');
// ✅ 繼續播放按鈕 var $resume = $banner.find('.resume-slide');
var $resume = $banner.find('.resume-slide'); $resume
$resume .attr('role', 'button')
.attr('role', 'button') .attr('aria-pressed', $resume.hasClass('active') ? 'true' : 'false')
.attr('aria-pressed', $resume.hasClass('active') ? 'true' : 'false') .attr('aria-label', i18n.resume)
.attr('aria-label', i18n.resume) .attr('title', i18n.resume)
.attr('title', i18n.resume) .removeAttr('aria-checked aria-live');
.removeAttr('aria-checked aria-live');
// ✅ 暫停播放按鈕 var $pause = $banner.find('.pause-slide');
var $pause = $banner.find('.pause-slide'); $pause
$pause .attr('role', 'button')
.attr('role', 'button') .attr('aria-pressed', $pause.hasClass('active') ? 'true' : 'false')
.attr('aria-pressed', $pause.hasClass('active') ? 'true' : 'false') .attr('aria-label', i18n.pause)
.attr('aria-label', i18n.pause) .attr('title', i18n.pause)
.attr('title', i18n.pause) .removeAttr('aria-checked aria-live');
.removeAttr('aria-checked aria-live');
// ✅ 點擊後同步 aria-pressed $resume.off('click.bannerA11y').on('click.bannerA11y', function() {
$resume.off('click.bannerA11y').on('click.bannerA11y', function() { $resume.attr('aria-pressed', 'true');
$resume.attr('aria-pressed', 'true'); $pause.attr('aria-pressed', 'false');
$pause.attr('aria-pressed', 'false'); });
});
$pause.off('click.bannerA11y').on('click.bannerA11y', function() { $pause.off('click.bannerA11y').on('click.bannerA11y', function() {
$pause.attr('aria-pressed', 'true'); $pause.attr('aria-pressed', 'true');
$resume.attr('aria-pressed', 'false'); $resume.attr('aria-pressed', 'false');
}); });
});
}, 800); // ✅ 問題2：focus 時動態讀出當前播放狀態
} $resume.off('focus.bannerStatus').on('focus.bannerStatus', function() {
var isPlaying = !$slideshow.hasClass('cycle-paused');
var statusText = isEn
? 'Play button. Current status: ' + (isPlaying ? 'Playing' : 'Paused')
: '繼續播放按鈕。目前狀態：' + (isPlaying ? '播放中' : '已暫停');
$(this).attr('aria-label', statusText);
});
$resume.off('blur.bannerStatus').on('blur.bannerStatus', function() {
$(this).attr('aria-label', i18n.resume);
});
fixBannerPlayPauseA11y(); $pause.off('focus.bannerStatus').on('focus.bannerStatus', function() {
var isPlaying = !$slideshow.hasClass('cycle-paused');
var statusText = isEn
? 'Pause button. Current status: ' + (isPlaying ? 'Playing' : 'Paused')
: '暫停播放按鈕。目前狀態：' + (isPlaying ? '播放中' : '已暫停');
$(this).attr('aria-label', statusText);
});
$pause.off('blur.bannerStatus').on('blur.bannerStatus', function() {
$(this).attr('aria-label', i18n.pause);
});
});
}, 800);
}
fixBannerPlayPauseA11y();
});
//banner進入自動暫停
$(function() {
function fixBannerFocusPauseA11y() {
setTimeout(function() {
$('.w-ba-banner').each(function() {
var $banner = $(this);
var $slideshow = $banner.find('.cycle-slideshow');
var $pauseBtn = $banner.find('.pause-slide');
var $resumeBtn = $banner.find('.resume-slide');
var manuallyPaused = false;
// ✅ 焦點進入輪播區域時自動暫停
$banner.on('focusin', function() {
$slideshow.cycle('pause');
$pauseBtn.addClass('active').attr('aria-checked', 'true');
$resumeBtn.removeClass('active').attr('aria-checked', 'false');
});
// ✅ 若使用者手動按下暫停，焦點離開後不自動恢復
$pauseBtn.on('click', function() {
manuallyPaused = true;
});
$resumeBtn.on('click', function() {
manuallyPaused = false;
});
// ✅ 覆寫 focusout 加入 manuallyPaused 判斷
$banner.off('focusout').on('focusout', function() {
setTimeout(function() {
if (!$banner.find(':focus').length && !manuallyPaused) {
$slideshow.cycle('resume');
$resumeBtn.addClass('active').attr('aria-checked', 'true');
$pauseBtn.removeClass('active').attr('aria-checked', 'false');
}
}, 150);
});
});
}, 800);
}
fixBannerFocusPauseA11y();
});
//googlemap加title
function fixGoogleMapIframeTitle(){
setTimeout(function(){
var pageLang = (document.documentElement.getAttribute('lang') || '').toLowerCase();
var isEnglish = pageLang.indexOf('en') === 0; // lang="en"、"en-us" 都算英文頁
$('iframe[src*="google.com/maps/embed"]').each(function(){
var $iframe = $(this);
var currentTitle = ($iframe.attr('title') || '').trim();
// 只處理明顯是佔位文字、空白、或沒有 title 的 iframe，
// 已經有具體地點名稱的（例如「紅館」）不會被動到
if (currentTitle !== '' && currentTitle.toLowerCase() !== 'googleoauth') {
return;
}
// 優先找上層容器上手動標記的地點名稱
var name = $iframe.closest('[data-map-name]').data('map-name');
// 找不到的話，往上找最接近的標題文字（h1~h6 或粗體）當地點名稱
if (!name) {
var $context = $iframe.closest('section, div').prevAll('h1,h2,h3,h4,h5,h6,strong').first();
name = $context.length ? $context.text().trim() : '';
}
var newTitle;
if (isEnglish) {
newTitle = name ? ('Google Map: location of ' + name)
: 'Google Map (embedded map, please manually confirm and fill in the actual location name)';
} else {
newTitle = name ? ('Google地圖：' + name + ' 位置')
: 'Google地圖（嵌入地圖，請人工確認並填寫實際地點名稱）';
}
$iframe.attr('title', newTitle);
});
}, 800);
}
$(document).ready(function(){
fixGoogleMapIframeTitle();
}); });
}(jQuery, window)); }(jQuery, window));

1
assets/stylesheets/template/modules/event_news.scss
View File

@ -492,7 +492,6 @@
.i-annc__list { .i-annc__list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center;
} }
.i-annc__title { .i-annc__title {
font-family: $main-font; font-family: $main-font;