Custom Control

// create PanoViewer with option
var container = document.getElementById("myPanoViewer");
var panoViewer = new eg.view360.PanoViewer(container, {
    image: "./equi-car-inside.jpg",
    projectionType: equirectangular"
});

var panoviewerSet = document.getElementById("panoSet");
PanoControls.init(panoviewerSet, panoViewer);
PanoControls.showLoading();

var isAutoCruising = false;
var rafId = 0;
var lookAroundButton = document.querySelector(".custom-control .around");

document.querySelector(".custom-control").addEventListener("click", function(e) {
    var btn;
    if (e.target.tagName.toLowerCase() === "svg") {
        btn = e.target.parentNode;
    } else {
        btn = e.target.parentNode.parentNode;
    }
    var btnClass = btn.classList;

    if (btnClass.contains("around")) {
        toggleLookAround();
        return;
    }
    var currentYaw = panoViewer.getYaw();
    var currentPitch = getPitch();
    var currentFov = panoViewer.getFov();
    var fovDiff = 5;
    var moveAngle = 30;
    var duration = 300;
    isAutoCruising && toggleLookAround();

    if (btnClass.contains("up")) {
        panoViewer.lookAt({pitch: currentPitch + moveAngle}, duration);
    } else if (btnClass.contains("right")) {
        panoViewer.lookAt({yaw: currentYaw - moveAngle}, duration);
    } else if (btnClass.contains("down")) {
        panoViewer.lookAt({pitch: currentPitch - moveAngle}, duration);
    } else if (btnClass.contains("left")) {
        panoViewer.lookAt({yaw: currentYaw + moveAngle}, duration);
    } else if (btnClass.contains("zoom-in")) {
        panoViewer.lookAt({fov: currentFov - fovDiff}, duration);
    } else if ((btnClass.contains("zoom-out"))) {
        panoViewer.lookAt({fov: currentFov + fovDiff}, duration);
    };
});

function toggleLookAround() {
    var start = new Date().getTime();

    if(isAutoCruising) {
        window.cancelAnimationFrame(rafId);
        isAutoCruising = false;
        lookAroundButton.classList.remove("playing")
        return;
    };

    var pitch = panoViewer.getPitch();
    var yaw = panoViewer.getYaw();
    var delta = 0;

    function lookAround() {
        delta = (new Date().getTime() - start);
        panoViewer.lookAt({
            yaw: yaw + (delta / 100) % 360,
            pitch: pitch
        }, 0);

        isAutoCruising && (rafId = window.requestAnimationFrame(lookAround));
    }

    rafId = window.requestAnimationFrame(lookAround)
    isAutoCruising = true;
    lookAroundButton.classList.add("playing")
}