3 lines
18 KiB
JavaScript
3 lines
18 KiB
JavaScript
const t=(t,e)=>{const i=e.x-t.x,o=e.y-t.y;return Math.sqrt(i*i+o*o)},e=t=>t*(Math.PI/180),i=t=>t*(180/Math.PI),o=new Map,n=t=>{o.has(t)&&clearTimeout(o.get(t)),o.set(t,setTimeout(t,100))},r=(t,e,i)=>{const o=e.split(/[ ,]+/g);let n;for(let e=0;e<o.length;e+=1)n=o[e],t.addEventListener?t.addEventListener(n,i,!1):t.attachEvent&&t.attachEvent(n,i)},s=(t,e,i)=>{const o=e.split(/[ ,]+/g);let n;for(let e=0;e<o.length;e+=1)n=o[e],t.removeEventListener?t.removeEventListener(n,i):t.detachEvent&&t.detachEvent(n,i)},d=t=>(t.preventDefault(),t.type.match(/^touch/)?t.changedTouches:t),a=()=>({x:void 0!==window.pageXOffset?window.pageXOffset:(document.documentElement||document.body.parentNode||document.body).scrollLeft,y:void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop}),p=(t,e)=>{e.top||e.right||e.bottom||e.left?(t.style.top=e.top,t.style.right=e.right,t.style.bottom=e.bottom,t.style.left=e.left):(t.style.left=e.x+"px",t.style.top=e.y+"px")},l=(t,e,i)=>{const o=c(t);for(let t in o)if(o.hasOwnProperty(t))if("string"==typeof e)o[t]=e+" "+i;else{let n="";for(let t=0,o=e.length;t<o;t+=1)n+=e[t]+" "+i+", ";o[t]=n.slice(0,-2)}return o},c=t=>{const e={};e[t]="";return["webkit","Moz","o"].forEach(function(i){e[i+t.charAt(0).toUpperCase()+t.slice(1)]=""}),e},h=(t,e)=>{for(let i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return t},u=(t,e)=>{if(t.length)for(let i=0,o=t.length;i<o;i+=1)e(t[i]);else e(t)};var f,y=!!("ontouchstart"in window),m=!!window.PointerEvent,v=!!window.MSPointerEvent,g={start:"mousedown",move:"mousemove",end:"mouseup"},x={};function b(){}function O(t,e){return this.identifier=e.identifier,this.position=e.position,this.frontPosition=e.frontPosition,this.collection=t,this.defaults={size:100,threshold:.1,color:"white",fadeTime:250,dataOnly:!1,restJoystick:!0,restOpacity:.5,mode:"dynamic",zone:document.body,lockX:!1,lockY:!1,shape:"circle"},this.config(e),"dynamic"===this.options.mode&&(this.options.restOpacity=0),this.id=O.id,O.id+=1,this.buildEl().stylize(),this.instance={el:this.ui.el,on:this.on.bind(this),off:this.off.bind(this),show:this.show.bind(this),hide:this.hide.bind(this),add:this.addToDom.bind(this),remove:this.removeFromDom.bind(this),destroy:this.destroy.bind(this),setPosition:this.setPosition.bind(this),resetDirection:this.resetDirection.bind(this),computeDirection:this.computeDirection.bind(this),trigger:this.trigger.bind(this),position:this.position,frontPosition:this.frontPosition,ui:this.ui,identifier:this.identifier,id:this.id,options:this.options},this.instance}function w(t,e){var i=this;i.nipples=[],i.idles=[],i.actives=[],i.ids=[],i.pressureIntervals={},i.manager=t,i.id=w.id,w.id+=1,i.defaults={zone:document.body,multitouch:!1,maxNumberOfNipples:10,mode:"dynamic",position:{top:0,left:0},catchDistance:200,size:100,threshold:.1,color:"white",fadeTime:250,dataOnly:!1,restJoystick:!0,restOpacity:.5,lockX:!1,lockY:!1,shape:"circle",dynamicPage:!1,follow:!1},i.config(e),"static"!==i.options.mode&&"semi"!==i.options.mode||(i.options.multitouch=!1),i.options.multitouch||(i.options.maxNumberOfNipples=1);const o=getComputedStyle(i.options.zone.parentElement);return o&&"flex"===o.display&&(i.parentIsFlex=!0),i.updateBox(),i.prepareNipples(),i.bindings(),i.begin(),i.nipples}function _(t){var e=this;e.ids={},e.index=0,e.collections=[],e.scroll=a(),e.config(t),e.prepareCollections();var i=function(){var t;e.collections.forEach(function(i){i.forEach(function(i){t=i.el.getBoundingClientRect(),i.position={x:e.scroll.x+t.left,y:e.scroll.y+t.top}})})};r(window,"resize",function(){n(i)});var o=function(){e.scroll=a()};return r(window,"scroll",function(){n(o)}),e.collections}m?f={start:"pointerdown",move:"pointermove",end:"pointerup, pointercancel"}:v?f={start:"MSPointerDown",move:"MSPointerMove",end:"MSPointerUp"}:y?(f={start:"touchstart",move:"touchmove",end:"touchend, touchcancel"},x=g):f=g,b.prototype.on=function(t,e){var i,o=this,n=t.split(/[ ,]+/g);o._handlers_=o._handlers_||{};for(var r=0;r<n.length;r+=1)i=n[r],o._handlers_[i]=o._handlers_[i]||[],o._handlers_[i].push(e);return o},b.prototype.off=function(t,e){var i=this;return i._handlers_=i._handlers_||{},void 0===t?i._handlers_={}:void 0===e?i._handlers_[t]=null:i._handlers_[t]&&i._handlers_[t].indexOf(e)>=0&&i._handlers_[t].splice(i._handlers_[t].indexOf(e),1),i},b.prototype.trigger=function(t,e){var i,o=this,n=t.split(/[ ,]+/g);o._handlers_=o._handlers_||{};for(var r=0;r<n.length;r+=1)i=n[r],o._handlers_[i]&&o._handlers_[i].length&&o._handlers_[i].forEach(function(t){t.call(o,{type:i,target:o},e)})},b.prototype.config=function(t){var e=this;e.options=e.defaults||{},t&&(e.options=((t,e)=>{const i={};for(let o in t)t.hasOwnProperty(o)&&e.hasOwnProperty(o)?i[o]=e[o]:t.hasOwnProperty(o)&&(i[o]=t[o]);return i})(e.options,t))},b.prototype.bindEvt=function(t,e){var i=this;return i._domHandlers_=i._domHandlers_||{},i._domHandlers_[e]=function(){"function"==typeof i["on"+e]?i["on"+e].apply(i,arguments):console.warn('[WARNING] : Missing "on'+e+'" handler.')},r(t,f[e],i._domHandlers_[e]),x[e]&&r(t,x[e],i._domHandlers_[e]),i},b.prototype.unbindEvt=function(t,e){var i=this;return i._domHandlers_=i._domHandlers_||{},s(t,f[e],i._domHandlers_[e]),x[e]&&s(t,x[e],i._domHandlers_[e]),delete i._domHandlers_[e],this},O.prototype=new b,O.constructor=O,O.id=0,O.prototype.buildEl=function(t){return this.ui={},this.options.dataOnly||(this.ui.el=document.createElement("div"),this.ui.back=document.createElement("div"),this.ui.front=document.createElement("div"),this.ui.el.className="nipple collection_"+this.collection.id,this.ui.back.className="back",this.ui.front.className="front",this.ui.el.setAttribute("id","nipple_"+this.collection.id+"_"+this.id),this.ui.el.appendChild(this.ui.back),this.ui.el.appendChild(this.ui.front)),this},O.prototype.stylize=function(){if(this.options.dataOnly)return this;var t=this.options.fadeTime+"ms",e=((t,e)=>{const i=c(t);for(let t in i)i.hasOwnProperty(t)&&(i[t]=e);return i})("borderRadius","50%"),i=l("transition","opacity",t),o={};return o.el={position:"absolute",opacity:this.options.restOpacity,display:"block",zIndex:999},o.back={position:"absolute",display:"block",width:this.options.size+"px",height:this.options.size+"px",left:0,marginLeft:-this.options.size/2+"px",marginTop:-this.options.size/2+"px",background:this.options.color,opacity:".5"},o.front={width:this.options.size/2+"px",height:this.options.size/2+"px",position:"absolute",display:"block",left:0,marginLeft:-this.options.size/4+"px",marginTop:-this.options.size/4+"px",background:this.options.color,opacity:".5",transform:"translate(0px, 0px)"},h(o.el,i),"circle"===this.options.shape&&h(o.back,e),h(o.front,e),this.applyStyles(o),this},O.prototype.applyStyles=function(t){for(var e in this.ui)if(this.ui.hasOwnProperty(e))for(var i in t[e])this.ui[e].style[i]=t[e][i];return this},O.prototype.addToDom=function(){return this.options.dataOnly||document.body.contains(this.ui.el)||this.options.zone.appendChild(this.ui.el),this},O.prototype.removeFromDom=function(){return this.options.dataOnly||!document.body.contains(this.ui.el)||this.options.zone.removeChild(this.ui.el),this},O.prototype.destroy=function(){clearTimeout(this.removeTimeout),clearTimeout(this.showTimeout),clearTimeout(this.restTimeout),this.trigger("destroyed",this.instance),this.removeFromDom(),this.off()},O.prototype.show=function(t){var e=this;return e.options.dataOnly||(clearTimeout(e.removeTimeout),clearTimeout(e.showTimeout),clearTimeout(e.restTimeout),e.addToDom(),e.restCallback(),setTimeout(function(){e.ui.el.style.opacity=1},0),e.showTimeout=setTimeout(function(){e.trigger("shown",e.instance),"function"==typeof t&&t.call(this)},e.options.fadeTime)),e},O.prototype.hide=function(t){var e=this;if(e.options.dataOnly)return e;if(e.ui.el.style.opacity=e.options.restOpacity,clearTimeout(e.removeTimeout),clearTimeout(e.showTimeout),clearTimeout(e.restTimeout),e.removeTimeout=setTimeout(function(){var i="dynamic"===e.options.mode?"none":"block";e.ui.el.style.display=i,"function"==typeof t&&t.call(e),e.trigger("hidden",e.instance)},e.options.fadeTime),e.options.restJoystick){const i=e.options.restJoystick,o={};o.x=!0===i||!1!==i.x?0:e.instance.frontPosition.x,o.y=!0===i||!1!==i.y?0:e.instance.frontPosition.y,e.setPosition(t,o)}return e},O.prototype.setPosition=function(t,e){var i=this;i.frontPosition={x:e.x,y:e.y};var o=i.options.fadeTime+"ms",n={};n.front=l("transition",["transform"],o);var r={front:{}};r.front={transform:"translate("+i.frontPosition.x+"px,"+i.frontPosition.y+"px)"},i.applyStyles(n),i.applyStyles(r),i.restTimeout=setTimeout(function(){"function"==typeof t&&t.call(i),i.restCallback()},i.options.fadeTime)},O.prototype.restCallback=function(){var t=this,e={};e.front=l("transition","none",""),t.applyStyles(e),t.trigger("rested",t.instance)},O.prototype.resetDirection=function(){this.direction={x:!1,y:!1,angle:!1}},O.prototype.computeDirection=function(t){var e,i,o,n=t.angle.radian,r=Math.PI/4,s=Math.PI/2;if(n>r&&n<3*r&&!t.lockX?e="up":n>-r&&n<=r&&!t.lockY?e="left":n>3*-r&&n<=-r&&!t.lockX?e="down":t.lockY||(e="right"),t.lockY||(i=n>-s&&n<s?"left":"right"),t.lockX||(o=n>0?"up":"down"),t.force>this.options.threshold){var d,a={};for(d in this.direction)this.direction.hasOwnProperty(d)&&(a[d]=this.direction[d]);var p={};for(d in this.direction={x:i,y:o,angle:e},t.direction=this.direction,a)a[d]===this.direction[d]&&(p[d]=!0);if(p.x&&p.y&&p.angle)return t;p.x&&p.y||this.trigger("plain",t),p.x||this.trigger("plain:"+i,t),p.y||this.trigger("plain:"+o,t),p.angle||this.trigger("dir dir:"+e,t)}else this.resetDirection();return t},w.prototype=new b,w.constructor=w,w.id=0,w.prototype.prepareNipples=function(){var t=this,e=t.nipples;e.on=t.on.bind(t),e.off=t.off.bind(t),e.options=t.options,e.destroy=t.destroy.bind(t),e.ids=t.ids,e.id=t.id,e.processOnMove=t.processOnMove.bind(t),e.processOnEnd=t.processOnEnd.bind(t),e.get=function(t){if(void 0===t)return e[0];for(var i=0,o=e.length;i<o;i+=1)if(e[i].identifier===t)return e[i];return!1}},w.prototype.bindings=function(){var t=this;t.bindEvt(t.options.zone,"start"),t.options.zone.style.touchAction="none",t.options.zone.style.msTouchAction="none"},w.prototype.begin=function(){var t=this,e=t.options;if("static"===e.mode){var i=t.createNipple(e.position,t.manager.getIdentifier());i.add(),t.idles.push(i)}},w.prototype.createNipple=function(t,e){var i=this,o=i.manager.scroll,n={},r=i.options,s=i.parentIsFlex?o.x:o.x+i.box.left,d=i.parentIsFlex?o.y:o.y+i.box.top;if(t.x&&t.y)n={x:t.x-s,y:t.y-d};else if(t.top||t.right||t.bottom||t.left){var a=document.createElement("DIV");a.style.display="hidden",a.style.top=t.top,a.style.right=t.right,a.style.bottom=t.bottom,a.style.left=t.left,a.style.position="absolute",r.zone.appendChild(a);var l=a.getBoundingClientRect();r.zone.removeChild(a),n=t,t={x:l.left+o.x,y:l.top+o.y}}var c=new O(i,{color:r.color,size:r.size,threshold:r.threshold,fadeTime:r.fadeTime,dataOnly:r.dataOnly,restJoystick:r.restJoystick,restOpacity:r.restOpacity,mode:r.mode,identifier:e,position:t,zone:r.zone,frontPosition:{x:0,y:0},shape:r.shape});return r.dataOnly||(p(c.ui.el,n),p(c.ui.front,c.frontPosition)),i.nipples.push(c),i.trigger("added "+c.identifier+":added",c),i.manager.trigger("added "+c.identifier+":added",c),i.bindNipple(c),c},w.prototype.updateBox=function(){this.box=this.options.zone.getBoundingClientRect()},w.prototype.bindNipple=function(t){var e,i=this,o=function(t,o){e=t.type+" "+o.id+":"+t.type,i.trigger(e,o)};t.on("destroyed",i.onDestroyed.bind(i)),t.on("shown hidden rested dir plain",o),t.on("dir:up dir:right dir:down dir:left",o),t.on("plain:up plain:right plain:down plain:left",o)},w.prototype.pressureFn=function(t,e,i){var o=this,n=0;clearInterval(o.pressureIntervals[i]),o.pressureIntervals[i]=setInterval(function(){var i=t.force||t.pressure||t.webkitForce||0;i!==n&&(e.trigger("pressure",i),o.trigger("pressure "+e.identifier+":pressure",i),n=i)}.bind(o),100)},w.prototype.onstart=function(t){var e=this,i=e.options,o=t;t=d(t),e.updateBox();return u(t,function(n){e.actives.length<i.maxNumberOfNipples?e.processOnStart(n):o.type.match(/^touch/)&&(Object.keys(e.manager.ids).forEach(function(i){if(Object.values(o.touches).findIndex(function(t){return t.identifier===i})<0){var n=[t[0]];n.identifier=i,e.processOnEnd(n)}}),e.actives.length<i.maxNumberOfNipples&&e.processOnStart(n))}),e.manager.bindDocument(),!1},w.prototype.processOnStart=function(e){var i,o=this,n=o.options,r=o.manager.getIdentifier(e),s=e.force||e.pressure||e.webkitForce||0,d={x:e.pageX,y:e.pageY},a=o.getOrCreate(r,d);a.identifier!==r&&o.manager.removeIdentifier(a.identifier),a.identifier=r;var p=function(t){t.trigger("start",t),o.trigger("start "+t.id+":start",t),t.show(),s>0&&o.pressureFn(e,t,t.identifier),o.processOnMove(e)};if((i=o.idles.indexOf(a))>=0&&o.idles.splice(i,1),o.actives.push(a),o.ids.push(a.identifier),"semi"!==n.mode)p(a);else{if(!(t(d,a.position)<=n.catchDistance))return a.destroy(),void o.processOnStart(e);p(a)}return a},w.prototype.getOrCreate=function(t,e){var i,o=this,n=o.options;return/(semi|static)/.test(n.mode)?(i=o.idles[0])?(o.idles.splice(0,1),i):"semi"===n.mode?o.createNipple(e,t):(console.warn("Coudln't find the needed nipple."),!1):i=o.createNipple(e,t)},w.prototype.processOnMove=function(o){var n=this,r=n.options,s=n.manager.getIdentifier(o),d=n.nipples.get(s),a=n.manager.scroll;if((t=>isNaN(t.buttons)?0!==t.pressure:0!==t.buttons)(o)){if(!d)return console.error("Found zombie joystick with ID "+s),void n.manager.removeIdentifier(s);if(r.dynamicPage){var p=d.el.getBoundingClientRect();d.position={x:a.x+p.left,y:a.y+p.top}}d.identifier=s;var l=d.options.size/2,c={x:o.pageX,y:o.pageY};r.lockX&&(c.y=d.position.y),r.lockY&&(c.x=d.position.x);var h,u,f=t(c,d.position),y=((t,e)=>{const o=e.x-t.x,n=e.y-t.y;return i(Math.atan2(n,o))})(c,d.position),m=e(y),v=f/l,g={distance:f,position:c};if("circle"===d.options.shape?(h=Math.min(f,l),u=((t,i,o)=>{const n={x:0,y:0};return o=e(o),n.x=t.x-i*Math.cos(o),n.y=t.y-i*Math.sin(o),n})(d.position,h,y)):(u=((t,e,i)=>({x:Math.min(Math.max(t.x,e.x-i),e.x+i),y:Math.min(Math.max(t.y,e.y-i),e.y+i)}))(c,d.position,l),h=t(u,d.position)),r.follow){if(f>l){let e=c.x-u.x,i=c.y-u.y;d.position.x+=e,d.position.y+=i,d.el.style.top=d.position.y-(n.box.top+a.y)+"px",d.el.style.left=d.position.x-(n.box.left+a.x)+"px",f=t(c,d.position)}}else c=u,f=h;var x=c.x-d.position.x,b=c.y-d.position.y;d.frontPosition={x:x,y:b},r.dataOnly||(d.ui.front.style.transform="translate("+x+"px,"+b+"px)");var O={identifier:d.identifier,position:c,force:v,pressure:o.force||o.pressure||o.webkitForce||0,distance:f,angle:{radian:m,degree:y},vector:{x:x/l,y:-b/l},raw:g,instance:d,lockX:r.lockX,lockY:r.lockY};(O=d.computeDirection(O)).angle={radian:e(180-y),degree:180-y},d.trigger("move",O),n.trigger("move "+d.id+":move",O)}else this.processOnEnd(o)},w.prototype.processOnEnd=function(t){var e=this,i=e.options,o=e.manager.getIdentifier(t),n=e.nipples.get(o),r=e.manager.removeIdentifier(n.identifier);n&&(i.dataOnly||n.hide(function(){"dynamic"===i.mode&&(n.trigger("removed",n),e.trigger("removed "+n.id+":removed",n),e.manager.trigger("removed "+n.id+":removed",n),n.destroy())}),clearInterval(e.pressureIntervals[n.identifier]),n.resetDirection(),n.trigger("end",n),e.trigger("end "+n.id+":end",n),e.ids.indexOf(n.identifier)>=0&&e.ids.splice(e.ids.indexOf(n.identifier),1),e.actives.indexOf(n)>=0&&e.actives.splice(e.actives.indexOf(n),1),/(semi|static)/.test(i.mode)?e.idles.push(n):e.nipples.indexOf(n)>=0&&e.nipples.splice(e.nipples.indexOf(n),1),e.manager.unbindDocument(),/(semi|static)/.test(i.mode)&&(e.manager.ids[r.id]=r.identifier))},w.prototype.onDestroyed=function(t,e){var i=this;i.nipples.indexOf(e)>=0&&i.nipples.splice(i.nipples.indexOf(e),1),i.actives.indexOf(e)>=0&&i.actives.splice(i.actives.indexOf(e),1),i.idles.indexOf(e)>=0&&i.idles.splice(i.idles.indexOf(e),1),i.ids.indexOf(e.identifier)>=0&&i.ids.splice(i.ids.indexOf(e.identifier),1),i.manager.removeIdentifier(e.identifier),i.manager.unbindDocument()},w.prototype.destroy=function(){var t=this;for(var e in t.unbindEvt(t.options.zone,"start"),t.nipples.forEach(function(t){t.destroy()}),t.pressureIntervals)t.pressureIntervals.hasOwnProperty(e)&&clearInterval(t.pressureIntervals[e]);t.trigger("destroyed",t.nipples),t.manager.unbindDocument(),t.off()},_.prototype=new b,_.constructor=_,_.prototype.prepareCollections=function(){var t=this;t.collections.create=t.create.bind(t),t.collections.on=t.on.bind(t),t.collections.off=t.off.bind(t),t.collections.destroy=t.destroy.bind(t),t.collections.get=function(e){var i;return t.collections.every(function(t){return!(i=t.get(e))}),i}},_.prototype.create=function(t){return this.createCollection(t)},_.prototype.createCollection=function(t){var e=this,i=new w(e,t);return e.bindCollection(i),e.collections.push(i),i},_.prototype.bindCollection=function(t){var e,i=this,o=function(t,o){e=t.type+" "+o.id+":"+t.type,i.trigger(e,o)};t.on("destroyed",i.onDestroyed.bind(i)),t.on("shown hidden rested dir plain",o),t.on("dir:up dir:right dir:down dir:left",o),t.on("plain:up plain:right plain:down plain:left",o)},_.prototype.bindDocument=function(){var t=this;t.binded||(t.bindEvt(document,"move").bindEvt(document,"end"),t.binded=!0)},_.prototype.unbindDocument=function(t){var e=this;Object.keys(e.ids).length&&!0!==t||(e.unbindEvt(document,"move").unbindEvt(document,"end"),e.binded=!1)},_.prototype.getIdentifier=function(t){var e;return t?void 0===(e=void 0===t.identifier?t.pointerId:t.identifier)&&(e=this.latest||0):e=this.index,void 0===this.ids[e]&&(this.ids[e]=this.index,this.index+=1),this.latest=e,this.ids[e]},_.prototype.removeIdentifier=function(t){var e={};for(var i in this.ids)if(this.ids[i]===t){e.id=i,e.identifier=this.ids[i],delete this.ids[i];break}return e},_.prototype.onmove=function(t){return this.onAny("move",t),!1},_.prototype.onend=function(t){return this.onAny("end",t),!1},_.prototype.oncancel=function(t){return this.onAny("end",t),!1},_.prototype.onAny=function(t,e){var i,o=this,n="processOn"+t.charAt(0).toUpperCase()+t.slice(1);e=d(e);var r=function(t,e,i){i.ids.indexOf(e)>=0&&(i[n](t),t._found_=!0)};return u(e,function(t){i=o.getIdentifier(t),u(o.collections,r.bind(null,t,i)),t._found_||o.removeIdentifier(i)}),!1},_.prototype.destroy=function(){var t=this;t.unbindDocument(!0),t.ids={},t.index=0,t.collections.forEach(function(t){t.destroy()}),t.off()},_.prototype.onDestroyed=function(t,e){var i=this;if(i.collections.indexOf(e)<0)return!1;i.collections.splice(i.collections.indexOf(e),1)};const k=new _;var T={create:function(t){return k.create(t)},factory:k};export{T as nipplejs};
|
|
//# sourceMappingURL=index.js.map
|