var call = 0;
function pdt360DegViewer(id, n, p, t, playable, autoPlay, draggable, mouseMove, buttons, keys, scroll) {
console.log(`${call}-${id}-${playable ? 'playable ' : ''}${autoPlay ? 'autoPlay ' : ''}${draggable ? 'draggable ' : ''}${mouseMove ? 'mouseMove ' : ''}${buttons ? 'buttons ' : ''}${keys ? 'keys' : ''}${scroll ? 'scroll ' : ''}`);
call++;
loaderNone(id);
var i = 1, j = 0, move = [],
mainDiv = document.querySelector(`#${id}`);
mainDiv.className = 'viewer';
mainDiv.innerHTML += ``;
mainDiv.innerHTML +=
'
'
if (call == 1)
for (var k = 1; k <= n; k++) {
document.getElementById('dummy').innerHTML += ``;
}
var img = document.querySelector(`#${id} .${id}`);
if (!playable && !autoPlay) {
var touch = false;
(window.matchMedia("screen and (max-width: 992px)").matches) ? touchFun() : nonTouch();
//For Touch Devices
window.addEventListener('touchstart', function () {
touchFun();
});
function touchFun() {
touch = true;
img.removeAttribute('draggable');
img.addEventListener('touchmove', function (e) {
logic(this, e);
});
img.addEventListener('touchend', function (e) {
move = [];
});
}
//For Non-Touch Devices
function nonTouch() {
touch = false;
if (draggable) {
var drag = false;
img.addEventListener('mousedown', function (e) {
drag = true;
logic(this, e);
});
img.addEventListener('mouseup', function (e) {
drag = false;
move = [];
});
mouseEvent();
}
if (mouseMove) {
drag = true;
mouseEvent();
}
function mouseEvent() {
img.addEventListener('mousemove', function (e) {
(drag) ? logic(this, e) : null;
});
img.addEventListener('mouseleave', function () {
move = [];
});
}
if (scroll) {
img.addEventListener('wheel', function (e) {
e.preventDefault();
(e.wheelDelta / 120 > 0) ? nxt(this) : prev(this);
});
}
if (keys) {
img.setAttribute('tabindex', '0');
img.onkeydown = function (e) {
e.preventDefault();
if (e.keyCode == 37 || e.keyCode == 38)
prev(img);
else if (e.keyCode == 39 || e.keyCode == 40)
nxt(img);
};
}
}
function logic(el, e) {
j++;
var x = touch ? e.touches[0].clientX : e.clientX;
var coord = (x - img.offsetLeft);
move.push(coord);
var l = move.length,
oldMove = move[l - 2],
newMove = move[l - 1];
var thresh = touch ? true : !(j % 3);
if (thresh) {
if (newMove > oldMove)
nxt(el);
else if (newMove < oldMove)
prev(el);
}
}
if (buttons) {
var btnsDiv = document.createElement('div');
btnsDiv.className = 'btnDiv navDiv';
var leftNavBtn = document.createElement('button');
leftNavBtn.className = 'play leftNav';
leftNavBtn.setAttribute('title', 'left navigation');
btnsDiv.appendChild(leftNavBtn);
leftNavBtn.addEventListener('click', function () {
prev(img);
});
var rightNavBtn = document.createElement('button');
rightNavBtn.className = 'play rightNav';
rightNavBtn.setAttribute('title', 'right navigation');
btnsDiv.appendChild(rightNavBtn);
rightNavBtn.addEventListener('click', function () {
nxt(img);
});
img.parentNode.appendChild(btnsDiv);
}
} else {
var interval, playing = false,
pause = false,
left = false,
right = false,
speed = 50;
if (playable) {
var btnDiv = document.createElement('div');
btnDiv.className = 'btnDiv';
var playBtn = document.createElement('button');
playBtn.className = 'play';
playBtn.setAttribute('title', 'play');
btnDiv.appendChild(playBtn);
playBtn.addEventListener('click', function () {
playing = true;
pause = false;
play();
});
var pauseBtn = document.createElement('button');
pauseBtn.className = 'pause';
pauseBtn.setAttribute('title', 'pause');
btnDiv.appendChild(pauseBtn);
pauseBtn.addEventListener('click', function () {
pause = true;
});
var stopBtn = document.createElement('button');
stopBtn.className = 'stop';
stopBtn.setAttribute('title', 'stop');
btnDiv.appendChild(stopBtn);
stopBtn.addEventListener('click', function () {
pause = true;
speed = 50;
right = true;
left = false;
this.parentNode.parentNode.querySelector('img').src = `${p}${i = 1}.${t}`;
});
var leftBtn = document.createElement('button');
leftBtn.className = 'left';
leftBtn.setAttribute('title', 'play direction-left');
btnDiv.appendChild(leftBtn);
leftBtn.addEventListener('click', function () {
right = false;
left = true;
if (playing)
play();
});
var rightBtn = document.createElement('button');
rightBtn.className = 'right';
rightBtn.setAttribute('title', 'play direction-right');
btnDiv.appendChild(rightBtn);
rightBtn.addEventListener('click', function () {
left = false;
right = true;
if (playing)
play();
});
var speedBtn = document.createElement('button');
speedBtn.className = 'plus';
speedBtn.setAttribute('title', 'increase play speed');
btnDiv.appendChild(speedBtn);
speedBtn.addEventListener('click', function () {
if (playing)
timer(speed > 10 ? speed -= 10 : speed);
});
var slowBtn = document.createElement('button');
slowBtn.className = 'minus';
slowBtn.setAttribute('title', 'decrease play speed');
btnDiv.appendChild(slowBtn);
slowBtn.addEventListener('click', function () {
if (playing)
timer(speed < 100 ? speed += 10 : speed);
});
mainDiv.prepend(btnDiv);
}
function play() {
timer(speed);
}
function timer(t) {
clearInterval(interval);
interval = setInterval(function () {
if (!pause) {
if (left)
prev(img);
else if (right)
nxt(img);
else
nxt(img);
}
}, t);
}
}
function prev(e) {
if (i <= 1) {
i = n;
e.src = `${p}${--i}.${t}`;
nxt(e);
} else
e.src = `${p}${--i}.${t}`;
}
function nxt(e) {
if (i >= n) {
i = 1;
e.src = `${p}${++i}.${t}`;
prev(e);
} else
e.src = `${p}${++i}.${t}`;
}
function loaderNone(id) {
window.addEventListener('load',function(){
document.querySelector(`#${id} .loader`).style.display = 'none';
if (autoPlay) {
pause = false;
play();
}
});
}
}