@jbtcd/threesixtyjs/dist/ThreeSixtyJS.min.js

See products with a new 360° view

class ThreeSixtyJS{constructor(t,e=null,i=null){this.mouseEnabled=!1,this.wheelData=0,this.currentWheelData=0,this.nextImage=(()=>{let t=this.getCurrentImageId();++t>=this.getAmount()&&(t=0),this.makeContainerVisibleById(t)}),this.prevImage=(()=>{let t=this.getCurrentImageId();--t<0&&(t=this.getAmount()-1),this.makeContainerVisibleById(t)}),this.initEventListener=(()=>{for(let t=0;t<this.listener.next.length;t++){let e=document.querySelectorAll(this.listener.next[t]);for(let t=0;t<e.length;t++)e[t].addEventListener("click",this.nextImage,{passive:!0})}for(let t=0;t<this.listener.prev.length;t++){let e=document.querySelectorAll(this.listener.prev[t]);for(let t=0;t<e.length;t++)e[t].addEventListener("click",this.prevImage,{passive:!0})}}),this.touch=(()=>{this.getView().addEventListener("touchstart",this.enableTouch,{passive:!0}),this.getView().addEventListener("touchmove",this.moveTouch,{passive:!0})}),this.wheel=(()=>{this.getView().addEventListener("wheel",this.moveWheel,{passive:!0})}),this.mouse=(()=>{this.getView().addEventListener("mousedown",this.enableMouse),this.getView().addEventListener("mouseup",this.disableMouse),this.getView().addEventListener("mouseleave",this.disableMouse),this.getView().addEventListener("mousemove",this.moveMouse)}),this.moveWheel=(t=>{0===this.wheelData&&(this.wheelData=t.deltaX),this.currentWheelData=this.currentWheelData+t.deltaX,this.wheelData+this.settings.intensity<this.currentWheelData?(this.wheelData=this.currentWheelData,this.nextImage()):this.wheelData-this.settings.intensity>this.currentWheelData&&(this.wheelData=this.currentWheelData,this.prevImage())}),this.enableTouch=(t=>{this.touchPosition=t.touches[0].clientX}),this.moveTouch=(t=>{let e=t.touches[0].clientX;this.touchPosition+this.settings.intensity<e?(this.touchPosition=e,this.prevImage()):this.touchPosition-this.settings.intensity>e&&(this.touchPosition=e,this.nextImage())}),this.enableMouse=(t=>{t.preventDefault(),this.mouseEnabled=!0,this.mousePosition=t.clientX}),this.disableMouse=(t=>{this.mouseEnabled=!1}),this.moveMouse=(t=>{if(!1===this.mouseEnabled)return;let e=t.clientX;this.mousePosition+this.settings.intensity<e?(this.mousePosition=e,this.prevImage()):this.mousePosition-this.settings.intensity>e&&(this.mousePosition=e,this.nextImage())}),this.updateFunction=(()=>{for(let t=0;t<this.listener.update.length;t++)this.listener.update[t](this.getCurrentImageId(),this.getAmount())}),this.makeContainerVisibleById=(t=>{let e=this.getView().querySelectorAll("*");for(let t=0;t<this.getAmount();t++)e[t].style.display="none";e[t].style.display="",this.getView().setAttribute(this.settings.parameters.current,String(t)),this.updateFunction()}),this.createImageContainers=(()=>{for(let t=0;t<this.getAmount();t++){let e=document.createElement("img");e.setAttribute("style",this.settings.style),e.setAttribute("src",this.buildUrl(t)),this.getView().appendChild(e)}}),this.createVariables=(()=>{this.view=document.querySelector(this.identifier),this.amount=Number(this.getView().getAttribute(this.settings.parameters.amount)),this.srcSchema=String(this.getView().getAttribute(this.settings.parameters.src))}),this.buildUrl=(t=>this.getSrcSchema().replace(this.settings.placeholder,String(t))),this.getCurrentImageId=(()=>Number(this.getView().getAttribute(this.settings.parameters.current))),this.getSrcSchema=(()=>this.srcSchema),this.getAmount=(()=>this.amount),this.getView=(()=>this.view),this.identifier=t,this.settings={intensity:25,parameters:{amount:"data-amount",src:"data-src",current:"data-current"},placeholder:"{}",style:"display: none; width: 100%; height: 100%;"},Object.assign(this.settings,e),this.listener={prev:null,next:null,update:null},Object.assign(this.listener,i),this.initEventListener(),this.createVariables(),this.createImageContainers(),this.makeContainerVisibleById(0),this.mouse(),this.touch(),this.wheel()}}