(function ($){
$.fn.TreeSixtyImageRotate=function (options){
let base=this;
let settings=$.extend({
totalFrames: 36,
endFrame: 36,
currentFrame: 0,
speed: 100,
dragSpeed: 6,
progress: ".spinner",
extension: ".jpg",
imgPrefix: "",
navigation: true,
spinner: true,
imagesFolder: "images/",
smallWidth: 400,
smallHeight: 400,
largeWidth: 800,
largeHeight: 800,
imagePlaceholderClass: "images-placeholder",
imgList: "threesixty-images-rotate"
}, options);
base.initTreeSixty=function (){
base.css({
"height": settings.smallHeight,
"width": settings.smallWidth,
"position": "relative",
"margin": "auto"
});
if(settings.spinner){
base.spinner("start");
}
if(settings.navigation){
base.createNavigation();
}
let changeSlide=false, previousSlide=false, nextNext=false, xAxis, nextXAxis;
base.find(".images-list").on("mousedown touchstart", function (e){
e.preventDefault();
if(e.type==="mousedown"){
xAxis=e.pageX;
}else{
xAxis=e.originalEvent.touches[0].pageX;
}
changeSlide=true;
}).on("mousemove touchmove", function (e){
if(changeSlide){
if(e.type==="mousemove"){
nextXAxis=e.pageX;
}else{
nextXAxis=e.originalEvent.touches[0].pageX;
}
if(nextXAxis > xAxis + settings.dragSpeed){
previousSlide=true;
xAxis=nextXAxis;
base.previous();
}else if(nextXAxis < xAxis - settings.dragSpeed){
nextNext=true;
xAxis=nextXAxis;
base.next();
}}
}).on("mouseleave mouseup touchend", function (e){
changeSlide=false;
});
if(settings.spinner){
base.spinner("stop");
}};
base.createNavigation=function (){
let navigationBarWrapper, navigationBar, next, previous, playStop;
navigationBarWrapper=$("<div/>").attr("class", "navigation-bar-wrapper");
navigationBar=$("<div/>").attr("class", "navigation-bar");
next=$("<div/>").attr({
"class": "navigation-bar-next"
});
previous=$("<div/>").attr({
"class": "navigation-bar-previous"
});
playStop=$("<div/>").attr({
"class": "navigation-bar-play"
});
navigationBar.append(previous);
navigationBar.append(playStop);
navigationBar.append(next);
navigationBarWrapper.append(navigationBar);
base.append(navigationBarWrapper);
let nextInterval;
next.on("mousedown touchstart", function (e){
e.preventDefault();
nextInterval=setInterval(function (){
base.next()
}, settings.speed)
}).on("mouseleave mouseup touchend", function (){
clearInterval(nextInterval);
});
let previousInterval;
previous.on("mousedown touchstart", function (e){
e.preventDefault();
previousInterval=setInterval(function (){
base.previous()
}, settings.speed)
}).on("mouseleave mouseup touchend", function (){
clearInterval(previousInterval);
});
let play=false, playStopInterval;
playStop.on("mousedown touchstart", function (e){
e.preventDefault();
if(!play){
base.find('.navigation-bar-play').addClass('navigation-bar-stop');
play=true;
playStopInterval=setInterval(function (){
base.next()
}, settings.speed)
}else{
base.find('.navigation-bar-play').removeClass('navigation-bar-stop');
play=false;
clearInterval(playStopInterval)
}});
};
base.spinner=function (status){
let spinner;
spinner=$("<div/>").attr({
"class": "loading-spinner"
});
base.append(spinner);
if(status==="start"){
let winWidth=$(window).width();
if(winWidth > 991){
base.find('.loading-spinner').css({
"height": settings.smallHeight,
"width": settings.smallWidth,
})
}else{
base.find('.loading-spinner').css({
"max-height": settings.largeHeight,
"max-width": settings.largeWidth,
"height": winWidth,
"width": winWidth,
});
}}else if(status==="stop"){
base.find('.loading-spinner').css({
"display": "none"
});
}else{
console.log("Invalid status for spinner");
}};
base.next=function (){
let currentSlide=base.find(".active");
let imgPositionClass=currentSlide.attr("class").split(/\s+/)[1];
let imgPossition=parseInt(imgPositionClass.substring(6));
imgPossition--;
if(imgPossition < 0){
imgPossition=settings.totalFrames;
}
let nextImgClass="image-" + imgPossition;
base.find("." + nextImgClass).addClass("active");
currentSlide.removeClass("active");
};
base.previous=function (){
let currentSlide=base.find(".active");
let imgPositionClass=currentSlide.attr("class").split(/\s+/)[1];
let imgPossition=parseInt(imgPositionClass.substring(6));
imgPossition++;
if(imgPossition > settings.totalFrames){
imgPossition=0;
}
let nextImgClass="image-" + imgPossition;
base.find("." + nextImgClass).addClass("active");
currentSlide.removeClass("active");
};
base.togleFullScreen=function (){
if(!$(document)[0].fullscreenElement &&
!$(document)[0].mozFullScreenElement&&!$(document)[0].webkitFullscreenElement&&!$(document)[0].msFullscreenElement){
if($(this)[0].requestFullscreen){
$(this)[0].requestFullscreen();
}else if($(this)[0].msRequestFullscreen){
$(this)[0].msRequestFullscreen();
}else if($(this)[0].mozRequestFullScreen){
$(this)[0].mozRequestFullScreen();
}else if($(this)[0].webkitRequestFullscreen){
$(this)[0].webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}}else{
if($(document)[0].exitFullscreen){
$(document)[0].exitFullscreen();
}else if($(document)[0].msExitFullscreen){
$(document)[0].msExitFullscreen();
}else if($(document)[0].mozCancelFullScreen){
$(document)[0].mozCancelFullScreen();
}else if($(document)[0].webkitExitFullscreen){
$(document)[0].webkitExitFullscreen();
}}
};
base.on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e){
base.resize();
});
$(window).resize(function (e){
let winWidth=$(window).width();
if(winWidth > 991){
base.css({
"height": settings.smallHeight,
"width": settings.smallWidth,
})
}else{
base.css({
"max-height": settings.largeHeight,
"max-width": settings.largeWidth,
"height": winWidth,
"width": winWidth,
});
}});
$(document).ready(function (e){
let winWidth=$(window).width();
if(winWidth > 991){
base.css({
"height": settings.smallHeight,
"width": settings.smallWidth,
})
}else{
base.css({
"max-height": settings.largeHeight,
"max-width": settings.largeWidth,
"height": winWidth,
"width": winWidth,
});
}});
return base;
};})
(jQuery);