circular-sliders-rails 0.3.1 → 0.3.2
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 +21 -22
- data/lib/circular/sliders/rails/version.rb +1 -1
- data/vendor/assets/javascripts/circular-sliders.js +20 -8
- 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: bc0348af8cd6fca195bbc41deb04d0b9fab5fbf13c7417b147c75985340fbbc8
|
4
|
+
data.tar.gz: 9c5a6ba1ca636350fce374f5244b4d0890811c67e58f2edec60d2e8981c6bb5a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 05153f655cc5b9669e5d867532e1b7c4026a396a336128386535512b762c7015b5687c2b881ca6488237befc205e2ae14b408c5a3142d9e3e4852872ef2d08db
|
7
|
+
data.tar.gz: d4421717e0e33cb982a62e663d4075d688ef670b2830f79964e0e51a80796cce6e37fac5fde14a1818329c34eebad70c00f8e2334cb6bdae9b4c5cce0a971561
|
data/.gitignore
CHANGED
data/README.md
CHANGED
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
A Ruby on Rails gem which allows you to draw concentric responsive circular sliders with jQuery. Requires jQuery.
|
4
4
|
|
5
|
+
![Circular sliders](../assets/circular-sliders-rails.gif?raw=true)
|
6
|
+
|
5
7
|
## Installation
|
6
8
|
|
7
9
|
Add this line to your application's Gemfile:
|
@@ -28,7 +30,7 @@ Create a canvas element in the view where you would like the sliders to go:
|
|
28
30
|
|
29
31
|
<canvas id="sliders" width="1200" height="300" style="border:1px solid;"></canvas>
|
30
32
|
|
31
|
-
Use jQuery to add circular sliders to the canvas area. Pass slider settings as objects in an array. Create multiple sliders or just a single slider.
|
33
|
+
Use jQuery to add circular sliders to the canvas area. Pass slider settings as objects in an array. Create multiple sliders or just a single slider. With the settings below you should see something like the picture above.
|
32
34
|
|
33
35
|
<script>
|
34
36
|
$('#sliders').sliders([
|
@@ -109,32 +111,29 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
|
|
109
111
|
|
110
112
|
Slider settings:
|
111
113
|
|
112
|
-
| Name | Type
|
113
|
-
| --------------- |
|
114
|
-
| name | String
|
115
|
-
| type | String
|
116
|
-
| centerX | Float
|
117
|
-
| centerY | Float
|
118
|
-
| color | String
|
119
|
-
| minValue | Float
|
120
|
-
| maxValue | Float
|
121
|
-
| step | Float
|
122
|
-
| units | String
|
123
|
-
| priceUnits | String
|
124
|
-
| radius | Float
|
125
|
-
| lineWidth | Float
|
126
|
-
| strokeColor | String
|
127
|
-
| ballColor | String
|
128
|
-
| textColor | String
|
114
|
+
| Name | Type | Default | Description |
|
115
|
+
| --------------- | ------- | ----------------------------------- | ------------------------------------------------------ |
|
116
|
+
| name | String | Slider n | Name your slider |
|
117
|
+
| type | String | Plain | Pick between various types for interesting graphics at the center of the slider: 'Height', 'Weight', 'Shoe', 'Waist', and more to come |
|
118
|
+
| centerX | Float | Center of canvas or previous slider | Specify the x value for the center of the slider |
|
119
|
+
| centerY | Float | Center of canvas or previous slider | Specify the y value for the center of the slider |
|
120
|
+
| color | String | "#0000FF" | Specify the color of the arc fill |
|
121
|
+
| minValue | Float | 0 | The minimum value of your slider |
|
122
|
+
| maxValue | Float | 100 | The maximum value of your slider |
|
123
|
+
| step | Float | 10 | The amount the value is incremented |
|
124
|
+
| units | String | "" | The units your value is displayed in |
|
125
|
+
| priceUnits | String | "" | Adds price ('$', '€', '£' ...) before value |
|
126
|
+
| radius | Float | 40 or (previous slider radius + previous slider lineWidth + 5) | The radius of your slider |
|
127
|
+
| lineWidth | Float | 5 | The slider and arc width |
|
128
|
+
| strokeColor | String | "#D3D3D3" | The color of the dashes on the slider |
|
129
|
+
| ballColor | String | "#000000" | The color of the slider ball |
|
130
|
+
| textColor | String | "#000000" | The color of the slider label (name, value and units) |
|
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 |
|
129
132
|
|
130
133
|
Retrieve values of individual sliders by calling:
|
131
134
|
|
132
135
|
$('#sliders').data('slider_name');
|
133
136
|
|
134
|
-
You should see something like this (with the above options):
|
135
|
-
|
136
|
-
![Circular sliders](../assets/circular-sliders-rails.png?raw=true)
|
137
|
-
|
138
137
|
<!-- ## Development -->
|
139
138
|
|
140
139
|
<!-- To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org). -->
|
@@ -32,7 +32,8 @@
|
|
32
32
|
lineWidth: 5,
|
33
33
|
strokeColor: "#D3D3D3",
|
34
34
|
ballColor: "#000000",
|
35
|
-
textColor: "#000000"
|
35
|
+
textColor: "#000000",
|
36
|
+
gradientFill: true
|
36
37
|
}
|
37
38
|
// maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
|
38
39
|
for (var i = 0; i < slidersOptions.length; i++) {
|
@@ -73,6 +74,7 @@
|
|
73
74
|
this.textColor = settings.textColor;
|
74
75
|
this.value = settings.minValue;
|
75
76
|
this.range = settings.maxValue - settings.minValue;
|
77
|
+
this.gradientFill = settings.gradientFill;
|
76
78
|
// ball starts at top of circle which is - pi / 2
|
77
79
|
this.angle = -(Math.PI / 2);
|
78
80
|
this.ball = new Ball (settings);
|
@@ -109,10 +111,10 @@
|
|
109
111
|
ctx.stroke();
|
110
112
|
ctx.closePath();
|
111
113
|
if (slider.type != "Plain") {
|
112
|
-
ctx.setLineDash([10, 0]);
|
113
114
|
ctx.beginPath();
|
115
|
+
ctx.setLineDash([10, 0]);
|
114
116
|
ctx.lineWidth = 5;
|
115
|
-
|
117
|
+
var my_gradient = null;
|
116
118
|
if (slider.type == "Shoe") {
|
117
119
|
ctx.moveTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
|
118
120
|
ctx.arc(slider.centerX - 0.5 * slider.radius, slider.centerY - 0.5 * slider.radius, slider.radius * 0.3, Math.PI, 0, true);
|
@@ -120,18 +122,19 @@
|
|
120
122
|
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);
|
121
123
|
ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY + 0.3 * slider.radius);
|
122
124
|
ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
|
125
|
+
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);
|
123
126
|
} else if (slider.type == "Waist") {
|
124
|
-
// refactor, wanted to eyeball it without using math, also maybe move up
|
125
|
-
ctx.moveTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
|
127
|
+
// 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);
|
126
128
|
ctx.arc(slider.centerX, slider.centerY - 0.8 * slider.radius, slider.radius, Math.PI * (2/3), Math.PI * (1/3), true);
|
127
|
-
|
128
|
-
|
129
|
-
ctx.moveTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
|
129
|
+
// 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
|
+
ctx.lineTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.85 * slider.radius);
|
130
131
|
ctx.arc(slider.centerX + 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
|
131
132
|
ctx.lineTo(slider.centerX, slider.centerY + 0.4 * slider.radius);
|
132
133
|
ctx.arc(slider.centerX - 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
|
134
|
+
// maybe refactor moveTo, need it to avoid sharp v bend at base of arc
|
133
135
|
ctx.moveTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
|
134
136
|
ctx.lineTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
|
137
|
+
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);
|
135
138
|
} else if (slider.type == "Height") {
|
136
139
|
ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI*2, false);
|
137
140
|
ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
|
@@ -145,6 +148,7 @@
|
|
145
148
|
ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
|
146
149
|
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
|
147
150
|
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
151
|
+
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);
|
148
152
|
} else if (slider.type == "Weight") {
|
149
153
|
ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI*2, false);
|
150
154
|
ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
|
@@ -159,6 +163,14 @@
|
|
159
163
|
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.15 * slider.radius);
|
160
164
|
ctx.arc(slider.centerX - 0.05 * slider.radius, slider.centerY, slider.radius * 0.15, Math.PI / 2, -(Math.PI / 2), false);
|
161
165
|
ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
|
166
|
+
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);
|
167
|
+
}
|
168
|
+
if (slider.gradientFill) {
|
169
|
+
var scale = (slider.value - slider.minValue) / slider.range;
|
170
|
+
my_gradient.addColorStop(0,slider.color);
|
171
|
+
my_gradient.addColorStop(scale,"#ffffff");
|
172
|
+
ctx.fillStyle = my_gradient;
|
173
|
+
ctx.fill();
|
162
174
|
}
|
163
175
|
ctx.stroke();
|
164
176
|
ctx.closePath();
|
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.3.
|
4
|
+
version: 0.3.2
|
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-07-02 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: bundler
|