(function(fn){
if(typeof define==='function'&&define.amd){
define([], fn);
}else if((typeof module!=="undefined"&&module!==null)&&module.exports){
module.exports=fn;
}else{
fn();
}})(function(){
var assign=Object.assign||window.jQuery&&jQuery.extend;
var threshold=8;
var requestFrame=(function(){
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(fn, element){
return window.setTimeout(function(){
fn();
}, 25);
}
);
})();
(function (){
if(typeof window.CustomEvent==="function") return false;
function CustomEvent(event, params){
params=params||{ bubbles: false, cancelable: false, detail: undefined };
var evt=document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
}
CustomEvent.prototype=window.Event.prototype;
window.CustomEvent=CustomEvent;
})();
var ignoreTags={
textarea: true,
input: true,
select: true,
button: true
};
var mouseevents={
move:   'mousemove',
cancel: 'mouseup dragstart',
end:    'mouseup'
};
var touchevents={
move:   'touchmove',
cancel: 'touchend',
end:    'touchend'
};
var rspaces=/\s+/;
var eventOptions={ bubbles: true, cancelable: true };
var eventsSymbol=typeof Symbol==="function" ? Symbol('events'):{};
function createEvent(type){
return new CustomEvent(type, eventOptions);
}
function getEvents(node){
return node[eventsSymbol]||(node[eventsSymbol]={});
}
function on(node, types, fn, data, selector){
types=types.split(rspaces);
var events=getEvents(node);
var i=types.length;
var handlers, type;
function handler(e){ fn(e, data); }
while (i--){
type=types[i];
handlers=events[type]||(events[type]=[]);
handlers.push([fn, handler]);
node.addEventListener(type, handler);
}}
function off(node, types, fn, selector){
types=types.split(rspaces);
var events=getEvents(node);
var i=types.length;
var type, handlers, k;
if(!events){ return; }
while (i--){
type=types[i];
handlers=events[type];
if(!handlers){ continue; }
k=handlers.length;
while (k--){
if(handlers[k][0]===fn){
node.removeEventListener(type, handlers[k][1]);
handlers.splice(k, 1);
}}
}}
function trigger(node, type, properties){
var event=createEvent(type);
if(properties){ assign(event, properties); }
node.dispatchEvent(event);
}
function Timer(fn){
var callback=fn,
active=false,
running=false;
function trigger(time){
if(active){
callback();
requestFrame(trigger);
running=true;
active=false;
}else{
running=false;
}}
this.kick=function(fn){
active=true;
if(!running){ trigger(); }};
this.end=function(fn){
var cb=callback;
if(!fn){ return; }
if(!running){
fn();
}else{
callback=active ?
function(){ cb(); fn(); } :
fn ;
active=true;
}};}
function noop(){}
function preventDefault(e){
e.preventDefault();
}
function isIgnoreTag(e){
return !!ignoreTags[e.target.tagName.toLowerCase()];
}
function isPrimaryButton(e){
return (e.which===1&&!e.ctrlKey&&!e.altKey);
}
function identifiedTouch(touchList, id){
var i, l;
if(touchList.identifiedTouch){
return touchList.identifiedTouch(id);
}
i=-1;
l=touchList.length;
while (++i < l){
if(touchList[i].identifier===id){
return touchList[i];
}}
}
function changedTouch(e, data){
var touch=identifiedTouch(e.changedTouches, data.identifier);
if(!touch){ return; }
if(touch.pageX===data.pageX&&touch.pageY===data.pageY){ return; }
return touch;
}
function mousedown(e){
if(!isPrimaryButton(e)){ return; }
if(isIgnoreTag(e)){ return; }
on(document, mouseevents.move, mousemove, e);
on(document, mouseevents.cancel, mouseend, e);
}
function mousemove(e, data){
checkThreshold(e, data, e, removeMouse);
}
function mouseend(e, data){
removeMouse();
}
function removeMouse(){
off(document, mouseevents.move, mousemove);
off(document, mouseevents.cancel, mouseend);
}
function touchstart(e){
if(ignoreTags[e.target.tagName.toLowerCase()]){ return; }
var touch=e.changedTouches[0];
var data={
target:     touch.target,
pageX:      touch.pageX,
pageY:      touch.pageY,
identifier: touch.identifier,
touchmove:  function(e, data){ touchmove(e, data); },
touchend:   function(e, data){ touchend(e, data); }};
on(document, touchevents.move, data.touchmove, data);
on(document, touchevents.cancel, data.touchend, data);
}
function touchmove(e, data){
var touch=changedTouch(e, data);
if(!touch){ return; }
checkThreshold(e, data, touch, removeTouch);
}
function touchend(e, data){
var touch=identifiedTouch(e.changedTouches, data.identifier);
if(!touch){ return; }
removeTouch(data);
}
function removeTouch(data){
off(document, touchevents.move, data.touchmove);
off(document, touchevents.cancel, data.touchend);
}
function checkThreshold(e, data, touch, fn){
var distX=touch.pageX - data.pageX;
var distY=touch.pageY - data.pageY;
if((distX * distX) + (distY * distY) < (threshold * threshold)){ return; }
triggerStart(e, data, touch, distX, distY, fn);
}
function triggerStart(e, data, touch, distX, distY, fn){
var touches=e.targetTouches;
var time=e.timeStamp - data.timeStamp;
var template={
altKey:     e.altKey,
ctrlKey:    e.ctrlKey,
shiftKey:   e.shiftKey,
startX:     data.pageX,
startY:     data.pageY,
distX:      distX,
distY:      distY,
deltaX:     distX,
deltaY:     distY,
pageX:      touch.pageX,
pageY:      touch.pageY,
velocityX:  distX / time,
velocityY:  distY / time,
identifier: data.identifier,
targetTouches: touches,
finger: touches ? touches.length:1,
enableMove: function(){
this.moveEnabled=true;
this.enableMove=noop;
}};
trigger(data.target, 'movestart', template);
fn(data);
}
function activeMousemove(e, data){
var timer=data.timer;
data.touch=e;
data.timeStamp=e.timeStamp;
timer.kick();
}
function activeMouseend(e, data){
var target=data.target;
var event=data.event;
var timer=data.timer;
removeActiveMouse();
endEvent(target, event, timer, function(){
setTimeout(function(){
off(target, 'click', preventDefault);
}, 0);
});
}
function removeActiveMouse(){
off(document, mouseevents.move, activeMousemove);
off(document, mouseevents.end, activeMouseend);
}
function activeTouchmove(e, data){
var event=data.event;
var timer=data.timer;
var touch=changedTouch(e, event);
if(!touch){ return; }
event.targetTouches=e.targetTouches;
data.touch=touch;
data.timeStamp=e.timeStamp;
timer.kick();
}
function activeTouchend(e, data){
var target=data.target;
var event=data.event;
var timer=data.timer;
var touch=identifiedTouch(e.changedTouches, event.identifier);
if(!touch){ return; }
removeActiveTouch(data);
endEvent(target, event, timer);
}
function removeActiveTouch(data){
off(document, touchevents.move, data.activeTouchmove);
off(document, touchevents.end, data.activeTouchend);
}
function updateEvent(event, touch, timeStamp){
var time=timeStamp - event.timeStamp;
event.distX=touch.pageX - event.startX;
event.distY=touch.pageY - event.startY;
event.deltaX=touch.pageX - event.pageX;
event.deltaY=touch.pageY - event.pageY;
event.velocityX=0.3 * event.velocityX + 0.7 * event.deltaX / time;
event.velocityY=0.3 * event.velocityY + 0.7 * event.deltaY / time;
event.pageX=touch.pageX;
event.pageY=touch.pageY;
}
function endEvent(target, event, timer, fn){
timer.end(function(){
trigger(target, 'moveend', event);
return fn&&fn();
});
}
function movestart(e){
if(e.defaultPrevented){ return; }
if(!e.moveEnabled){ return; }
var event={
startX:        e.startX,
startY:        e.startY,
pageX:         e.pageX,
pageY:         e.pageY,
distX:         e.distX,
distY:         e.distY,
deltaX:        e.deltaX,
deltaY:        e.deltaY,
velocityX:     e.velocityX,
velocityY:     e.velocityY,
identifier:    e.identifier,
targetTouches: e.targetTouches,
finger:        e.finger
};
var data={
target:    e.target,
event:     event,
timer:     new Timer(update),
touch:     undefined,
timeStamp: e.timeStamp
};
function update(time){
updateEvent(event, data.touch, data.timeStamp);
trigger(data.target, 'move', event);
}
if(e.identifier===undefined){
on(e.target, 'click', preventDefault);
on(document, mouseevents.move, activeMousemove, data);
on(document, mouseevents.end, activeMouseend, data);
}else{
data.activeTouchmove=function(e, data){ activeTouchmove(e, data); };
data.activeTouchend=function(e, data){ activeTouchend(e, data); };
on(document, touchevents.move, data.activeTouchmove, data);
on(document, touchevents.end, data.activeTouchend, data);
}}
on(document, 'mousedown', mousedown);
on(document, 'touchstart', touchstart);
on(document, 'movestart', movestart);
if(!window.jQuery){ return; }
var properties=("startX startY pageX pageY distX distY deltaX deltaY velocityX velocityY").split(' ');
function enableMove1(e){ e.enableMove(); }
function enableMove2(e){ e.enableMove(); }
function enableMove3(e){ e.enableMove(); }
function add(handleObj){
var handler=handleObj.handler;
handleObj.handler=function(e){
var i=properties.length;
var property;
while(i--){
property=properties[i];
e[property]=e.originalEvent[property];
}
handler.apply(this, arguments);
};}
jQuery.event.special.movestart={
setup: function(){
on(this, 'movestart', enableMove1);
return false;
},
teardown: function(){
off(this, 'movestart', enableMove1);
return false;
},
add: add
};
jQuery.event.special.move={
setup: function(){
on(this, 'movestart', enableMove2);
return false;
},
teardown: function(){
off(this, 'movestart', enableMove2);
return false;
},
add: add
};
jQuery.event.special.moveend={
setup: function(){
on(this, 'movestart', enableMove3);
return false;
},
teardown: function(){
off(this, 'movestart', enableMove3);
return false;
},
add: add
};});
(function($){
$.fn.twentytwenty=function(options){
var options=$.extend({
default_offset_pct: 0.5,
orientation: 'horizontal',
before_label: 'Before',
after_label: 'After',
no_overlay: false,
move_slider_on_hover: false,
move_with_handle_only: true,
click_to_move: false
}, options);
return this.each(function(){
var sliderPct=options.default_offset_pct;
var container=$(this);
var sliderOrientation=options.orientation;
var beforeDirection=(sliderOrientation==='vertical') ? 'down':'left';
var afterDirection=(sliderOrientation==='vertical') ? 'up':'right';
container.wrap("<div class='twentytwenty-wrapper bafg-twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
if(!options.no_overlay){
container.append("<div class='twentytwenty-overlay'></div>");
var overlay=container.find(".twentytwenty-overlay");
var labelOutside=$('.bafg-twentytwenty-container').data('label_outside');
if(labelOutside==true&&sliderOrientation=='vertical'){
var bafgWrapper=$(".twentytwenty-wrapper");
bafgWrapper.wrap("<div class='bafg-outside-label-wrapper twentytwenty-" + sliderOrientation + "'></div>");
var outsideLabel=$(".bafg-outside-label-wrapper");
outsideLabel.prepend("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
outsideLabel.prepend("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
}
overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
}
var beforeImg=container.find("img:first");
var afterImg=container.find("img:last");
let sliderMethod=container.data('slider-method');
let bothVideoPlay=container.attr('bafg-both-video-play');
let beforeVdo=container.find("iframe:first");
let afterVdo=container.find("iframe:last");
let beforeSelfVdo=container.find("video:first");
let afterSelfVdo=container.find("video:last");
beforeVdo.addClass('twentytwenty-before');
afterVdo.addClass('twentytwenty-after');
beforeSelfVdo.addClass('twentytwenty-before')
afterSelfVdo.addClass('twentytwenty-after')
$('.bafg-twentytwenty-container').attr('bafg-both-video-play');
container.append("<div class='twentytwenty-handle'></div>");
var slider=container.find(".twentytwenty-handle");
if(container.hasClass('design-7')){
slider.wrap("<div class='bafg-handle-wrapper'></div>");
}
if(container.hasClass('design-1')){
slider.wrapInner("<div class='handle-trnasf'></div>");
}
slider.append("<span class='twentytwenty-" + beforeDirection + "-arrow'></span>");
slider.append("<span class='twentytwenty-" + afterDirection + "-arrow'></span>");
container.addClass("twentytwenty-container");
beforeImg.addClass("twentytwenty-before");
afterImg.addClass("twentytwenty-after");
var videoType=container.data('video-type');
var calcOffset=function(dimensionPct){
if(sliderMethod=='method_4'){
if(videoType!=undefined&&videoType=='self'){
var w=beforeSelfVdo.width();
var h=beforeSelfVdo.height();
}else{
var w=beforeVdo.width();
var h=beforeVdo.height();
}
if(w==0&&h==0){
if(videoType!=undefined&&videoType=='self'){
var videoHeight=container.find('video:first').height();
var videoWidth=container.find('video:last').width();
}else{
var videoHeight=container.find('iframe:first').height();
var videoWidth=container.find('iframe:last').width();
}
w=videoWidth;
h=videoHeight;
container.css("height", dimensionPct*h+"px");
}else{
container.css("height", h+"px");
container.find('iframe').css('max-width', w+'px');
let dataWidth=container.find('iframe').attr('data-width');
const isMobile=/iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if(isMobile){
container.find('iframe').css('height', w/1.77+'px');
}}
}else{
var w=beforeImg.width();
var h=beforeImg.height();
if(w==0&&h==0){
var imageHeight=container.find('img:first').prop('naturalHeight');
var imageWidth=container.find('img:first').prop('naturalWidth');
w=imageWidth;
h=imageHeight;
container.css("height", dimensionPct*h+"px");
}else{
container.css("height", h+"px");
}}
container.css('max-width', w+'px');
return {
w: w+"px",
h: h+"px",
cw: (dimensionPct*w)+"px",
ch: (dimensionPct*h)+"px"
};};
var adjustContainer=function(offset){
if(sliderOrientation==='vertical'){
beforeImg.css("clip", "rect(0,"+offset.w+","+offset.ch+",0)");
afterImg.css("clip", "rect("+offset.ch+","+offset.w+","+offset.h+",0)");
if(videoType=='self'){
beforeSelfVdo.css("clip", "rect(0, "+offset.w + ", " + offset.ch+", 0)");
afterSelfVdo.css("clip", "rect("+offset.ch+", "+offset.w+", "+offset.h+", 0)");
}else{
beforeVdo.css("clip", "rect(0, "+offset.w + ", " + offset.ch+", 0)");
afterVdo.css("clip", "rect("+offset.ch+" ,"+offset.w+", "+offset.h+", 0)");
}}else{
beforeImg.css("clip", "rect(0,"+offset.cw+","+offset.h+",0)");
afterImg.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
if(videoType=='self'){
beforeSelfVdo.css("clip", "rect(0, "+offset.cw+","+offset.h+",0)");
afterSelfVdo.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
}else{
beforeVdo.css("clip", "rect(0, "+offset.cw+","+offset.h+",0)");
afterVdo.css("clip", "rect(0,"+offset.w+","+offset.h+","+offset.cw+")");
}}
container.css("height", offset.h);
if(sliderMethod=='method_4'){
if(bothVideoPlay!='1'){
if(container.hasClass('active')){
let sliderVideoType=container.data('video-type');
let totalWidth=offset.w;
let totalHeight=offset.h;
let sliderCurrentPosition;
if(sliderOrientation=='vertical'){
totalHeight=totalHeight.replace('px', '');
sliderCurrentPosition=offset.ch;
sliderCurrentPosition=sliderCurrentPosition.replace('px', '');
sliderPositionPercent=sliderCurrentPosition/totalHeight * 100;
}else{
totalWidth=totalWidth.replace('px', '');
sliderCurrentPosition=offset.cw;
sliderCurrentPosition=sliderCurrentPosition.replace('px', '');
sliderPositionPercent=sliderCurrentPosition/totalWidth * 100;
}
sliderPositionPercent=Math.round(sliderPositionPercent);
let firstVideo=container.children().eq(0).attr('id');
let secondVideo=container.children().eq(1).attr('id');
if(sliderVideoType=='youtube'){
if(sliderPositionPercent > 50){
if(container.hasClass('muted')!=true){
players[firstVideo].setVolume(sliderPositionPercent);
players[secondVideo].setVolume(100 - sliderPositionPercent);
}
players[secondVideo].pauseVideo();
players[firstVideo].playVideo();
}else if(sliderPositionPercent < 50){
players[firstVideo].pauseVideo();
players[secondVideo].playVideo();
if(container.hasClass('muted')!=true){
players[firstVideo].setVolume(sliderPositionPercent);
players[secondVideo].setVolume(100 - sliderPositionPercent);
}}
}else if(sliderVideoType=='vimeo'){
if(sliderPositionPercent > 50){
vimeoPlayers[secondVideo].pause();
vimeoPlayers[firstVideo].play();
if(container.hasClass('muted')!=true){
vimeoPlayers[firstVideo].setVolume(sliderPositionPercent/100);
vimeoPlayers[secondVideo].setVolume(1 - sliderPositionPercent/100);
}}else if(sliderPositionPercent < 50){
vimeoPlayers[firstVideo].pause();
vimeoPlayers[secondVideo].play();
if(container.hasClass('muted')!=true){
vimeoPlayers[firstVideo].setVolume(sliderPositionPercent/100);
vimeoPlayers[secondVideo].setVolume(1 - sliderPositionPercent/100);
}}
}else if(sliderVideoType=='self'){
if(sliderPositionPercent > 50){
beforeSelfVdo[0].play();
afterSelfVdo[0].pause();
if(container.hasClass('muted')!=true){
beforeSelfVdo[0].volume=sliderPositionPercent/100;
afterSelfVdo[0].volume=1 - sliderPositionPercent/100;
}}else if(sliderPositionPercent < 50){
afterSelfVdo[0].play();
beforeSelfVdo[0].pause();
if(container.hasClass('muted')!=true){
beforeSelfVdo[0].volume=sliderPositionPercent/100;
afterSelfVdo[0].volume=1 - sliderPositionPercent/100;
}}
}}
}else{
let sliderPositionPercent;
let sliderVideoType=container.data('video-type');
if(sliderOrientation=='vertical'){
sliderPositionPercent=offset.ch / offset.h * 100;
}else{
sliderPositionPercent=offset.cw / offset.w * 100;
}
sliderPositionPercent=Math.random(sliderPositionPercent);
if(sliderVideoType=='youtube'){
let firstVideoId=container.children().eq(0).attr('id');
let secondVideoId=container.children().eq(1).attr('id');
if(sliderPositionPercent > 0&&sliderPositionPercent <=100){
players[firstVideoId].playVideo();
players[secondVideoId].playVideo();
let firstVolume=sliderPositionPercent / 100;
let secondVolume=1 - firstVolume;
players[firstVideoId].setVolume(firstVolume * 100);
players[secondVideoId].setVolume(secondVolume * 100);
}}else if(sliderVideoType=='vimeo'){
let firstVideoId=container.children().eq(0).attr('id');
let secondVideoId=container.children().eq(1).attr('id');
if(sliderPositionPercent > 0&&sliderPositionPercent <=100){
vimeoPlayers[firstVideoId].play();
vimeoPlayers[secondVideoId].play();
vimeoPlayers[firstVideoId].setVolume(sliderPositionPercent / 100);
vimeoPlayers[secondVideoId].setVolume(1 - sliderPositionPercent / 100);
}}else if(sliderVideoType=='self'){
if(sliderPositionPercent > 0&&sliderPositionPercent <=100){
beforeSelfVdo[0].play();
afterSelfVdo[0].play();
beforeSelfVdo[0].volume=sliderPositionPercent / 100;
afterSelfVdo[0].volume=1 - sliderPositionPercent / 100;
}}
}}
};
var adjustSlider=function(pct){
var offset=calcOffset(pct);
slider.css((sliderOrientation==="vertical") ? "top":"left", (sliderOrientation==="vertical") ? offset.ch:offset.cw);
adjustContainer(offset);
};
var minMaxNumber=function(num, min, max){
return Math.max(min, Math.min(max, num));
};
var getSliderPercentage=function(positionX, positionY){
if(sliderMethod==='method_4'){
if(videoType=='self'){
videoWidth=selfVideoWidth;
videoHeight=selfVideoHeight;
}
var sliderPercentage=(sliderOrientation==='vertical') ?
(positionY-offsetY)/videoHeight :
(positionX-offsetX)/videoWidth;
}else{
var sliderPercentage=(sliderOrientation==='vertical') ?
(positionY-offsetY)/imgHeight :
(positionX-offsetX)/imgWidth;
}
return minMaxNumber(sliderPercentage, 0, 1);
};
$(window).on("resize.twentytwenty", function(e){
adjustSlider(sliderPct);
});
var offsetX=0;
var offsetY=0;
var imgWidth=0;
var imgHeight=0;
var videoHeight=0;
var videoWidth=0;
var selfVideoWidth=0;
var selfVideoHeight=0;
var onMoveStart=function(e){
if(((e.distX > e.distY&&e.distX < -e.distY)||(e.distX < e.distY&&e.distX > -e.distY))&&sliderOrientation!=='vertical'){
e.preventDefault();
}
else if(((e.distX < e.distY&&e.distX < -e.distY)||(e.distX > e.distY&&e.distX > -e.distY))&&sliderOrientation==='vertical'){
e.preventDefault();
}
container.addClass("active");
offsetX=container.offset().left;
offsetY=container.offset().top;
imgWidth=beforeImg.width();
imgHeight=beforeImg.height();
videoHeight=beforeVdo.height();
videoWidth=beforeVdo.width();
selfVideoWidth=beforeSelfVdo.width();
selfVideoHeight=beforeSelfVdo.height();
};
var onMove=function(e){
if(container.hasClass("active")){
sliderPct=getSliderPercentage(e.pageX, e.pageY);
adjustSlider(sliderPct);
}};
var onMoveEnd=function(){
container.removeClass("active");
};
var moveTarget=options.move_with_handle_only ? slider:container;
moveTarget.on("movestart",onMoveStart);
moveTarget.on("move",onMove);
moveTarget.on("moveend",onMoveEnd);
if(options.move_slider_on_hover){
container.on("mouseenter", onMoveStart);
container.on("mousemove", onMove);
container.on("mouseleave", onMoveEnd);
}
slider.on("touchmove", function(e){
e.preventDefault();
});
container.find("img").on("mousedown", function(event){
event.preventDefault();
});
container.find("iframe").on("mousedown", function(event){
event.preventDefault();
});
container.find("video").on("mousedown", function(event){
event.preventDefault();
});
if(options.click_to_move){
container.on('click', function(e){
offsetX=container.offset().left;
offsetY=container.offset().top;
imgWidth=beforeImg.width();
imgHeight=beforeImg.height();
sliderPct=getSliderPercentage(e.pageX, e.pageY);
adjustSlider(sliderPct);
});
}
$(window).trigger("resize.twentytwenty");
window.addEventListener("orientationchange", function(){
let screenOrientation=screen.orientation.type;
if(screenOrientation=='portrait-primary'||screenOrientation=='landscape-primary'){
$(window).trigger("resize.twentytwenty");
}});
});
};})(jQuery);