163 lines
7.0 KiB
Plaintext
163 lines
7.0 KiB
Plaintext
|
<div class="w-annc widget-announcement-4 w-annc widget-announcement-15" style="position:relative;">
|
||
|
|
<div class="w-annc__more-wrap clearfix">
|
||
|
|
<h2 class="w-annc__widget-title">
|
||
|
|
<span>{{widget-title}}</span>
|
||
|
|
</h2>
|
||
|
|
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= t("event_news.more") %></a>
|
||
|
|
</div>
|
||
|
|
<div style="position: absolute;top: 50%;bottom: 50%;width:100%;">
|
||
|
|
<button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: url(/assets/left-01.png) no-repeat;border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;"></button>
|
||
|
|
<button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background: url(/assets/right-01.png) no-repeat;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%;"></button>
|
||
|
|
</div>
|
||
|
|
<ul class="w-annc__list row" data-level="0" data-list="event_news">
|
||
|
|
<li class="w-annc__item col-md-4">
|
||
|
|
<div class="w-annc__img-wrap bullseye">
|
||
|
|
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
|
||
|
|
</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 fa-calendar-o"></i>
|
||
|
|
<span class="w-annc__postdate">{{postdate}}</span>
|
||
|
|
</span>
|
||
|
|
<span class="w-annc__category-wrap">
|
||
|
|
<i class="fa fa-tasks"></i>
|
||
|
|
<span class="w-annc__category">{{category}}</span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<h4 class="w-annc__entry-title">
|
||
|
|
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||
|
|
</h4>
|
||
|
|
<p class="w-annc__subtitle">{{subtitle}}</p>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||
|
|
<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){
|
||
|
|
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').toArray();
|
||
|
|
var currentul = uls.findIndex(function(v){
|
||
|
|
return $(v).hasClass("active") && !$(v).hasClass("hidden_item");
|
||
|
|
})
|
||
|
|
if(currentul == -1)
|
||
|
|
currentul = 0;
|
||
|
|
var li_active_idx = 0;
|
||
|
|
if(currentul != 0)
|
||
|
|
li_active_idx = $(uls[currentul]).find("li.w-annc__item").eq(0).index("li.w-annc__item");
|
||
|
|
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').css("display","none");
|
||
|
|
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('padding','0 1.125em');
|
||
|
|
$('[data-subpart-id=\"{{subpart-id}}\"] button').css('z-index','10');
|
||
|
|
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
|
||
|
|
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list >li').css('float','left');
|
||
|
|
var active_ul = $("[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item").eq(li_active_idx).parents("ul.w-annc__list");
|
||
|
|
active_ul.addClass("active");
|
||
|
|
active_ul.removeClass("hidden_item");
|
||
|
|
active_ul.css("display","");
|
||
|
|
};
|
||
|
|
$(window).resize(function(){
|
||
|
|
if($(window).width()>1024){
|
||
|
|
reorganize_{{subpart-id}}(3);
|
||
|
|
num=3;
|
||
|
|
}else if($(window).width()>576){
|
||
|
|
reorganize_{{subpart-id}}(2);
|
||
|
|
num=2;
|
||
|
|
}else{
|
||
|
|
reorganize_{{subpart-id}}(1);
|
||
|
|
num=1;
|
||
|
|
}
|
||
|
|
})
|
||
|
|
$(document).ready(function(){
|
||
|
|
if($(window).width()>1024){
|
||
|
|
reorganize_{{subpart-id}}(3);
|
||
|
|
num=3;
|
||
|
|
}else if($(window).width()>576){
|
||
|
|
reorganize_{{subpart-id}}(2);
|
||
|
|
num=2;
|
||
|
|
}else{
|
||
|
|
reorganize_{{subpart-id}}(1);
|
||
|
|
num=1;
|
||
|
|
}
|
||
|
|
var flag=false;
|
||
|
|
$('.btn-left').click(function(){
|
||
|
|
if(!flag){
|
||
|
|
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
|
||
|
|
var ul_length = uls.length;
|
||
|
|
var currentul = uls.findIndex(function(v){
|
||
|
|
return $(v).hasClass("active");
|
||
|
|
})
|
||
|
|
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
|
||
|
|
if(currentul - 1 < 0)
|
||
|
|
currentul += ul_length;
|
||
|
|
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
|
||
|
|
var active_item = $(uls[currentul-1]);
|
||
|
|
active_item.addClass("active");
|
||
|
|
active_item.find("li").css("display","block");
|
||
|
|
flag=true;
|
||
|
|
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
|
||
|
|
};
|
||
|
|
});
|
||
|
|
$('.btn-right').click(function(){
|
||
|
|
var lilength = $('[data-subpart-id=\"{{subpart-id}}\"] li.w-annc__item').length;
|
||
|
|
if(!flag){
|
||
|
|
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
|
||
|
|
var ul_length = uls.length;
|
||
|
|
var currentul = uls.findIndex(function(v){
|
||
|
|
return $(v).hasClass("active");
|
||
|
|
})
|
||
|
|
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list').css('display','none');
|
||
|
|
if(currentul + 1 > ul_length - 1)
|
||
|
|
currentul -= ul_length;
|
||
|
|
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').removeClass("active");
|
||
|
|
var active_item = $(uls[currentul+1]);
|
||
|
|
active_item.addClass("active");
|
||
|
|
active_item.find("li").css("display","block");
|
||
|
|
flag=true;
|
||
|
|
$('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
|
||
|
|
};
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|