@maslick/radiaslider - npm Package Compare versions

Comparing version 1.2.6 to 1.3.0

481

circular/slider-circular.js

		@@ -1,291 +0,298 @@
		function Slider(options) {
		(function () {
		function Slider(options) {
		this.sliders = {};
		this.scaleWidth = 35;
		this.fillWidth = 35;
		this.knobWidth = 35;

		this.sliders = {};
		this.scaleWidth = 35;
		this.fillWidth = 35;
		this.knobWidth = 35;
		this.startAngle = 1.5 * Math.PI + 0.000001;
		this.endAngle = 1.5 * Math.PI - 0.000001;

		this.startAngle = 1.5 * Math.PI + 0.000001;
		this.endAngle = 1.5 * Math.PI - 0.000001;
		this.continuousMode = options.continuousMode \|\| false;

		this.continuousMode = options.continuousMode \|\| false;
		this.container = document.getElementById(options.canvasId);
		this.the_body = document.body;
		this.context = this.container.getContext('2d');

		this.container = document.getElementById(options.canvasId);
		this.the_body = document.body;
		this.context = this.container.getContext('2d');
		this.x0 = options.x0 === undefined ? this.container.width / 2 : options.x0;
		this.y0 = options.y0 === undefined ? this.container.height / 2 : options.y0;

		this.x0 = options.x0 === undefined ? this.container.width / 2 : options.x0;
		this.y0 = options.y0 === undefined ? this.container.height / 2 : options.y0;
		this.MouseX = 0;
		this.MouseY = 0;

		this.MouseX = 0;
		this.MouseY = 0;
		this.selectedSlider = null;
		this.currentSlider = null;

		this.selectedSlider = null;
		this.currentSlider = null;
		this.rotationEventListener = this._rotation.bind(this);
		this.container.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
		this.the_body.addEventListener('mouseup', this._handleMouseUp.bind(this), false);
		this.container.addEventListener('click', this._handleClick.bind(this), false);

		this.rotationEventListener = this._rotation.bind(this);
		this.container.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
		this.the_body.addEventListener('mouseup', this._handleMouseUp.bind(this), false);
		this.container.addEventListener('click', this._handleClick.bind(this), false);

		this.container.addEventListener('touchstart', this._handleTouch.bind(this), false);
		this.container.addEventListener('touchmove', this._handleMove.bind(this), false);
		this.container.addEventListener('touchend', this._handleEnd.bind(this), false);

		this.container.addEventListener('touchstart', this._handleTouch.bind(this), false);
		this.container.addEventListener('touchmove', this._handleMove.bind(this), false);
		this.container.addEventListener('touchend', this._handleEnd.bind(this), false);
		}

		}

		// Adds a slider band to the slider
		Slider.prototype.addSlider = function (options) {
		this.sliders[options.id] = {
		id: options.id,
		container: document.getElementById(options.container),
		color: options.color \|\| '#104b63',
		min: options.min \|\| 0,
		max: options.max \|\| 100,
		radius: options.radius \|\| 100,
		startAngle: this.startAngle,
		endAngle: this.endAngle,
		onValueChangeCallback: options.changed \|\| function(v) {},
		ang_degrees: 0,
		normalizedValue: options.min \|\| 0,
		step: options.step \|\| 1
		};

		// Adds a slider band to the slider
		Slider.prototype.addSlider = function (options) {
		this.sliders[options.id] = {
		id: options.id,
		container: document.getElementById(options.container),
		color: options.color \|\| '#104b63',
		min: options.min \|\| 0,
		max: options.max \|\| 100,
		radius: options.radius \|\| 100,
		startAngle: this.startAngle,
		endAngle: this.endAngle,
		onValueChangeCallback: options.changed \|\| function(v) {},
		ang_degrees: 0,
		normalizedValue: options.min \|\| 0,
		step: options.step \|\| 1
		var obj = this.sliders[options.id];
		//obj.da = Math.abs(2Math.PIobj.step/(obj.max-obj.min));

		this.setSliderValue(obj.id, options.min);
		};

		var obj = this.sliders[options.id];
		//obj.da = Math.abs(2Math.PIobj.step/(obj.max-obj.min));
		// Sets (draws) slider band value given the band id and value
		Slider.prototype.setSliderValue = function (id, value) {
		var slider = this.sliders[id];
		if (value <= slider.min) {
		slider.endAngle = this.startAngle;
		slider.ang_degrees = 0;
		slider.normalizedValue = 0;
		}
		else if (value >= slider.max) {
		slider.endAngle = this.endAngle;
		slider.ang_degrees = 360;
		slider.normalizedValue = slider.max;
		}
		else {
		//value = (value / slider.step >> 0) * slider.step;
		slider.endAngle = 2 * Math.PI * (value - slider.min) / (slider.max - slider.min) - Math.PI/2;
		slider.ang_degrees = this.radToDeg(this.normalizeTan(slider.endAngle));
		slider.normalizedValue = value;
		}

		this.setSliderValue(obj.id, options.min);
		};
		this.drawAll();
		};

		// Sets (draws) slider band value given the band id and value
		Slider.prototype.setSliderValue = function (id, value) {
		var slider = this.sliders[id];
		if (value <= slider.min) {
		slider.endAngle = this.startAngle;
		slider.ang_degrees = 0;
		slider.normalizedValue = 0;
		}
		else if (value >= slider.max) {
		slider.endAngle = this.endAngle;
		slider.ang_degrees = 360;
		slider.normalizedValue = slider.max;
		}
		else {
		//value = (value / slider.step >> 0) * slider.step;
		slider.endAngle = 2 * Math.PI * (value - slider.min) / (slider.max - slider.min) - Math.PI/2;
		slider.ang_degrees = this.radToDeg(this.normalizeTan(slider.endAngle));
		slider.normalizedValue = value;
		}
		// Redraws everything
		Slider.prototype.drawAll = function () {
		this.context.clearRect(0, 0, this.container.width, this.container.height);
		for (var key in this.sliders) {
		if (!this.sliders.hasOwnProperty(key)) continue;
		var obj = this.sliders[key];
		this.drawScale(obj);
		this.drawData(obj);
		this.drawArrow(obj);
		this.drawKnob(obj);
		obj.onValueChangeCallback({'rad': obj.endAngle, 'deg': obj.ang_degrees, 'value': obj.normalizedValue});
		}
		this.drawCenterDot();
		};

		this.drawAll();
		};
		// Draw the scale for a selected slider band
		Slider.prototype.drawScale = function(slider) {
		// Scale
		for (var i = 0; i <= Math.PI * 2; i += Math.PI / 6) {
		this.context.beginPath();
		this.context.strokeStyle = '#eeeeee';
		this.context.arc(this.x0, this.y0, slider.radius, i, i + Math.PI / 6, false);
		this.context.lineWidth = this.scaleWidth;
		this.context.stroke();
		}

		// Redraws everything
		Slider.prototype.drawAll = function () {
		this.context.clearRect(0, 0, this.container.width, this.container.height);
		for (var key in this.sliders) {
		if (!this.sliders.hasOwnProperty(key)) continue;
		var obj = this.sliders[key];
		this.drawScale(obj);
		this.drawData(obj);
		this.drawArrow(obj);
		this.drawKnob(obj);
		obj.onValueChangeCallback({'rad': obj.endAngle, 'deg': obj.ang_degrees, 'value': obj.normalizedValue});
		}
		this.drawCenterDot();
		};
		};

		// Draw the scale for a selected slider band
		Slider.prototype.drawScale = function(slider) {
		// Scale
		for (var i = 0; i <= Math.PI * 2; i += Math.PI / 6) {
		// Draw dot in the center
		Slider.prototype.drawCenterDot = function () {
		this.context.beginPath();
		this.context.strokeStyle = '#eeeeee';
		this.context.arc(this.x0, this.y0, slider.radius, i, i + Math.PI / 6, false);
		this.context.lineWidth = this.scaleWidth;
		this.context.arc(this.x0, this.y0, this.scaleWidth/2, 0, Math.PI*2, false);
		this.context.lineWidth = 1;
		this.context.fillStyle = '#eeeeee';
		this.context.fill();
		};

		// Draw the data on the selected slider band
		Slider.prototype.drawData = function(slider) {
		this.context.beginPath();
		this.context.strokeStyle = slider.color;
		this.context.arc(this.x0, this.y0, slider.radius, slider.startAngle, slider.endAngle, false);
		this.context.lineWidth = this.fillWidth;
		this.context.stroke();
		}
		};

		};
		// Draw tail arrow
		Slider.prototype.drawArrow = function(slider) {
		this.context.beginPath();
		this.context.moveTo(this.x0, this.y0 - slider.radius + this.scaleWidth / 2);
		this.context.lineTo(this.x0, this.y0 - this.scaleWidth - slider.radius + this.scaleWidth / 2);
		this.context.lineTo(this.x0 + this.scaleWidth / 4, this.y0 - this.scaleWidth / 2 - slider.radius + this.scaleWidth / 2);
		this.context.fillStyle = "#eeeeee";
		this.context.fill();
		};

		// Draw dot in the center
		Slider.prototype.drawCenterDot = function () {
		this.context.beginPath();
		this.context.strokeStyle = '#eeeeee';
		this.context.arc(this.x0, this.y0, this.scaleWidth/2, 0, Math.PI*2, false);
		this.context.lineWidth = 1;
		this.context.fillStyle = '#eeeeee';
		this.context.fill();
		};
		// Draw the knob (control element)
		Slider.prototype.drawKnob = function(slider) {
		// Knob
		this.context.beginPath();
		this.context.strokeStyle = '#eb879c';
		this.context.arc(Math.cos(slider.endAngle)*slider.radius + this.x0,
		Math.sin(slider.endAngle)*slider.radius + this.y0,
		this.knobWidth/2,
		0,Math.PI*2,false);
		this.context.lineWidth = 1;

		// Draw the data on the selected slider band
		Slider.prototype.drawData = function(slider) {
		this.context.beginPath();
		this.context.strokeStyle = slider.color;
		this.context.arc(this.x0, this.y0, slider.radius, slider.startAngle, slider.endAngle, false);
		this.context.lineWidth = this.fillWidth;
		this.context.stroke();
		};
		this.context.fillStyle = '#eb879c';
		this.context.fill();

		// Draw tail arrow
		Slider.prototype.drawArrow = function(slider) {
		this.context.beginPath();
		this.context.moveTo(this.x0, this.y0 - slider.radius + this.scaleWidth / 2);
		this.context.lineTo(this.x0, this.y0 - this.scaleWidth - slider.radius + this.scaleWidth / 2);
		this.context.lineTo(this.x0 + this.scaleWidth / 4, this.y0 - this.scaleWidth / 2 - slider.radius + this.scaleWidth / 2);
		this.context.fillStyle = "#eeeeee";
		this.context.fill();
		};
		// Dot on the knob
		this.context.beginPath();
		this.context.strokeStyle = 'yellow';
		this.context.arc(Math.cos(slider.endAngle)*slider.radius + this.x0,
		Math.sin(slider.endAngle)*slider.radius + this.y0,
		this.scaleWidth/10,
		0,Math.PI*2,false);
		this.context.lineWidth = 1;
		this.context.fillStyle = 'yellow';
		this.context.fill();
		};

		// Draw the knob (control element)
		Slider.prototype.drawKnob = function(slider) {
		// Knob
		this.context.beginPath();
		this.context.strokeStyle = '#eb879c';
		this.context.arc(Math.cos(slider.endAngle)*slider.radius + this.x0,
		Math.sin(slider.endAngle)*slider.radius + this.y0,
		this.knobWidth/2,
		0,Math.PI*2,false);
		this.context.lineWidth = 1;
		// Calculate angles given the cursor position
		Slider.prototype.calculateAngles = function (x, y) {
		if (!this.selectedSlider) { return; }

		this.context.fillStyle = '#eb879c';
		this.context.fill();
		var max = this.selectedSlider.max,
		min = this.selectedSlider.min,
		step = this.selectedSlider.step,
		endAngle = Math.atan2(y-this.y0, x-this.x0),
		ang_degrees = this.radToDeg(this.normalizeTan(endAngle)),
		normalizedValue = this.normalizeTan(endAngle) * (max - min) / (2 * Math.PI) + min;

		// Dot on the knob
		this.context.beginPath();
		this.context.strokeStyle = 'yellow';
		this.context.arc(Math.cos(slider.endAngle)*slider.radius + this.x0,
		Math.sin(slider.endAngle)*slider.radius + this.y0,
		this.scaleWidth/10,
		0,Math.PI*2,false);
		this.context.lineWidth = 1;
		this.context.fillStyle = 'yellow';
		this.context.fill();
		};
		normalizedValue = (normalizedValue / step >> 0) * step;

		// Calculate angles given the cursor position
		Slider.prototype.calculateAngles = function (x, y) {
		if (!this.selectedSlider) { return; }
		this.selectedSlider.endAngle = endAngle;
		this.selectedSlider.ang_degrees = ang_degrees;
		this.selectedSlider.normalizedValue = normalizedValue;
		};

		var max = this.selectedSlider.max,
		min = this.selectedSlider.min,
		step = this.selectedSlider.step,
		endAngle = Math.atan2(y-this.y0, x-this.x0),
		ang_degrees = this.radToDeg(this.normalizeTan(endAngle)),
		normalizedValue = this.normalizeTan(endAngle) * (max - min) / (2 * Math.PI) + min;
		// Helper method
		Slider.prototype.radToDeg = function (ang) {
		return ang * 180 / Math.PI;
		};

		normalizedValue = (normalizedValue / step >> 0) * step;
		// Normalizes tangent
		Slider.prototype.normalizeTan = function (ang) {
		var rads = ang + Math.PI / 2 > 0 ? ang + Math.PI / 2 : (2 * Math.PI + ang + Math.PI / 2);
		return rads;
		};

		this.selectedSlider.endAngle = endAngle;
		this.selectedSlider.ang_degrees = ang_degrees;
		this.selectedSlider.normalizedValue = normalizedValue;
		};
		// Calculates cursor coordinates
		Slider.prototype.calculateUserCursor = function () {
		var rect = this.container.getBoundingClientRect();

		// Helper method
		Slider.prototype.radToDeg = function (ang) {
		return ang * 180 / Math.PI;
		};
		if (event.touches) {
		this.MouseX = event.touches[0].clientX - rect.left;
		this.MouseY = event.touches[0].clientY - rect.top;
		}
		else {
		this.MouseX = event.clientX - rect.left;
		this.MouseY = event.clientY - rect.top;
		}
		};

		// Normalizes tangent
		Slider.prototype.normalizeTan = function (ang) {
		var rads = ang + Math.PI / 2 > 0 ? ang + Math.PI / 2 : (2 * Math.PI + ang + Math.PI / 2);
		return rads;
		};

		// Calculates cursor coordinates
		Slider.prototype.calculateUserCursor = function () {
		var rect = this.container.getBoundingClientRect();
		// Returns a slider band based on the cursor position
		Slider.prototype.getSelectedSlider = function () {
		this.calculateUserCursor();
		var hip = Math.sqrt(Math.pow(this.MouseX - this.x0, 2) + Math.pow(this.MouseY - this.y0, 2));

		if (event.touches) {
		this.MouseX = event.touches[0].clientX - rect.left;
		this.MouseY = event.touches[0].clientY - rect.top;
		}
		else {
		this.MouseX = event.clientX - rect.left;
		this.MouseY = event.clientY - rect.top;
		}
		};


		// Returns a slider band based on the cursor position
		Slider.prototype.getSelectedSlider = function () {
		this.calculateUserCursor();
		var hip = Math.sqrt(Math.pow(this.MouseX - this.x0, 2) + Math.pow(this.MouseY - this.y0, 2));

		for (var key in this.sliders) {
		if (!this.sliders.hasOwnProperty(key)) continue;
		var obj = this.sliders[key];
		if (Math.abs(hip - obj.radius) <= this.scaleWidth / 2) {
		var selectedSlider = obj;
		break;
		for (var key in this.sliders) {
		if (!this.sliders.hasOwnProperty(key)) continue;
		var obj = this.sliders[key];
		if (Math.abs(hip - obj.radius) <= this.scaleWidth / 2) {
		var selectedSlider = obj;
		break;
		}
		}
		}
		return selectedSlider ? selectedSlider : null;
		};
		return selectedSlider ? selectedSlider : null;
		};


		// Event handlers (mousedown, mouseup, mousemove, mouseclick, touches)
		Slider.prototype._handleMouseDown = function (event) {
		event.preventDefault();
		this.selectedSlider = this.getSelectedSlider();
		// Event handlers (mousedown, mouseup, mousemove, mouseclick, touches)
		Slider.prototype._handleMouseDown = function (event) {
		event.preventDefault();
		this.selectedSlider = this.getSelectedSlider();

		if (!this.selectedSlider) return;
		if (!this.selectedSlider) return;

		this.the_body.addEventListener('mousemove', this.rotationEventListener, false);
		};
		this.the_body.addEventListener('mousemove', this.rotationEventListener, false);
		};

		Slider.prototype._handleMouseUp = function (event) {
		event.preventDefault();
		this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
		Slider.prototype._handleMouseUp = function (event) {
		event.preventDefault();
		this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);

		this.currentSlider = this.selectedSlider;
		};
		this.currentSlider = this.selectedSlider;
		};

		Slider.prototype._handleClick = function (event) {
		this.selectedSlider = this.getSelectedSlider();
		Slider.prototype._handleClick = function (event) {
		this.selectedSlider = this.getSelectedSlider();

		if (this.currentSlider && this.getSelectedSlider() && this.currentSlider.id !== this.getSelectedSlider().id) {
		return;
		}
		if (this.selectedSlider) {
		this._rotation();
		}
		};
		if (this.currentSlider && this.getSelectedSlider() && this.currentSlider.id !== this.getSelectedSlider().id) {
		return;
		}
		if (this.selectedSlider) {
		this._rotation();
		}
		};

		Slider.prototype._handleTouch = function (event) {
		event.preventDefault();
		this.selectedSlider = this.getSelectedSlider();
		if (this.selectedSlider) {
		this._rotation();
		}
		};

		Slider.prototype._handleMove = function (event) {
		event.preventDefault();
		if (this.continuousMode) {
		this._rotation();
		}
		else {
		Slider.prototype._handleTouch = function (event) {
		event.preventDefault();
		this.selectedSlider = this.getSelectedSlider();
		if (this.selectedSlider) {
		this._rotation();
		}
		}
		};
		};

		Slider.prototype._handleEnd = function (event) {
		event.preventDefault();
		this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
		};
		Slider.prototype._handleMove = function (event) {
		event.preventDefault();
		if (this.continuousMode) {
		this._rotation();
		}
		else {
		if (this.selectedSlider) {
		this._rotation();
		}
		}
		};

		// Rotation wrapper
		Slider.prototype._rotation = function () {
		this.calculateUserCursor();
		if (this.continuousMode) {
		this.selectedSlider = this.getSelectedSlider();
		}
		Slider.prototype._handleEnd = function (event) {
		event.preventDefault();
		this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
		};

		this.calculateAngles(this.MouseX, this.MouseY);
		this.drawAll();
		};
		// Rotation wrapper
		Slider.prototype._rotation = function () {
		this.calculateUserCursor();
		if (this.continuousMode) {
		this.selectedSlider = this.getSelectedSlider();
		}

		this.calculateAngles(this.MouseX, this.MouseY);
		this.drawAll();
		};

		if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
		module.exports = 1;
		else window.Slider = Slider;
		})();

circular/slider-circular.min.js

		@@ -1,1 +0,1 @@
		function Slider(t){this.sliders={},this.scaleWidth=35,this.fillWidth=35,this.knobWidth=35,this.startAngle=1.5Math.PI+1e-6,this.endAngle=1.5Math.PI-1e-6,this.continuousMode=t.continuousMode\|\|!1,this.container=document.getElementById(t.canvasId),this.the_body=document.body,this.context=this.container.getContext("2d"),this.x0=void 0===t.x0?this.container.width/2:t.x0,this.y0=void 0===t.y0?this.container.height/2:t.y0,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)}Slider.prototype.addSlider=function(t){this.sliders[t.id]={id:t.id,container:document.getElementById(t.container),color:t.color\|\|"#104b63",min:t.min\|\|0,max:t.max\|\|100,radius:t.radius\|\|100,startAngle:this.startAngle,endAngle:this.endAngle,onValueChangeCallback:t.changed\|\|function(t){},ang_degrees:0,normalizedValue:t.min\|\|0,step:t.step\|\|1};var e=this.sliders[t.id];this.setSliderValue(e.id,t.min)},Slider.prototype.setSliderValue=function(t,e){var i=this.sliders[t];e<=i.min?(i.endAngle=this.startAngle,i.ang_degrees=0,i.normalizedValue=0):e>=i.max?(i.endAngle=this.endAngle,i.ang_degrees=360,i.normalizedValue=i.max):(i.endAngle=2Math.PI(e-i.min)/(i.max-i.min)-Math.PI/2,i.ang_degrees=this.radToDeg(this.normalizeTan(i.endAngle)),i.normalizedValue=e),this.drawAll()},Slider.prototype.drawAll=function(){for(var t in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders)if(this.sliders.hasOwnProperty(t)){var e=this.sliders[t];this.drawScale(e),this.drawData(e),this.drawArrow(e),this.drawKnob(e),e.onValueChangeCallback({rad:e.endAngle,deg:e.ang_degrees,value:e.normalizedValue})}this.drawCenterDot()},Slider.prototype.drawScale=function(t){for(var e=0;e<=2Math.PI;e+=Math.PI/6)this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,t.radius,e,e+Math.PI/6,!1),this.context.lineWidth=this.scaleWidth,this.context.stroke()},Slider.prototype.drawCenterDot=function(){this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,this.scaleWidth/2,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()},Slider.prototype.drawData=function(t){this.context.beginPath(),this.context.strokeStyle=t.color,this.context.arc(this.x0,this.y0,t.radius,t.startAngle,t.endAngle,!1),this.context.lineWidth=this.fillWidth,this.context.stroke()},Slider.prototype.drawArrow=function(t){this.context.beginPath(),this.context.moveTo(this.x0,this.y0-t.radius+this.scaleWidth/2),this.context.lineTo(this.x0,this.y0-this.scaleWidth-t.radius+this.scaleWidth/2),this.context.lineTo(this.x0+this.scaleWidth/4,this.y0-this.scaleWidth/2-t.radius+this.scaleWidth/2),this.context.fillStyle="#eeeeee",this.context.fill()},Slider.prototype.drawKnob=function(t){this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(Math.cos(t.endAngle)t.radius+this.x0,Math.sin(t.endAngle)t.radius+this.y0,this.knobWidth/2,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(Math.cos(t.endAngle)t.radius+this.x0,Math.sin(t.endAngle)t.radius+this.y0,this.scaleWidth/10,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()},Slider.prototype.calculateAngles=function(t,e){if(this.selectedSlider){var i=this.selectedSlider.max,s=this.selectedSlider.min,n=this.selectedSlider.step,h=Math.atan2(e-this.y0,t-this.x0),o=this.radToDeg(this.normalizeTan(h)),r=this.normalizeTan(h)(i-s)/(2Math.PI)+s;r=(r/n>>0)n,this.selectedSlider.endAngle=h,this.selectedSlider.ang_degrees=o,this.selectedSlider.normalizedValue=r}},Slider.prototype.radToDeg=function(t){return 180t/Math.PI},Slider.prototype.normalizeTan=function(t){return 0<t+Math.PI/2?t+Math.PI/2:2*Math.PI+t+Math.PI/2},Slider.prototype.calculateUserCursor=function(){var t=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-t.left,this.MouseY=event.touches[0].clientY-t.top):(this.MouseX=event.clientX-t.left,this.MouseY=event.clientY-t.top)},Slider.prototype.getSelectedSlider=function(){this.calculateUserCursor();var t=Math.sqrt(Math.pow(this.MouseX-this.x0,2)+Math.pow(this.MouseY-this.y0,2));for(var e in this.sliders)if(this.sliders.hasOwnProperty(e)){var i=this.sliders[e];if(Math.abs(t-i.radius)<=this.scaleWidth/2){var s=i;break}}return s\|\|null},Slider.prototype._handleMouseDown=function(t){t.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)},Slider.prototype._handleMouseUp=function(t){t.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider},Slider.prototype._handleClick=function(t){this.selectedSlider=this.getSelectedSlider(),this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id\|\|this.selectedSlider&&this._rotation()},Slider.prototype._handleTouch=function(t){t.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()},Slider.prototype._handleMove=function(t){t.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()},Slider.prototype._handleEnd=function(t){t.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)},Slider.prototype._rotation=function(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateAngles(this.MouseX,this.MouseY),this.drawAll()};
		!function(){function t(t){this.sliders={},this.scaleWidth=35,this.fillWidth=35,this.knobWidth=35,this.startAngle=1.5Math.PI+1e-6,this.endAngle=1.5Math.PI-1e-6,this.continuousMode=t.continuousMode\|\|!1,this.container=document.getElementById(t.canvasId),this.the_body=document.body,this.context=this.container.getContext("2d"),this.x0=void 0===t.x0?this.container.width/2:t.x0,this.y0=void 0===t.y0?this.container.height/2:t.y0,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)}t.prototype.addSlider=function(t){this.sliders[t.id]={id:t.id,container:document.getElementById(t.container),color:t.color\|\|"#104b63",min:t.min\|\|0,max:t.max\|\|100,radius:t.radius\|\|100,startAngle:this.startAngle,endAngle:this.endAngle,onValueChangeCallback:t.changed\|\|function(t){},ang_degrees:0,normalizedValue:t.min\|\|0,step:t.step\|\|1};var e=this.sliders[t.id];this.setSliderValue(e.id,t.min)},t.prototype.setSliderValue=function(t,e){var i=this.sliders[t];e<=i.min?(i.endAngle=this.startAngle,i.ang_degrees=0,i.normalizedValue=0):e>=i.max?(i.endAngle=this.endAngle,i.ang_degrees=360,i.normalizedValue=i.max):(i.endAngle=2Math.PI(e-i.min)/(i.max-i.min)-Math.PI/2,i.ang_degrees=this.radToDeg(this.normalizeTan(i.endAngle)),i.normalizedValue=e),this.drawAll()},t.prototype.drawAll=function(){for(var t in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders)if(this.sliders.hasOwnProperty(t)){var e=this.sliders[t];this.drawScale(e),this.drawData(e),this.drawArrow(e),this.drawKnob(e),e.onValueChangeCallback({rad:e.endAngle,deg:e.ang_degrees,value:e.normalizedValue})}this.drawCenterDot()},t.prototype.drawScale=function(t){for(var e=0;e<=2Math.PI;e+=Math.PI/6)this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,t.radius,e,e+Math.PI/6,!1),this.context.lineWidth=this.scaleWidth,this.context.stroke()},t.prototype.drawCenterDot=function(){this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.arc(this.x0,this.y0,this.scaleWidth/2,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()},t.prototype.drawData=function(t){this.context.beginPath(),this.context.strokeStyle=t.color,this.context.arc(this.x0,this.y0,t.radius,t.startAngle,t.endAngle,!1),this.context.lineWidth=this.fillWidth,this.context.stroke()},t.prototype.drawArrow=function(t){this.context.beginPath(),this.context.moveTo(this.x0,this.y0-t.radius+this.scaleWidth/2),this.context.lineTo(this.x0,this.y0-this.scaleWidth-t.radius+this.scaleWidth/2),this.context.lineTo(this.x0+this.scaleWidth/4,this.y0-this.scaleWidth/2-t.radius+this.scaleWidth/2),this.context.fillStyle="#eeeeee",this.context.fill()},t.prototype.drawKnob=function(t){this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(Math.cos(t.endAngle)t.radius+this.x0,Math.sin(t.endAngle)t.radius+this.y0,this.knobWidth/2,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(Math.cos(t.endAngle)t.radius+this.x0,Math.sin(t.endAngle)t.radius+this.y0,this.scaleWidth/10,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()},t.prototype.calculateAngles=function(t,e){if(this.selectedSlider){var i=this.selectedSlider.max,s=this.selectedSlider.min,n=this.selectedSlider.step,h=Math.atan2(e-this.y0,t-this.x0),o=this.radToDeg(this.normalizeTan(h)),l=this.normalizeTan(h)(i-s)/(2Math.PI)+s;l=(l/n>>0)n,this.selectedSlider.endAngle=h,this.selectedSlider.ang_degrees=o,this.selectedSlider.normalizedValue=l}},t.prototype.radToDeg=function(t){return 180t/Math.PI},t.prototype.normalizeTan=function(t){return 0<t+Math.PI/2?t+Math.PI/2:2*Math.PI+t+Math.PI/2},t.prototype.calculateUserCursor=function(){var t=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-t.left,this.MouseY=event.touches[0].clientY-t.top):(this.MouseX=event.clientX-t.left,this.MouseY=event.clientY-t.top)},t.prototype.getSelectedSlider=function(){this.calculateUserCursor();var t=Math.sqrt(Math.pow(this.MouseX-this.x0,2)+Math.pow(this.MouseY-this.y0,2));for(var e in this.sliders)if(this.sliders.hasOwnProperty(e)){var i=this.sliders[e];if(Math.abs(t-i.radius)<=this.scaleWidth/2){var s=i;break}}return s\|\|null},t.prototype._handleMouseDown=function(t){t.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)},t.prototype._handleMouseUp=function(t){t.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider},t.prototype._handleClick=function(t){this.selectedSlider=this.getSelectedSlider(),this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id\|\|this.selectedSlider&&this._rotation()},t.prototype._handleTouch=function(t){t.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()},t.prototype._handleMove=function(t){t.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()},t.prototype._handleEnd=function(t){t.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)},t.prototype._rotation=function(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateAngles(this.MouseX,this.MouseY),this.drawAll()},"undefined"!=typeof module&&void 0!==module.exports?module.exports=1:window.Slider=t}();

539

linear/slider-linear.js

		@@ -1,325 +0,330 @@
		function Slider(options) {
		(function () {
		function Slider(options) {
		this.sliders = {};
		this.scaleWidth = 35;
		this.fillWidth = 35;
		this.knobWidth = 35;

		this.sliders = {};
		this.scaleWidth = 35;
		this.fillWidth = 35;
		this.knobWidth = 35;
		this.continuousMode = options.continuousMode \|\| false;
		this.vertical = options.vertical \|\| false;

		this.continuousMode = options.continuousMode \|\| false;
		this.vertical = options.vertical \|\| false;
		this.container = document.getElementById(options.canvasId);
		this.the_body = document.body;
		this.context = this.container.getContext('2d');

		this.container = document.getElementById(options.canvasId);
		this.the_body = document.body;
		this.context = this.container.getContext('2d');
		this.MouseX = 0;
		this.MouseY = 0;

		this.MouseX = 0;
		this.MouseY = 0;
		this.selectedSlider = null;
		this.currentSlider = null;

		this.selectedSlider = null;
		this.currentSlider = null;
		this.rotationEventListener = this._rotation.bind(this);
		this.container.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
		this.the_body.addEventListener('mouseup', this._handleMouseUp.bind(this), false);
		this.container.addEventListener('click', this._handleClick.bind(this), false);

		this.rotationEventListener = this._rotation.bind(this);
		this.container.addEventListener('mousedown', this._handleMouseDown.bind(this), false);
		this.the_body.addEventListener('mouseup', this._handleMouseUp.bind(this), false);
		this.container.addEventListener('click', this._handleClick.bind(this), false);

		this.container.addEventListener('touchstart', this._handleTouch.bind(this), false);
		this.container.addEventListener('touchmove', this._handleMove.bind(this), false);
		this.container.addEventListener('touchend', this._handleEnd.bind(this), false);

		this.container.addEventListener('touchstart', this._handleTouch.bind(this), false);
		this.container.addEventListener('touchmove', this._handleMove.bind(this), false);
		this.container.addEventListener('touchend', this._handleEnd.bind(this), false);
		}

		}

		// Adds a slider band to the slider
		Slider.prototype.addSlider = function (options) {
		this.sliders[options.id] = {
		id: options.id,
		container: document.getElementById(options.container),
		color: options.color \|\| '#104b63',
		width: options.width \|\| 100,
		min: options.min \|\| 0,
		max: options.max \|\| 100,
		step: options.step \|\| 1,
		x0: options.x0 \|\| 0,
		y0: options.y0 \|\| 0,
		onValueChangeCallback: options.changed \|\| function(v) {},
		value: 0,
		normalizedValue: options.min \|\| 0
		};

		// Adds a slider band to the slider
		Slider.prototype.addSlider = function (options) {
		this.sliders[options.id] = {
		id: options.id,
		container: document.getElementById(options.container),
		color: options.color \|\| '#104b63',
		width: options.width \|\| 100,
		min: options.min \|\| 0,
		max: options.max \|\| 100,
		step: options.step \|\| 1,
		x0: options.x0 \|\| 0,
		y0: options.y0 \|\| 0,
		onValueChangeCallback: options.changed \|\| function(v) {},
		value: 0,
		normalizedValue: options.min \|\| 0
		var obj = this.sliders[options.id];

		this.setSliderValue(obj.id, options.min);
		};

		var obj = this.sliders[options.id];
		// Sets (draws) slider band value given the band id and value
		Slider.prototype.setSliderValue = function (id, value) {
		var slider = this.sliders[id];
		if (value <= slider.min) {
		slider.value = 0;
		slider.normalizedValue = slider.min;
		}
		else if (value >= slider.max) {
		slider.value = slider.width;
		slider.normalizedValue = slider.max;
		}
		else {
		slider.value = slider.width*(value-slider.min)/(slider.max-slider.min);
		slider.normalizedValue = value;
		}
		this.drawAll();
		};

		this.setSliderValue(obj.id, options.min);
		};
		// Redraws everything
		Slider.prototype.drawAll = function () {
		this.context.clearRect(0, 0, this.container.width, this.container.height);
		for (var key in this.sliders) {
		if (!this.sliders.hasOwnProperty(key)) continue;
		var obj = this.sliders[key];
		this.drawScale(obj);
		this.drawData(obj);
		this.drawKnob(obj);
		obj.onValueChangeCallback({'width': obj.value, 'value': obj.normalizedValue});
		}
		};

		// Sets (draws) slider band value given the band id and value
		Slider.prototype.setSliderValue = function (id, value) {
		var slider = this.sliders[id];
		if (value <= slider.min) {
		slider.value = 0;
		slider.normalizedValue = slider.min;
		}
		else if (value >= slider.max) {
		slider.value = slider.width;
		slider.normalizedValue = slider.max;
		}
		else {
		slider.value = slider.width*(value-slider.min)/(slider.max-slider.min);
		slider.normalizedValue = value;
		}
		this.drawAll();
		};
		// Draw the scale for a selected slider band
		Slider.prototype.drawScale = function(slider) {
		var fix_x = this.vertical?0:1;
		var fix_y = this.vertical?1:0;

		// Redraws everything
		Slider.prototype.drawAll = function () {
		this.context.clearRect(0, 0, this.container.width, this.container.height);
		for (var key in this.sliders) {
		if (!this.sliders.hasOwnProperty(key)) continue;
		var obj = this.sliders[key];
		this.drawScale(obj);
		this.drawData(obj);
		this.drawKnob(obj);
		obj.onValueChangeCallback({'width': obj.value, 'value': obj.normalizedValue});
		}
		};
		// first rounded edge
		this.context.beginPath();
		this.context.strokeStyle = slider.color;
		this.context.arc(slider.x0 + fix_x, slider.y0 - fix_y, this.scaleWidth/2, 0, Math.PI*2, false);
		this.context.lineWidth = 1;
		this.context.fillStyle = slider.color;
		this.context.fill();

		// Draw the scale for a selected slider band
		Slider.prototype.drawScale = function(slider) {
		var fix_x = this.vertical?0:1;
		var fix_y = this.vertical?1:0;
		var x1, y1;
		if (this.vertical) {
		x1 = slider.x0;
		y1 = slider.y0 - slider.width;
		}
		else {
		x1 = slider.x0 + slider.width;
		y1 = slider.y0;
		}
		// Scale
		this.context.beginPath();
		this.context.strokeStyle = '#eeeeee';
		this.context.moveTo(slider.x0, slider.y0);
		this.context.lineTo(x1, y1);
		this.context.lineWidth = this.scaleWidth;
		this.context.stroke();

		// first rounded edge
		this.context.beginPath();
		this.context.strokeStyle = slider.color;
		this.context.arc(slider.x0 + fix_x, slider.y0 - fix_y, this.scaleWidth/2, 0, Math.PI*2, false);
		this.context.lineWidth = 1;
		this.context.fillStyle = slider.color;
		this.context.fill();

		var x1, y1;
		if (this.vertical) {
		x1 = slider.x0;
		y1 = slider.y0 - slider.width;
		}
		else {
		x1 = slider.x0 + slider.width;
		y1 = slider.y0;
		}
		// Scale
		this.context.beginPath();
		this.context.strokeStyle = '#eeeeee';
		this.context.moveTo(slider.x0, slider.y0);
		this.context.lineTo(x1, y1);
		this.context.lineWidth = this.scaleWidth;
		this.context.stroke();
		// second rounded edge
		this.context.strokeStyle = '#eeeeee';
		this.context.arc(x1, y1, this.scaleWidth/2, 0, Math.PI*2, false);
		this.context.lineWidth = 1;
		this.context.fillStyle = '#eeeeee';
		this.context.fill();
		};

		// Draw the data on the selected slider band
		Slider.prototype.drawData = function(slider) {
		var x1, y1;
		if (this.vertical) {
		x1 = slider.x0;
		y1 = slider.y0 - slider.value;
		}
		else {
		x1 = slider.x0 + slider.value;
		y1 = slider.y0;
		}

		// second rounded edge
		this.context.strokeStyle = '#eeeeee';
		this.context.arc(x1, y1, this.scaleWidth/2, 0, Math.PI*2, false);
		this.context.lineWidth = 1;
		this.context.fillStyle = '#eeeeee';
		this.context.fill();
		};
		this.context.beginPath();
		this.context.strokeStyle = slider.color;
		this.context.moveTo(slider.x0, slider.y0);
		this.context.lineTo(x1, y1);
		this.context.lineWidth = this.fillWidth;
		this.context.stroke();
		};

		// Draw the data on the selected slider band
		Slider.prototype.drawData = function(slider) {
		var x1, y1;
		if (this.vertical) {
		x1 = slider.x0;
		y1 = slider.y0 - slider.value;
		}
		else {
		x1 = slider.x0 + slider.value;
		y1 = slider.y0;
		}
		// Draw the knob (control element)
		Slider.prototype.drawKnob = function(slider) {
		// Knob
		var x1, y1;
		if (this.vertical) {
		x1 = slider.x0;
		y1 = slider.y0 - slider.value;
		}
		else {
		x1 = slider.x0 + slider.value;
		y1 = slider.y0;
		}

		this.context.beginPath();
		this.context.strokeStyle = slider.color;
		this.context.moveTo(slider.x0, slider.y0);
		this.context.lineTo(x1, y1);
		this.context.lineWidth = this.fillWidth;
		this.context.stroke();
		};
		this.context.beginPath();
		this.context.strokeStyle = '#eb879c';
		this.context.arc(x1,
		y1,
		this.knobWidth/2,
		0,Math.PI*2,false);
		this.context.lineWidth = 1;

		// Draw the knob (control element)
		Slider.prototype.drawKnob = function(slider) {
		// Knob
		var x1, y1;
		if (this.vertical) {
		x1 = slider.x0;
		y1 = slider.y0 - slider.value;
		}
		else {
		x1 = slider.x0 + slider.value;
		y1 = slider.y0;
		}
		this.context.fillStyle = '#eb879c';
		this.context.fill();

		this.context.beginPath();
		this.context.strokeStyle = '#eb879c';
		this.context.arc(x1,
		y1,
		this.knobWidth/2,
		0,Math.PI*2,false);
		this.context.lineWidth = 1;
		// Dot on the knob
		this.context.beginPath();
		this.context.strokeStyle = 'yellow';
		this.context.arc(x1,
		y1,
		this.scaleWidth/10,
		0,Math.PI*2,false);
		this.context.lineWidth = 1;
		this.context.fillStyle = 'yellow';
		this.context.fill();
		};

		this.context.fillStyle = '#eb879c';
		this.context.fill();
		// Calculate angles given the cursor position
		Slider.prototype.calculateValues = function (x, y) {
		if (!this.selectedSlider) {
		return;
		}

		// Dot on the knob
		this.context.beginPath();
		this.context.strokeStyle = 'yellow';
		this.context.arc(x1,
		y1,
		this.scaleWidth/10,
		0,Math.PI*2,false);
		this.context.lineWidth = 1;
		this.context.fillStyle = 'yellow';
		this.context.fill();
		};
		var max = this.selectedSlider.max,
		min = this.selectedSlider.min,
		step = this.selectedSlider.step,
		w = this.selectedSlider.width;

		// Calculate angles given the cursor position
		Slider.prototype.calculateValues = function (x, y) {
		if (!this.selectedSlider) {
		return;
		}
		var x1;
		if (this.vertical) {
		x1 = this.selectedSlider.y0 - y;
		}
		else {
		x1 = x - this.selectedSlider.x0;
		}

		var max = this.selectedSlider.max,
		min = this.selectedSlider.min,
		step = this.selectedSlider.step,
		w = this.selectedSlider.width;

		var x1;
		if (this.vertical) {
		x1 = this.selectedSlider.y0 - y;
		}
		else {
		x1 = x - this.selectedSlider.x0;
		}
		var val = x1;
		if (val > this.selectedSlider.width - this.selectedSlider.step) {
		val = this.selectedSlider.width;
		}
		if (val < 0 + this.selectedSlider.step) {
		val = 0;
		}

		var nomval = (val*(max-min))/(w) + min;
		nomval = (nomval/step >> 0) * step;

		var val = x1;
		if (val > this.selectedSlider.width - this.selectedSlider.step) {
		val = this.selectedSlider.width;
		}
		if (val < 0 + this.selectedSlider.step) {
		val = 0;
		}
		//val = (nomval - min) * w / (max - min);

		var nomval = (val*(max-min))/(w) + min;
		nomval = (nomval/step >> 0) * step;
		this.selectedSlider.value = val;
		this.selectedSlider.normalizedValue = nomval;
		};

		//val = (nomval - min) * w / (max - min);
		// Calculates cursor coordinates
		Slider.prototype.calculateUserCursor = function () {
		var rect = this.container.getBoundingClientRect();

		this.selectedSlider.value = val;
		this.selectedSlider.normalizedValue = nomval;
		};

		// Calculates cursor coordinates
		Slider.prototype.calculateUserCursor = function () {
		var rect = this.container.getBoundingClientRect();

		if (event.touches) {
		this.MouseX = event.touches[0].clientX - rect.left;
		this.MouseY = event.touches[0].clientY - rect.top;
		}
		else {
		this.MouseX = event.clientX - rect.left;
		this.MouseY = event.clientY - rect.top;
		}
		};


		// Returns a slider band based on the cursor position
		Slider.prototype.getSelectedSlider = function () {
		this.calculateUserCursor();

		for (var key in this.sliders) {
		if (!this.sliders.hasOwnProperty(key)) continue;
		var obj = this.sliders[key];
		var xx;
		var yy;
		if (this.vertical) {
		xx = this.MouseX >= obj.x0 - this.scaleWidth / 2 && this.MouseX <= obj.x0 + this.scaleWidth / 2;
		yy = this.MouseY >= obj.y0 - obj.width - this.scaleWidth/2 && this.MouseY <= obj.y0 + this.scaleWidth/2;
		if (event.touches) {
		this.MouseX = event.touches[0].clientX - rect.left;
		this.MouseY = event.touches[0].clientY - rect.top;
		}
		else {
		xx = this.MouseX >= obj.x0 - this.scaleWidth/2 && this.MouseX <= obj.x0 + obj.width + this.scaleWidth/2;
		yy = this.MouseY >= obj.y0 - this.scaleWidth/2 && this.MouseY <= obj.y0 + this.scaleWidth/2;
		this.MouseX = event.clientX - rect.left;
		this.MouseY = event.clientY - rect.top;
		}
		};

		if (xx && yy) {
		var selectedSlider = obj;
		break;
		}
		}

		return selectedSlider ? selectedSlider : null;
		};
		// Returns a slider band based on the cursor position
		Slider.prototype.getSelectedSlider = function () {
		this.calculateUserCursor();

		for (var key in this.sliders) {
		if (!this.sliders.hasOwnProperty(key)) continue;
		var obj = this.sliders[key];
		var xx;
		var yy;
		if (this.vertical) {
		xx = this.MouseX >= obj.x0 - this.scaleWidth / 2 && this.MouseX <= obj.x0 + this.scaleWidth / 2;
		yy = this.MouseY >= obj.y0 - obj.width - this.scaleWidth/2 && this.MouseY <= obj.y0 + this.scaleWidth/2;
		}
		else {
		xx = this.MouseX >= obj.x0 - this.scaleWidth/2 && this.MouseX <= obj.x0 + obj.width + this.scaleWidth/2;
		yy = this.MouseY >= obj.y0 - this.scaleWidth/2 && this.MouseY <= obj.y0 + this.scaleWidth/2;
		}

		// Event handlers (mousedown, mouseup, mousemove, mouseclick, touches)
		Slider.prototype._handleMouseDown = function (event) {
		event.preventDefault();
		this.selectedSlider = this.getSelectedSlider();
		if (xx && yy) {
		var selectedSlider = obj;
		break;
		}
		}

		if (!this.selectedSlider) return;
		return selectedSlider ? selectedSlider : null;
		};

		this.the_body.addEventListener('mousemove', this.rotationEventListener, false);
		};

		Slider.prototype._handleMouseUp = function (event) {
		event.preventDefault();
		this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
		// Event handlers (mousedown, mouseup, mousemove, mouseclick, touches)
		Slider.prototype._handleMouseDown = function (event) {
		event.preventDefault();
		this.selectedSlider = this.getSelectedSlider();

		this.currentSlider = this.selectedSlider;
		};
		if (!this.selectedSlider) return;

		Slider.prototype._handleClick = function (event) {
		this.selectedSlider = this.getSelectedSlider();
		this.the_body.addEventListener('mousemove', this.rotationEventListener, false);
		};

		Slider.prototype._handleMouseUp = function (event) {
		event.preventDefault();
		this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);

		if (this.currentSlider && this.getSelectedSlider() && this.currentSlider.id !== this.getSelectedSlider().id) {
		return;
		}
		this.currentSlider = this.selectedSlider;
		};

		if (this.selectedSlider) {
		this._rotation();
		}
		};
		Slider.prototype._handleClick = function (event) {
		this.selectedSlider = this.getSelectedSlider();

		Slider.prototype._handleTouch = function (event) {
		event.preventDefault();
		this.selectedSlider = this.getSelectedSlider();
		if (this.selectedSlider) {
		this._rotation();
		}
		};

		Slider.prototype._handleMove = function (event) {
		event.preventDefault();
		if (this.continuousMode) {
		this._rotation();
		} else {
		if (this.currentSlider && this.getSelectedSlider() && this.currentSlider.id !== this.getSelectedSlider().id) {
		return;
		}

		if (this.selectedSlider) {
		this._rotation();
		}
		}
		};

		};
		Slider.prototype._handleTouch = function (event) {
		event.preventDefault();
		this.selectedSlider = this.getSelectedSlider();
		if (this.selectedSlider) {
		this._rotation();
		}
		};

		Slider.prototype._handleEnd = function (event) {
		event.preventDefault();
		this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
		};
		Slider.prototype._handleMove = function (event) {
		event.preventDefault();
		if (this.continuousMode) {
		this._rotation();
		} else {
		if (this.selectedSlider) {
		this._rotation();
		}
		}

		// Rotation wrapper
		Slider.prototype._rotation = function () {
		this.calculateUserCursor();
		if (this.continuousMode) {
		this.selectedSlider = this.getSelectedSlider();
		}
		this.calculateValues(this.MouseX, this.MouseY);
		this.drawAll();
		};
		};

		Slider.prototype._handleEnd = function (event) {
		event.preventDefault();
		this.the_body.removeEventListener('mousemove', this.rotationEventListener, false);
		};

		// Rotation wrapper
		Slider.prototype._rotation = function () {
		this.calculateUserCursor();
		if (this.continuousMode) {
		this.selectedSlider = this.getSelectedSlider();
		}
		this.calculateValues(this.MouseX, this.MouseY);
		this.drawAll();
		};

		if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
		module.exports = 1;
		else window.Slider = Slider;
		})();

linear/slider-linear.min.js

		@@ -1,1 +0,1 @@
		function Slider(t){this.sliders={},this.scaleWidth=35,this.fillWidth=35,this.knobWidth=35,this.continuousMode=t.continuousMode\|\|!1,this.vertical=t.vertical\|\|!1,this.container=document.getElementById(t.canvasId),this.the_body=document.body,this.context=this.container.getContext("2d"),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)}Slider.prototype.addSlider=function(t){this.sliders[t.id]={id:t.id,container:document.getElementById(t.container),color:t.color\|\|"#104b63",width:t.width\|\|100,min:t.min\|\|0,max:t.max\|\|100,step:t.step\|\|1,x0:t.x0\|\|0,y0:t.y0\|\|0,onValueChangeCallback:t.changed\|\|function(t){},value:0,normalizedValue:t.min\|\|0};var e=this.sliders[t.id];this.setSliderValue(e.id,t.min)},Slider.prototype.setSliderValue=function(t,e){var i=this.sliders[t];e<=i.min?(i.value=0,i.normalizedValue=i.min):e>=i.max?(i.value=i.width,i.normalizedValue=i.max):(i.value=i.width(e-i.min)/(i.max-i.min),i.normalizedValue=e),this.drawAll()},Slider.prototype.drawAll=function(){for(var t in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders)if(this.sliders.hasOwnProperty(t)){var e=this.sliders[t];this.drawScale(e),this.drawData(e),this.drawKnob(e),e.onValueChangeCallback({width:e.value,value:e.normalizedValue})}},Slider.prototype.drawScale=function(t){var e,i,s=this.vertical?0:1,l=this.vertical?1:0;this.context.beginPath(),this.context.strokeStyle=t.color,this.context.arc(t.x0+s,t.y0-l,this.scaleWidth/2,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle=t.color,this.context.fill(),this.vertical?(e=t.x0,i=t.y0-t.width):(e=t.x0+t.width,i=t.y0),this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.moveTo(t.x0,t.y0),this.context.lineTo(e,i),this.context.lineWidth=this.scaleWidth,this.context.stroke(),this.context.strokeStyle="#eeeeee",this.context.arc(e,i,this.scaleWidth/2,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()},Slider.prototype.drawData=function(t){var e,i;this.vertical?(e=t.x0,i=t.y0-t.value):(e=t.x0+t.value,i=t.y0),this.context.beginPath(),this.context.strokeStyle=t.color,this.context.moveTo(t.x0,t.y0),this.context.lineTo(e,i),this.context.lineWidth=this.fillWidth,this.context.stroke()},Slider.prototype.drawKnob=function(t){var e,i;this.vertical?(e=t.x0,i=t.y0-t.value):(e=t.x0+t.value,i=t.y0),this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(e,i,this.knobWidth/2,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(e,i,this.scaleWidth/10,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()},Slider.prototype.calculateValues=function(t,e){if(this.selectedSlider){var i=this.selectedSlider.max,s=this.selectedSlider.min,l=this.selectedSlider.step,h=this.selectedSlider.width,n=this.vertical?this.selectedSlider.y0-e:t-this.selectedSlider.x0;n>this.selectedSlider.width-this.selectedSlider.step&&(n=this.selectedSlider.width),n<0+this.selectedSlider.step&&(n=0);var o=n(i-s)/h+s;o=(o/l>>0)*l,this.selectedSlider.value=n,this.selectedSlider.normalizedValue=o}},Slider.prototype.calculateUserCursor=function(){var t=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-t.left,this.MouseY=event.touches[0].clientY-t.top):(this.MouseX=event.clientX-t.left,this.MouseY=event.clientY-t.top)},Slider.prototype.getSelectedSlider=function(){for(var t in this.calculateUserCursor(),this.sliders)if(this.sliders.hasOwnProperty(t)){var e,i,s=this.sliders[t];if(this.vertical?(e=this.MouseX>=s.x0-this.scaleWidth/2&&this.MouseX<=s.x0+this.scaleWidth/2,i=this.MouseY>=s.y0-s.width-this.scaleWidth/2&&this.MouseY<=s.y0+this.scaleWidth/2):(e=this.MouseX>=s.x0-this.scaleWidth/2&&this.MouseX<=s.x0+s.width+this.scaleWidth/2,i=this.MouseY>=s.y0-this.scaleWidth/2&&this.MouseY<=s.y0+this.scaleWidth/2),e&&i){var l=s;break}}return l\|\|null},Slider.prototype._handleMouseDown=function(t){t.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)},Slider.prototype._handleMouseUp=function(t){t.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider},Slider.prototype._handleClick=function(t){this.selectedSlider=this.getSelectedSlider(),this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id\|\|this.selectedSlider&&this._rotation()},Slider.prototype._handleTouch=function(t){t.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()},Slider.prototype._handleMove=function(t){t.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()},Slider.prototype._handleEnd=function(t){t.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)},Slider.prototype._rotation=function(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateValues(this.MouseX,this.MouseY),this.drawAll()};
		!function(){function t(t){this.sliders={},this.scaleWidth=35,this.fillWidth=35,this.knobWidth=35,this.continuousMode=t.continuousMode\|\|!1,this.vertical=t.vertical\|\|!1,this.container=document.getElementById(t.canvasId),this.the_body=document.body,this.context=this.container.getContext("2d"),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)}t.prototype.addSlider=function(t){this.sliders[t.id]={id:t.id,container:document.getElementById(t.container),color:t.color\|\|"#104b63",width:t.width\|\|100,min:t.min\|\|0,max:t.max\|\|100,step:t.step\|\|1,x0:t.x0\|\|0,y0:t.y0\|\|0,onValueChangeCallback:t.changed\|\|function(t){},value:0,normalizedValue:t.min\|\|0};var e=this.sliders[t.id];this.setSliderValue(e.id,t.min)},t.prototype.setSliderValue=function(t,e){var i=this.sliders[t];e<=i.min?(i.value=0,i.normalizedValue=i.min):e>=i.max?(i.value=i.width,i.normalizedValue=i.max):(i.value=i.width(e-i.min)/(i.max-i.min),i.normalizedValue=e),this.drawAll()},t.prototype.drawAll=function(){for(var t in this.context.clearRect(0,0,this.container.width,this.container.height),this.sliders)if(this.sliders.hasOwnProperty(t)){var e=this.sliders[t];this.drawScale(e),this.drawData(e),this.drawKnob(e),e.onValueChangeCallback({width:e.value,value:e.normalizedValue})}},t.prototype.drawScale=function(t){var e,i,s=this.vertical?0:1,h=this.vertical?1:0;this.context.beginPath(),this.context.strokeStyle=t.color,this.context.arc(t.x0+s,t.y0-h,this.scaleWidth/2,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle=t.color,this.context.fill(),this.vertical?(e=t.x0,i=t.y0-t.width):(e=t.x0+t.width,i=t.y0),this.context.beginPath(),this.context.strokeStyle="#eeeeee",this.context.moveTo(t.x0,t.y0),this.context.lineTo(e,i),this.context.lineWidth=this.scaleWidth,this.context.stroke(),this.context.strokeStyle="#eeeeee",this.context.arc(e,i,this.scaleWidth/2,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="#eeeeee",this.context.fill()},t.prototype.drawData=function(t){var e,i;this.vertical?(e=t.x0,i=t.y0-t.value):(e=t.x0+t.value,i=t.y0),this.context.beginPath(),this.context.strokeStyle=t.color,this.context.moveTo(t.x0,t.y0),this.context.lineTo(e,i),this.context.lineWidth=this.fillWidth,this.context.stroke()},t.prototype.drawKnob=function(t){var e,i;this.vertical?(e=t.x0,i=t.y0-t.value):(e=t.x0+t.value,i=t.y0),this.context.beginPath(),this.context.strokeStyle="#eb879c",this.context.arc(e,i,this.knobWidth/2,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="#eb879c",this.context.fill(),this.context.beginPath(),this.context.strokeStyle="yellow",this.context.arc(e,i,this.scaleWidth/10,0,2Math.PI,!1),this.context.lineWidth=1,this.context.fillStyle="yellow",this.context.fill()},t.prototype.calculateValues=function(t,e){if(this.selectedSlider){var i=this.selectedSlider.max,s=this.selectedSlider.min,h=this.selectedSlider.step,n=this.selectedSlider.width,o=this.vertical?this.selectedSlider.y0-e:t-this.selectedSlider.x0;o>this.selectedSlider.width-this.selectedSlider.step&&(o=this.selectedSlider.width),o<0+this.selectedSlider.step&&(o=0);var l=o(i-s)/n+s;l=(l/h>>0)*h,this.selectedSlider.value=o,this.selectedSlider.normalizedValue=l}},t.prototype.calculateUserCursor=function(){var t=this.container.getBoundingClientRect();event.touches?(this.MouseX=event.touches[0].clientX-t.left,this.MouseY=event.touches[0].clientY-t.top):(this.MouseX=event.clientX-t.left,this.MouseY=event.clientY-t.top)},t.prototype.getSelectedSlider=function(){for(var t in this.calculateUserCursor(),this.sliders)if(this.sliders.hasOwnProperty(t)){var e,i,s=this.sliders[t];if(this.vertical?(e=this.MouseX>=s.x0-this.scaleWidth/2&&this.MouseX<=s.x0+this.scaleWidth/2,i=this.MouseY>=s.y0-s.width-this.scaleWidth/2&&this.MouseY<=s.y0+this.scaleWidth/2):(e=this.MouseX>=s.x0-this.scaleWidth/2&&this.MouseX<=s.x0+s.width+this.scaleWidth/2,i=this.MouseY>=s.y0-this.scaleWidth/2&&this.MouseY<=s.y0+this.scaleWidth/2),e&&i){var h=s;break}}return h\|\|null},t.prototype._handleMouseDown=function(t){t.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this.the_body.addEventListener("mousemove",this.rotationEventListener,!1)},t.prototype._handleMouseUp=function(t){t.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1),this.currentSlider=this.selectedSlider},t.prototype._handleClick=function(t){this.selectedSlider=this.getSelectedSlider(),this.currentSlider&&this.getSelectedSlider()&&this.currentSlider.id!==this.getSelectedSlider().id\|\|this.selectedSlider&&this._rotation()},t.prototype._handleTouch=function(t){t.preventDefault(),this.selectedSlider=this.getSelectedSlider(),this.selectedSlider&&this._rotation()},t.prototype._handleMove=function(t){t.preventDefault(),this.continuousMode?this._rotation():this.selectedSlider&&this._rotation()},t.prototype._handleEnd=function(t){t.preventDefault(),this.the_body.removeEventListener("mousemove",this.rotationEventListener,!1)},t.prototype._rotation=function(){this.calculateUserCursor(),this.continuousMode&&(this.selectedSlider=this.getSelectedSlider()),this.calculateValues(this.MouseX,this.MouseY),this.drawAll()},"undefined"!=typeof module&&void 0!==module.exports?module.exports=1:window.Slider=t}();

package.json

		{
		"name": "@maslick/radiaslider",
		"version": "1.2.6",
		"version": "1.3.0",
		"description": "nice looking canvas-based radial and linear slider",
		@@ -5,0 +5,0 @@ "repository": {

@maslick/radiaslider - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics