circular-sliders-rails 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aeee7ce2e1d58981f0fb729b0fae34b821b59df97a431c73972882a767d78d44
-  data.tar.gz: 94e9467dfc57d7b41ee8568d230cef02669a2a36780ed849ef8c0eb7fae14abe
+  metadata.gz: 3000aa1e741be8f5446ac688f5ab4061140854f4b17c236ee0dd8e59d429a823
+  data.tar.gz: 78910adf596adcf0d9dcc08360996899904182eecdbb31a3bdcc4fbe2e47da9a
 SHA512:
-  metadata.gz: 1160abc5a35b7964832246e35b713370d76a7d095b54a74663983ee600ec68e6ab23eba64525913c699b2c3162da30c532082732934c7636d4b6af62736a6558
-  data.tar.gz: 4030206b719240bd0a677c16bd2bf80a819976836c240d8acf1d37688f53e8360cf1f483619441757fd03673f81428c979bfd5daeee27c508b76e6302ff7e89c
+  metadata.gz: eea4757df78b3c3ce8f5c23a56ad34dbb65fb894c34a7f9982f82206058992e8949935247faeeadf88f9e0609d608c804feddf565ca7902abd63bc76291851ff
+  data.tar.gz: e4f7f82df671a0d0681c1e14cae41bb796b5073aa5d1e025fa0c052de0825db23b9b065911a22b8c076f36fe7eea4285daf7fe6fed8b2bd7eb8236be482aaf55

data/.gitignore

@@ -8,3 +8,4 @@
 /spec/reports/
 /tmp/
 spec.txt
+improvements.txt

data/README.md

@@ -42,7 +42,7 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
           step: 1,
           units: "years",
           color: "#FF7F50",
-          textColor: "#FF7F50"
+          legendColor: "#FF7F50"
         },
         {
           name: "Daily activity",
@@ -51,7 +51,7 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
           maxValue: 25,
           step: 1,
           color: "#FF7F50",
-          textColor: "#FF7F50"
+          legendColor: "#FF7F50"
         },
         {
           name: "Height",
@@ -99,12 +99,12 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
           minValue: 10,
           maxValue: 60,
           step: 1,
-          textColor: "#0000FF"
+          legendColor: "#0000FF"
         },
         {
           name: "Desired price",
           priceUnits: "£",
-          textColor: "#0000FF",
+          legendColor: "#0000FF",
           step: 5
         }
       ]);
@@ -128,9 +128,10 @@ Slider settings:
 | lineWidth       | Float   | 5                                   | The slider and arc width                               |
 | strokeColor     | String  | "#D3D3D3"                           | The color of the dashes on the slider                  |
 | ballColor       | String  | "#000000"                           | The color of the slider ball                           |
-| textColor       | String  | "#000000"                           | The color of the slider label (name, value and units)  |
 | 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 |
-| legend          | Boolean | true                                | Specify whether you would like the slider name and value listed in the top left corner of the canvas |
+| legend          | Boolean | true                                | Specify whether you would like the slider name, value and units listed in the top left corner of the canvas |
+| legendFont      | Boolean | "12px Arial"                        | Specify the font for the slider legend                 |
+| legendColor     | String  | "#000000"                           | The color of the slider legend                         |
 
 Retrieve values of individual sliders by calling:
 

data/lib/circular/sliders/rails/version.rb

@@ -1,7 +1,7 @@
 module Circular
   module Sliders
     module Rails
-      VERSION = "1.0.0"
+      VERSION = "1.1.0"
     end
   end
 end

data/vendor/assets/javascripts/circular-sliders.js

