(function ($) { var lanserVid = function (element, options) { var settings = $.extend({}, $.fn.lanserVid.defaults, options); window.requestAnimationFrame = function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(f) { timeS = window.setTimeout(f,1e3/60); } }(); window.cancelAnimationFrame = function() { return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame || window.oCancelAnimationFrame || function(f) { clearTimeout(timeS); } }(); var vars = { aktSlide: 0, allSlides: [], enableArrows: false, enableNavig: false, enableProg: false, pauseTime: 6000, lans: null, navDiv: null, progress: null, /*loaderLength: 0, loaderPath: null,*/ loaderPercent: 0, aktContainer: null, aktSlideContainer: null, aktTextContainer: null, nextContainer: null, nextSlideContainer: null, nextTextContainer: null, CSS_supports: false, lastTime: -1, debugTime: 0, running: false, first: true, navTab: null, functionsLoaded: false, APILoaded: false, isMuted: true, paused: false, isVolumeChanged: false, runVolume: false, isVolumeEnabled: false, isPauseEnabled: false, firstLoader:false }; onYouTubeIframeAPIReady = function(){ if(vars.functionsLoaded) init(); else vars.APILoaded = true; } if(typeof CSS != 'undefined' && typeof CSS.supports != 'undefined')vars.CSS_supports = true; vars.aktSlide = parseInt(settings.startSlide); vars.allSlides = settings.lanserJson; vars.enableArrows = settings.showDirection; vars.enableNavig = settings.showNavig; vars.pauseTime = settings.pauseTime; vars.enableProg = settings.autoStart && (vars.pauseTime > 0); vars.lans = $(element); vars.aktContainer = vars.lans.find('.ulSlider .liSlider'); vars.aktSlideContainer = vars.aktContainer.find('.slide'); vars.aktTextContainer = vars.aktContainer.find('.opis'); vars.nextContainer = vars.lans.find('.ulSlider .liSliderNext'); vars.nextSlideContainer = vars.nextContainer.find('.slide'); vars.nextTextContainer = vars.nextContainer.find('.opis'); vars.navDiv = vars.lans.parent().parent().find('.lans_navig'); vars.progress = vars.navDiv.find('.progress'); vars.loaderPath = vars.progress.find('.progressIn'); vars.isVolumeEnabled = settings.isVideo; vars.isPauseEnabled = settings.isVideo || vars.enableProg; //vars.loaderLength = vars.loaderPath[0].getTotalLength(); var init = function(){ vars.loaderPath.css('stroke-dasharray', vars.loaderLength); if(vars.allSlides.length > 1 && vars.enableArrows)buildArrows(); if(vars.allSlides.length > 1 && vars.enableNavig)buildNavig(); if(vars.allSlides.length > 1 && vars.enableProg)buildProgress(); //nextSlide(0); firstSlide(); } var firstSlide = function(){ var slide = vars.allSlides[vars.aktSlide]; if(slide['mixed'] == 1)addmask(); else addbg(); vars.loaderPath.css('width','0%'); if(!vars.enableProg)vars.progress.css('opacity', '0'); vars.aktSlideContainer.append(vars.nextSlideContainer.find('.background')); if(slide['typeName'] == 'youtube'){ var wrapVideo = $('
'); vars.paused = true; wrapVideo.attr('id', 'YTPlayer'); wrapVideo.addClass('media'); vars.aktSlideContainer.append($(slide['srcMedia'])); vars.aktSlideContainer.append(wrapVideo); vars.aktSlideContainer.find('img').addClass('placeholder'); initYTVideo(); } else if(slide['typeName'] == 'mp4'){ vars.paused = true; vars.aktSlideContainer.append($(slide['srcMedia'])); vars.aktSlideContainer.find('video')[0].pause(); vars.aktSlideContainer.find('video')[0].muted = false; vars.aktSlideContainer.find('video')[0].volume = 0; initSlideMp4(); } else{ //vars.aktSlideContainer.append($(slide['srcMedia'])); nextSlide(0); } if(vars.isVolumeEnabled){ $('#mute').on('click',function(){ switch(vars.allSlides[vars.aktSlide]['typeName']){ case 'youtube': muteYT(); break; case 'mp4': muteVideo(); break; } vars.isMuted = !vars.isMuted; if(vars.isMuted)$('#mute').addClass('muted'); else $('#mute').removeClass('muted'); }); } else $('#mute').css('display', 'none'); if(vars.isPauseEnabled){ $('#pause').on('click', function(){ if(vars.running) return false; switch(vars.allSlides[vars.aktSlide]['typeName']){ case 'youtube': pauseYT(); break; case 'mp4': pauseVideo(); break; } vars.paused = !vars.paused; if(vars.paused)$('#pause').addClass('paused'); else $('#pause').removeClass('paused'); }); } else $('#pause').css('display', 'none'); vars.aktSlideContainer.addClass(slide['typeName']); } var buildArrows = function(){ var arrowWrap = $('
'); var arrowN = $(''); var arrowP = $(''); arrowN.addClass('arrowN'); arrowP.addClass('arrowP'); arrowN.attr('href', '#empty-anchor'); arrowP.attr('href', '#empty-anchor'); arrowN.on('click',function(){ if(vars.running)return false; nextSlide(vars.aktSlide+1); }); arrowP.on('click',function(){ if(vars.running)return false; nextSlide(vars.aktSlide-1); }); arrowWrap.addClass('arrows'); arrowWrap.append(arrowN); arrowWrap.append(arrowP); vars.navDiv.append(arrowWrap); } var buildNavig = function(){ var wrapNavig = vars.navDiv.find('.nav_wrap'); for(i = 0; i < vars.allSlides.length; i++){ var wrap = $('
'); var navig = $(''); var navigSpan = $(''); navigSpan.addClass('spanNavigA'); navig.append(navigSpan); navig.attr('data-id', i); navig.attr('href', '#empty-anchor'); navig.addClass('nav'); if(i == vars.aktSlide)navig.addClass('sel'); navig.on('click',function(e){ nextSlide(parseInt(e.target.dataset.id)); }); wrap.append(navig) wrapNavig.append(wrap); } vars.navTab = vars.navDiv.find('.nav'); //vars.navDiv.append(wrapNavig); } var buildProgress = function(){ var actS = vars.aktSlide+1; if(actS >= vars.allSlides.length) actS = 0; vars.loaderPath = vars.navDiv.find('.spanNavigA').eq(actS); animateSvg(); } var animateSvg = function(){ var d = new Date(); var t = d.getTime(); if(vars.lastTime == -1)vars.lastTime = t; if(vars.running || vars.paused) { vars.lastTime = t; requestId = requestAnimationFrame(animateSvg); return false; } if(vars.loaderPercent < 1){ vars.loaderPercent += (1/vars.pauseTime)*(t-vars.lastTime); //var aktLength = vars.loaderLength - vars.loaderPercent*vars.loaderLength; //vars.debugTime+=t-vars.lastTime vars.loaderPath.css('width',(100*vars.loaderPercent)+'%'); } else { var index = vars.aktSlide+1; nextSlide(index); } vars.lastTime = t; requestId = requestAnimationFrame(animateSvg); } var fadeInVolume = function(volume){ if(vars.runVolume)return false; vars.runVolume = true; fadeInVolumeInterval = window.setInterval(function(){ player.setVolume(++volume); if(volume >= 100) { window.clearInterval(fadeInVolumeInterval); vars.runVolume = false; } },2) } var fadeOutVolume = function(volume){ if(vars.runVolume)return false; vars.runVolume = true; fadeOutVolumeInterval = window.setInterval(function(){ player.setVolume(--volume); if(volume <= 0) { window.clearInterval(fadeOutVolumeInterval); vars.runVolume = false; } },2) } var fadeInVolumeVideo = function(volume){ if(vars.runVolume)return false; vars.runVolume = true; fadeInVolumeInterval = window.setInterval(function(){ vars.aktSlideContainer.find('video')[0].volume = (++volume)/100; if(volume >= 100) { window.clearInterval(fadeInVolumeInterval); vars.runVolume = false; } },5) } var fadeOutVolumeVideo = function(volume){ if(vars.runVolume)return false; vars.runVolume = true; fadeOutVolumeInterval = window.setInterval(function(){ vars.aktSlideContainer.find('video')[0].volume = (--volume)/100; if(volume <= 0) { window.clearInterval(fadeOutVolumeInterval); vars.runVolume = false; } },5) } var nextSlide = function(index){ //if(vars.running || index == vars.aktSlide)return false; if(vars.running || (index == vars.aktSlide && vars.firstLoader))return false; vars.firstLoader = true; vars.lans.find('.loading').remove(); vars.running = true; vars.loaderPercent = 0; vars.loaderPath.css('width','0%'); vars.paused = true; $('#pause').removeClass('paused'); if(index >= vars.allSlides.length)index = 0; else if(index < 0)index = vars.allSlides.length-1; if(!vars.isMuted){ if(vars.allSlides[vars.aktSlide]['typeName'] == 'youtube') window.setTimeout(function(){ fadeOutVolume(player.getVolume()) },1); else if(vars.allSlides[vars.aktSlide]['typeName'] == 'mp4') window.setTimeout(function(){ fadeOutVolumeVideo(vars.aktSlideContainer.find('video')[0].volume*100); },1); } var slide = vars.allSlides[index]; vars.aktSlide = index; addText(); if(slide['mixed'] == 1)addmask(); else addbg(); if (slide['typeName'] == 'zdjecie')addSlideImg(); else if (slide['typeName'] == 'youtube')addSlideVideoYt(); else if(slide['typeName'] == 'mp4')addSlideMp4(); vars.pauseTime = settings.pauseTime; } var addText = function(){ var slide = vars.allSlides[vars.aktSlide]; if(slide.opis.length>0 && typeof slide.isOpis == 'undefined') { slide.opis = '
'+slide.opis+'
'; vars.allSlides[vars.aktSlide].isOpis = true; } vars.nextTextContainer.append(slide.opis); if(vars.aktTextContainer.find('.opis2').length){ vars.nextTextContainer.find('.opis2').attr('style',vars.aktTextContainer.find('.opis2').attr('style')); } } var addmask = function(){ var slide = vars.allSlides[vars.aktSlide]; if(!vars.CSS_supports || !CSS.supports('mix-blend-mode', slide['mixed_type']))addbg(); else{ var bg = $('
'); var slide = vars.allSlides[vars.aktSlide]; bg.addClass('background'); bgStyle={ 'background-color': '#'+slide['mask_color'], 'opacity': slide['mask_opacity']/100, 'mix-blend-mode': slide['mixed_type'], } bg.css(bgStyle); vars.nextSlideContainer.append(bg); } } var addbg = function(){ var bg = $('
'); var slide = vars.allSlides[vars.aktSlide]; bg.addClass('background'); bgStyle={ 'background-color': '#'+slide['bg_color'], 'opacity': slide['bg_opacity']/100, } bg.css(bgStyle); vars.nextSlideContainer.append(bg); } var pauseVideo = function(){ if(vars.paused)vars.aktSlideContainer.find('video')[0].play(); else vars.aktSlideContainer.find('video')[0].pause(); } var muteVideo = function(){ if(vars.isMuted)fadeInVolumeVideo(0); else fadeOutVolumeVideo(vars.aktSlideContainer.find('video')[0].volume*100); } var pauseYT = function(){ if(vars.paused)player.playVideo(); else player.pauseVideo(); } var muteYT = function(){ if(vars.running) return false; if(vars.isMuted)fadeInVolume(player.getVolume()); else fadeOutVolume(player.getVolume()); } var ytReady = function(){ /*vars.nextSlideContainer.find('img.media').remove(); vars.aktSlideContainer.find('img.media').remove();*/ if(vars.isMuted)player.setVolume(0); else fadeInVolume(0); } var ytStateChange = function(event){ if(event.data == -1){ //event.target.play(); event.target.playVideo(); } else if(event.data == 1){ if(vars.running) return false; vars.lans.find('.loading').remove(); vars.pauseTime = player.getDuration()*1000; vars.aktSlideContainer.find('img.placeholder').animate({ opacity: 0, },500,function(){ vars.aktSlideContainer.find('img.placeholder').remove(); vars.paused = false; }); } } var initYTVideo = function(){ var slide = vars.allSlides[vars.aktSlide]; var loader = $('
'); loader.addClass('loading'); vars.lans.append(loader); player = new YT.Player('YTPlayer', { videoId: slide.external_id, width: 1920, height: 1080, events: { 'onReady': ytReady, 'onStateChange': ytStateChange, }, playerVars: { 'autoplay': 1, 'controls': 0, 'disablekb': 1, 'playsinline': 1, 'iv_load_policy': 3, 'fs': 0, 'modestbranding': 1, 'rel': 0, 'showinfo': 0, 'loop': 1, 'playlist': slide.external_id, } }); } var addSlideVideoYt = function(){ var slide = vars.allSlides[vars.aktSlide]; var slideMedia = $(slide['srcMedia']); var wrapVideo = $('
'); wrapVideo.attr('id', 'YTPlayer'); wrapVideo.addClass('media'); vars.nextSlideContainer.append(slideMedia); vars.nextSlideContainer.append(wrapVideo); vars.nextSlideContainer.find('img').addClass('placeholder'); animateSlide(); } var addSlideImg = function(){ var slide = vars.allSlides[vars.aktSlide]; var slideMedia = $(slide['srcMedia']); vars.nextSlideContainer.append(slideMedia); animateSlide(); } var addSlideMp4 = function(){ var slide = vars.allSlides[vars.aktSlide]; var slideMedia = $(slide['srcMedia']); vars.nextSlideContainer.append(slideMedia); vars.nextSlideContainer.find('video')[0].pause(); animateSlide(); } var initSlideMp4 = function(){ var initionTimeoutMp4 = window.setInterval(function(){ if(vars.aktSlideContainer.find('video')[0].readyState == 4){ window.clearInterval(initionTimeoutMp4); vars.pauseTime = vars.aktSlideContainer.find('video')[0].duration*1000; vars.aktSlideContainer.find('video')[0].play(); vars.paused = false; if(vars.isMuted) vars.aktSlideContainer.find('video')[0].volume = 0; else fadeInVolumeVideo(0); } },10); } var animateSlide = function(){ var slide = vars.allSlides[vars.aktSlide]; var effectImg = slide['effImage']; var effectTextIn = slide['effTextIn']; var effectTextOut = slide['effTextOut']; var animatedImage = null; if(effectImg == 'random')effectImg = settings.tabEffImage[Math.round((settings.tabEffImage.length-1)*Math.random())]; if(effectTextIn == 'random')effectTextIn = settings.jsonInDesc[Math.round((settings.jsonInDesc.length-1)*Math.random())]; if(effectTextOut == 'random')effectTextOut = settings.jsonOutDesc[Math.round((settings.jsonOutDesc.length-1)*Math.random())]; if(effectImg.indexOf('Out') != -1){ vars.aktContainer.addClass('animated'); animatedImage = vars.aktSlideContainer; } else{ vars.nextContainer.addClass('animated'); animatedImage = vars.nextSlideContainer; } vars.aktTextContainer.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ vars.aktTextContainer.off('webkitAnimationEnd oanimationend msAnimationEnd animationend'); vars.aktTextContainer.removeAttr('style'); vars.aktTextContainer.removeClass('animated'); vars.aktTextContainer.children().remove(); animateImage(effectImg, animatedImage); }); animatedImage.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ animatedImage.off('webkitAnimationEnd oanimationend msAnimationEnd animationend'); if(vars.nextTextContainer[0].innerHTML != '')textInAnimate(effectTextIn); else vars.nextTextContainer.trigger('animationend'); }); let countObj = 0; let ileAnim = 0; if(vars.nextTextContainer.find('a').length>0) countObj += vars.nextTextContainer.find('a').length; if(vars.nextTextContainer.find('img').length>0){ vars.nextTextContainer.find('img').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ vars.nextTextContainer.find('img').off('webkitAnimationEnd oanimationend msAnimationEnd animationend'); $(this).removeAttr('style'); $(this).removeClass('animated'); vars.nextTextContainer.removeAttr('style'); vars.nextTextContainer.removeClass('animated'); animateSlideEnd(animatedImage, slide['typeName']); }) if(vars.nextTextContainer.find('a').length>0){ vars.nextTextContainer.find('a').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ ileAnim++; $(this).removeAttr('style'); $(this).removeClass('animated'); if(ileAnim == countObj) { vars.nextTextContainer.find('a').off('webkitAnimationEnd oanimationend msAnimationEnd animationend'); vars.nextTextContainer.removeAttr('style'); vars.nextTextContainer.removeClass('animated'); //animateSlideEnd(animatedImage, slide['typeName']); } }) } } else if(vars.nextTextContainer.find('a').length>0){ vars.nextTextContainer.find('a').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ ileAnim++; $(this).removeAttr('style'); $(this).removeClass('animated'); if(ileAnim == countObj) { vars.nextTextContainer.find('a').off('webkitAnimationEnd oanimationend msAnimationEnd animationend'); vars.nextTextContainer.removeAttr('style'); vars.nextTextContainer.removeClass('animated'); animateSlideEnd(animatedImage, slide['typeName']); } }) } else{ vars.nextTextContainer.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ vars.nextTextContainer.off('webkitAnimationEnd oanimationend msAnimationEnd animationend'); vars.nextTextContainer.removeAttr('style'); vars.nextTextContainer.removeClass('animated'); animateSlideEnd(animatedImage, slide['typeName']); }); } if(vars.navTab) vars.navTab.removeClass('sel'); if(vars.aktTextContainer[0].innerHTML != '')textOutAnimate(effectTextOut); else vars.aktTextContainer.trigger('animationend'); } var textOutAnimate = function(effectName){ var slide = vars.allSlides[vars.aktSlide]; var duration = 1000; var delay = 50; var divCss = { 'animation-duration': duration + 'ms', '-webkit-animation-duration': duration + 'ms', '-webkit-animation-name': effectName, 'animation-name': effectName, '-webkit-animation-delay': delay + 'ms', 'animation-delay': delay + 'ms', }; vars.aktTextContainer.addClass('animated'); vars.aktTextContainer.css(divCss); } var textInAnimate = function(effectName){ var slide = vars.allSlides[vars.aktSlide]; var aInTxt = vars.nextTextContainer.find('a'); var imgInTxt = vars.nextTextContainer.find('img'); var duration = 1000; var delay = 50; var divCss = { 'animation-duration': duration + 'ms', '-webkit-animation-duration': duration + 'ms', '-webkit-animation-name': effectName, 'animation-name': effectName, '-webkit-animation-delay': delay + 'ms', 'animation-delay': delay + 'ms', }; let delayA = 150; let durationA = 1000; if(aInTxt.length>0){ aInTxt.each(function(){ var divCssA = { 'animation-duration': durationA + 'ms', '-webkit-animation-duration': durationA + 'ms', '-webkit-animation-name': effectName, 'animation-name': effectName, '-webkit-animation-delay': delayA + 'ms', 'animation-delay': delayA + 'ms', }; delayA += 500; $(this).addClass('animated'); $(this).css(divCssA); }) } if(imgInTxt.length>0){ let delayImg = 150; let durationImg = 1500; var divCssImg = { 'animation-duration': durationImg + 'ms', '-webkit-animation-duration': durationImg + 'ms', '-webkit-animation-name': effectName, 'animation-name': effectName, '-webkit-animation-delay': delayImg + 'ms', 'animation-delay': delayImg + 'ms', }; $(imgInTxt.eq(0)).addClass('animated'); $(imgInTxt.eq(0)).css(divCssImg); } vars.nextTextContainer.addClass('animated'); vars.nextTextContainer.css(divCss); } var animateImage = function(effectName, element){ var slide = vars.allSlides[vars.aktSlide]; var duration = 1000; var delay = 50; var divCss = { 'animation-duration': duration + 'ms', '-webkit-animation-duration': duration + 'ms', '-webkit-animation-name': effectName, 'animation-name': effectName, '-webkit-animation-delay': delay + 'ms', 'animation-delay': delay + 'ms', }; if(vars.navTab) vars.navTab.removeClass('sel'); vars.aktSlideContainer.removeAttr('class'); vars.aktSlideContainer.attr('class', 'slide '+slide['typeName']); element.addClass('animated'); element.css(divCss); } var animateSlideEnd = function(animatedElem, typeSlide){ animatedElem.removeClass('animated'); vars.aktSlideContainer.find('.media').remove(); vars.aktSlideContainer.find('.background').remove(); animatedElem.removeAttr('style'); vars.lans.find('li').removeClass('animated'); vars.aktSlideContainer.append(vars.nextSlideContainer.find('.media')); vars.aktSlideContainer.append(vars.nextSlideContainer.find('.background')); vars.aktTextContainer.append(vars.nextTextContainer.children()); //vars.lastTime = -1; vars.running = false; var actS = vars.aktSlide+1; if(actS >= vars.allSlides.length) actS = 0; if(vars.navTab) vars.navTab.eq(vars.aktSlide).addClass('sel'); if(vars.navTab) vars.navTab.eq(vars.aktSlide).parent().addClass('selDiv'); vars.loaderPath = vars.navDiv.find('.spanNavigA').eq(actS); if(typeSlide == 'youtube')initYTVideo(); else if(typeSlide == 'mp4'){ vars.aktSlideContainer.find('video')[0].muted = false; initSlideMp4(); } else vars.paused = false; //vars.paused = false; //if(vars.enableProg)animateSvg(); } if(vars.ApiLoaded)init(); else vars.functionsLoaded = true; }; $.fn.lanserVid = function (options) { return this.each(function (key, value) { var element = $(this); if (element.data('lans')) return element.data('lans'); var lans = new lanserVid(this, options); element.data('lans', lans); }); }; $.fn.lanserVid.defaults = { pauseTime: 6000, autoStart: 0, showDirection: 1, showNavig: 1, tabEffImage: [], lanserJson: [], startSlide: 0, fullVideo: true, lanserJson: [], isVideo: false, } })(jQuery);