circular-sliders-rails 1.0.0 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.gitignore +1 -0
- data/README.md +7 -6
- data/lib/circular/sliders/rails/version.rb +1 -1
- data/vendor/assets/javascripts/circular-sliders.js +45 -71
- data/vendor/assets/javascripts/shapes.js +46 -0
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3000aa1e741be8f5446ac688f5ab4061140854f4b17c236ee0dd8e59d429a823
|
4
|
+
data.tar.gz: 78910adf596adcf0d9dcc08360996899904182eecdbb31a3bdcc4fbe2e47da9a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: eea4757df78b3c3ce8f5c23a56ad34dbb65fb894c34a7f9982f82206058992e8949935247faeeadf88f9e0609d608c804feddf565ca7902abd63bc76291851ff
|
7
|
+
data.tar.gz: e4f7f82df671a0d0681c1e14cae41bb796b5073aa5d1e025fa0c052de0825db23b9b065911a22b8c076f36fe7eea4285daf7fe6fed8b2bd7eb8236be482aaf55
|
data/.gitignore
CHANGED
data/README.md
CHANGED
@@ -42,7 +42,7 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
|
|
42
42
|
step: 1,
|
43
43
|
units: "years",
|
44
44
|
color: "#FF7F50",
|
45
|
-
|
45
|
+
legendColor: "#FF7F50"
|
46
46
|
},
|
47
47
|
{
|
48
48
|
name: "Daily activity",
|
@@ -51,7 +51,7 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
|
|
51
51
|
maxValue: 25,
|
52
52
|
step: 1,
|
53
53
|
color: "#FF7F50",
|
54
|
-
|
54
|
+
legendColor: "#FF7F50"
|
55
55
|
},
|
56
56
|
{
|
57
57
|
name: "Height",
|
@@ -99,12 +99,12 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
|
|
99
99
|
minValue: 10,
|
100
100
|
maxValue: 60,
|
101
101
|
step: 1,
|
102
|
-
|
102
|
+
legendColor: "#0000FF"
|
103
103
|
},
|
104
104
|
{
|
105
105
|
name: "Desired price",
|
106
106
|
priceUnits: "£",
|
107
|
-
|
107
|
+
legendColor: "#0000FF",
|
108
108
|
step: 5
|
109
109
|
}
|
110
110
|
]);
|
@@ -128,9 +128,10 @@ Slider settings:
|
|
128
128
|
| lineWidth | Float | 5 | The slider and arc width |
|
129
129
|
| strokeColor | String | "#D3D3D3" | The color of the dashes on the slider |
|
130
130
|
| ballColor | String | "#000000" | The color of the slider ball |
|
131
|
-
| textColor | String | "#000000" | The color of the slider label (name, value and units) |
|
132
131
|
| gradientFill | Boolean | true | Specify whether you would like the image in the center (for specified type) of the slider to fill with the slider's color as you scale the slider |
|
133
|
-
| legend | Boolean | true | Specify whether you would like the slider name and
|
132
|
+
| legend | Boolean | true | Specify whether you would like the slider name, value and units listed in the top left corner of the canvas |
|
133
|
+
| legendFont | Boolean | "12px Arial" | Specify the font for the slider legend |
|
134
|
+
| legendColor | String | "#000000" | The color of the slider legend |
|
134
135
|
|
135
136
|
Retrieve values of individual sliders by calling:
|
136
137
|
|
@@ -1,3 +1,5 @@
|
|
1
|
+
//= require shapes
|
2
|
+
|
1
3
|
(function ( $ ) {
|
2
4
|
'use strict';
|
3
5
|
|
@@ -12,22 +14,22 @@
|
|
12
14
|
step: 10,
|
13
15
|
units: "",
|
14
16
|
priceUnits: "",
|
15
|
-
// centerX, centerY, and radius set in $.fn.sliders()
|
17
|
+
// centerX, centerY, and radius set in $.fn.sliders() because they are specific/modified to each canvas
|
16
18
|
lineWidth: 5,
|
17
19
|
strokeColor: "#D3D3D3",
|
18
20
|
ballColor: "#000000",
|
19
|
-
textColor: "#000000",
|
20
21
|
gradientFill: true,
|
21
|
-
legend: true
|
22
|
+
legend: true,
|
23
|
+
legendFont: "12px Arial",
|
24
|
+
legendColor: "#000000"
|
22
25
|
}
|
23
26
|
|
24
27
|
$.fn.sliders = function(slidersOptions) {
|
25
28
|
this.each(function() {
|
26
29
|
var canvas = this;
|
27
30
|
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
31
|
[defaults.centerX, defaults.centerY, defaults.radius] = [canvas.width / 2, canvas.height / 2, 40];
|
30
|
-
// maybe refactor, add container option if there are multiple containers
|
32
|
+
// maybe refactor, add container option if there are multiple containers
|
31
33
|
for (var i = 0; i < slidersOptions.length; i++) {
|
32
34
|
defaults.name = "Slider " + (i + 1);
|
33
35
|
if (i > 0) {
|
@@ -38,7 +40,7 @@
|
|
38
40
|
var sliderSettings = $.extend( {}, defaults, slidersOptions[i] );
|
39
41
|
canvas.sliders.push(new Slider (sliderSettings));
|
40
42
|
// 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].
|
43
|
+
$(canvas).data(canvas.sliders[i].name.split(" ").join("_"), canvas.sliders[i].value);
|
42
44
|
}
|
43
45
|
canvas.selectedSlider = canvas.sliders[0];
|
44
46
|
draw(canvas);
|
@@ -62,13 +64,18 @@
|
|
62
64
|
this.radius = settings.radius;
|
63
65
|
this.lineWidth = settings.lineWidth;
|
64
66
|
this.strokeColor = settings.strokeColor;
|
65
|
-
this.textColor = settings.textColor;
|
66
67
|
this.value = settings.minValue;
|
67
|
-
this.range = settings.maxValue - settings.minValue;
|
68
68
|
this.gradientFill = settings.gradientFill;
|
69
69
|
this.legend = settings.legend;
|
70
|
+
this.legendFont = settings.legendFont;
|
71
|
+
this.legendColor = settings.legendColor;
|
70
72
|
// ball starts at top of circle which is - π / 2
|
71
73
|
this.angle = -(Math.PI / 2);
|
74
|
+
this.range = this.maxValue - this.minValue;
|
75
|
+
// maybe refactor, I like 2/3 and 1/3 for now
|
76
|
+
var arcSegment = 2 * Math.PI * this.radius / (this.range / this.step);
|
77
|
+
this.lineDashLength = (2 / 3) * arcSegment;
|
78
|
+
this.lineDashSpacing = (1 / 3) * arcSegment;
|
72
79
|
this.ball = new Ball (settings);
|
73
80
|
}
|
74
81
|
|
@@ -80,26 +87,23 @@
|
|
80
87
|
this.color = sliderSettings.ballColor;
|
81
88
|
}
|
82
89
|
|
83
|
-
function draw(canvas) {
|
90
|
+
function draw(canvas, movingBall = false) {
|
84
91
|
var ctx = canvas.getContext("2d");
|
85
92
|
// in the future want to be able to clear only the slider using, maybe with svg groups
|
86
93
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
94
|
+
var sliders = canvas.sliders;
|
95
|
+
for (var i = 0; i < sliders.length; i++) {
|
96
|
+
drawSlider(ctx, sliders[i]);
|
97
|
+
drawArc(ctx, sliders[i]);
|
98
|
+
drawBall(ctx, sliders[i]);
|
99
|
+
if (sliders[i].legend) { drawLegend(ctx, sliders[i], i, movingBall && sliders[i] == canvas.selectedSlider); }
|
92
100
|
}
|
93
101
|
}
|
94
102
|
|
95
103
|
function drawSlider(ctx, slider) {
|
96
104
|
ctx.lineWidth = slider.lineWidth;
|
97
105
|
ctx.strokeStyle = slider.strokeColor;
|
98
|
-
|
99
|
-
// maybe refactor, I like 2/3 and 1/3 for now, maybe move this to #Slider so don't have to calculate every time
|
100
|
-
var sliderLineDashLength = (2 / 3) * (sliderCircumference / (slider.range / slider.step));
|
101
|
-
var sliderLineDashSpacing = (1 / 3) * (sliderCircumference / (slider.range / slider.step));
|
102
|
-
ctx.setLineDash([sliderLineDashLength, sliderLineDashSpacing]);
|
106
|
+
ctx.setLineDash([slider.lineDashLength, slider.lineDashSpacing]);
|
103
107
|
ctx.beginPath();
|
104
108
|
ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI * 2, false);
|
105
109
|
ctx.stroke();
|
@@ -110,54 +114,13 @@
|
|
110
114
|
ctx.lineWidth = 5;
|
111
115
|
var my_gradient = null;
|
112
116
|
if (slider.type == "Shoe") {
|
113
|
-
|
114
|
-
ctx.arc(slider.centerX - 0.5 * slider.radius, slider.centerY - 0.5 * slider.radius, slider.radius * 0.3, Math.PI, 0, true);
|
115
|
-
ctx.lineTo(slider.centerX + 0.6 * slider.radius, slider.centerY - 0.1 * slider.radius);
|
116
|
-
ctx.arc(slider.centerX + 0.7 * slider.radius, slider.centerY + 0.1 * slider.radius, slider.radius * 0.2, -(Math.PI / 2), Math.PI / 2, false);
|
117
|
-
ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY + 0.3 * slider.radius);
|
118
|
-
ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
|
119
|
-
my_gradient = ctx.createLinearGradient(slider.centerX - 0.8 * slider.radius, slider.centerY + 0.3 * slider.radius, slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
|
117
|
+
my_gradient = drawShoeWithGradient(ctx, slider);
|
120
118
|
} else if (slider.type == "Waist") {
|
121
|
-
|
122
|
-
ctx.arc(slider.centerX, slider.centerY - 0.8 * slider.radius, slider.radius, Math.PI * (2 / 3), Math.PI * (1 / 3), true);
|
123
|
-
// refactor, need to send to 0.85 * slider.radius instead of 0.9 * slider.radius since there is a sharp v bend if not
|
124
|
-
ctx.lineTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.85 * slider.radius);
|
125
|
-
ctx.arc(slider.centerX + 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
|
126
|
-
ctx.lineTo(slider.centerX, slider.centerY + 0.4 * slider.radius);
|
127
|
-
ctx.arc(slider.centerX - 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
|
128
|
-
// maybe refactor moveTo, need it to avoid sharp v bend at base of arc
|
129
|
-
ctx.moveTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
|
130
|
-
ctx.lineTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
|
131
|
-
my_gradient = ctx.createLinearGradient(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.centerX - 0.2 * slider.radius, slider.centerY + 0.05 * slider.radius);
|
119
|
+
my_gradient = drawWaistWithGradient(ctx, slider);
|
132
120
|
} else if (slider.type == "Height") {
|
133
|
-
|
134
|
-
ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
|
135
|
-
ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI * 2, false);
|
136
|
-
ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
137
|
-
// maybe refactor and add arms, here and in weight: ctx.lineTo(slider.centerX + 0.25 * slider.radius, slider.centerY - 0.1 * slider.radius);
|
138
|
-
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
|
139
|
-
ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
|
140
|
-
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
|
141
|
-
ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
|
142
|
-
ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
|
143
|
-
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
|
144
|
-
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
145
|
-
my_gradient = ctx.createLinearGradient(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.centerX - 0.05 * slider.radius, slider.centerY - 0.8 * slider.radius);
|
121
|
+
my_gradient = drawPersonWithGradient(ctx, slider);
|
146
122
|
} else if (slider.type == "Weight") {
|
147
|
-
|
148
|
-
ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
|
149
|
-
ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI * 2, false);
|
150
|
-
ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
151
|
-
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
|
152
|
-
ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
|
153
|
-
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
|
154
|
-
ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
|
155
|
-
ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
|
156
|
-
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
|
157
|
-
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.15 * slider.radius);
|
158
|
-
ctx.arc(slider.centerX - 0.05 * slider.radius, slider.centerY, slider.radius * 0.15, Math.PI / 2, -(Math.PI / 2), false);
|
159
|
-
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
160
|
-
my_gradient = ctx.createLinearGradient(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.centerX - 0.05 * slider.radius, slider.centerY - 0.8 * slider.radius);
|
123
|
+
my_gradient = drawPersonWithGradient(ctx, slider, {style: "Weight"});
|
161
124
|
}
|
162
125
|
if (slider.gradientFill) {
|
163
126
|
var scale = (slider.value - slider.minValue) / slider.range;
|
@@ -191,11 +154,13 @@
|
|
191
154
|
ctx.closePath();
|
192
155
|
}
|
193
156
|
|
194
|
-
function
|
195
|
-
|
196
|
-
ctx.font = "
|
197
|
-
ctx.fillStyle = slider.
|
198
|
-
|
157
|
+
function drawLegend(ctx, slider, sliderIndex, movingSliderBall) {
|
158
|
+
ctx.beginPath();
|
159
|
+
if (movingSliderBall) {ctx.font = "bold " + slider.legendFont;} else {ctx.font = slider.legendFont;}
|
160
|
+
ctx.fillStyle = slider.legendColor;
|
161
|
+
// maybe refactor, 20px vertical spacing by default, could be an issue if set font above 20px
|
162
|
+
ctx.fillText(slider.name + ": " + slider.priceUnits + slider.value + " " + slider.units, 10, 20 * (sliderIndex + 1));
|
163
|
+
ctx.closePath();
|
199
164
|
}
|
200
165
|
|
201
166
|
function moveBall(mouseX, mouseY, canvas) {
|
@@ -211,6 +176,14 @@
|
|
211
176
|
var roundedValue = roundToStep(slider.value, slider.step);
|
212
177
|
$(canvas).data(slider.name.split(" ").join("_"), roundedValue);
|
213
178
|
slider.value = roundedValue;
|
179
|
+
draw(canvas, true);
|
180
|
+
}
|
181
|
+
|
182
|
+
function moveBallToStep(canvas) {
|
183
|
+
var slider = canvas.selectedSlider;
|
184
|
+
slider.angle = (2 * Math.PI * (slider.value - slider.minValue) / slider.range) - (Math.PI / 2)
|
185
|
+
slider.ball.x = slider.centerX + slider.radius * Math.cos(slider.angle);
|
186
|
+
slider.ball.y = slider.centerY + slider.radius * Math.sin(slider.angle);
|
214
187
|
draw(canvas);
|
215
188
|
}
|
216
189
|
|
@@ -218,7 +191,7 @@
|
|
218
191
|
e.preventDefault();
|
219
192
|
isMouseDown = true;
|
220
193
|
var [mouseX, mouseY] = setMouse(e);
|
221
|
-
var sliders = e.target.sliders;
|
194
|
+
var sliders = e.target.sliders;
|
222
195
|
for (var i = 0; i < sliders.length; i++) {
|
223
196
|
if (onBall(mouseX, mouseY, sliders[i])) {
|
224
197
|
e.target.selectedSlider = sliders[i];
|
@@ -229,6 +202,7 @@
|
|
229
202
|
function handleMouseUp(e) {
|
230
203
|
e.preventDefault();
|
231
204
|
isMouseDown = false;
|
205
|
+
moveBallToStep(e.target);
|
232
206
|
}
|
233
207
|
|
234
208
|
function handleMouseMove(e) {
|
@@ -252,8 +226,8 @@
|
|
252
226
|
}
|
253
227
|
|
254
228
|
function setMouse(e) {
|
255
|
-
// $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
|
256
229
|
var canvas = e.target;
|
230
|
+
// $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
|
257
231
|
return [parseInt(e.clientX - canvas.offsetLeft + $(window).scrollLeft()), parseInt(e.clientY - canvas.offsetTop + $(window).scrollTop())];
|
258
232
|
}
|
259
233
|
|
@@ -0,0 +1,46 @@
|
|
1
|
+
// maybe refactor and include these in a react like module, would have to worry about browser support, https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file
|
2
|
+
function drawShoeWithGradient(ctx, slider) {
|
3
|
+
ctx.moveTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
|
4
|
+
ctx.arc(slider.centerX - 0.5 * slider.radius, slider.centerY - 0.5 * slider.radius, slider.radius * 0.3, Math.PI, 0, true);
|
5
|
+
ctx.lineTo(slider.centerX + 0.6 * slider.radius, slider.centerY - 0.1 * slider.radius);
|
6
|
+
ctx.arc(slider.centerX + 0.7 * slider.radius, slider.centerY + 0.1 * slider.radius, slider.radius * 0.2, -(Math.PI / 2), Math.PI / 2, false);
|
7
|
+
ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY + 0.3 * slider.radius);
|
8
|
+
ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
|
9
|
+
return ctx.createLinearGradient(slider.centerX - 0.8 * slider.radius, slider.centerY + 0.3 * slider.radius, slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
|
10
|
+
}
|
11
|
+
|
12
|
+
function drawWaistWithGradient(ctx, slider) {
|
13
|
+
// maybe refactor, wanted to eyeball it without using math, also maybe move up, could put back in (slight difference at edge): ctx.moveTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
|
14
|
+
ctx.arc(slider.centerX, slider.centerY - 0.8 * slider.radius, slider.radius, Math.PI * (2 / 3), Math.PI * (1 / 3), true);
|
15
|
+
// refactor, need to send to 0.85 * slider.radius instead of 0.9 * slider.radius since there is a sharp v bend if not
|
16
|
+
ctx.lineTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.85 * slider.radius);
|
17
|
+
ctx.arc(slider.centerX + 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
|
18
|
+
ctx.lineTo(slider.centerX, slider.centerY + 0.4 * slider.radius);
|
19
|
+
ctx.arc(slider.centerX - 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
|
20
|
+
// maybe refactor moveTo, need it to avoid sharp v bend at base of arc
|
21
|
+
ctx.moveTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
|
22
|
+
ctx.lineTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
|
23
|
+
return ctx.createLinearGradient(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.centerX - 0.2 * slider.radius, slider.centerY + 0.05 * slider.radius);
|
24
|
+
}
|
25
|
+
|
26
|
+
function drawPersonWithGradient(ctx, slider, options = {}) {
|
27
|
+
ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI * 2, false);
|
28
|
+
ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
|
29
|
+
ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI * 2, false);
|
30
|
+
ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
31
|
+
// maybe refactor and add arms, ctx.lineTo(slider.centerX + 0.25 * slider.radius, slider.centerY - 0.1 * slider.radius);
|
32
|
+
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
|
33
|
+
ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
|
34
|
+
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
|
35
|
+
ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
|
36
|
+
ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
|
37
|
+
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
|
38
|
+
if (options.style == "Weight") {
|
39
|
+
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.15 * slider.radius);
|
40
|
+
ctx.arc(slider.centerX - 0.05 * slider.radius, slider.centerY, slider.radius * 0.15, Math.PI / 2, -(Math.PI / 2), false);
|
41
|
+
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
42
|
+
} else {
|
43
|
+
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
44
|
+
}
|
45
|
+
return ctx.createLinearGradient(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.centerX - 0.05 * slider.radius, slider.centerY - 0.8 * slider.radius);
|
46
|
+
}
|
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: 1.
|
4
|
+
version: 1.1.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-
|
11
|
+
date: 2018-08-05 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|
@@ -88,6 +88,7 @@ files:
|
|
88
88
|
- lib/circular/sliders/rails.rb
|
89
89
|
- lib/circular/sliders/rails/version.rb
|
90
90
|
- vendor/assets/javascripts/circular-sliders.js
|
91
|
+
- vendor/assets/javascripts/shapes.js
|
91
92
|
homepage: https://github.com/speterlin/circular-sliders-rails
|
92
93
|
licenses:
|
93
94
|
- MIT
|