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.
Files changed (6) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +1 -0
  3. data/README.md +21 -22
  4. data/lib/circular/sliders/rails/version.rb +1 -1
  5. data/vendor/assets/javascripts/circular-sliders.js +20 -8
  6. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 804eee894d91f80cd0878948c759960435914993e0bdfff26b3abda3090d7c94
4
- data.tar.gz: f3029a0d13b75b048e055793682f1d9acd89b1325088c1547a707e45ce414991
3
+ metadata.gz: bc0348af8cd6fca195bbc41deb04d0b9fab5fbf13c7417b147c75985340fbbc8
4
+ data.tar.gz: 9c5a6ba1ca636350fce374f5244b4d0890811c67e58f2edec60d2e8981c6bb5a
5
5
  SHA512:
6
- metadata.gz: 222879841b67ffe6cb1d7ea63d42a9568d3e674b52c93920a13376f31ad9bd9745598fed62b52594e6575210239aae57522a6d0e0351a0341f119a8afb86463b
7
- data.tar.gz: 0cc03a3c138d6580bb5f470915b7eb706018d52e31ccddc05c061d687e77335ef09e14b33cf5baf41a10e0d778f6f5f490e2823b07cb0297f4db5cf4c6dd960d
6
+ metadata.gz: 05153f655cc5b9669e5d867532e1b7c4026a396a336128386535512b762c7015b5687c2b881ca6488237befc205e2ae14b408c5a3142d9e3e4852872ef2d08db
7
+ data.tar.gz: d4421717e0e33cb982a62e663d4075d688ef670b2830f79964e0e51a80796cce6e37fac5fde14a1818329c34eebad70c00f8e2334cb6bdae9b4c5cce0a971561
data/.gitignore CHANGED
@@ -7,3 +7,4 @@
7
7
  /pkg/
8
8
  /spec/reports/
9
9
  /tmp/
10
+ spec.txt
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 | Default | Description |
113
- | --------------- | ------ | ----------------------------------- | ------------------------------------------------------ |
114
- | name | String | Slider n | Name your slider |
115
- | type | String | Plain | Pick between various types for interesting graphics at the center of the slider: 'Height', 'Weight', 'Shoe', 'Waist', and more to come! |
116
- | centerX | Float | Center of canvas or previous slider | Specify the x value for the center of the slider |
117
- | centerY | Float | Center of canvas or previous slider | Specify the y value for the center of the slider |
118
- | color | String | "#0000FF" | Specify the color of the arc fill |
119
- | minValue | Float | 0 | The minimum value of your slider |
120
- | maxValue | Float | 100 | The maximum value of your slider |
121
- | step | Float | 10 | The amount the value is incremented |
122
- | units | String | "" | The units your value is displayed in |
123
- | priceUnits | String | "" | Adds price ('$', '€', '£' ...) before value |
124
- | radius | Float | 40 or (previous slider radius + previous slider lineWidth + 5) | The radius of your slider |
125
- | lineWidth | Float | 5 | The slider and arc width |
126
- | strokeColor | String | "#D3D3D3" | The color of the dashes on the slider |
127
- | ballColor | String | "#000000" | The color of the slider ball |
128
- | textColor | String | "#000000" | The color of the slider label (name, value and units) |
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). -->
data/lib/circular/sliders/rails/version.rb CHANGED
@@ -1,7 +1,7 @@
1
1
  module Circular
2
2
  module Sliders
3
3
  module Rails
4
- VERSION = "0.3.1"
4
+ VERSION = "0.3.2"
5
5
  end
6
6
  end
7
7
  end
data/vendor/assets/javascripts/circular-sliders.js CHANGED
@@ -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
- // maybe add scale (and restore): ctx.scale(1.05, 1.05), ctx.restore()
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
- ctx.lineTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
128
- // need moveTo here and below because otherwise there is a sharp v bend
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.1
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-06-27 00:00:00.000000000 Z
11
+ date: 2018-07-02 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler