chiu
/
asiaH3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
asiaH3/modules/announcement/_annc_widget17.html.erb

132 lines
6.0 KiB
Plaintext
Raw Normal View History

Updated.
2021-05-03 02:01:18 +00:00
<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}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></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="announcements">
<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(){
for(var i=1;i<$('.widget-announcement-4 ul.w-annc__list').length;i++)
$('.widget-announcement-4 ul.w-annc__list').eq(0).find('>li').eq(-1).after($('.widget-announcement-4 ul.w-annc__list').eq(i).html());
var ullength = $('.widget-announcement-4 ul.w-annc__list').length;
for(var i = 1;i < ullength;i++)
$('.widget-announcement-4 ul.w-annc__list').eq(-1).remove();
};
var lilength = $('.widget-announcement-4 li.w-annc__item').length;
var num;
function reorganize(num){
combineul();
for(var i=1;i< Math.ceil(lilength/num);i++){
$('.widget-announcement-4 ul.w-annc__list').eq(-1).after('<ul class="w-annc__list row" data-level="0" data-list="announcements"></ul>')
var lihtml="";
//var liheight=new Array(num);
if(i != (Math.ceil(lilength/num)-1)){
for(var j=0;j<num;j++){
lihtml += "<li class='w-annc__item col-md-4'>"+$('.widget-announcement-4 li.w-annc__item').eq(i*num+j).html()+"</li>"
//liheight[j] = $('.widget-announcement-4 li.w-annc__item').eq(i*num+j).height()+20;//20=>margin-top+margin-bottom
};
}else{
for(var j=0;j< lilength - num *(Math.ceil(lilength/num)-1) ;j++){
lihtml += "<li class='w-annc__item col-md-4'>"+$('.widget-announcement-4 li.w-annc__item').eq(i*num+j).html()+"</li>"
//liheight[j] = $('.widget-announcement-4 li.w-annc__item').eq(i*num+j).height()+20;//20=>margin-top+margin-bottom
};
};
$('.widget-announcement-4 ul.w-annc__list').eq(-1).html(lihtml);
};
if(Math.ceil(lilength/num) != 1 )
for(var i=0;i< lilength -num ; i++ )
$('.widget-announcement-4 ul.w-annc__list').eq(0).find("li.w-annc__item").eq(num).remove();
for(var i=0;i< Math.ceil(lilength/num);i++)
$('.widget-announcement-4 ul.w-annc__list').eq(i).attr("index",i);
$('.widget-announcement-4 ul.w-annc__list').css("display","none");
$('.widget-announcement-4 ul.w-annc__list').eq(0).css("display","flex");
$('.widget-announcement-4 ul.w-annc__list').eq(0).addClass("active");
$('.widget-announcement-4 ul.w-annc__list').css('padding','0 1.125em');
$('.widget-announcement-4 button').css('z-index','10');
$('.widget-announcement-4 ul.w-annc__list >li').css('width','calc('+100/num+'% - '+20/16+'em)'); //20px=>li的margin
$('.widget-announcement-4 ul.w-annc__list >li').css('float','left');
};
$(window).resize(function(){
if($(window).width()>1024){
reorganize(3);
num=3;
}else if($(window).width()>576){
reorganize(2);
num=2;
}else{
reorganize(1);
num=1;
}
})
$(document).ready(function(){
if($(window).width()>1024){
reorganize(3);
num=3;
}else if($(window).width()>576){
reorganize(2);
num=2;
}else{
reorganize(1);
num=1;
}
var flag=false;
$('.btn-left').click(function(){
if(!flag){
var currentul = Number($('.widget-announcement-4 ul.w-annc__list.active').attr("index"));
$('.widget-announcement-4 ul.w-annc__list').css('display','none');
if(currentul - 1 < 0)
currentul += Math.ceil(lilength/num);
$('.widget-announcement-4 ul.w-annc__list').removeClass("active");
$('.widget-announcement-4 ul.w-annc__list').eq(currentul-1).addClass("active");
flag=true;
$('.widget-announcement-4 ul.w-annc__list.active').eq(0).effect("slide", { direction: "left", mode: 'show', duration: 500},function(){flag=false;});
};
});
$('.btn-right').click(function(){
if(!flag){
var currentul = Number($('.widget-announcement-4 ul.w-annc__list.active').attr("index"));
$('.widget-announcement-4 ul.w-annc__list').css("display","none");
if(currentul + 1 > Math.ceil(lilength/num) - 1)
currentul -= Math.ceil(lilength/num);
$('.widget-announcement-4 ul.w-annc__list').removeClass("active");
$('.widget-announcement-4 ul.w-annc__list').eq(currentul+1).addClass("active");
flag=true;
$('.widget-announcement-4 ul.w-annc__list.active').eq(0).effect("slide", { direction: "right", mode: 'show', duration: 500},function(){flag=false;});
};
});
});
</script>