277 lines
11 KiB
Plaintext
277 lines
11 KiB
Plaintext
<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"
|
|
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}}"
|
|
data-pager=".banner_caption_{{subpart-id}}"
|
|
data-pager-template="<li><button title='pager'></button></li>"
|
|
data-pager-active-class="active-slide"
|
|
data-cycle-youtube="true"
|
|
data-cycle-youtube-autostart="false"
|
|
data-cycle-swipe="true"
|
|
data-cycle-prev=".banner_prev"
|
|
data-cycle-next=".banner_next"
|
|
data-cycle-pause-on-hover="true"
|
|
style="padding-bottom: 56.25%;"
|
|
>
|
|
|
|
{{html}}
|
|
</div>
|
|
<div class="ad-overlay w-ad-banner__overlay_{{subpart-id}}"></div>
|
|
<div class="w-ba-banner__caption w-ad-banner__pager-2 banner-pager banner_caption_{{subpart-id}}"></div>
|
|
<ul class="controlplay"><a href="javascript:;" class="resume-slide active" title="<%= I18n.t("ad_banner.resume") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.resume") %>"></i></a><a href="javascript:;" class="pause-slide" title="<%= I18n.t("ad_banner.pause") %>"><i aria-hidden="true" aria-label="<%= I18n.t("ad_banner.pause") %>"></i></a></ul>
|
|
<ul class="button-mid">
|
|
<i class="fa fa-angle-left prev-button" aria-hidden="true" aria-label="<%= I18n.t("ad_banner.prev") %>"></i>
|
|
<i class="fa fa-angle-right next-button" aria-hidden="true" aria-label="<%= I18n.t("ad_banner.next") %>"></i>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var ad_trigger_time;
|
|
if (typeof ad_banners_count === 'undefined'){
|
|
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){
|
|
button_container.find('.jarallax-video-audio').remove();
|
|
}else{
|
|
var audio_div;
|
|
if ($self.hasClass('have-audio')){
|
|
audio_div = $('<button title="<%= I18n.t("ad_banner.muted") %>" class="jarallax-video-audio"><i class="fas fa-volume-up"></i></button>');
|
|
}else{
|
|
audio_div = $('<button title="<%= I18n.t("ad_banner.unmuted") %>" class="jarallax-video-audio"><i class="fas fa-volume-mute"></i></button>');
|
|
}
|
|
audio_div.click(function(event) {
|
|
var currentTime = new Date();
|
|
if (ad_trigger_time&¤tTime-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){
|
|
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);
|
|
}
|
|
$("*[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++;
|
|
})
|
|
if (typeof onYouTubeIframeAPIReady !== 'function'){
|
|
$(document).ready(function() {
|
|
$(document).on('touchstart click mousedown',".jarallax-video-audio",function(){
|
|
$(this).trigger('click');
|
|
});
|
|
});
|
|
if(window.yt_players == undefined)
|
|
window.yt_players = {};
|
|
function onYouTubeIframeAPIReady(){
|
|
$(".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){
|
|
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 = $(iframe).parents('.w-ba-banner__wrap').eq(0);
|
|
banner_wrap.height(height).css({"padding-bottom":"","padding-top":""});
|
|
banner_wrap.find(".cycle-carousel-wrap").css("top","3em");
|
|
delete (event.target.B || event.target.H).onStateChange;
|
|
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);
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
function onPlayerStateChange(event){
|
|
var iframe = $(event.target.h),
|
|
cyclediv = iframe.parents("div.cycle-slideshow");
|
|
var widget = cyclediv.parents('.ba-banner-widget-youtube');
|
|
if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
|
|
cyclediv[0].need_resume = !(cyclediv.hasClass("cycle-paused"));
|
|
cyclediv.cycle("pause");
|
|
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){
|
|
if(cyclediv[0].need_resume)
|
|
cyclediv.cycle("resume");
|
|
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}}
|
|
}
|
|
}
|
|
$(document).ready(function(){
|
|
window.onYouTubePlayerAPIReady = function() {
|
|
onYouTubeIframeAPIReady.apply(this,arguments);
|
|
};
|
|
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)*/
|
|
banner_wrap.css("padding-bottom","");
|
|
{{extra_document_ready_script}}
|
|
$('.pause-slide').off('click').click(function(){
|
|
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
|
|
$(this).addClass('active');
|
|
$(this).parents('.controlplay').eq(0).find('.resume-slide').removeClass('active');
|
|
});
|
|
$('.resume-slide').off('click').click(function(){
|
|
$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
|
|
$(this).addClass('active');
|
|
$(this).parents('.controlplay').eq(0).find('.pause-slide').removeClass('active');
|
|
});
|
|
$('.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");
|
|
})
|
|
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);
|
|
})
|
|
})
|
|
</script>
|
|
<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,.jarallax-video-audio:focus{
|
|
color: #FFC500;
|
|
transition: all 0.6s ease;
|
|
}
|
|
|
|
.w-ba-banner .controlplay .resume-slide.active i{
|
|
color: #32D9C3;
|
|
}
|
|
.w-ba-banner .controlplay .pause-slide.active i{
|
|
color: #ff4500;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|