circular-sliders-rails 0.1.1 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -3
- data/lib/circular/sliders/rails/version.rb +1 -1
- data/vendor/assets/javascripts/circular-sliders.js +14 -12
- 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: 69ff79f3c1156560e0fc4fd075ad51a4e6f3545a1588a2336433a326383d1486
|
4
|
+
data.tar.gz: 7a59b0a99466b98e6082c73641e9c0fe5ac25fe0f33db72cc21d8a4d1a8fcd79
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 44afddd02a7fa71cfc36055acd5d08ee55844fd10989dfa9494ab9a8ee6b8f9aedb7551f2bc0232aa8733a61abdc6cf2cb44ebbae72cd689c924c8e930684f77
|
7
|
+
data.tar.gz: 261adb194e5684e53237d9bef2ea9a1b5c98767ac055dbede22101a7d9ba013be63f269d3514e04d0bbf44d8a8bd452812c82d6c3879204b2de0b3ab11d5d3ec
|
data/README.md
CHANGED
@@ -90,12 +90,10 @@ Slider settings:
|
|
90
90
|
| centerY | Float | Center of canvas or previous slider | Specify the y value for the center of the slider |
|
91
91
|
| color | String | "#0000FF" | Specify the color of the arc fill |
|
92
92
|
| minValue | Float | 0 | The minimum value of your slider |
|
93
|
-
| maxValue | Float |
|
93
|
+
| maxValue | Float | 100 | The maximum value of your slider |
|
94
94
|
| step | Float | 10 | The amount the value is incremented |
|
95
95
|
| units | String | "" | The units your value is displayed in |
|
96
96
|
| radius | Float | 40 or previous slider radius +≈ 15 | The radius of your slider |
|
97
|
-
| lineDashLength | Float | 5 | The arc length of each dash of your slider |
|
98
|
-
| lineDashSpacing | Float | 5 | The arc spacing length of each dash of your slider |
|
99
97
|
| lineWidth | Float | 5 | The slider and arc width |
|
100
98
|
| strokeColor | String | "#D3D3D3" | The color of the dashes on the slider |
|
101
99
|
| ballColor | String | "#000000" | The color of the slider ball |
|
@@ -27,12 +27,10 @@
|
|
27
27
|
centerY: slidersCenterY,
|
28
28
|
color: "#0000FF",
|
29
29
|
minValue: 0,
|
30
|
-
maxValue:
|
30
|
+
maxValue: 100,
|
31
31
|
step: 10,
|
32
32
|
units: "",
|
33
33
|
radius: 40,
|
34
|
-
lineDashLength: 5,
|
35
|
-
lineDashSpacing: 5,
|
36
34
|
lineWidth: 5,
|
37
35
|
strokeColor: "#D3D3D3",
|
38
36
|
ballColor: "#000000",
|
@@ -69,12 +67,11 @@
|
|
69
67
|
this.step = settings.step;
|
70
68
|
this.units = settings.units;
|
71
69
|
this.radius = settings.radius;
|
72
|
-
this.lineDashLength = settings.lineDashLength;
|
73
|
-
this.lineDashSpacing = settings.lineDashSpacing;
|
74
70
|
this.lineWidth = settings.lineWidth;
|
75
71
|
this.strokeColor = settings.strokeColor;
|
76
72
|
this.textColor = settings.textColor;
|
77
73
|
this.value = settings.minValue;
|
74
|
+
this.range = settings.maxValue - settings.minValue;
|
78
75
|
// ball starts at top of circle which is - pi / 2
|
79
76
|
this.angle = -(Math.PI / 2);
|
80
77
|
this.ball = new Ball (settings);
|
@@ -103,7 +100,11 @@
|
|
103
100
|
ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI*2, false);
|
104
101
|
ctx.lineWidth = slider.lineWidth;
|
105
102
|
ctx.strokeStyle = slider.strokeColor;
|
106
|
-
|
103
|
+
var sliderCircumference = 2 * Math.PI * slider.radius;
|
104
|
+
// maybe refactor, I like 2/3 and 1/3 for now
|
105
|
+
var sliderLineDashLength = (2 / 3) * (sliderCircumference / (slider.range / slider.step));
|
106
|
+
var sliderLineDashSpacing = (1 / 3) * (sliderCircumference / (slider.range / slider.step));
|
107
|
+
ctx.setLineDash([sliderLineDashLength, sliderLineDashSpacing]);
|
107
108
|
ctx.stroke();
|
108
109
|
ctx.closePath();
|
109
110
|
}
|
@@ -135,6 +136,7 @@
|
|
135
136
|
}
|
136
137
|
|
137
138
|
function drawText (slider, count) {
|
139
|
+
// maybe refactor and make this editable
|
138
140
|
ctx.font = "12px Arial";
|
139
141
|
ctx.fillStyle = slider.textColor;
|
140
142
|
ctx.fillText(slider.name + ": " + slider.value + " " + slider.units, 10, 20*(count+1));
|
@@ -147,7 +149,7 @@
|
|
147
149
|
if (dx < 0) { slider.angle += Math.PI };
|
148
150
|
slider.ball.x = slider.centerX + slider.radius * Math.cos(slider.angle);
|
149
151
|
slider.ball.y = slider.centerY + slider.radius * Math.sin(slider.angle);
|
150
|
-
slider.value = slider.minValue +
|
152
|
+
slider.value = slider.minValue + slider.range * ((slider.angle + (Math.PI/2)) / (2 * Math.PI) );
|
151
153
|
// refactor - bug if give step value below 0.5
|
152
154
|
var roundedValue = round(slider.value, slider.step);
|
153
155
|
elem.data(slider.name.split(" ").join("_"), roundedValue);
|
@@ -159,9 +161,9 @@
|
|
159
161
|
e.preventDefault();
|
160
162
|
isMouseDown = true;
|
161
163
|
setOffset();
|
162
|
-
// $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
|
163
|
-
mouseX = parseInt(e.clientX - offset[0] + $(window).scrollLeft());
|
164
|
-
mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
|
164
|
+
// $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling, maybe refactor and make mouseX and mouseY global
|
165
|
+
var mouseX = parseInt(e.clientX - offset[0] + $(window).scrollLeft());
|
166
|
+
var mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
|
165
167
|
for (var i = 0; i < sliders.length; i++) {
|
166
168
|
if (onBall(mouseX, mouseY, sliders[i])) {
|
167
169
|
selectedSlider = sliders[i];
|
@@ -180,8 +182,8 @@
|
|
180
182
|
}
|
181
183
|
e.preventDefault();
|
182
184
|
setOffset();
|
183
|
-
mouseX = parseInt(e.clientX - offset[0] + $(window).scrollLeft());
|
184
|
-
mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
|
185
|
+
var mouseX = parseInt(e.clientX - offset[0] + $(window).scrollLeft());
|
186
|
+
var mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
|
185
187
|
moveBall(mouseX, mouseY, selectedSlider);
|
186
188
|
}
|
187
189
|
|
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: 0.2.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-05-
|
11
|
+
date: 2018-05-19 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|