update template

This commit is contained in:
rulingcom 2021-11-15 09:02:17 +00:00
parent 50bec66214
commit 98e8790cf4
7 changed files with 139 additions and 16 deletions

View File

@ -34,10 +34,53 @@
</div> </div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var ad_trigger_time;
if (typeof ad_banners_count === 'undefined'){ if (typeof ad_banners_count === 'undefined'){
var ad_banners_count = 0; var ad_banners_count = 0;
} }
function ad_audio_button(ele,is_stop){
var $self = $(ele);
var button_container = $self.parents('.ba-banner-widget-youtube').eq(0);
if (is_stop){
$self.find('.jarallax-video-audio').remove();
}else{
var audio_div;
if ($self.hasClass('have-audio')){
audio_div = $('<div class="jarallax-video-audio"><i class="fas fa-volume-up"></i></div>');
}else{
audio_div = $('<div class="jarallax-video-audio"><i class="fas fa-volume-mute"></i></div>');
}
audio_div.click(function(event) {
var currentTime = new Date();
if (ad_trigger_time&&currentTime-ad_trigger_time<500){
return false;
}else{
ad_trigger_time = currentTime;
}
event.stopPropagation();
var $video = $self.find('video');
if ($self.hasClass('have-audio')){
$self.removeClass('have-audio');
$(this).find('i.fas').attr('class','fas fa-volume-mute');
}else{
$self.addClass('have-audio');
$(this).find('i.fas').attr('class','fas fa-volume-up');
}
if ($video.length>0){
$self.jPlayer("mute", !$self.data().jPlayer.options.muted);
}else{//youtube
var player = $self.find('iframe').data("yt_player");
if (player.isMuted()){
player.unMute();
}else{
player.mute();
}
}
});
button_container.find('.jarallax-video-audio').remove();
button_container.append(audio_div);
}
}
if(document.getElementById("youtube-iframe-api") == null){ if(document.getElementById("youtube-iframe-api") == null){
var tag = document.createElement('script'); var tag = document.createElement('script');
tag.setAttribute("id", "youtube-iframe-api"); tag.setAttribute("id", "youtube-iframe-api");
@ -52,9 +95,13 @@
ad_banners_count++; ad_banners_count++;
}) })
if (typeof onYouTubeIframeAPIReady !== 'function'){ if (typeof onYouTubeIframeAPIReady !== 'function'){
$(document).ready(function() {
$(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
$(this).trigger('click');
});
});
if(window.yt_players == undefined) if(window.yt_players == undefined)
window.yt_players = {}; window.yt_players = {};
$(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
function onYouTubeIframeAPIReady(){ function onYouTubeIframeAPIReady(){
$(".w-ba-banner").each(function(i,banner){ $(".w-ba-banner").each(function(i,banner){
var iframes = $(banner).find("iframe"); var iframes = $(banner).find("iframe");
@ -74,7 +121,6 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
delete yt_players[id][k]; delete yt_players[id][k];
}) })
iframes.each(function(i,iframe){ iframes.each(function(i,iframe){
console.log($(iframe).attr("id"))
var yt_player = yt_players[id][$(iframe).attr("id")]; var yt_player = yt_players[id][$(iframe).attr("id")];
if(yt_player){ if(yt_player){
}else{ }else{
@ -82,8 +128,8 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
events: { events: {
'onReady': function(event){ 'onReady': function(event){
var height = $(event.target.getIframe()).height(); var height = $(event.target.getIframe()).height();
var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]"); var banner_wrap = $(iframe).parents('.w-ba-banner__wrap').eq(0);
banner_wrap.height(height).css({"padding-bottom":"4em","padding-top":""}); banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
banner_wrap.find(".cycle-carousel-wrap").css("top","3em"); banner_wrap.find(".cycle-carousel-wrap").css("top","3em");
delete (event.target.B || event.target.H).onStateChange; delete (event.target.B || event.target.H).onStateChange;
var onStateChange_idx = event.target.l.i.onStateChange; var onStateChange_idx = event.target.l.i.onStateChange;
@ -107,7 +153,6 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
} }
}) })
} }
function onPlayerStateChange(event){ function onPlayerStateChange(event){
var iframe = $(event.target.h), var iframe = $(event.target.h),
cyclediv = iframe.parents("div.cycle-slideshow"); cyclediv = iframe.parents("div.cycle-slideshow");
@ -116,13 +161,16 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused")); cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
cyclediv.cycle("pause"); cyclediv.cycle("pause");
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','hidden') widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','hidden')
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),false);
}else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){ }else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
if(cyclediv[0].need_resume) if(cyclediv[0].need_resume)
cyclediv.cycle("resume"); cyclediv.cycle("resume");
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','') widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','')
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true);
} }
{{extra_state_chnage_script}} {{extra_state_chnage_script}}
} }
}
$(document).ready(function(){ $(document).ready(function(){
window.onYouTubePlayerAPIReady = function() { window.onYouTubePlayerAPIReady = function() {
onYouTubeIframeAPIReady.apply(this,arguments); onYouTubeIframeAPIReady.apply(this,arguments);
@ -143,8 +191,10 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
controlplay.find(".pause-slide").removeClass("active"); controlplay.find(".pause-slide").removeClass("active");
} }
}) })
/*
var height = opts.slides.filter('.active').height() || opts.slides.height(); var height = opts.slides.filter('.active').height() || opts.slides.height();
banner_wrap.height(height).css("padding-bottom",""); banner_wrap.height(height)*/
banner_wrap.css("padding-bottom","");
{{extra_document_ready_script}} {{extra_document_ready_script}}
$('.pause-slide').off('click').click(function(){ $('.pause-slide').off('click').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause'); $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
@ -175,9 +225,35 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
},300); },300);
}) })
}) })
}
</script> </script>
<style type="text/css"> <style type="text/css">
.jarallax-video-audio{
z-index: 201;
font-size: 36px;
color: #FFF;
text-align: center;
position: absolute;
top: 2%;
right: 2%;
height: 66px;
width: 66px;
border-radius: 50%;
line-height: 1.8;
cursor: pointer;
border: 2px solid rgba(255,255,255,.6);
background-color: rgba(0,0,0,.6);
transition: all 1.2s ease;
}
@media (max-width: 768px){
.jarallax-video-audio{
top: 50%;
}
}
.jarallax-video-audio:hover{
color: #FFC500;
transition: all 0.6s ease;
}
.w-ba-banner .controlplay .resume-slide.active i{ .w-ba-banner .controlplay .resume-slide.active i{
color: #32D9C3; color: #32D9C3;
} }

