circular-sliders-rails 0.2.0 → 0.3.0

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/README.md +46 -16
  3. data/lib/circular/sliders/rails/version.rb +1 -1
  4. data/vendor/assets/images/circular-sliders-rails.png +0 -0
  5. data/vendor/assets/javascripts/circular-sliders.js +74 -16
  6. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 69ff79f3c1156560e0fc4fd075ad51a4e6f3545a1588a2336433a326383d1486
4
- data.tar.gz: 7a59b0a99466b98e6082c73641e9c0fe5ac25fe0f33db72cc21d8a4d1a8fcd79
3
+ metadata.gz: 5d2ca67677ccbe354fcac5885dee5fca5346667d0cd6b8e2111c693bd5213e27
4
+ data.tar.gz: '0784bed3107129b71d227679698dbd5fbf934cdbfb0f22b17c24b6c48eed850b'
5
5
  SHA512:
6
- metadata.gz: 44afddd02a7fa71cfc36055acd5d08ee55844fd10989dfa9494ab9a8ee6b8f9aedb7551f2bc0232aa8733a61abdc6cf2cb44ebbae72cd689c924c8e930684f77
7
- data.tar.gz: 261adb194e5684e53237d9bef2ea9a1b5c98767ac055dbede22101a7d9ba013be63f269d3514e04d0bbf44d8a8bd452812c82d6c3879204b2de0b3ab11d5d3ec
6
+ metadata.gz: 0d5c77f3804c770b9748d3c09ac80c08a85e736d197a51ac864aaeddf4579bc2a295c1052c85fcdd76648bef8b8fe6aced27154b50adde702d3df52c58886db1
7
+ data.tar.gz: e1fc7dc6849520ce1e03c7427e7184a9e26a1fdabffd45621f5f37b25e2ec4a10b036b2a302fae3d2616cd85de2f1db6e52ad9a89410ab8b8e3f8965c87d172e
data/README.md CHANGED
@@ -26,45 +26,62 @@ Include in your application.js file:
26
26
 
27
27
  Create a canvas element in the view where you would like the sliders to go:
28
28
 
29
- <canvas id="sliders" width="600" height="300" style="border:1px solid;"></canvas>
29
+ <canvas id="sliders" width="1200" height="300" style="border:1px solid;"></canvas>
30
30
 
31
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.
32
32
 
33
33
  <script>
34
34
  $('#sliders').sliders([
35
+ {
36
+ name: "Age",
37
+ centerX: 175,
38
+ minValue: 18,
39
+ maxValue: 66,
40
+ step: 1,
41
+ units: "years",
42
+ color: "#FF7F50",
43
+ textColor: "#FF7F50"
44
+ },
45
+ {
46
+ name: "Daily activity",
47
+ units: "miles",
48
+ minValue: 0,
49
+ maxValue: 25,
50
+ step: 1,
51
+ color: "#FF7F50",
52
+ textColor: "#FF7F50"
53
+ },
35
54
  {
36
55
  name: "Height",
37
56
  color: "#FFDEAD",
38
- centerX: 200,
39
- centerY: 150,
57
+ type: "Height",
58
+ centerX: 375,
40
59
  minValue: 0,
41
60
  maxValue: 250,
42
- step: 0.5,
61
+ step: 2,
43
62
  units: "cm",
44
- radius: 60,
45
- lineDashLength: 5,
46
- lineDashSpacing: 5,
47
- lineWidth: 5,
63
+ radius: 100,
48
64
  strokeColor: "#D3D3D3",
49
65
  },
50
66
  {
51
67
  name: "Weight",
52
68
  color: "#A52A2A",
69
+ type: "Weight",
53
70
  minValue: 0,
54
71
  maxValue: 150,
72
+ radius: 100,
73
+ centerX: 600,
55
74
  step: 5,
56
75
  units: "kg",
57
- lineDashLength: 5,
58
- lineDashSpacing: 10,
59
76
  lineWidth: 10,
60
77
  strokeColor: "#D3D3D3",
61
78
  },
62
79
  {
63
80
  name: "Waist size",
64
- centerX: 400,
65
- centerY: 150,
66
81
  color: "#A0522D",
67
- radius: 40,
82
+ type: "Waist",
83
+ centerX: 825,
84
+ radius: 100,
68
85
  minValue: 0,
69
86
  maxValue: 50,
70
87
  lineWidth: 10,
@@ -74,9 +91,20 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
74
91
  },
75
92
  {
76
93
  name: "Shoe size",
94
+ type: "Shoe",
95
+ centerX: 1050,
96
+ radius: 100,
97
+ lineWidth: 10,
77
98
  minValue: 10,
78
99
  maxValue: 60,
79
- step: 1
100
+ step: 1,
101
+ textColor: "#0000FF"
102
+ },
103
+ {
104
+ name: "Desired price",
105
+ priceUnits: "£",
106
+ textColor: "#0000FF",
107
+ step: 5,
80
108
  }
81
109
  ]);