@@ -1,3 +1,5 @@
+//= require shapes
+
 (function ( $ ) {
   'use strict';
 
@@ -12,22 +14,22 @@
     step: 10,
     units: "",
     priceUnits: "",
-    // centerX, centerY, and radius set in $.fn.sliders()
+    // centerX, centerY, and radius set in $.fn.sliders() because they are specific/modified to each canvas
     lineWidth: 5,
     strokeColor: "#D3D3D3",
     ballColor: "#000000",
-    textColor: "#000000",
     gradientFill: true,
-    legend: true
+    legend: true,
+    legendFont: "12px Arial",
+    legendColor: "#000000"
   }
 
   $.fn.sliders = function(slidersOptions) {
     this.each(function() {
       var canvas = this;
       canvas.sliders = [];
-      // need to set these variables here because they need to be reset after cycling through sliders in each canvas since they are modified when cycling through sliders
       [defaults.centerX, defaults.centerY, defaults.radius] = [canvas.width / 2, canvas.height / 2, 40];
-      // maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
+      // maybe refactor, add container option if there are multiple containers
       for (var i = 0; i < slidersOptions.length; i++) {
         defaults.name = "Slider " + (i + 1);
         if (i > 0) {
@@ -38,7 +40,7 @@
         var sliderSettings = $.extend( {}, defaults, slidersOptions[i] );
         canvas.sliders.push(new Slider (sliderSettings));
         // maybe refactor, visible if have it like this: elem.attr('data-'+sliders[i].name.split(" ").join("_"), sliders[i].minValue);
-        $(canvas).data(canvas.sliders[i].name.split(" ").join("_"), canvas.sliders[i].minValue);
+        $(canvas).data(canvas.sliders[i].name.split(" ").join("_"), canvas.sliders[i].value);
       }
       canvas.selectedSlider = canvas.sliders[0];
       draw(canvas);
@@ -62,13 +64,18 @@
     this.radius = settings.radius;
     this.lineWidth = settings.lineWidth;
     this.strokeColor = settings.strokeColor;
-    this.textColor = settings.textColor;
     this.value = settings.minValue;
-    this.range = settings.maxValue - settings.minValue;
     this.gradientFill = settings.gradientFill;
     this.legend = settings.legend;
+    this.legendFont = settings.legendFont;
+    this.legendColor = settings.legendColor;
     // ball starts at top of circle which is - π / 2
     this.angle = -(Math.PI / 2);
+    this.range = this.maxValue - this.minValue;
+    // maybe refactor, I like 2/3 and 1/3 for now
+    var arcSegment = 2 * Math.PI * this.radius / (this.range / this.step);
+    this.lineDashLength = (2 / 3) * arcSegment;
+    this.lineDashSpacing = (1 / 3) * arcSegment;
     this.ball = new Ball (settings);
   }
 
@@ -80,26 +87,23 @@
     this.color = sliderSettings.ballColor;
   }
 
-  function draw(canvas) {
+  function draw(canvas, movingBall = false) {
     var ctx = canvas.getContext("2d");
     // in the future want to be able to clear only the slider using, maybe with svg groups
     ctx.clearRect(0, 0, canvas.width, canvas.height);
-    for (var i = 0; i < canvas.sliders.length; i++) {
-      drawSlider(ctx, canvas.sliders[i]);
-      drawArc(ctx, canvas.sliders[i]);
-      drawBall(ctx, canvas.sliders[i]);
-      if (canvas.sliders[i].legend) { drawText(ctx, canvas.sliders[i], i); }
+    var sliders = canvas.sliders;
+    for (var i = 0; i < sliders.length; i++) {
+      drawSlider(ctx, sliders[i]);
+      drawArc(ctx, sliders[i]);
+      drawBall(ctx, sliders[i]);
+      if (sliders[i].legend) { drawLegend(ctx, sliders[i], i, movingBall && sliders[i] == canvas.selectedSlider); }
     }
   }
 
   function drawSlider(ctx, slider) {
     ctx.lineWidth = slider.lineWidth;
     ctx.strokeStyle = slider.strokeColor;
-    var sliderCircumference = 2 * Math.PI * slider.radius;
-    // maybe refactor, I like 2/3 and 1/3 for now, maybe move this to #Slider so don't have to calculate every time
-    var sliderLineDashLength = (2 / 3) * (sliderCircumference / (slider.range / slider.step));
-    var sliderLineDashSpacing = (1 / 3) * (sliderCircumference / (slider.range / slider.step));
-    ctx.setLineDash([sliderLineDashLength, sliderLineDashSpacing]);
+    ctx.setLineDash([slider.lineDashLength, slider.lineDashSpacing]);
     ctx.beginPath();
     ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI * 2, false);
     ctx.stroke();
@@ -110,54 +114,13 @@
       ctx.lineWidth = 5;
       var my_gradient = null;
       if (slider.type == "Shoe") {
-        ctx.moveTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
-        ctx.arc(slider.centerX - 0.5 * slider.radius, slider.centerY - 0.5 * slider.radius, slider.radius * 0.3, Math.PI, 0, true);
-        ctx.lineTo(slider.centerX + 0.6 * slider.radius, slider.centerY - 0.1 * slider.radius);
-        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);
-        ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY + 0.3 * slider.radius);
-        ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
-        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);
+        my_gradient = drawShoeWithGradient(ctx, slider);
       } else if (slider.type == "Waist") {
-        // 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);
-        ctx.arc(slider.centerX, slider.centerY - 0.8 * slider.radius, slider.radius, Math.PI * (2 / 3), Math.PI * (1 / 3), true);
-        // refactor, need to send to 0.85 * slider.radius instead of 0.9 * slider.radius since there is a sharp v bend if not
-        ctx.lineTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.85 * slider.radius);
-        ctx.arc(slider.centerX + 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
-        ctx.lineTo(slider.centerX, slider.centerY + 0.4 * slider.radius);
-        ctx.arc(slider.centerX - 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
-        // maybe refactor moveTo, need it to avoid sharp v bend at base of arc
-        ctx.moveTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
-        ctx.lineTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
-        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);
+        my_gradient = drawWaistWithGradient(ctx, slider);
       } else if (slider.type == "Height") {
-        ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI * 2, false);
-        ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
-        ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI * 2, false);
-        ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
-        // maybe refactor and add arms, here and in weight: ctx.lineTo(slider.centerX + 0.25 * slider.radius, slider.centerY - 0.1 * slider.radius);
-        ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
-        ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
-        ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
-        ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
-        ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
-        ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
-        ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
-        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);
+        my_gradient = drawPersonWithGradient(ctx, slider);
       } else if (slider.type == "Weight") {
-        ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI * 2, false);
-        ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
-        ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI * 2, false);
-        ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
-        ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
-        ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
-        ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
-        ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
-        ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
-        ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
-        ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.15 * slider.radius);
-        ctx.arc(slider.centerX - 0.05 * slider.radius, slider.centerY, slider.radius * 0.15, Math.PI / 2, -(Math.PI / 2), false);
-        ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
-        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);
+        my_gradient = drawPersonWithGradient(ctx, slider, {style: "Weight"});
       }
       if (slider.gradientFill) {
         var scale = (slider.value - slider.minValue) / slider.range;
@@ -191,11 +154,13 @@
     ctx.closePath();
   }
 
