circular-sliders-rails 0.3.2 → 0.4.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 +4 -2
- data/lib/circular/sliders/rails/version.rb +1 -1
- data/vendor/assets/javascripts/circular-sliders.js +48 -64
- 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: d1565e797eec8a884a00b48a1b5287cb2695898f00b571582179624905f555ca
|
4
|
+
data.tar.gz: 96899d7bfb7c5530f31daf05a6627699052d22916e5a57c524a8c344ac072cb4
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 01e94406f5fa5dff7d43756200f45c31862b815665afe1cb4c064dcbbfbb0effcb39eeea6907ee5edb8d8f03115cd18b1ade1e194eb46317d056418f8e0cad64
|
7
|
+
data.tar.gz: 151d1fa86aed10cfdcbcd15b61e5388192567cb211436e48d66049f8efffcf8301307b8cef7be7b00770b932acd57ae42f1def82a685bd26c09e9356c4fc9aa3
|
data/README.md
CHANGED
@@ -74,7 +74,8 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
|
|
74
74
|
centerX: 600,
|
75
75
|
step: 5,
|
76
76
|
units: "kg",
|
77
|
-
lineWidth: 10
|
77
|
+
lineWidth: 10,
|
78
|
+
gradientFill: false
|
78
79
|
},
|
79
80
|
{
|
80
81
|
name: "Waist size",
|
@@ -123,12 +124,13 @@ Slider settings:
|
|
123
124
|
| step | Float | 10 | The amount the value is incremented |
|
124
125
|
| units | String | "" | The units your value is displayed in |
|
125
126
|
| priceUnits | String | "" | Adds price ('$', '€', '£' ...) before value |
|
126
|
-
| radius | Float | 40 or (previous slider radius + previous slider lineWidth +
|
127
|
+
| radius | Float | 40 or (previous slider radius + previous slider lineWidth + default slider lineWidth) | The radius of your slider |
|
127
128
|
| lineWidth | Float | 5 | The slider and arc width |
|
128
129
|
| strokeColor | String | "#D3D3D3" | The color of the dashes on the slider |
|
129
130
|
| ballColor | String | "#000000" | The color of the slider ball |
|
130
131
|
| textColor | String | "#000000" | The color of the slider label (name, value and units) |
|
131
132
|
| 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 value listed in the top left corner of the canvas |
|
132
134
|
|
133
135
|
Retrieve values of individual sliders by calling:
|
134
136
|
|
@@ -1,55 +1,51 @@
|
|
1
1
|
(function ( $ ) {
|
2
|
+
'use strict';
|
2
3
|
|
4
|
+
// private global variables
|
3
5
|
var isMouseDown = false;
|
4
6
|
var selectedSlider = {};
|
5
7
|
var elem = null;
|
6
8
|
// if multiple canvases / containers would need to refactor
|
7
|
-
var canvas = null
|
9
|
+
var canvas = null;
|
8
10
|
var ctx = null;
|
9
|
-
// don't like having these as global variables
|
10
11
|
var sliders = [];
|
11
|
-
|
12
|
-
|
12
|
+
var defaults = {
|
13
|
+
name: "Slider",
|
14
|
+
type: "Plain",
|
15
|
+
color: "#0000FF",
|
16
|
+
minValue: 0,
|
17
|
+
maxValue: 100,
|
18
|
+
step: 10,
|
19
|
+
units: "",
|
20
|
+
priceUnits: "",
|
21
|
+
radius: 40,
|
22
|
+
lineWidth: 5,
|
23
|
+
strokeColor: "#D3D3D3",
|
24
|
+
ballColor: "#000000",
|
25
|
+
textColor: "#000000",
|
26
|
+
gradientFill: true,
|
27
|
+
legend: true
|
28
|
+
}
|
13
29
|
|
14
30
|
$.fn.sliders = function(slidersOptions) {
|
15
31
|
elem = this;
|
16
32
|
// maybe refactor, add .each in case there are multiple selected canvases
|
17
33
|
canvas = this[0];
|
18
34
|
ctx = canvas.getContext("2d");
|
19
|
-
|
20
|
-
var defaults = {
|
21
|
-
name: "Slider",
|
22
|
-
type: "Plain",
|
23
|
-
centerX: canvas.width / 2,
|
24
|
-
centerY: canvas.height / 2,
|
25
|
-
color: "#0000FF",
|
26
|
-
minValue: 0,
|
27
|
-
maxValue: 100,
|
28
|
-
step: 10,
|
29
|
-
units: "",
|
30
|
-
priceUnits: "",
|
31
|
-
radius: 40,
|
32
|
-
lineWidth: 5,
|
33
|
-
strokeColor: "#D3D3D3",
|
34
|
-
ballColor: "#000000",
|
35
|
-
textColor: "#000000",
|
36
|
-
gradientFill: true
|
37
|
-
}
|
35
|
+
[defaults.centerX, defaults.centerY] = [canvas.width / 2, canvas.height / 2];
|
38
36
|
// maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
|
39
37
|
for (var i = 0; i < slidersOptions.length; i++) {
|
40
38
|
defaults.name = "Slider " + (i + 1);
|
41
|
-
// maybe refactor, want previous centerX, centerY, and lineWidth and 10 pixels spacing between sliders
|
42
39
|
if (i > 0) {
|
43
40
|
defaults.centerX = sliders[i-1].centerX;
|
44
41
|
defaults.centerY = sliders[i-1].centerY;
|
45
|
-
defaults.radius = sliders[i-1].radius + sliders[i-1].lineWidth +
|
42
|
+
defaults.radius = sliders[i-1].radius + sliders[i-1].lineWidth + defaults.lineWidth;
|
46
43
|
}
|
47
|
-
var sliderSettings = $.extend( {}, defaults, slidersOptions[i] )
|
44
|
+
var sliderSettings = $.extend( {}, defaults, slidersOptions[i] );
|
48
45
|
sliders.push(new Slider (sliderSettings));
|
49
46
|
// maybe refactor, visible if have it like this: elem.attr('data-'+sliders[i].name.split(" ").join("_"), sliders[i].minValue);
|
50
47
|
elem.data(sliders[i].name.split(" ").join("_"), sliders[i].minValue);
|
51
48
|
}
|
52
|
-
// maybe refactor, first slider by default selected
|
53
49
|
selectedSlider = sliders[0];
|
54
50
|
draw();
|
55
51
|
canvas.addEventListener("mousedown", handleMouseDown);
|
@@ -75,7 +71,8 @@
|
|
75
71
|
this.value = settings.minValue;
|
76
72
|
this.range = settings.maxValue - settings.minValue;
|
77
73
|
this.gradientFill = settings.gradientFill;
|
78
|
-
|
74
|
+
this.legend = settings.legend;
|
75
|
+
// ball starts at top of circle which is - π / 2
|
79
76
|
this.angle = -(Math.PI / 2);
|
80
77
|
this.ball = new Ball (settings);
|
81
78
|
}
|
@@ -88,13 +85,13 @@
|
|
88
85
|
this.color = sliderSettings.ballColor;
|
89
86
|
}
|
90
87
|
|
91
|
-
function draw
|
88
|
+
function draw() {
|
92
89
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
93
90
|
for (var i = 0; i < sliders.length; i++) {
|
94
91
|
drawSlider(sliders[i]);
|
95
|
-
drawBall(sliders[i]);
|
96
92
|
drawArc(sliders[i]);
|
97
|
-
|
93
|
+
drawBall(sliders[i]);
|
94
|
+
if (sliders[i].legend) { drawText(sliders[i], i); }
|
98
95
|
}
|
99
96
|
}
|
100
97
|
|
@@ -107,7 +104,7 @@
|
|
107
104
|
var sliderLineDashSpacing = (1 / 3) * (sliderCircumference / (slider.range / slider.step));
|
108
105
|
ctx.setLineDash([sliderLineDashLength, sliderLineDashSpacing]);
|
109
106
|
ctx.beginPath();
|
110
|
-
ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI*2, false);
|
107
|
+
ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI * 2, false);
|
111
108
|
ctx.stroke();
|
112
109
|
ctx.closePath();
|
113
110
|
if (slider.type != "Plain") {
|
@@ -125,7 +122,7 @@
|
|
125
122
|
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);
|
126
123
|
} else if (slider.type == "Waist") {
|
127
124
|
// 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);
|
128
|
-
ctx.arc(slider.centerX, slider.centerY - 0.8 * slider.radius, slider.radius, Math.PI * (2/3), Math.PI * (1/3), true);
|
125
|
+
ctx.arc(slider.centerX, slider.centerY - 0.8 * slider.radius, slider.radius, Math.PI * (2 / 3), Math.PI * (1 / 3), true);
|
129
126
|
// refactor, need to send to 0.85 * slider.radius instead of 0.9 * slider.radius since there is a sharp v bend if not
|
130
127
|
ctx.lineTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.85 * slider.radius);
|
131
128
|
ctx.arc(slider.centerX + 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
|
@@ -136,9 +133,9 @@
|
|
136
133
|
ctx.lineTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
|
137
134
|
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);
|
138
135
|
} else if (slider.type == "Height") {
|
139
|
-
ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI*2, false);
|
136
|
+
ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI * 2, false);
|
140
137
|
ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
|
141
|
-
ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI*2, false);
|
138
|
+
ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI * 2, false);
|
142
139
|
ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
143
140
|
// maybe refactor and add arms, here and in weight: ctx.lineTo(slider.centerX + 0.25 * slider.radius, slider.centerY - 0.1 * slider.radius);
|
144
141
|
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
|
@@ -150,9 +147,9 @@
|
|
150
147
|
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
151
148
|
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);
|
152
149
|
} else if (slider.type == "Weight") {
|
153
|
-
ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI*2, false);
|
150
|
+
ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI * 2, false);
|
154
151
|
ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
|
155
|
-
ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI*2, false);
|
152
|
+
ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI * 2, false);
|
156
153
|
ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
157
154
|
ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
|
158
155
|
ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
|
@@ -179,22 +176,16 @@
|
|
179
176
|
|
180
177
|
function drawBall(slider) {
|
181
178
|
ctx.beginPath();
|
182
|
-
ctx.arc(slider.ball.x, slider.ball.y, slider.ball.radius, 0, Math.PI*2);
|
179
|
+
ctx.arc(slider.ball.x, slider.ball.y, slider.ball.radius, 0, Math.PI * 2);
|
183
180
|
ctx.fillStyle = slider.ball.color;
|
184
181
|
ctx.fill();
|
185
182
|
ctx.closePath();
|
186
183
|
}
|
187
184
|
|
188
|
-
function drawArc
|
189
|
-
//
|
190
|
-
var angleOffset = slider.ball.radius / slider.radius
|
191
|
-
if (((Math.PI / 2) + slider.angle) < angleOffset) {
|
192
|
-
var endAngle = slider.angle
|
193
|
-
} else {
|
194
|
-
var endAngle = slider.angle - angleOffset;
|
195
|
-
}
|
185
|
+
function drawArc(slider) {
|
186
|
+
// 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
|
196
187
|
ctx.beginPath();
|
197
|
-
ctx.arc(slider.centerX, slider.centerY, slider.radius, -(Math.PI / 2),
|
188
|
+
ctx.arc(slider.centerX, slider.centerY, slider.radius, -(Math.PI / 2), slider.angle, false);
|
198
189
|
ctx.lineWidth = slider.lineWidth;
|
199
190
|
ctx.strokeStyle = slider.color;
|
200
191
|
// have to set lineDashLength to a number > 0 for arc to be completely full in browsers like Safari, set it arbitrarily to 10 here
|
@@ -203,23 +194,23 @@
|
|
203
194
|
ctx.closePath();
|
204
195
|
}
|
205
196
|
|
206
|
-
function drawText
|
197
|
+
function drawText(slider, count) {
|
207
198
|
// maybe refactor and make this editable
|
208
199
|
ctx.font = "12px Arial";
|
209
200
|
ctx.fillStyle = slider.textColor;
|
210
|
-
ctx.fillText(slider.name + ": " + slider.priceUnits + slider.value + " " + slider.units, 10, 20*(count+1));
|
201
|
+
ctx.fillText(slider.name + ": " + slider.priceUnits + slider.value + " " + slider.units, 10, 20 * (count + 1));
|
211
202
|
}
|
212
203
|
|
213
|
-
function moveBall
|
204
|
+
function moveBall(mouseX, mouseY, slider) {
|
214
205
|
var dx = mouseX - slider.centerX;
|
215
206
|
var dy = mouseY - slider.centerY;
|
216
207
|
slider.angle = Math.atan(dy / dx);
|
217
|
-
if (dx < 0) { slider.angle += Math.PI }
|
208
|
+
if (dx < 0) { slider.angle += Math.PI; }
|
218
209
|
slider.ball.x = slider.centerX + slider.radius * Math.cos(slider.angle);
|
219
210
|
slider.ball.y = slider.centerY + slider.radius * Math.sin(slider.angle);
|
220
|
-
slider.value = slider.minValue + slider.range * ((slider.angle + (Math.PI/2)) / (2 * Math.PI)
|
211
|
+
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
|
221
212
|
// refactor - bug if give step value below 0.5
|
222
|
-
var roundedValue =
|
213
|
+
var roundedValue = roundToStep(slider.value, slider.step);
|
223
214
|
elem.data(slider.name.split(" ").join("_"), roundedValue);
|
224
215
|
slider.value = roundedValue;
|
225
216
|
draw();
|
@@ -228,7 +219,6 @@
|
|
228
219
|
function handleMouseDown(e) {
|
229
220
|
e.preventDefault();
|
230
221
|
isMouseDown = true;
|
231
|
-
setOffset();
|
232
222
|
var [mouseX, mouseY] = setMouse(e);
|
233
223
|
for (var i = 0; i < sliders.length; i++) {
|
234
224
|
if (onBall(mouseX, mouseY, sliders[i])) {
|
@@ -247,30 +237,24 @@
|
|
247
237
|
return;
|
248
238
|
}
|
249
239
|
e.preventDefault();
|
250
|
-
setOffset();
|
251
240
|
var [mouseX, mouseY] = setMouse(e);
|
252
241
|
moveBall(mouseX, mouseY, selectedSlider);
|
253
242
|
}
|
254
243
|
|
255
|
-
function
|
256
|
-
return Math.ceil(
|
244
|
+
function roundToStep(value, step) {
|
245
|
+
return Math.ceil(value / step) * step;
|
257
246
|
}
|
258
247
|
|
259
|
-
function onBall
|
248
|
+
function onBall(x, y, slider) {
|
260
249
|
if (x > (slider.ball.x - slider.ball.radius) && x < (slider.ball.x + slider.ball.radius) && y > (slider.ball.y - slider.ball.radius) && y < (slider.ball.y + slider.ball.radius)) {
|
261
250
|
return true;
|
262
251
|
}
|
263
252
|
return false;
|
264
253
|
}
|
265
254
|
|
266
|
-
function setOffset() {
|
267
|
-
// refactor, need to call every time mouse is down or moves in case you have moved the canvas and offset positon is cached, could avoid having to call this if your project has no cache
|
268
|
-
offset = [canvas.offsetLeft, canvas.offsetTop];
|
269
|
-
}
|
270
|
-
|
271
255
|
function setMouse(e) {
|
272
256
|
// $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
|
273
|
-
return [parseInt(e.clientX -
|
257
|
+
return [parseInt(e.clientX - canvas.offsetLeft + $(window).scrollLeft()), parseInt(e.clientY - canvas.offsetTop + $(window).scrollTop())];
|
274
258
|
}
|
275
259
|
|
276
260
|
}( jQuery ));
|
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.4.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-14 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|