82
110
  </script>
@@ -86,6 +114,7 @@ Slider settings:
86
114
  | Name | Type | Default | Description |
87
115
  | --------------- | ------ | ----------------------------------- | ------------------------------------------------------ |
88
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! |
89
118
  | centerX | Float | Center of canvas or previous slider | Specify the x value for the center of the slider |
90
119
  | centerY | Float | Center of canvas or previous slider | Specify the y value for the center of the slider |
91
120
  | color | String | "#0000FF" | Specify the color of the arc fill |
@@ -93,7 +122,8 @@ Slider settings:
93
122
  | maxValue | Float | 100 | The maximum value of your slider |
94
123
  | step | Float | 10 | The amount the value is incremented |
95
124
  | units | String | "" | The units your value is displayed in |
96
- | radius | Float | 40 or previous slider radius +≈ 15 | The radius of your slider |
125
+ | priceUnits | String | "" | Adds price ('$', '€', '£' ...) before value |
126
+ | radius | Float | 40 or (previous slider radius + previous slider lineWidth + 5) | The radius of your slider |
97
127
  | lineWidth | Float | 5 | The slider and arc width |
98
128
  | strokeColor | String | "#D3D3D3" | The color of the dashes on the slider |
99
129
  | ballColor | String | "#000000" | The color of the slider ball |
@@ -103,7 +133,7 @@ Retrieve values of individual sliders by calling:
103
133
 
104
134
  $('#sliders').data('slider_name');
105
135
 
106
- You should see something like this:
136
+ You should see something like this (with the above options):
107
137
 
108
138
  ![Circular sliders](/vendor/assets/images/circular-sliders-rails.png)
109
139
 
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.2.0"
4
+ VERSION = "0.3.0"
5
5
  end
6
6
  end
7
7
  end
data/vendor/assets/javascripts/circular-sliders.js CHANGED
@@ -17,32 +17,31 @@
17
17
  canvas = this[0];
18
18
  ctx = canvas.getContext("2d");
19
19
  setOffset();
20
- // maybe refactor and make centerX and centerY one variable [centerX, centerY]
21
- var slidersCenterX = canvas.width / 2;
22
- var slidersCenterY = canvas.height / 2;
23
- // maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
24
20
  var defaults = {
25
21
  name: "Slider",
26
- centerX: slidersCenterX,
27
- centerY: slidersCenterY,
22
+ type: "Plain",
23
+ centerX: canvas.width / 2,
24
+ centerY: canvas.height / 2,
28
25
  color: "#0000FF",
29
26
  minValue: 0,
30
27
  maxValue: 100,
31
28
  step: 10,
32
29
  units: "",
30
+ priceUnits: "",
33
31
  radius: 40,
34
32
  lineWidth: 5,
35
33
  strokeColor: "#D3D3D3",
36
34
  ballColor: "#000000",
37
35
  textColor: "#000000"
38
36
  }
37
+ // maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
39
38
  for (var i = 0; i < slidersOptions.length; i++) {
40
39
  defaults.name = "Slider " + (i + 1);
41
40
  // maybe refactor, want previous centerX, centerY, and lineWidth and 10 pixels spacing between sliders
42
41
  if (i > 0) {
43
42
  defaults.centerX = sliders[i-1].centerX;
44
43
  defaults.centerY = sliders[i-1].centerY;
45
- defaults.radius = sliders[i-1].radius + sliders[i-1].lineWidth + 10;
44
+ defaults.radius = sliders[i-1].radius + sliders[i-1].lineWidth + 5;
46
45
  }
47
46
  var sliderSettings = $.extend( {}, defaults, slidersOptions[i] )
48
47
  sliders.push(new Slider (sliderSettings));
@@ -59,6 +58,7 @@
59
58
 
60
59
  function Slider(settings) {
61
60
  this.name = settings.name;
61
+ this.type = settings.type;
62
62
  this.centerX = settings.centerX;
63
63
  this.centerY = settings.centerY;
64
64
  this.color = settings.color;
@@ -66,6 +66,7 @@
66
66
  this.maxValue = settings.maxValue;
67
67
  this.step = settings.step;
68
68
  this.units = settings.units;
69
+ this.priceUnits = settings.priceUnits;
69
70
  this.radius = settings.radius;
70
71
  this.lineWidth = settings.lineWidth;
71
72
  this.strokeColor = settings.strokeColor;
@@ -96,17 +97,72 @@
96
97
  }
97
98
 
98
99
  function drawSlider(slider) {
99
- ctx.beginPath();
100
- ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI*2, false);
101
100
  ctx.lineWidth = slider.lineWidth;
102
101
  ctx.strokeStyle = slider.strokeColor;
103
102
  var sliderCircumference = 2 * Math.PI * slider.radius;
104
- // maybe refactor, I like 2/3 and 1/3 for now
103
+ // maybe refactor, I like 2/3 and 1/3 for now, maybe move this to #Slider so don't have to calculate every time
105
104
  var sliderLineDashLength = (2 / 3) * (sliderCircumference / (slider.range / slider.step));
106
105
  var sliderLineDashSpacing = (1 / 3) * (sliderCircumference / (slider.range / slider.step));
107
106
  ctx.setLineDash([sliderLineDashLength, sliderLineDashSpacing]);
107
+ ctx.beginPath();
108
+ ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI*2, false);
108
109
  ctx.stroke();
