circular-sliders-rails 0.3.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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