saurabh
/
adbanner-test
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update template.

This commit is contained in:
BoHung Chiu 2022-07-03 15:49:30 +08:00
parent 92f3ffe183
commit 3f85c120d7
2 changed files with 81 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
modules/ad_banner/_ad_banner_widget2_video.html.erb
View File

@ -32,7 +32,6 @@
<i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i> <i class="fa fa-angle-right next-button" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
</ul> </ul>
</div> </div>
</div>
<script type="text/javascript"> <script type="text/javascript">
var ad_trigger_time; var ad_trigger_time;
if (typeof ad_banners_count === 'undefined'){ if (typeof ad_banners_count === 'undefined'){
@ -88,11 +87,19 @@
var firstScriptTag = document.getElementsByTagName('script')[0]; var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
} }
$("*[data-yt-binded=0]").each(function(){ if(window.init_yt_banner == undefined){
$(this).attr("data-yt-binded","1"); function init_yt_banner(banner__slide){
var obj = $(this).find("iframe"); var $banner__slide = $(banner__slide);
obj.attr("id",$(this).data("youtube-id") + "_" + ad_banners_count); if( $banner__slide.data("yt-binded")== "0" ){
$banner__slide.data("yt-binded","1");
var obj = $banner__slide.find("iframe");
obj.attr("id", $banner__slide.data("youtube-id") + "_" + ad_banners_count);
ad_banners_count++; ad_banners_count++;
}
}
}
$("*[data-yt-binded=0]").each(function(){
init_yt_banner(this);
}) })
if (typeof onYouTubeIframeAPIReady !== 'function'){ if (typeof onYouTubeIframeAPIReady !== 'function'){
$(document).ready(function() { $(document).ready(function() {
@ -142,41 +149,56 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
var defalt_key = 'i'; var defalt_key = 'i';
var all_keys = Object.keys(event_dict); var all_keys = Object.keys(event_dict);
if(all_keys.indexOf(defalt_key) != -1){ if(all_keys.indexOf(defalt_key) != -1){
if(Array.isArray(event_dict[defalt_key]) && event_dict[defalt_key].indexOf('onStateChange') != -1){ var tmp = event_dict[defalt_key];
if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
return defalt_key; return defalt_key;
} }
} }
var array_key; var array_key;
all_keys.forEach(function(k){ all_keys.forEach(function(k){
if(Array.isArray(event_dict[k]) && event_dict[k].indexOf('onStateChange') != -1){ var tmp = event_dict[k];
if(Array.isArray(tmp) && tmp.indexOf('onStateChange') != -1){
array_key = k; array_key = k;
return false; return false;
} }
}) })
return array_key; return array_key;
} }
function find_out_yt_event_relation_key(event_dict){ function find_out_yt_event_relation_key(event_dict, is_obj){ // is_obj = true => store event idx array. false => store whether event init(true or false)
var defalt_key = 'j'; var defalt_key = 'j';
var all_keys = Object.keys(event_dict); var all_keys = Object.keys(event_dict);
if(all_keys.indexOf(defalt_key) != -1){ if(all_keys.indexOf(defalt_key) != -1){
if((event_dict[defalt_key] instanceof Object) && event_dict[defalt_key]['onStateChange']){ var tmp = event_dict[defalt_key];
if((tmp instanceof Object) && tmp['onStateChange']){
if(!is_obj || (tmp['onStateChange'] instanceof Object)){
return defalt_key; return defalt_key;
} }
} }
}
var relation_key; var relation_key;
all_keys.forEach(function(k){ all_keys.forEach(function(k){
if((event_dict[k] instanceof Object) && event_dict[k]['onStateChange']){ var tmp = event_dict[k];
if((tmp instanceof Object) && tmp['onStateChange']){
if(!is_obj || (tmp['onStateChange'] instanceof Object)){
relation_key = k; relation_key = k;
return false; return false;
} }
}
}) })
return relation_key; return relation_key;
} }
function onYouTubeIframeAPIReady(){ function onYouTubeIframeAPIReady(){
$(".w-ba-banner").each(function(i,banner){ $(".w-ba-banner").on('cycle-post-initialize', function(){
var iframes = $(banner).find("iframe"); init_banner(banner);
});
function init_banner(banner){
var $banner = $(banner);
$banner.find('.w-ad-banner__slide').each(function(j, banner__slide){
init_yt_banner(banner__slide);
})
var iframes = $banner.find("iframe");
if(iframes.length > 0){ if(iframes.length > 0){
var id = $(banner).attr("data-subpart-id"); var id = $banner.attr("data-subpart-id");
if(yt_players[id] == undefined) if(yt_players[id] == undefined)
yt_players[id] = {}; yt_players[id] = {};
var remove_ids = []; var remove_ids = [];
@ -191,25 +213,35 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
delete yt_players[id][k]; delete yt_players[id][k];
}) })
iframes.each(function(i,iframe){ iframes.each(function(i,iframe){
var yt_id = $(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{
yt_player = new YT.Player($(iframe).attr("id"), { yt_player = new YT.Player($(iframe).attr("id"), {
events: { events: {
'onReady': function(event){ 'onReady': function(event){
var height = $(event.target.getIframe()).height(); var yt_player = event.target;
var height = $(yt_player.getIframe()).height();
var banner_wrap = $(iframe).parents('.w-ba-banner__wrap').eq(0); var banner_wrap = $(iframe).parents('.w-ba-banner__wrap').eq(0);
var carousel_wrap = banner_wrap.find(".cycle-carousel-wrap");
if(carousel_wrap.length){
carousel_wrap.css("top","3em");
height += parseInt(carousel_wrap.css('font-size')) * 3;
}
banner_wrap.height(height).css({"padding-bottom":"","padding-top":""}); banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
banner_wrap.find(".cycle-carousel-wrap").css("top","3em"); var init_key = find_out_yt_event_relation_key(yt_player, false);
try{ if(init_key){
delete (event.target.B || event.target.H || event.target.I).onStateChange; delete yt_player[init_key].onStateChange;
}catch(e){console.log("{onReady: true, onStateChange: true} missing!")}; }
var event_list_key = find_out_yt_event_list_key(event.target); else{
console.log("{onReady: true, onStateChange: true} missing!");
}
var event_list_key = find_out_yt_event_list_key(yt_player);
if(event_list_key){ if(event_list_key){
var event_dict = event.target[event_list_key]; var event_dict = yt_player[event_list_key];
var array_key = find_out_yt_event_list_array_key(event_dict); var array_key = find_out_yt_event_list_array_key(event_dict);
var count_key = find_out_yt_event_list_count_key(event_dict, array_key); var count_key = find_out_yt_event_list_count_key(event_dict, array_key);
var relation_key = find_out_yt_event_relation_key(event_dict); var relation_key = find_out_yt_event_relation_key(event_dict, true);
var onStateChange_idx = event_dict[relation_key].onStateChange; var onStateChange_idx = event_dict[relation_key].onStateChange;
onStateChange_idx.reverse(); onStateChange_idx.reverse();
var event_size = 3; var event_size = 3;
@ -218,7 +250,7 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
}); });
event_dict[relation_key].onStateChange = []; event_dict[relation_key].onStateChange = [];
event_dict[count_key] = event_dict[array_key].length; event_dict[count_key] = event_dict[array_key].length;
event.target.addEventListener('onStateChange',onPlayerStateChange); yt_player.addEventListener('onStateChange',onPlayerStateChange);
}else{ }else{
console.log("YT player changes its variables!") console.log("YT player changes its variables!")
} }
@ -232,6 +264,9 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
} }
}) })
} }
}
$(".w-ba-banner").each(function(i,banner){
init_banner(banner);
}) })
} }
function onPlayerStateChange(event){ function onPlayerStateChange(event){
@ -241,12 +276,12 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){ if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
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,.banner-overlay').css('visibility','hidden')
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),false); 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,.banner-overlay').css('visibility','')
ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true); ad_audio_button(iframe.parents(".w-ad-banner__slide").eq(0),true);
} }
{{extra_state_chnage_script}} {{extra_state_chnage_script}}
@ -266,11 +301,13 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
} }
}) })
banner_wrap.on('cycle-resumed',function(opts){ banner_wrap.on('cycle-resumed',function(opts){
if(!($(this).data('paused'))){
var controlplay = $(this).nextAll(".controlplay"); var controlplay = $(this).nextAll(".controlplay");
if(controlplay.length != 0){ if(controlplay.length != 0){
controlplay.find(".resume-slide").addClass("active"); controlplay.find(".resume-slide").addClass("active");
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();
@ -278,12 +315,12 @@ if (typeof onYouTubeIframeAPIReady !== 'function'){
banner_wrap.css("padding-bottom",""); banner_wrap.css("padding-bottom","");
{{extra_document_ready_script}} {{extra_document_ready_script}}
$('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){ $('[data-subpart-id="{{subpart-id}}"] .pause-slide').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause'); $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").data('paused', true).cycle('pause');
$(this).addClass('active'); $(this).addClass('active');
$(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active'); $(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active');
}); });
$('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){ $('[data-subpart-id="{{subpart-id}}"] .resume-slide').click(function(){
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume'); $(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").data('paused', false).cycle('resume');
$(this).addClass('active'); $(this).addClass('active');
$(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active'); $(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active');
}); });