View File

@ -6,13 +6,20 @@
<a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a> <a class="w-annc__more btn btn-primary pull-right" href="{{more_url}}"><%= (I18n.locale.to_s =="zh_tw") ? "更多最新消息" : "More NEWS" %></a>
</div> </div>
<div style="position: absolute;top: 50%;bottom: 50%;width:100%;"> <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%;"><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button> <button class="btn-left" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>" style="float: left;height: 2.5em; width: 2.5em;background: border: 0;background-size: contain;position: absolute;transition:.3s; left: 0.6%;color: #ffffff;
<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%;"><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button> background: rgba(0, 0, 0, 0.2);
</div> border-radius: 50%;
border: none;"><i class="fa fa-angle-left prev-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %></span></button>
<button class="btn-right" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>" style="float: right;;height: 2.5em; width: 2.5em;background-size: contain;border: 0;position: absolute;transition:.3s;right: 0.6%;color: #ffffff;
background: rgba(0, 0, 0, 0.2);
border-radius: 50%;
border: none;"><i class="fa fa-angle-right next-button" aria-hidden="true" style="font-size: 1.5rem;"></i><span style="display: none;"><%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %></span></button>
</div>
<ul class="w-annc__list row" data-level="0" data-list="announcements"> <ul class="w-annc__list row" data-level="0" data-list="announcements">
<li class="w-annc__item col-md-4"> <li class="w-annc__item col-md-4">
<div class="w-annc__img-wrap bullseye"> <div class="w-annc__img-wrap bullseye">
<img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}"> <img class="w-annc__img" src="{{img_src}}" alt="{{img_description}}" title="{{img_description}}">
<div class="transitionfade"></div>
</div> </div>
<div class="w-annc__content-wrap"> <div class="w-annc__content-wrap">
<div class="w-annc__meta"> <div class="w-annc__meta">
@ -121,7 +128,7 @@
num=1; num=1;
} }
var flag=false; var flag=false;
$('.btn-left').click(function(){ $('.btn-left').click(function(){
if(!flag){ if(!flag){
var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray(); var uls = $('[data-subpart-id=\"{{subpart-id}}\"] ul.w-annc__list:not(.hidden_item)').toArray();
var ul_length = uls.length; var ul_length = uls.length;

View File

@ -0,0 +1,32 @@
<div class="i-annc index-announcement-18">
<style>
@media (min-width: 992px){
li.i-annc__item.col-md-4:nth-child(3n) {
clear: left;
}
}
</style>
<h3 class="i-annc__page-title">{{widget-title}}</h3>
<ul class="i-annc__list row" data-level="0" data-list="announcements">
<li class="i-annc__item col-md-4">
<div class="i-annc__content-wrap">
<div class="i-annc__meta">
<span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
<span class="i-annc__postdate">{{postdate}}</span>
</span>
<span class="i-annc__category-wrap">
<i class="fa fa-clone"></i>
<span class="i-annc__category">{{category}}</span>
</span>
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
</span>
</div>
<h4 class="i-annc__entry-title">
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
</h4>
<p class="i-annc__subtitle">{{subtitle}}</p>
</div>
</li>
</ul>
</div>

View File

@ -281,6 +281,14 @@
"en": "19. Simple Title List-2 (widget-title, postdate, status, title), including search" "en": "19. Simple Title List-2 (widget-title, postdate, status, title), including search"
}, },
"thumbnail": "annc_widget11_thumbs.png" "thumbnail": "annc_widget11_thumbs.png"
},
{
"filename": "annc_widget20",
"name": {
"zh_tw": "20. 標準文字列表三欄 ( 模組標題, 日期, 類別, 狀態, 標題, 副標題 )",
"en": "20. 3-Column Standard Text List (widget-title, postdate, category, status, title, subtitle)"
},
"thumbnail": "annc_index19_thumbs.png"
} }
] ]
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -1,5 +1,5 @@
<div class="i-archive index-archive-1"> <div class="i-archive index-archive-1">
<h3 class="i-archive__page-title">{{page-title}}</h3> <h3 class="i-archive-title">{{page-title}}</h3>
<ul class="i-archive__list list-unstyled" data-list="categories" data-level="0"> <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
<li class="i-archive__item"> <li class="i-archive__item">
<h4 class="i-archive__category-title">{{category-title}}</h4> <h4 class="i-archive__category-title">{{category-title}}</h4>
@ -13,7 +13,7 @@
</dt> </dt>
<dl class="i-archive__file-list" data-list="files" data-level="2"> <dl class="i-archive__file-list" data-list="files" data-level="2">
<dd class="i-archive__file-wrap"> <dd class="i-archive__file-wrap">
<a class="i-archive__file-name" href="{{file-url}}" target="_blank">{{file-name}}</a> <a class="i-archive__file-name" href="{{file-url}}" target="_blank" title="{{file-name}}">{{file-name}}</a>
<span class="i-archive__file-type label label-primary">{{file-type}}</span> <span class="i-archive__file-type label label-primary">{{file-type}}</span>
</dd> </dd>
</dl> </dl>