-  function drawText(ctx, slider, count) {
-    // maybe refactor and make this editable
-    ctx.font = "12px Arial";
-    ctx.fillStyle = slider.textColor;
-    ctx.fillText(slider.name + ": " + slider.priceUnits + slider.value + " " + slider.units, 10, 20 * (count + 1));
+  function drawLegend(ctx, slider, sliderIndex, movingSliderBall) {
+    ctx.beginPath();
+    if (movingSliderBall) {ctx.font = "bold " + slider.legendFont;} else {ctx.font = slider.legendFont;}
+    ctx.fillStyle = slider.legendColor;
+    // maybe refactor, 20px vertical spacing by default, could be an issue if set font above 20px
+    ctx.fillText(slider.name + ": " + slider.priceUnits + slider.value + " " + slider.units, 10, 20 * (sliderIndex + 1));
+    ctx.closePath();
   }
 
   function moveBall(mouseX, mouseY, canvas) {
@@ -211,6 +176,14 @@
     var roundedValue = roundToStep(slider.value, slider.step);
     $(canvas).data(slider.name.split(" ").join("_"), roundedValue);
     slider.value = roundedValue;
+    draw(canvas, true);
+  }
+
+  function moveBallToStep(canvas) {
+    var slider = canvas.selectedSlider;
+    slider.angle = (2 * Math.PI * (slider.value - slider.minValue) / slider.range) - (Math.PI / 2)
+    slider.ball.x = slider.centerX + slider.radius * Math.cos(slider.angle);
+    slider.ball.y = slider.centerY + slider.radius * Math.sin(slider.angle);
     draw(canvas);
   }
 
@@ -218,7 +191,7 @@
     e.preventDefault();
     isMouseDown = true;
     var [mouseX, mouseY] = setMouse(e);
-    var sliders = e.target.sliders; // maybe refactor, don't like having multiple calls to e.target.sliders
+    var sliders = e.target.sliders;
     for (var i = 0; i < sliders.length; i++) {
       if (onBall(mouseX, mouseY, sliders[i])) {
         e.target.selectedSlider = sliders[i];
@@ -229,6 +202,7 @@
   function handleMouseUp(e) {
     e.preventDefault();
     isMouseDown = false;
+    moveBallToStep(e.target);
   }
 
   function handleMouseMove(e) {
@@ -252,8 +226,8 @@
   }
 
   function setMouse(e) {
-    // $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
     var canvas = e.target;
+    // $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
     return [parseInt(e.clientX - canvas.offsetLeft + $(window).scrollLeft()), parseInt(e.clientY - canvas.offsetTop + $(window).scrollTop())];
   }
 

data/vendor/assets/javascripts/shapes.js

@@ -0,0 +1,46 @@
+// maybe refactor and include these in a react like module, would have to worry about browser support, https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file
+function drawShoeWithGradient(ctx, slider) {
+  ctx.moveTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
+  ctx.arc(slider.centerX - 0.5 * slider.radius, slider.centerY - 0.5 * slider.radius, slider.radius * 0.3, Math.PI, 0, true);
+  ctx.lineTo(slider.centerX + 0.6 * slider.radius, slider.centerY - 0.1 * slider.radius);
+  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);
+  ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY + 0.3 * slider.radius);
+  ctx.lineTo(slider.centerX - 0.8 * slider.radius, slider.centerY - 0.5 * slider.radius);
+  return 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);
+}
+
+function drawWaistWithGradient(ctx, slider) {
+  // 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);
+  ctx.arc(slider.centerX, slider.centerY - 0.8 * slider.radius, slider.radius, Math.PI * (2 / 3), Math.PI * (1 / 3), true);
+  // refactor, need to send to 0.85 * slider.radius instead of 0.9 * slider.radius since there is a sharp v bend if not
+  ctx.lineTo(slider.centerX + 0.2 * slider.radius, slider.centerY + 0.85 * slider.radius);
+  ctx.arc(slider.centerX + 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
+  ctx.lineTo(slider.centerX, slider.centerY + 0.4 * slider.radius);
+  ctx.arc(slider.centerX - 0.1 * slider.radius, slider.centerY + 0.9 * slider.radius, slider.radius * 0.1, 0, Math.PI, true);
+  // maybe refactor moveTo, need it to avoid sharp v bend at base of arc
+  ctx.moveTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.9 * slider.radius);
+  ctx.lineTo(slider.centerX - 0.5 * slider.radius, slider.centerY + 0.05 * slider.radius);
+  return 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);
+}
+
+function drawPersonWithGradient(ctx, slider, options = {}) {
+  ctx.arc(slider.centerX, slider.centerY - 0.6 * slider.radius, slider.radius * 0.2, 0, Math.PI * 2, false);
+  ctx.moveTo(slider.centerX + 0.08 * slider.radius, slider.centerY - 0.32 * slider.radius);
+  ctx.arc(slider.centerX, slider.centerY - 0.3 * slider.radius, slider.radius * 0.08, 0, Math.PI * 2, false);
+  ctx.moveTo(slider.centerX + 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
+  // maybe refactor and add arms, ctx.lineTo(slider.centerX + 0.25 * slider.radius, slider.centerY - 0.1 * slider.radius);
+  ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.1 * slider.radius);
+  ctx.arc(slider.centerX, slider.centerY + 0.2 * slider.radius, slider.radius * 0.1, -(Math.PI / 3), Math.PI / 3, false);
+  ctx.lineTo(slider.centerX + 0.05 * slider.radius, slider.centerY + 0.8 * slider.radius);
+  ctx.lineTo(slider.centerX - 0.2 * slider.radius, slider.centerY + 0.8 * slider.radius);
+  ctx.arc(slider.centerX - 0.15 * slider.radius, slider.centerY + 0.8 * slider.radius, slider.radius * 0.05, Math.PI, -(Math.PI / 2), false);
+  ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.75 * slider.radius);
+  if (options.style == "Weight") {
+    ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY + 0.15 * slider.radius);
+    ctx.arc(slider.centerX - 0.05 * slider.radius, slider.centerY, slider.radius * 0.15, Math.PI / 2, -(Math.PI / 2), false);
+    ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
+  } else {
+    ctx.lineTo(slider.centerX - 0.05 * slider.radius, slider.centerY - 0.25 * slider.radius);
+  }
+  return 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);
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: circular-sliders-rails
 version: !ruby/object:Gem::Version
-  version: 1.0.0
+  version: 1.1.0
 platform: ruby
 authors:
 - Sebastian Peterlin
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-07-17 00:00:00.000000000 Z
+date: 2018-08-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -88,6 +88,7 @@ files:
 - lib/circular/sliders/rails.rb
 - lib/circular/sliders/rails/version.rb
 - vendor/assets/javascripts/circular-sliders.js
+- vendor/assets/javascripts/shapes.js
 homepage: https://github.com/speterlin/circular-sliders-rails
 licenses:
 - MIT