245 lines
6.7 KiB
Plaintext
245 lines
6.7 KiB
Plaintext
<div class="w-annc widget-announcement-30">
|
||
<h2 class="w-annc__widget-title">
|
||
<span>{{widget-title}}</span>
|
||
</h2>
|
||
|
||
<div class="w-annc30-wrap">
|
||
<!-- 左右箭頭 -->
|
||
<button class="w-annc30-prev" type="button" title="上一則" aria-label="上一則" style="display:none;">
|
||
<i class="fa fa-angle-left" aria-hidden="true"></i>
|
||
</button>
|
||
<button class="w-annc30-next" type="button" title="下一則" aria-label="下一則" style="display:none;">
|
||
<i class="fa fa-angle-right" aria-hidden="true"></i>
|
||
</button>
|
||
|
||
<div class="w-annc30-overflow">
|
||
<ul class="w-annc__list w-annc30-track" data-level="0" data-list="announcements">
|
||
<li class="w-annc__item">
|
||
<a href="{{link_to_show}}">
|
||
<div class="w-annc__img-wrap">
|
||
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}">
|
||
</div>
|
||
<div class="w-annc__content-wrap card">
|
||
<div class="w-annc__meta">
|
||
<span class="w-annc__postdate-wrap" date-format="%Y-%m-%d">
|
||
<i class="fa-regular fa-calendar"></i>
|
||
<span class="w-annc__postdate">{{postdate}}</span>
|
||
</span>
|
||
<span class="w-annc__category-wrap">
|
||
<i class="fa-solid fa-list"></i>
|
||
<span class="w-annc__category">{{category}}</span>
|
||
</span>
|
||
</div>
|
||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||
</span>
|
||
<h3 class="w-annc__entry-title">
|
||
<span class="w-annc__title" >{{title}}</span>
|
||
</h3>
|
||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-annc__more-wrap clearfix">
|
||
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
|
||
</div>
|
||
</div>
|
||
|
||
<style type="text/css">
|
||
.widget-announcement-30 .w-annc30-wrap {
|
||
position: relative;
|
||
}
|
||
|
||
.widget-announcement-30 .w-annc30-overflow {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 箭頭樣式 */
|
||
.widget-announcement-30 .w-annc30-prev,
|
||
.widget-announcement-30 .w-annc30-next {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 2.5em;
|
||
height: 2.5em;
|
||
border-radius: 50%;
|
||
border: none;
|
||
background: rgba(0, 0, 0, 0.25);
|
||
color: #fff;
|
||
font-size: 1.2rem;
|
||
cursor: pointer;
|
||
z-index: 10;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.widget-announcement-30 .w-annc30-prev { left: -1em; }
|
||
.widget-announcement-30 .w-annc30-next { right: -1em; }
|
||
|
||
.widget-announcement-30 .w-annc30-prev:hover,
|
||
.widget-announcement-30 .w-annc30-next:hover {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.widget-announcement-30 .w-annc30-prev:disabled,
|
||
.widget-announcement-30 .w-annc30-next:disabled {
|
||
opacity: 0.3;
|
||
cursor: default;
|
||
}
|
||
|
||
.widget-announcement-30 .w-annc30-prev:focus,
|
||
.widget-announcement-30 .w-annc30-next:focus {
|
||
outline: 2px solid #ff0492;
|
||
outline-offset: 2px;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
$(document).ready(function() {
|
||
var subpartId = '{{subpart-id}}';
|
||
var $widget = $('[data-subpart-id="' + subpartId + '"]');
|
||
var $overflow = $widget.find('.w-annc30-overflow');
|
||
var $track = $widget.find('.w-annc30-track');
|
||
var $prevBtn = $widget.find('.w-annc30-prev');
|
||
var $nextBtn = $widget.find('.w-annc30-next');
|
||
var currentIndex = 0;
|
||
var isMobile = false;
|
||
|
||
function getItems() {
|
||
return $track.find('> .w-annc__item');
|
||
}
|
||
|
||
function goTo(index) {
|
||
var total = getItems().length;
|
||
if (total === 0) return;
|
||
|
||
// 循環：超出邊界時繞回
|
||
currentIndex = ((index % total) + total) % total;
|
||
|
||
var offset = currentIndex * $overflow.width();
|
||
$track.css('transform', 'translateX(-' + offset + 'px)');
|
||
|
||
// 循環模式不需要 disabled
|
||
$prevBtn.prop('disabled', false);
|
||
$nextBtn.prop('disabled', false);
|
||
}
|
||
|
||
function enableMobile() {
|
||
isMobile = true;
|
||
var $items = getItems();
|
||
var w = $overflow.width();
|
||
|
||
// 強制覆蓋 grid
|
||
$track.css({
|
||
'display' : 'flex',
|
||
'flex-wrap' : 'nowrap',
|
||
'transition' : 'transform 0.4s ease',
|
||
'margin' : '0',
|
||
'padding' : '0',
|
||
'list-style' : 'none',
|
||
'width' : ($items.length * w) + 'px'
|
||
});
|
||
|
||
$items.css({
|
||
'width' : w + 'px',
|
||
'min-width' : w + 'px',
|
||
'max-width' : w + 'px',
|
||
'flex-shrink' : '0',
|
||
'box-sizing' : 'border-box',
|
||
'float' : 'none',
|
||
'grid-area' : 'unset',
|
||
'position' : 'static',
|
||
'left' : 'auto',
|
||
'top' : 'auto',
|
||
'opacity' : '1',
|
||
'transform' : 'none',
|
||
'display' : 'block'
|
||
});
|
||
|
||
$prevBtn.show();
|
||
$nextBtn.show();
|
||
|
||
goTo(currentIndex);
|
||
}
|
||
|
||
function disableMobile() {
|
||
isMobile = false;
|
||
currentIndex = 0;
|
||
|
||
// 清除所有 inline style，還原桌機排版
|
||
$track.css({
|
||
'display' : '',
|
||
'flex-wrap' : '',
|
||
'transition' : '',
|
||
'transform' : '',
|
||
'margin' : '',
|
||
'padding' : '',
|
||
'width' : ''
|
||
});
|
||
|
||
getItems().css({
|
||
'width' : '',
|
||
'min-width' : '',
|
||
'max-width' : '',
|
||
'flex-shrink' : '',
|
||
'box-sizing' : '',
|
||
'float' : '',
|
||
'grid-area' : '',
|
||
'position' : '',
|
||
'left' : '',
|
||
'top' : '',
|
||
'opacity' : '',
|
||
'transform' : '',
|
||
'display' : ''
|
||
});
|
||
|
||
$prevBtn.hide();
|
||
$nextBtn.hide();
|
||
}
|
||
|
||
function checkResize() {
|
||
if ($(window).width() <= 768) {
|
||
enableMobile();
|
||
} else {
|
||
disableMobile();
|
||
}
|
||
}
|
||
|
||
$prevBtn.on('click', function() {
|
||
if (isMobile) goTo(currentIndex - 1);
|
||
});
|
||
|
||
$nextBtn.on('click', function() {
|
||
if (isMobile) goTo(currentIndex + 1);
|
||
});
|
||
|
||
var resizeTimer;
|
||
$(window).on('resize', function() {
|
||
clearTimeout(resizeTimer);
|
||
resizeTimer = setTimeout(checkResize, 200);
|
||
});
|
||
|
||
// 初始化
|
||
setTimeout(checkResize, 150);
|
||
|
||
// 修正：清除 .w-annc__img-wrap a 的破損 title 造成的多餘文字節點
|
||
setTimeout(function() {
|
||
$widget.find('.w-annc__img-wrap a').each(function() {
|
||
$(this).contents().filter(function() {
|
||
return this.nodeType === 3 && this.nodeValue.trim() !== '';
|
||
}).remove();
|
||
// 只保留 img
|
||
var $img = $(this).find('img');
|
||
$(this).empty().append($img);
|
||
});
|
||
}, 300);
|
||
});
|
||
|
||
</script>
|