Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@maslick/radiaslider

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@maslick/radiaslider - npm Package Compare versions

Comparing version 1.9.0 to 1.9.1

2

dist/slider-circular.min.js

@@ -1,1 +0,1 @@

(function(){var a=Math.PI;class b{constructor(c){this.sliders={},this.scaleWidth=34,this.fillWidth=35,this.knobWidth=35,this.startAngle=1.5*a+1e-6,this.endAngle=1.5*a-1e-6,this.continuousMode=c.continuousMode||!1,this.container=document.getElementById(c.canvasId),this.the_body=document.body,this.context=b.setupHiDpiCanvas(this.container),this.x0=c.x0===void 0?this.container.width/2:c.x0,this.y0=c.y0===void 0?this.container.height/2:c.y0,this.x0/=window.devicePixelRatio||1,this.y0/=window.devicePixelRatio||1,this.MouseX=0,this.MouseY=0,this.selectedSlider=null,this.currentSlider=null,this.rotationEventListener=this._rotation.bind(this),this.container.addEventListener("mousedown",this._handleMouseDown.bind(this),!1),this.the_body.addEventListener("mouseup",this._handleMouseUp.bind(this),!1),this.container.addEventListener("click",this._handleClick.bind(this),!1),this.container.addEventListener("touchstart",this._handleTouch.bind(this),!1),this.container.addEventListener("touchmove",this._handleMove.bind(this),!1),this.container.addEventListener("touchend",this._handleEnd.bind(this),!1)}static setupHiDpiCanvas(a){let b=a.getContext("2d"),c=window.devicePixelRatio||1,d=b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1,e=c/d;if(c!==d){let c=a.width,d=a.height;a.width=c*e,a.height=d*e,a.style.width=c+"px",a.style.height=d+"px",b.scale(e,e)}return b}addSlider(a){this.sliders[a.id]={id:a.id,container:document.getElementById(a.container),color:a.color||"#104b63",min:a.min||0,max:a.max||100,radius:a.radius||100,startAngle:this.startAngle,endAngle:this.endAngle,onValueChangeCallback:a.changed||function(){},ang_degrees:0,normalizedValue:a.min||0,step:a.step||1};const b=this.sliders[a.id];this.setSliderValue(b.id,a.min)}setSliderValue(c,d){const e=this.sliders[c];d<=e.min?(e.endAngle=this.startAngle,e.ang_degrees=0,e.normalizedValue=0):d>=e.max?(e.endAngle=this.endAngle,e.ang_degrees=360,e.normalizedValue=e.max):(e.endAngle=2*a*(d-e.min)/(e.max-e.min)-a/2,e.ang_degrees=b.radToDeg(b.normalizeTan(e.endAngle)),e.normalizedValue=d),this.drawAll()}drawAll(){for(let a in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders){if(!this.sliders.hasOwnProperty(a))continue;const b=this.sliders[a];this.drawScale(b),this.drawData(b),this.drawArrow(b),this.drawKnob(b),b.onValueChangeCallback({rad:b.endAngle,deg:b.ang_degrees,value:b.normalizedValue})}this.drawCenterDot()}drawScale(b){for(let c=0;c<=2*a;c+=a/6)this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,b.radius,c,c+a/4,!1),this.context.lineWidth=this.scaleWidth,this.context.stroke()}drawCenterDot(){this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,this.scaleWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()}drawData(a){this.context.beginPath(),this.context.strokeStyle=a.color,this.context.arc(this.x0,this.y0,a.radius,a.startAngle,a.endAngle,!1),this.context.lineWidth=this.fillWidth,this.context.stroke()}drawArrow(a){this.context.beginPath(),this.context.moveTo(this.x0,this.y0-a.radius+this.scaleWidth/2),this.context.lineTo(this.x0,this.y0-this.scaleWidth-a.radius+this.scaleWidth/2),this.context.lineTo(this.x0+this.scaleWidth/4,this.y0-this.scaleWidth/2-a.radius+this.scaleWidth/2),this.context.fillStyle="#eeeeee",this.context.fill()}drawKnob(b){var c=Math.sin,d=Math.cos;this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(d(b.endAngle)*b.radius+this.x0,c(b.endAngle)*b.radius+this.y0,this.knobWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(d(b.endAngle)*b.radius+this.x0,c(b.endAngle)*b.radius+this.y0,this.scaleWidth/10,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()}calculateAngles(c,d){if(!this.selectedSlider)return;let e=this.selectedSlider.max,f=this.selectedSlider.min,g=this.selectedSlider.step,h=Math.atan2(d-this.y0,c-this.x0),i=b.radToDeg(b.normalizeTan(h)),j=b.normalizeTan(h)*(e-f)/(2*a)+f;j=(j/g>>0)*g,this.selectedSlider.endAngle=h,this.selectedSlider.ang_degrees=i,this.selectedSlider.normalizedValue=j}static radToDeg(b){return 180*b/a}static normalizeTan(b){return 0<b+a/2?b+a/2:2*a+b+a/2}calculateUserCursor(){const a=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-a.left,this.MouseY=event.touches[0].clientY-a.top):(this.MouseX=event.clientX-a.left,this.MouseY=event.clientY-a.top)}getSelectedSlider(){var a=Math.pow;this.calculateUserCursor();const b=Math.sqrt(a(this.MouseX-this.x0,2)+a(this.MouseY-this.y0,2));let c;for(let a in this.sliders){if(!this.sliders.hasOwnProperty(a))continue;const d=this.sliders[a];if(Math.abs(b-d.radius)<=this.scaleWidth/2){c=d;break}}return c?c:null}_handleMouseDown(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider();this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)}_handleMouseUp(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider}_handleClick(){this.selectedSlider=this.getSelectedSlider();this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id||this.selectedSlider&&this._rotation()}_handleTouch(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()}_handleMove(a){a.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()}_handleEnd(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)}_rotation(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateAngles(this.MouseX,this.MouseY),this.drawAll()}}"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=b:window.Slider=b})();
(function(){var a=Math.PI;class b{constructor(c){this.sliders={},this.scaleWidth=34,this.fillWidth=35,this.knobWidth=35,this.startAngle=1.5*a+1e-6,this.endAngle=1.5*a-1e-6,this.continuousMode=c.continuousMode||!1,this.container=document.getElementById(c.canvasId),this.the_body=document.body,this.context=b.setupHiDpiCanvas(this.container),this.x0=c.x0===void 0?this.container.width/2:c.x0,this.y0=c.y0===void 0?this.container.height/2:c.y0,this.x0/=window.devicePixelRatio||1,this.y0/=window.devicePixelRatio||1,this.MouseX=0,this.MouseY=0,this.selectedSlider=null,this.currentSlider=null,this.readOnly=c.readOnly||!1,this.readOnly||(this.rotationEventListener=this._rotation.bind(this),this.container.addEventListener("mousedown",this._handleMouseDown.bind(this),!1),this.the_body.addEventListener("mouseup",this._handleMouseUp.bind(this),!1),this.container.addEventListener("click",this._handleClick.bind(this),!1),this.container.addEventListener("touchstart",this._handleTouch.bind(this),!1),this.container.addEventListener("touchmove",this._handleMove.bind(this),!1),this.container.addEventListener("touchend",this._handleEnd.bind(this),!1))}static setupHiDpiCanvas(a){let b=a.getContext("2d"),c=window.devicePixelRatio||1,d=b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1,e=c/d;if(c!==d){let c=a.width,d=a.height;a.width=c*e,a.height=d*e,a.style.width=c+"px",a.style.height=d+"px",b.scale(e,e)}return b}addSlider(a){this.sliders[a.id]={id:a.id,container:document.getElementById(a.container),color:a.color||"#104b63",min:a.min||0,max:a.max||100,radius:a.radius||100,startAngle:this.startAngle,endAngle:this.endAngle,onValueChangeCallback:a.changed||function(){},ang_degrees:0,normalizedValue:a.min||0,step:a.step||1};const b=this.sliders[a.id];this.setSliderValue(b.id,a.min)}setSliderValue(c,d){const e=this.sliders[c];d<=e.min?(e.endAngle=this.startAngle,e.ang_degrees=0,e.normalizedValue=0):d>=e.max?(e.endAngle=this.endAngle,e.ang_degrees=360,e.normalizedValue=e.max):(e.endAngle=2*a*(d-e.min)/(e.max-e.min)-a/2,e.ang_degrees=b.radToDeg(b.normalizeTan(e.endAngle)),e.normalizedValue=d),this.drawAll()}drawAll(){for(let a in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders){if(!this.sliders.hasOwnProperty(a))continue;const b=this.sliders[a];this.drawScale(b),this.drawData(b),this.drawArrow(b),this.drawKnob(b),b.onValueChangeCallback({rad:b.endAngle,deg:b.ang_degrees,value:b.normalizedValue})}this.drawCenterDot()}drawScale(b){for(let c=0;c<=2*a;c+=a/6)this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,b.radius,c,c+a/4,!1),this.context.lineWidth=this.scaleWidth,this.context.stroke()}drawCenterDot(){this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,this.scaleWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()}drawData(a){this.context.beginPath(),this.context.strokeStyle=a.color,this.context.arc(this.x0,this.y0,a.radius,a.startAngle,a.endAngle,!1),this.context.lineWidth=this.fillWidth,this.context.stroke()}drawArrow(a){this.context.beginPath(),this.context.moveTo(this.x0,this.y0-a.radius+this.scaleWidth/2),this.context.lineTo(this.x0,this.y0-this.scaleWidth-a.radius+this.scaleWidth/2),this.context.lineTo(this.x0+this.scaleWidth/4,this.y0-this.scaleWidth/2-a.radius+this.scaleWidth/2),this.context.fillStyle="#eeeeee",this.context.fill()}drawKnob(b){var c=Math.sin,d=Math.cos;this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(d(b.endAngle)*b.radius+this.x0,c(b.endAngle)*b.radius+this.y0,this.knobWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(d(b.endAngle)*b.radius+this.x0,c(b.endAngle)*b.radius+this.y0,this.scaleWidth/10,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()}calculateAngles(c,d){if(!this.selectedSlider)return;let e=this.selectedSlider.max,f=this.selectedSlider.min,g=this.selectedSlider.step,h=Math.atan2(d-this.y0,c-this.x0),i=b.radToDeg(b.normalizeTan(h)),j=b.normalizeTan(h)*(e-f)/(2*a)+f;j=(j/g>>0)*g,this.selectedSlider.endAngle=h,this.selectedSlider.ang_degrees=i,this.selectedSlider.normalizedValue=j}static radToDeg(b){return 180*b/a}static normalizeTan(b){return 0<b+a/2?b+a/2:2*a+b+a/2}calculateUserCursor(){const a=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-a.left,this.MouseY=event.touches[0].clientY-a.top):(this.MouseX=event.clientX-a.left,this.MouseY=event.clientY-a.top)}getSelectedSlider(){var a=Math.pow;this.calculateUserCursor();const b=Math.sqrt(a(this.MouseX-this.x0,2)+a(this.MouseY-this.y0,2));let c;for(let a in this.sliders){if(!this.sliders.hasOwnProperty(a))continue;const d=this.sliders[a];if(Math.abs(b-d.radius)<=this.scaleWidth/2){c=d;break}}return c?c:null}_handleMouseDown(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider();this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)}_handleMouseUp(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider}_handleClick(){this.selectedSlider=this.getSelectedSlider();this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id||this.selectedSlider&&this._rotation()}_handleTouch(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()}_handleMove(a){a.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()}_handleEnd(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)}_rotation(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateAngles(this.MouseX,this.MouseY),this.drawAll()}}"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=b:window.Slider=b})();

