176 lines
6.1 KiB
Plaintext
176 lines
6.1 KiB
Plaintext
<div class="w-annc widget-announcement-4">
|
||
<h3 class="w-annc__widget-title">
|
||
<span>{{widget-title}}</span>
|
||
</h3>
|
||
<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>
|
||
<ul class="w-annc__list row" data-level="0" data-list="announcements">
|
||
<li class="w-annc__item col-sm-3">
|
||
<div class="w-annc__item_inner">
|
||
<a href="{{link_to_show}}">
|
||
<div class="w-annc__img-wrap bullseye" style="position:relative">
|
||
<img class="w-annc__img" src="{{img_src}}" alt="" >
|
||
<div class="transitionfade"></div>
|
||
</div>
|
||
<div class="w-annc__content-wrap">
|
||
<div class="w-annc__meta">
|
||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||
</span>
|
||
<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>
|
||
<h4 class="w-annc__entry-title">
|
||
<span class="w-annc__title" >{{title}}</span>
|
||
</h4>
|
||
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<style type="text/css">
|
||
[data-subpart-id="{{subpart-id}}"] .bullseye{
|
||
overflow: hidden;
|
||
}
|
||
/* 防止外部排版套件影響此 widget 的 li */
|
||
[data-subpart-id="{{subpart-id}}"] ul.w-annc__list > li {
|
||
position: static !important;
|
||
left: auto !important;
|
||
top: auto !important;
|
||
opacity: 1 !important;
|
||
transform: none !important;
|
||
transition-property: none !important;
|
||
}
|
||
[data-subpart-id="{{subpart-id}}"] ul.w-annc__list {
|
||
position: static !important;
|
||
height: auto !important;
|
||
}
|
||
</style>
|
||
<script>
|
||
function combineul_{{subpart-id}}(){
|
||
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
|
||
parents.each(function(i,v){
|
||
for(var i=1;i<$(v).find('ul.w-annc__list').length;i++)
|
||
$(v).find('ul.w-annc__list').eq(0).find('>li').eq(-1).after($(v).find('ul.w-annc__list').eq(i).html());
|
||
var ullength = $(v).find('ul.w-annc__list').length;
|
||
for(var i = 1;i < ullength;i++)
|
||
$(v).find('ul.w-annc__list').eq(-1).remove();
|
||
})
|
||
};
|
||
var num;
|
||
var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
|
||
function reorganize_{{subpart-id}}(num){
|
||
combineul_{{subpart-id}}();
|
||
var parents = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').parent();
|
||
parents.each(function(i,v){
|
||
var lilength = $(v).find('li.w-annc__item').length;
|
||
var ul_length = Math.ceil(lilength/num);
|
||
for(var ii=1;ii< ul_length;ii++){
|
||
var clone_ul = $(v).find('ul.w-annc__list').eq(-1).clone();
|
||
clone_ul.empty();
|
||
clone_ul.removeClass("active");
|
||
clone_ul.css("display","");
|
||
$(v).find('ul.w-annc__list').eq(-1).after(clone_ul.prop("outerHTML"));
|
||
var lihtml="";
|
||
if(ii != (ul_length-1)){
|
||
for(var j=0;j<num;j++){
|
||
lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
|
||
};
|
||
}else{
|
||
for(var j=0;j< lilength - num *(ul_length-1) ;j++){
|
||
lihtml += $(v).find('li.w-annc__item').eq(ii*num+j).prop("outerHTML");
|
||
};
|
||
};
|
||
$(v).find('ul.w-annc__list').eq(-1).html(lihtml);
|
||
}
|
||
if(ul_length != 1 )
|
||
for(var i=0;i< lilength -num ; i++)
|
||
$(v).find('ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
|
||
})
|
||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/20+'em)'); //20px=>li的margin
|
||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css("float","left");
|
||
};
|
||
|
||
function clearNavTabsFilterStyle_{{subpart-id}}(){
|
||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list > li').each(function(){
|
||
// 只移除不該有的 style，保留 display（由 nav_tabs_filter 控制）
|
||
var $li = $(this);
|
||
$li[0].style.removeProperty('width');
|
||
$li[0].style.removeProperty('position');
|
||
$li[0].style.removeProperty('left');
|
||
$li[0].style.removeProperty('top');
|
||
$li[0].style.removeProperty('float');
|
||
$li[0].style.removeProperty('opacity');
|
||
$li[0].style.removeProperty('transform');
|
||
$li[0].style.removeProperty('transition-property');
|
||
$li[0].style.removeProperty('transition-duration');
|
||
});
|
||
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').each(function(){
|
||
this.style.removeProperty('position');
|
||
this.style.removeProperty('height');
|
||
});
|
||
}
|
||
|
||
// 若父層有 .nav_tabs_filter，跳過 reorganize（由頁籤自行控制顯示/隱藏）
|
||
var hasNavTabsFilter_{{subpart-id}} = (
|
||
$('[data-subpart-id=\"{{subpart-id}}\"]').parents('.nav_tabs_filter').length > 0 ||
|
||
$('[data-subpart-id=\"{{subpart-id}}\"]').closest('.tab-content, .tab_content, [data-pp]').length > 0 &&
|
||
$('.nav_tabs_filter').length > 0
|
||
);
|
||
|
||
$(window).resize(function(){
|
||
if(hasNavTabsFilter_{{subpart-id}}){
|
||
clearNavTabsFilterStyle_{{subpart-id}}();
|
||
return;
|
||
}
|
||
if($(window).width()>1024){
|
||
reorganize_{{subpart-id}}(4);
|
||
num=3;
|
||
}else if($(window).width()>576){
|
||
reorganize_{{subpart-id}}(2);
|
||
num=2;
|
||
}else{
|
||
reorganize_{{subpart-id}}(1);
|
||
num=1;
|
||
}
|
||
})
|
||
$(document).ready(function(){
|
||
if(hasNavTabsFilter_{{subpart-id}}){
|
||
setTimeout(clearNavTabsFilterStyle_{{subpart-id}}, 300);
|
||
|
||
// MutationObserver 持續監聽，防止外部 JS 重複加上 style
|
||
var targetUl = document.querySelector('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list');
|
||
if(targetUl){
|
||
var observer = new MutationObserver(function(mutations){
|
||
mutations.forEach(function(mutation){
|
||
if(mutation.type === 'attributes' && mutation.attributeName === 'style'){
|
||
clearNavTabsFilterStyle_{{subpart-id}}();
|
||
}
|
||
});
|
||
});
|
||
observer.observe(targetUl, { attributes: true, subtree: true, attributeFilter: ['style'] });
|
||
}
|
||
return;
|
||
}
|
||
if($(window).width()>1024){
|
||
reorganize_{{subpart-id}}(4);
|
||
num=3;
|
||
}else if($(window).width()>576){
|
||
reorganize_{{subpart-id}}(2);
|
||
num=2;
|
||
}else{
|
||
reorganize_{{subpart-id}}(1);
|
||
num=1;
|
||
}
|
||
})
|
||
</script>
|