circular-sliders-rails 0.4.0 → 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/circular/sliders/rails/version.rb +1 -1
- data/vendor/assets/javascripts/circular-sliders.js +44 -44
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: aeee7ce2e1d58981f0fb729b0fae34b821b59df97a431c73972882a767d78d44
|
4
|
+
data.tar.gz: 94e9467dfc57d7b41ee8568d230cef02669a2a36780ed849ef8c0eb7fae14abe
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1160abc5a35b7964832246e35b713370d76a7d095b54a74663983ee600ec68e6ab23eba64525913c699b2c3162da30c532082732934c7636d4b6af62736a6558
|
7
|
+
data.tar.gz: 4030206b719240bd0a677c16bd2bf80a819976836c240d8acf1d37688f53e8360cf1f483619441757fd03673f81428c979bfd5daeee27c508b76e6302ff7e89c
|
@@ -3,12 +3,6 @@
|
|
3
3
|
|
4
4
|
// private global variables
|
5
5
|
var isMouseDown = false;
|
6
|
-
var selectedSlider = {};
|
7
|
-
var elem = null;
|
8
|
-
// if multiple canvases / containers would need to refactor
|
9
|
-
var canvas = null;
|
10
|
-
var ctx = null;
|
11
|
-
var sliders = [];
|
12
6
|
var defaults = {
|
13
7
|
name: "Slider",
|
14
8
|
type: "Plain",
|
@@ -18,7 +12,7 @@
|
|
18
12
|
step: 10,
|
19
13
|
units: "",
|
20
14
|
priceUnits: "",
|
21
|
-
radius
|
15
|
+
// centerX, centerY, and radius set in $.fn.sliders()
|
22
16
|
lineWidth: 5,
|
23
17
|
strokeColor: "#D3D3D3",
|
24
18
|
ballColor: "#000000",
|
@@ -28,29 +22,30 @@
|
|
28
22
|
}
|
29
23
|
|
30
24
|
$.fn.sliders = function(slidersOptions) {
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
25
|
+
this.each(function() {
|
26
|
+
var canvas = this;
|
27
|
+
canvas.sliders = [];
|
28
|
+
// need to set these variables here because they need to be reset after cycling through sliders in each canvas since they are modified when cycling through sliders
|
29
|
+
[defaults.centerX, defaults.centerY, defaults.radius] = [canvas.width / 2, canvas.height / 2, 40];
|
30
|
+
// maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
|
31
|
+
for (var i = 0; i < slidersOptions.length; i++) {
|
32
|
+
defaults.name = "Slider " + (i + 1);
|
33
|
+
if (i > 0) {
|
34
|
+
defaults.centerX = canvas.sliders[i-1].centerX;
|
35
|
+
defaults.centerY = canvas.sliders[i-1].centerY;
|
36
|
+
defaults.radius = canvas.sliders[i-1].radius + canvas.sliders[i-1].lineWidth + defaults.lineWidth;
|
37
|
+
}
|
38
|
+
var sliderSettings = $.extend( {}, defaults, slidersOptions[i] );
|
39
|
+
canvas.sliders.push(new Slider (sliderSettings));
|
40
|
+
// maybe refactor, visible if have it like this: elem.attr('data-'+sliders[i].name.split(" ").join("_"), sliders[i].minValue);
|
41
|
+
$(canvas).data(canvas.sliders[i].name.split(" ").join("_"), canvas.sliders[i].minValue);
|
43
42
|
}
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
draw();
|
51
|
-
canvas.addEventListener("mousedown", handleMouseDown);
|
52
|
-
canvas.addEventListener("mouseup", handleMouseUp);
|
53
|
-
canvas.addEventListener("mousemove", handleMouseMove);
|
43
|
+
canvas.selectedSlider = canvas.sliders[0];
|
44
|
+
draw(canvas);
|
45
|
+
canvas.addEventListener("mousedown", handleMouseDown);
|
46
|
+
canvas.addEventListener("mouseup", handleMouseUp);
|
47
|
+
canvas.addEventListener("mousemove", handleMouseMove);
|
48
|
+
})
|
54
49
|
}
|
55
50
|
|
56
51
|
function Slider(settings) {
|
@@ -85,17 +80,19 @@
|
|
85
80
|
this.color = sliderSettings.ballColor;
|
86
81
|
}
|
87
82
|
|
88
|
-
function draw() {
|
83
|
+
function draw(canvas) {
|
84
|
+
var ctx = canvas.getContext("2d");
|
85
|
+
// in the future want to be able to clear only the slider using, maybe with svg groups
|
89
86
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
90
|
-
for (var i = 0; i < sliders.length; i++) {
|
91
|
-
drawSlider(sliders[i]);
|
92
|
-
drawArc(sliders[i]);
|
93
|
-
drawBall(sliders[i]);
|
94
|
-
if (sliders[i].legend) { drawText(sliders[i], i); }
|
87
|
+
for (var i = 0; i < canvas.sliders.length; i++) {
|
88
|
+
drawSlider(ctx, canvas.sliders[i]);
|
89
|
+
drawArc(ctx, canvas.sliders[i]);
|
90
|
+
drawBall(ctx, canvas.sliders[i]);
|
91
|
+
if (canvas.sliders[i].legend) { drawText(ctx, canvas.sliders[i], i); }
|
95
92
|
}
|
96
93
|
}
|
97
94
|
|
98
|
-
function drawSlider(slider) {
|
95
|
+
function drawSlider(ctx, slider) {
|
99
96
|
ctx.lineWidth = slider.lineWidth;
|
100
97
|
ctx.strokeStyle = slider.strokeColor;
|
101
98
|
var sliderCircumference = 2 * Math.PI * slider.radius;
|
@@ -174,7 +171,7 @@
|
|
174
171
|
}
|
175
172
|
}
|
176
173
|
|
177
|
-
function drawBall(slider) {
|
174
|
+
function drawBall(ctx, slider) {
|
178
175
|
ctx.beginPath();
|
179
176
|
ctx.arc(slider.ball.x, slider.ball.y, slider.ball.radius, 0, Math.PI * 2);
|
180
177
|
ctx.fillStyle = slider.ball.color;
|
@@ -182,7 +179,7 @@
|
|
182
179
|
ctx.closePath();
|
183
180
|
}
|
184
181
|
|
185
|
-
function drawArc(slider) {
|
182
|
+
function drawArc(ctx, slider) {
|
186
183
|
// add this if want arc to stop at edge of ball: var angleOffset = Math.atan(slider.ball.radius / slider.radius), then also need check for (π / 2) + slider.angle) < angleOffset) for when go past the 0˚ mark at top of circle, π / 2 + slider.angle since angle starts at -π / 2 at top of circle
|
187
184
|
ctx.beginPath();
|
188
185
|
ctx.arc(slider.centerX, slider.centerY, slider.radius, -(Math.PI / 2), slider.angle, false);
|
@@ -194,14 +191,15 @@
|
|
194
191
|
ctx.closePath();
|
195
192
|
}
|
196
193
|
|
197
|
-
function drawText(slider, count) {
|
194
|
+
function drawText(ctx, slider, count) {
|
198
195
|
// maybe refactor and make this editable
|
199
196
|
ctx.font = "12px Arial";
|
200
197
|
ctx.fillStyle = slider.textColor;
|
201
198
|
ctx.fillText(slider.name + ": " + slider.priceUnits + slider.value + " " + slider.units, 10, 20 * (count + 1));
|
202
199
|
}
|
203
200
|
|
204
|
-
function moveBall(mouseX, mouseY,
|
201
|
+
function moveBall(mouseX, mouseY, canvas) {
|
202
|
+
var slider = canvas.selectedSlider;
|
205
203
|
var dx = mouseX - slider.centerX;
|
206
204
|
var dy = mouseY - slider.centerY;
|
207
205
|
slider.angle = Math.atan(dy / dx);
|
@@ -211,18 +209,19 @@
|
|
211
209
|
slider.value = slider.minValue + slider.range * ((slider.angle + (Math.PI / 2)) / (2 * Math.PI)); //add π / 2 because 0˚ starts at -π / 2, divide by 2π because this is 360˚ in radians
|
212
210
|
// refactor - bug if give step value below 0.5
|
213
211
|
var roundedValue = roundToStep(slider.value, slider.step);
|
214
|
-
|
212
|
+
$(canvas).data(slider.name.split(" ").join("_"), roundedValue);
|
215
213
|
slider.value = roundedValue;
|
216
|
-
draw();
|
214
|
+
draw(canvas);
|
217
215
|
}
|
218
216
|
|
219
217
|
function handleMouseDown(e) {
|
220
218
|
e.preventDefault();
|
221
219
|
isMouseDown = true;
|
222
220
|
var [mouseX, mouseY] = setMouse(e);
|
221
|
+
var sliders = e.target.sliders; // maybe refactor, don't like having multiple calls to e.target.sliders
|
223
222
|
for (var i = 0; i < sliders.length; i++) {
|
224
223
|
if (onBall(mouseX, mouseY, sliders[i])) {
|
225
|
-
selectedSlider = sliders[i];
|
224
|
+
e.target.selectedSlider = sliders[i];
|
226
225
|
}
|
227
226
|
}
|
228
227
|
}
|
@@ -238,7 +237,7 @@
|
|
238
237
|
}
|
239
238
|
e.preventDefault();
|
240
239
|
var [mouseX, mouseY] = setMouse(e);
|
241
|
-
moveBall(mouseX, mouseY,
|
240
|
+
moveBall(mouseX, mouseY, e.target);
|
242
241
|
}
|
243
242
|
|
244
243
|
function roundToStep(value, step) {
|
@@ -254,6 +253,7 @@
|
|
254
253
|
|
255
254
|
function setMouse(e) {
|
256
255
|
// $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
|
256
|
+
var canvas = e.target;
|
257
257
|
return [parseInt(e.clientX - canvas.offsetLeft + $(window).scrollLeft()), parseInt(e.clientY - canvas.offsetTop + $(window).scrollTop())];
|
258
258
|
}
|
259
259
|
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: circular-sliders-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 1.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Sebastian Peterlin
|
8
8
|
autorequire:
|
9
9
|
bindir: exe
|
10
10
|
cert_chain: []
|
11
|
-
date: 2018-07-
|
11
|
+
date: 2018-07-17 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|