@@ -1,1 +0,1 @@

(function(){var a=Math.PI;class b{constructor(a){this.sliders={},this.scaleWidth=34,this.fillWidth=35,this.knobWidth=35,this.continuousMode=a.continuousMode||!1,this.vertical=a.vertical||!1,this.container=document.getElementById(a.canvasId),this.the_body=document.body,this.context=b.setupHiDpiCanvas(this.container),this.MouseX=0,this.MouseY=0,this.selectedSlider=null,this.currentSlider=null,this.rotationEventListener=this._rotation.bind(this),this.container.addEventListener("mousedown",this._handleMouseDown.bind(this),!1),this.the_body.addEventListener("mouseup",this._handleMouseUp.bind(this),!1),this.container.addEventListener("click",this._handleClick.bind(this),!1),this.container.addEventListener("touchstart",this._handleTouch.bind(this),!1),this.container.addEventListener("touchmove",this._handleMove.bind(this),!1),this.container.addEventListener("touchend",this._handleEnd.bind(this),!1)}static setupHiDpiCanvas(a){let b=a.getContext("2d"),c=window.devicePixelRatio||1,d=b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1,e=c/d;if(c!==d){let c=a.width,d=a.height;a.width=c*e,a.height=d*e,a.style.width=c+"px",a.style.height=d+"px",b.scale(e,e)}return b}addSlider(a){this.sliders[a.id]={id:a.id,container:document.getElementById(a.container),color:a.color||"#104b63",width:a.width||100,min:a.min||0,max:a.max||100,step:a.step||1,x0:a.x0||0,y0:a.y0||0,onValueChangeCallback:a.changed||function(){},value:0,normalizedValue:a.min||0};const b=this.sliders[a.id];this.setSliderValue(b.id,a.min)}setSliderValue(a,b){const c=this.sliders[a];b<=c.min?(c.value=0,c.normalizedValue=c.min):b>=c.max?(c.value=c.width,c.normalizedValue=c.max):(c.value=c.width*(b-c.min)/(c.max-c.min),c.normalizedValue=b),this.drawAll()}drawAll(){for(let a in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders){if(!this.sliders.hasOwnProperty(a))continue;const b=this.sliders[a];this.drawScale(b),this.drawData(b),this.drawKnob(b),b.onValueChangeCallback({width:b.value,value:b.normalizedValue})}}drawScale(b){let c=this.vertical?0:1,d=this.vertical?1:0;this.context.beginPath(),this.context.strokeStyle=b.color,this.context.arc(b.x0+c,b.y0-d,this.scaleWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle=b.color,this.context.fill();let e,f;this.vertical?(e=b.x0,f=b.y0-b.width):(e=b.x0+b.width,f=b.y0),this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.moveTo(b.x0,b.y0),this.context.lineTo(e,f),this.context.lineWidth=this.scaleWidth,this.context.stroke(),this.context.strokeStyle="#eeeeee",this.context.arc(e,f,this.scaleWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()}drawData(a){let b,c;this.vertical?(b=a.x0,c=a.y0-a.value):(b=a.x0+a.value,c=a.y0),this.context.beginPath(),this.context.strokeStyle=a.color,this.context.moveTo(a.x0,a.y0),this.context.lineTo(b,c),this.context.lineWidth=this.fillWidth,this.context.stroke()}drawKnob(b){let c,d;this.vertical?(c=b.x0,d=b.y0-b.value):(c=b.x0+b.value,d=b.y0),this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(c,d,this.knobWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(c,d,this.scaleWidth/10,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()}calculateValues(a,b){if(!this.selectedSlider)return;let c,d=this.selectedSlider.max,e=this.selectedSlider.min,f=this.selectedSlider.step,g=this.selectedSlider.width;c=this.vertical?this.selectedSlider.y0-b:a-this.selectedSlider.x0;let h=c;h>this.selectedSlider.width-this.selectedSlider.step&&(h=this.selectedSlider.width),h<0+this.selectedSlider.step&&(h=0);let i=h*(d-e)/g+e;i=(i/f>>0)*f,this.selectedSlider.value=h,this.selectedSlider.normalizedValue=i}calculateUserCursor(){let a=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-a.left,this.MouseY=event.touches[0].clientY-a.top):(this.MouseX=event.clientX-a.left,this.MouseY=event.clientY-a.top)}getSelectedSlider(){this.calculateUserCursor();let a;for(let b in this.sliders){if(!this.sliders.hasOwnProperty(b))continue;let c,d,e=this.sliders[b];if(this.vertical?(c=this.MouseX>=e.x0-this.scaleWidth/2&&this.MouseX<=e.x0+this.scaleWidth/2,d=this.MouseY>=e.y0-e.width-this.scaleWidth/2&&this.MouseY<=e.y0+this.scaleWidth/2):(c=this.MouseX>=e.x0-this.scaleWidth/2&&this.MouseX<=e.x0+e.width+this.scaleWidth/2,d=this.MouseY>=e.y0-this.scaleWidth/2&&this.MouseY<=e.y0+this.scaleWidth/2),c&&d){a=e;break}}return a?a:null}_handleMouseDown(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider();this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)}_handleMouseUp(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider}_handleClick(){this.selectedSlider=this.getSelectedSlider();this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id||this.selectedSlider&&this._rotation()}_handleTouch(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()}_handleMove(a){a.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()}_handleEnd(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)}_rotation(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateValues(this.MouseX,this.MouseY),this.drawAll()}}"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=b:window.Slider=b})();
(function(){var a=Math.PI;class b{constructor(a){this.sliders={},this.scaleWidth=34,this.fillWidth=35,this.knobWidth=35,this.continuousMode=a.continuousMode||!1,this.vertical=a.vertical||!1,this.container=document.getElementById(a.canvasId),this.the_body=document.body,this.context=b.setupHiDpiCanvas(this.container),this.MouseX=0,this.MouseY=0,this.selectedSlider=null,this.currentSlider=null,this.readOnly=a.readOnly||!1,this.readOnly||(this.rotationEventListener=this._rotation.bind(this),this.container.addEventListener("mousedown",this._handleMouseDown.bind(this),!1),this.the_body.addEventListener("mouseup",this._handleMouseUp.bind(this),!1),this.container.addEventListener("click",this._handleClick.bind(this),!1),this.container.addEventListener("touchstart",this._handleTouch.bind(this),!1),this.container.addEventListener("touchmove",this._handleMove.bind(this),!1),this.container.addEventListener("touchend",this._handleEnd.bind(this),!1))}static setupHiDpiCanvas(a){let b=a.getContext("2d"),c=window.devicePixelRatio||1,d=b.webkitBackingStorePixelRatio||b.mozBackingStorePixelRatio||b.msBackingStorePixelRatio||b.oBackingStorePixelRatio||b.backingStorePixelRatio||1,e=c/d;if(c!==d){let c=a.width,d=a.height;a.width=c*e,a.height=d*e,a.style.width=c+"px",a.style.height=d+"px",b.scale(e,e)}return b}addSlider(a){this.sliders[a.id]={id:a.id,container:document.getElementById(a.container),color:a.color||"#104b63",width:a.width||100,min:a.min||0,max:a.max||100,step:a.step||1,x0:a.x0||0,y0:a.y0||0,onValueChangeCallback:a.changed||function(){},value:0,normalizedValue:a.min||0};const b=this.sliders[a.id];this.setSliderValue(b.id,a.min)}setSliderValue(a,b){const c=this.sliders[a];b<=c.min?(c.value=0,c.normalizedValue=c.min):b>=c.max?(c.value=c.width,c.normalizedValue=c.max):(c.value=c.width*(b-c.min)/(c.max-c.min),c.normalizedValue=b),this.drawAll()}drawAll(){for(let a in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders){if(!this.sliders.hasOwnProperty(a))continue;const b=this.sliders[a];this.drawScale(b),this.drawData(b),this.drawKnob(b),b.onValueChangeCallback({width:b.value,value:b.normalizedValue})}}drawScale(b){let c=this.vertical?0:1,d=this.vertical?1:0;this.context.beginPath(),this.context.strokeStyle=b.color,this.context.arc(b.x0+c,b.y0-d,this.scaleWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle=b.color,this.context.fill();let e,f;this.vertical?(e=b.x0,f=b.y0-b.width):(e=b.x0+b.width,f=b.y0),this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.moveTo(b.x0,b.y0),this.context.lineTo(e,f),this.context.lineWidth=this.scaleWidth,this.context.stroke(),this.context.strokeStyle="#eeeeee",this.context.arc(e,f,this.scaleWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()}drawData(a){let b,c;this.vertical?(b=a.x0,c=a.y0-a.value):(b=a.x0+a.value,c=a.y0),this.context.beginPath(),this.context.strokeStyle=a.color,this.context.moveTo(a.x0,a.y0),this.context.lineTo(b,c),this.context.lineWidth=this.fillWidth,this.context.stroke()}drawKnob(b){let c,d;this.vertical?(c=b.x0,d=b.y0-b.value):(c=b.x0+b.value,d=b.y0),this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(c,d,this.knobWidth/2,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(c,d,this.scaleWidth/10,0,2*a,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()}calculateValues(a,b){if(!this.selectedSlider)return;let c,d=this.selectedSlider.max,e=this.selectedSlider.min,f=this.selectedSlider.step,g=this.selectedSlider.width;c=this.vertical?this.selectedSlider.y0-b:a-this.selectedSlider.x0;let h=c;h>this.selectedSlider.width-this.selectedSlider.step&&(h=this.selectedSlider.width),h<0+this.selectedSlider.step&&(h=0);let i=h*(d-e)/g+e;i=(i/f>>0)*f,this.selectedSlider.value=h,this.selectedSlider.normalizedValue=i}calculateUserCursor(){let a=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-a.left,this.MouseY=event.touches[0].clientY-a.top):(this.MouseX=event.clientX-a.left,this.MouseY=event.clientY-a.top)}getSelectedSlider(){this.calculateUserCursor();let a;for(let b in this.sliders){if(!this.sliders.hasOwnProperty(b))continue;let c,d,e=this.sliders[b];if(this.vertical?(c=this.MouseX>=e.x0-this.scaleWidth/2&&this.MouseX<=e.x0+this.scaleWidth/2,d=this.MouseY>=e.y0-e.width-this.scaleWidth/2&&this.MouseY<=e.y0+this.scaleWidth/2):(c=this.MouseX>=e.x0-this.scaleWidth/2&&this.MouseX<=e.x0+e.width+this.scaleWidth/2,d=this.MouseY>=e.y0-this.scaleWidth/2&&this.MouseY<=e.y0+this.scaleWidth/2),c&&d){a=e;break}}return a?a:null}_handleMouseDown(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider();this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)}_handleMouseUp(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider}_handleClick(){this.selectedSlider=this.getSelectedSlider();this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id||this.selectedSlider&&this._rotation()}_handleTouch(a){a.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()}_handleMove(a){a.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()}_handleEnd(a){a.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)}_rotation(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateValues(this.MouseX,this.MouseY),this.drawAll()}}"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=b:window.Slider=b})();
{
"name": "@maslick/radiaslider",
"version": "1.9.0",
"version": "1.9.1",
"description": "nice looking canvas-based radial and linear slider",

@@ -5,0 +5,0 @@ "repository": {

@@ -69,3 +69,3 @@ # =radiaSlider=

<script>
const slider = new Slider({ canvasId: "myCanvas", continuousMode: true, vertical: false });
const slider = new Slider({ canvasId: "myCanvas", continuousMode: true, vertical: false, readOnly: false });
slider.addSlider({

@@ -72,0 +72,0 @@ id: 1

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc