AsiaV3/modules/ad_banner/_ad_banner_widget2_video.ht...

201 lines
8.4 KiB
Plaintext
Raw Normal View History

2021-09-03 03:45:44 +00:00
<div class="w-ad-banner ad-banner-widget-2 w-ba-banner ba-banner-widget-1 ba-banner-widget-youtube">
<div class="w-ad-banner__wrap w-ba-banner__wrap cycle-slideshow"
2021-04-19 03:12:37 +00:00
data-list="images"
data-level="0"
data-cycle-slides=".w-ba-banner__slide"
data-cycle-log="false"
data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
data-overlay-template="<h2><span>{{title}}</span></h2>{{desc}}"
data-cycle-auto-height="{{base_image}}"
data-cycle-speed="{{speed}}"
data-cycle-timeout="{{timeout}}"
data-cycle-fx="{{ad_fx}}"
2021-05-03 02:15:25 +00:00
data-pager=".banner_caption_{{subpart-id}}"
2021-04-19 03:12:37 +00:00
data-pager-template="<li><button></button></li>"
data-pager-active-class="active-slide"
data-cycle-youtube="true"
data-cycle-youtube-autostart="false"
2021-05-03 02:15:25 +00:00
data-cycle-swipe="true"
2021-04-19 03:12:37 +00:00
data-cycle-prev=".banner_prev"
data-cycle-next=".banner_next"
data-cycle-pause-on-hover="true"
2021-05-03 02:15:25 +00:00
style="padding-bottom: 56.25%;"
2021-04-19 03:12:37 +00:00
>
{{html}}
</div>
2021-05-03 02:15:25 +00:00
<div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
2021-09-03 03:45:44 +00:00
<div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
2021-05-03 02:15:25 +00:00
<ul class="controlplay"><a class="resume-slide active" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
2021-04-19 03:12:37 +00:00
<ul class="button-mid">
2021-05-03 02:15:25 +00:00
<i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
<i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
</ul>
</div>
</div>
2021-04-19 03:12:37 +00:00
<script type="text/javascript">
if (typeof ad_banners_count === 'undefined'){
var ad_banners_count = 0;
}
if(document.getElementById("youtube-iframe-api") == null){
var tag = document.createElement('script');
tag.setAttribute("id", "youtube-iframe-api");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
2021-09-03 03:45:44 +00:00
$("*[data-yt-binded=0]").each(function(){
$(this).attr("data-yt-binded","1");
var obj = $(this).find("iframe");
obj.attr("id",$(this).data("youtube-id") + "_" + ad_banners_count);
ad_banners_count++;
})
2021-04-19 03:12:37 +00:00
if (typeof onYouTubeIframeAPIReady !== 'function'){
2021-09-03 03:45:44 +00:00
if(window.yt_players == undefined)
window.yt_players = {};
$(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
2021-04-19 03:12:37 +00:00
function onYouTubeIframeAPIReady(){
2021-09-03 03:45:44 +00:00
$(".w-ba-banner").each(function(i,banner){
var iframes = $(banner).find("iframe");
if(iframes.length > 0){
var id = $(banner).attr("data-subpart-id");
if(yt_players[id] == undefined)
yt_players[id] = {};
var remove_ids = [];
Object.keys(yt_players[id]).forEach(function(k){
var yt_player = yt_players[id][k];
if($(yt_player.getIframe()).length == 0){
yt_player.destroy();
remove_ids.push(k);
}
})
remove_ids.forEach(function(k){
delete yt_players[id][k];
})
iframes.each(function(i,iframe){
console.log($(iframe).attr("id"))
var yt_player = yt_players[id][$(iframe).attr("id")];
if(yt_player){
}else{
yt_player = new YT.Player($(iframe).attr("id"), {
events: {
'onReady': function(event){
var height = $(event.target.getIframe()).height();
var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
banner_wrap.height(height).css({"padding-bottom":"4em","padding-top":""});
banner_wrap.find(".cycle-carousel-wrap").css("top","3em");
2021-09-09 03:04:28 +00:00
delete (event.target.B || event.target.H).onStateChange;
2021-09-03 03:45:44 +00:00
var onStateChange_idx = event.target.l.i.onStateChange;
onStateChange_idx.reverse();
var event_size = 3;
onStateChange_idx.forEach(function(start_idx){
event.target.l.h.splice(start_idx,event_size);
});
event.target.l.i.onStateChange = [];
event.target.l.s = event.target.l.h.length;
event.target.addEventListener('onStateChange',onPlayerStateChange);
{{extra_ready_script}}
},
'onStateChange': onPlayerStateChange
}
});
yt_players[id][$(iframe).attr("id")] = yt_player;
$(iframe).data("yt_player",yt_player);
}
})
}
2021-04-19 03:12:37 +00:00
})
}
function onPlayerStateChange(event){
2021-05-03 02:15:25 +00:00
var iframe = $(event.target.h),
2021-04-19 03:12:37 +00:00
cyclediv = iframe.parents("div.cycle-slideshow");
2021-09-03 03:45:44 +00:00
var widget = cyclediv.parents('.ba-banner-widget-youtube');
2021-04-19 03:12:37 +00:00
if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
2021-09-03 03:45:44 +00:00
cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
2021-04-19 03:12:37 +00:00
cyclediv.cycle("pause");
2021-05-03 02:15:25 +00:00
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','hidden')
2021-09-03 03:45:44 +00:00
}else if(event.data == YT.PlayerState.UNSTARTED || event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
if(cyclediv[0].need_resume)
cyclediv.cycle("resume");
2021-05-03 02:15:25 +00:00
widget.find('.banner-pager,.controlplay,.button-mid,.ad-overlay').css('visibility','')
2021-04-19 03:12:37 +00:00
}
2021-09-03 03:45:44 +00:00
{{extra_state_chnage_script}}
2021-04-19 03:12:37 +00:00
}
2021-05-03 02:15:25 +00:00
$(document).ready(function(){
window.onYouTubePlayerAPIReady = function() {
2021-09-03 03:45:44 +00:00
onYouTubeIframeAPIReady.apply(this,arguments);
2021-05-03 02:15:25 +00:00
};
2021-09-03 03:45:44 +00:00
var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
var opts = banner_wrap.data('cycle.opts');
banner_wrap.on('cycle-paused',function(opts){
var controlplay = $(this).nextAll(".controlplay");
if(controlplay.length != 0){
controlplay.find(".resume-slide").removeClass("active");
controlplay.find(".pause-slide").addClass("active");
}
})
banner_wrap.on('cycle-resumed',function(opts){
var controlplay = $(this).nextAll(".controlplay");
if(controlplay.length != 0){
controlplay.find(".resume-slide").addClass("active");
controlplay.find(".pause-slide").removeClass("active");
}
})
var height = opts.slides.filter('.active').height() || opts.slides.height();
banner_wrap.height(height).css("padding-bottom","");
{{extra_document_ready_script}}
2021-05-03 02:15:25 +00:00
$('.pause-slide').off('click').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
2021-09-03 03:45:44 +00:00
$(this).addClass('active');
$(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active');
2021-05-03 02:15:25 +00:00
});
$('.resume-slide').off('click').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
2021-09-03 03:45:44 +00:00
$(this).addClass('active');
$(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active');
2021-05-03 02:15:25 +00:00
});
$('.next-button').off('click').on('click',function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
})
$('.prev-button').off('click').on('click',function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
})
2021-09-03 03:45:44 +00:00
var resize_timeout_id;
$(window).resize(function(){
if(resize_timeout_id){
window.clearTimeout(resize_timeout_id);
}
resize_timeout_id = window.setTimeout(function(){
var banner_wrap = $(".w-ba-banner__wrap[data-overlay=\".w-ad-banner__overlay_{{subpart-id}}\"]");
var opts = banner_wrap.data('cycle.opts');
var height = opts.slides.filter('.active').height() || opts.slides.height();
banner_wrap.height(height).css("padding-bottom","");
},300);
})
2021-05-03 02:15:25 +00:00
})
2021-04-19 03:12:37 +00:00
}
2021-05-03 02:15:25 +00:00
</script>
<style type="text/css">
2021-09-03 03:45:44 +00:00
.w-ba-banner .controlplay .resume-slide.active i{
2021-05-03 02:15:25 +00:00
color: #32D9C3;
}
2021-09-03 03:45:44 +00:00
.w-ba-banner .controlplay .pause-slide.active i{
2021-05-03 02:15:25 +00:00
color: #ff4500;
}
2021-09-03 03:45:44 +00:00
.w-ba-banner .controlplay{
width: auto;
}
.w-ba-banner .button-mid{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.next-button,.prev-button{
cursor: pointer;
}
2021-09-09 03:04:28 +00:00
</style>