View File

@ -1,5 +1,5 @@
<div class="i-archive index-archive-3"> <div class="i-archive index-archive-3">
<h3 class="i-archive__page-title">{{page-title}}</h3> <h3 class="i-archive-title">{{page-title}}</h3>
<ul class="i-archive__list list-unstyled" data-list="categories" data-level="0"> <ul class="i-archive__list list-unstyled" data-list="categories" data-level="0">
<li class="i-archive__item"> <li class="i-archive__item">
<h4 class="i-archive__category-title">{{category-title}}</h4> <h4 class="i-archive__category-title">{{category-title}}</h4>
@ -12,7 +12,7 @@
</dt> </dt>
<dl class="i-archive__file-list" data-list="files" data-level="2"> <dl class="i-archive__file-list" data-list="files" data-level="2">
<dd class="i-archive__file-wrap"> <dd class="i-archive__file-wrap">
<a class="i-archive__file-name" href="{{file-url}}" target="_blank">{{file-name}}</a> <a class="i-archive__file-name" href="{{file-url}}" target="_blank" title="{{file-name}}">{{file-name}}</a>
<span class="i-archive__file-type label label-primary">{{file-type}}</span> <span class="i-archive__file-type label label-primary">{{file-type}}</span>
</dd> </dd>
</dl> </dl>