109
110
  ctx.closePath();
111
+ if (slider.type != "Plain") {
112
+ ctx.setLineDash([10, 0]);
113
+ ctx.beginPath();
114
+ ctx.lineWidth = 5;
115
+ // maybe add scale (and restore): ctx.scale(1.05, 1.05), ctx.restore()
116
+ if (slider.type == "Shoe") {
117
+ ctx.moveTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
118
+ ctx.arc(slider.centerX - 0.5 * slider.radius, slider.centerY - 0.5 * slider.radius, slider.radius * 0.3, Math.PI, 0, true);
119
+ ctx.lineTo(slider.centerX + 0.6 * slider.radius, slider.centerY - 0.1 * slider.radius);
120
+ 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
+ ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY + 0.3 * slider.radius);
122
+ ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
123
+ } 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);
126
+ 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);
130
+ ctx.arc(slider.centerX + 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
131
+ ctx.lineTo(slider.centerX, slider.centerY + 0.4 * slider.radius);
132
+ ctx.arc(slider.centerX - 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
133
+ ctx.moveTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
134
+ ctx.lineTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
135
+ } else if (slider.type == "Height") {
136
+ ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI*2, false);
137
+ ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
138
+ ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI*2, false);
139
+ ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
140
+ // maybe refactor and add arms, here and in weight: ctx.lineTo(slider.centerX + 0.25 * slider.radius, slider.centerY - 0.1 * slider.radius);
141
+ ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
142
+ ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
143
+ ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
144
+ ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
145
+ 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
+ ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
147
+ ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
148
+ } else if (slider.type == "Weight") {
149
+ ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI*2, false);
150
+ ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
151
+ ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI*2, false);
152
+ ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
153
+ ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
154
+ ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
155
+ ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
156
+ ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
157
+ ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
158
+ ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
159
+ ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.15 * slider.radius);
160
+ ctx.arc(slider.centerX - 0.05 * slider.radius, slider.centerY, slider.radius * 0.15, Math.PI / 2, -(Math.PI / 2), false);
161
+ ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
162
+ }
163
+ ctx.stroke();
164
+ ctx.closePath();
165
+ }
110
166
  }
111
167
 
112
168
  function drawBall(slider) {
@@ -139,7 +195,7 @@
139
195
  // maybe refactor and make this editable
140
196
  ctx.font = "12px Arial";
141
197
  ctx.fillStyle = slider.textColor;
142
- ctx.fillText(slider.name + ": " + slider.value + " " + slider.units, 10, 20*(count+1));
198
+ ctx.fillText(slider.name + ": " + slider.priceUnits + slider.value + " " + slider.units, 10, 20*(count+1));
143
199
  }
144
200
 
145
201
  function moveBall (mouseX, mouseY, slider) {
@@ -161,9 +217,7 @@
161
217
  e.preventDefault();
162
218
  isMouseDown = true;
163
219
  setOffset();
164
- // $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling, maybe refactor and make mouseX and mouseY global
165
- var mouseX = parseInt(e.clientX - offset[0] + $(window).scrollLeft());
166
- var mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
220
+ var [mouseX, mouseY] = setMouse(e);
167
221
  for (var i = 0; i < sliders.length; i++) {
168
222
  if (onBall(mouseX, mouseY, sliders[i])) {
169
223
  selectedSlider = sliders[i];
@@ -182,8 +236,7 @@
182
236
  }
183
237
  e.preventDefault();
184
238
  setOffset();
185
- var mouseX = parseInt(e.clientX - offset[0] + $(window).scrollLeft());
186
- var mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
239
+ var [mouseX, mouseY] = setMouse(e);
187
240
  moveBall(mouseX, mouseY, selectedSlider);
188
241
  }
189
242
 
@@ -203,4 +256,9 @@
203
256
  offset = [canvas.offsetLeft, canvas.offsetTop];
204
257
  }
205
258
 
259
+ function setMouse(e) {
260
+ // $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
261
+ return [parseInt(e.clientX - offset[0] + $(window).scrollLeft()), parseInt(e.clientY - offset[1] + $(window).scrollTop())];
262
+ }
263
+
206
264
  }( 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.2.0
4
+ version: 0.3.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-05-19 00:00:00.000000000 Z
11
+ date: 2018-05-27 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler