circular-sliders-rails 1.1.0 → 1.5.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3000aa1e741be8f5446ac688f5ab4061140854f4b17c236ee0dd8e59d429a823
-  data.tar.gz: 78910adf596adcf0d9dcc08360996899904182eecdbb31a3bdcc4fbe2e47da9a
+  metadata.gz: fd234f98547b315390249c7ef09874c4ea09c3d988fde25b5f185bb59fbb4525
+  data.tar.gz: 39535784adb7521b8be9c47d00d70d208ea3ad796bd61987e6fa193cef2bf13b
 SHA512:
-  metadata.gz: eea4757df78b3c3ce8f5c23a56ad34dbb65fb894c34a7f9982f82206058992e8949935247faeeadf88f9e0609d608c804feddf565ca7902abd63bc76291851ff
-  data.tar.gz: e4f7f82df671a0d0681c1e14cae41bb796b5073aa5d1e025fa0c052de0825db23b9b065911a22b8c076f36fe7eea4285daf7fe6fed8b2bd7eb8236be482aaf55
+  metadata.gz: c8de5094ead6c0b5f4ab070d0b4da155e2616a1f10b9c7dfe0bbf70e3edce640380bf51e67c090f9165b413f8a9492e8b7a6f56de22507e36ff41ed4592933c2
+  data.tar.gz: 6db569d5174ebb882a3dbcf92ffbed92022d1e71e5ba6944ddfa1bf2eb17981b02165d2e9bfa33017e97112eb968338d0cfe205d8c0e084a6d5230587a2cfc79

data/.gitignore

@@ -1,11 +1,4 @@
 /.bundle/
-/.yardoc
-/Gemfile.lock
-/_yardoc/
-/coverage/
-/doc/
 /pkg/
-/spec/reports/
 /tmp/
-spec.txt
 improvements.txt

data/README.md

@@ -1,8 +1,6 @@
-# Circular Sliders for Rails
+# Jquery Circular Sliders for Rails
 
-A Ruby on Rails gem which allows you to draw concentric responsive circular sliders with jQuery. Requires jQuery.
-
-![Circular sliders](../assets/circular-sliders-rails.gif?raw=true)
+Provides integration of [Jquery Circular Sliders](https://github.com/speterlin/jquery.circular-sliders) with Rails Asset Pipeline.
 
 ## Installation
 
@@ -24,118 +22,9 @@ Or install it yourself as:
 
 Include in your application.js file:
 
-    //= require circular-sliders
-
-Create a canvas element in the view where you would like the sliders to go:
-
-    <canvas id="sliders" width="1200" height="300" style="border:1px solid;"></canvas>
-
-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.
-
-    <script>
-      $('#sliders').sliders([
-        {
-          name: "Age",
-          centerX: 175,
-          minValue: 18,
-          maxValue: 66,
-          step: 1,
-          units: "years",
-          color: "#FF7F50",
-          legendColor: "#FF7F50"
-        },
-        {
-          name: "Daily activity",
-          units: "miles",
-          minValue: 0,
-          maxValue: 25,
-          step: 1,
-          color: "#FF7F50",
-          legendColor: "#FF7F50"
-        },
-        {
-          name: "Height",
-          color: "#FFDEAD",
-          type: "Height",
-          centerX: 375,
-          minValue: 0,
-          maxValue: 250,
-          step: 2,
-          units: "cm",
-          radius: 100
-        },
-        {
-          name: "Weight",
-          color: "#A52A2A",
-          type: "Weight",
-          minValue: 0,
-          maxValue: 150,
-          radius: 100,
-          centerX: 600,
-          step: 5,
-          units: "kg",
-          lineWidth: 10,
-          gradientFill: false
-        },
-        {
-          name: "Waist size",
-          color: "#A0522D",
-          type: "Waist",
-          centerX: 825,
-          radius: 100,
-          minValue: 0,
-          maxValue: 50,
-          lineWidth: 10,
-          step: 2,
-          units: "cm",
-          ballColor: "#A0522D"
-        },
-        {
-          name: "Shoe size",
-          type: "Shoe",
-          centerX: 1050,
-          radius: 100,
-          lineWidth: 10,
-          minValue: 10,
-          maxValue: 60,
-          step: 1,
-          legendColor: "#0000FF"
-        },
-        {
-          name: "Desired price",
-          priceUnits: "£",
-          legendColor: "#0000FF",
-          step: 5
-        }
-      ]);
-    </script>
-
-Slider settings:
-
-| Name            | Type    | Default                             | Description                                            |
-| --------------- | ------- | ----------------------------------- | ------------------------------------------------------ |
-| name            | String  | Slider n                            | Name your slider                                       |
-| type            | String  | Plain                               | Pick between various types for interesting graphics at the center of the slider: 'Height', 'Weight', 'Shoe', 'Waist', and more to come |
-| centerX         | Float   | Center of canvas or previous slider | Specify the x value for the center of the slider       |
-| centerY         | Float   | Center of canvas or previous slider | Specify the y value for the center of the slider       |
-| color           | String  | "#0000FF"                           | Specify the color of the arc fill                      |
-| minValue        | Float   | 0                                   | The minimum value of your slider                       |
-| maxValue        | Float   | 100                                 | The maximum value of your slider                       |
-| step            | Float   | 10                                  | The amount the value is incremented                    |
-| units           | String  | ""                                  | The units your value is displayed in                   |
-| priceUnits      | String  | ""                                  | Adds price ('$', '€', '£' ...) before value            |
-| radius          | Float   | 40 or (previous slider radius + previous slider lineWidth + default slider lineWidth)  | The radius of your slider  |
-| 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                           |
-| 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, 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:
-
-    $('#sliders').data('slider_name');
+    //= require jquery.circular-sliders
+
+For more options and style customization, please, see [Jquery Circular Sliders](https://github.com/speterlin/jquery.circular-sliders)
 
 <!-- ## Development -->
 

data/circular-sliders-rails.gemspec

@@ -9,8 +9,8 @@ Gem::Specification.new do |spec|
   spec.authors       = ["Sebastian Peterlin"]
   spec.email         = ["speterlin@gmail.com"]
 
-  spec.summary       = %q{Draw concentric circles and responsively set each value.}
-  spec.description   = %q{A Ruby on Rails gem which allows you to draw concentric responsive circular sliders with jQuery. Requires jQuery.}
+  spec.summary       = %q{Provides jQuery Circular Sliders for Rails Asset Pipeline.}
+  spec.description   = %q{Provides jQuery Circular Sliders for Rails Asset Pipeline.}
   spec.homepage      = "https://github.com/speterlin/circular-sliders-rails"
   spec.license       = "MIT"
 
@@ -27,9 +27,9 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]
 
+  spec.add_dependency "railties", ">= 3.2.0"
+
   spec.add_development_dependency "bundler", "~> 1.12"
   spec.add_development_dependency "rake", "~> 10.0"
   spec.add_development_dependency "rspec", "~> 3.0"
-
-  spec.add_dependency "rails", "~> 5.0"
 end

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

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

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

@@ -0,0 +1,307 @@
+/*
+ * JqueryCircularSliders.js
+ * Add concentric circles with jquery and responsively set each value.
+ * git+https://github.com/speterlin/jquery.circular-sliders.js.git
+ * v1.0.0
+ * MIT License
+ */
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery')) :
+  typeof define === 'function' && define.amd ? define(['jquery'], factory) :
+  (factory(global.$));
+}(this, (function ($) { 'use strict';
+
+  $ = $ && $.hasOwnProperty('default') ? $['default'] : $;
+
+  function renderShoeWithGradient(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 renderWaistWithGradient(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 renderPersonWithGradient(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);
+  }
+
+  function renderLegend(ctx, slider, sliderIndex, movingSliderBall) {
+    ctx.beginPath();
+    if (movingSliderBall) { ctx.font = `bold ${slider.legend.font}`; } else { ctx.font = slider.legend.font; }
+    ctx.fillStyle = slider.legend.color;
+    // 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 renderCanvas(canvas, movingBall = false) {
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const sliders = canvas.sliders;
+    sliders.forEach((slider, index) => {
+      slider.__render(ctx);
+      if (slider.legend.display) {
+        renderLegend(ctx, slider, index, movingBall && slider === canvas.selectedSlider);
+      }
+    });
+  }
+
+  let isMouseDown = false;
+
+  function roundToStep(value, step) {
+    return Math.round(value / step) * step;
+  }
+
+  function ballLocationForAngle(slider) {
+    return [slider.centerX + slider.radius * Math.cos(slider.angle), slider.centerY + slider.radius * Math.sin(slider.angle)];
+  }
+
+  function angleForValue(slider) {
+    return (2 * Math.PI * (slider.value - slider.minValue) / slider.range) - (Math.PI / 2);
+  }
+
+  function moveBall(mouseX, mouseY, canvas) {
+    const slider = canvas.selectedSlider;
+    const dx = mouseX - slider.centerX;
+    // if draw out in x-y coordinates correct way would be slider.centerY - mouseY, but because top of circle -π / 2, have to do negative of angle which is the same as doing below
+    const dy = mouseY - slider.centerY;
+    slider.angle = Math.atan(dy / dx);
+    // to cover other half of circle, Math.atan only calculates angles between -π/2 and π/2
+    if (dx < 0) { slider.angle += Math.PI; }
+    [slider.ball.x, slider.ball.y] = ballLocationForAngle(slider);
+    // add π / 2 because 0˚ (top of circle) starts at -π / 2, divide by 2π because this is 360˚ in radians, this is reverse of #angleForValue
+    const value = slider.minValue + slider.range * ((slider.angle + (Math.PI / 2)) / (2 * Math.PI));
+    // refactor - bug if give step value below 0.5
+    const roundedValue = roundToStep(value, slider.step);
+    slider.value = roundedValue;
+    renderCanvas(canvas, true);
+  }
+
+  function moveBallToStep(canvas) {
+    const slider = canvas.selectedSlider;
+    slider.angle = angleForValue(slider);
+    [slider.ball.x, slider.ball.y] = ballLocationForAngle(slider);
+    renderCanvas(canvas);
+  }
+
+  function setMouse(e) {
+    const canvas = e.target;
+    // $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
+    return [parseInt(e.clientX - canvas.offsetLeft + $(window).scrollLeft(), 10), parseInt(e.clientY - canvas.offsetTop + $(window).scrollTop(), 10)];
+  }
+
+  function onBall(x, y, slider) {
+    if (x > (slider.ball.x - slider.ball.radius) && x < (slider.ball.x + slider.ball.radius) && y > (slider.ball.y - slider.ball.radius) && y < (slider.ball.y + slider.ball.radius)) {
+      return true;
+    }
+    return false;
+  }
+
+  function handleMouseDown(e) {
+    e.preventDefault();
+    isMouseDown = true;
+    const [mouseX, mouseY] = setMouse(e);
+    const sliders = e.target.sliders;
+    sliders.forEach((slider) => {
+      if (onBall(mouseX, mouseY, slider)) {
+        e.target.selectedSlider = slider;
+      }
+    });
+  }
+
+  function handleMouseUp(e) {
+    e.preventDefault();
+    isMouseDown = false;
+    moveBallToStep(e.target);
+  }
+
+  function handleMouseMove(e) {
+    if (!isMouseDown) {
+      return;
+    }
+    e.preventDefault();
+    const [mouseX, mouseY] = setMouse(e);
+    moveBall(mouseX, mouseY, e.target);
+  }
+
+  class Ball {
+    constructor(slider, ballColor) {
+      [this.x, this.y] = ballLocationForAngle(slider);
+      this.radius = slider.lineWidth;
+      this.color = ballColor;
+    }
+  }
+
+  function renderSlider(ctx, slider) {
+    ctx.beginPath();
+    ctx.lineWidth = slider.lineWidth;
+    ctx.strokeStyle = slider.strokeColor;
+    ctx.setLineDash([slider.lineDashLength, slider.lineDashSpacing]);
+    ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI * 2, false);
+    ctx.stroke();
+    ctx.closePath();
+    if (slider.type !== 'Plain') {
+      ctx.beginPath();
+      ctx.setLineDash([10, 0]);
+      ctx.lineWidth = 5;
+      let myGradient = null;
+      if (slider.type === 'Shoe') {
+        myGradient = renderShoeWithGradient(ctx, slider);
+      } else if (slider.type === 'Waist') {
+        myGradient = renderWaistWithGradient(ctx, slider);
+      } else if (slider.type === 'Height') {
+        myGradient = renderPersonWithGradient(ctx, slider);
+      } else if (slider.type === 'Weight') {
+        myGradient = renderPersonWithGradient(ctx, slider, { style: 'Weight' });
+      }
+      if (slider.gradientFill) {
+        const scale = (slider.value - slider.minValue) / slider.range;
+        myGradient.addColorStop(0, slider.color);
+        myGradient.addColorStop(scale, '#ffffff');
+        ctx.fillStyle = myGradient;
+        ctx.fill();
+      }
+      ctx.stroke();
+      ctx.closePath();
+    }
+  }
+
+  function renderArc(ctx, slider) {
+    // add this if want arc to stop at edge of ball: let angleOffset = Math.atan(slider.ball.radius / slider.radius), then also need check for (π / 2) + slider.angle) < angleOffset) for when go past the 0˚ mark at top of circle, π / 2 + slider.angle since angle starts at -π / 2 at top of circle
+    ctx.beginPath();
+    ctx.arc(slider.centerX, slider.centerY, slider.radius, -(Math.PI / 2), slider.angle, false);
+    ctx.lineWidth = slider.lineWidth;
+    ctx.strokeStyle = slider.color;
+    // have to set lineDashLength to a number > 0 for arc to be completely full in browsers like Safari
+    ctx.setLineDash([10, 0]);
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  function renderBall(ctx, slider) {
+    ctx.beginPath();
+    ctx.arc(slider.ball.x, slider.ball.y, slider.ball.radius, 0, Math.PI * 2);
+    ctx.fillStyle = slider.ball.color;
+    ctx.fill();
+    ctx.closePath();
+  }
+
+  class CircularSlider {
+    constructor(settings) {
+      const slider = this;
+      Object.keys(settings).forEach((key) => {
+        slider[key] = settings[key];
+      });
+      // centerX, centerY, and radius should be set in defaults (in for loop) or options
+      this.value = this.value || this.minValue;
+      // calculated / created attributes
+      this.range = this.maxValue - this.minValue;
+      this.angle = angleForValue(this);
+      // maybe refactor, I like 2/3 and 1/3 for now
+      const arcSegment = 2 * Math.PI * this.radius / (this.range / this.step);
+      this.lineDashLength = (2 / 3) * arcSegment;
+      this.lineDashSpacing = (1 / 3) * arcSegment;
+      this.ball = new Ball(this, settings.ballColor);
+    }
+
+    __render(ctx) {
+      renderSlider(ctx, this);
+      renderArc(ctx, this);
+      renderBall(ctx, this);
+    }
+  }
+  // $.fn.sliders.CircularSlider = CircularSlider;
+
+  if (typeof $ === 'undefined') {
+    throw new Error('jQuery.CircularSliders requires jQuery');
+  }
+
+  $.fn.sliders = function (slidersOptions) {
+    this.each(function () {
+      if (!$(this).is('canvas')) { throw new Error('Circular Sliders must be called on a Canvas.'); }
+      const canvas = this;
+      const sliders = [];
+      const canvasDefaults = {};
+      [canvasDefaults.centerX, canvasDefaults.centerY, canvasDefaults.radius] = [canvas.width / 2, canvas.height / 2, Math.min(canvas.width, canvas.height) / 4];
+      slidersOptions.forEach((sliderOptions, index) => {
+        canvasDefaults.name = `Slider ${index + 1}`;
+        if (index > 0) {
+          [canvasDefaults.centerX, canvasDefaults.centerY] = [sliders[index - 1].centerX, sliders[index - 1].centerY];
+          canvasDefaults.radius = sliders[index - 1].radius + sliders[index - 1].lineWidth + $.fn.sliders.defaults.lineWidth;
+        }
+        const sliderDefaults = $.extend({}, $.fn.sliders.defaults, canvasDefaults);
+        // true for deep merge
+        const settings = $.extend(true, {}, sliderDefaults, sliderOptions);
+        sliders.push(new CircularSlider(settings));
+      });
+      // maybe look at https://stackoverflow.com/questions/10149963/adding-event-listener-cross-browser
+      canvas.addEventListener('mousedown', handleMouseDown);
+      canvas.addEventListener('mouseup', handleMouseUp);
+      canvas.addEventListener('mousemove', handleMouseMove);
+
+      [canvas.sliders, canvas.selectedSlider] = [sliders, sliders[0]];
+
+      renderCanvas(canvas);
+    });
+  };
+
+  // TODO: add configure(options) and config: config
+  $.fn.sliders.defaults = {
+    name: 'Slider',
+    type: 'Plain',
+    color: '#0000FF',
+    minValue: 0,
+    maxValue: 100,
+    step: 10,
+    units: '',
+    priceUnits: '',
+    // centerX, centerY, and radius set in Canvas because they are specific/modified to each canvas
+    lineWidth: 5,
+    strokeColor: '#D3D3D3',
+    ballColor: '#000000',
+    gradientFill: true,
+    legend: { display: true, font: '12px Arial', color: '#000000' },
+  };
+
+  $.fn.findSliderByName = function (name) {
+    if (!this.is('canvas')) { throw new Error('findSliderByName must be called on a Canvas.'); }
+    const canvas = this[0];
+    return canvas.sliders.filter(slider => slider.name === name)[0];
+  };
+
+})));

metadata

@@ -1,15 +1,29 @@
 --- !ruby/object:Gem::Specification
 name: circular-sliders-rails
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.5.0
 platform: ruby
 authors:
 - Sebastian Peterlin
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-08-05 00:00:00.000000000 Z
+date: 2018-08-28 00:00:00.000000000 Z
 dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 3.2.0
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -52,22 +66,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '3.0'
-- !ruby/object:Gem::Dependency
-  name: rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '5.0'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '5.0'
-description: A Ruby on Rails gem which allows you to draw concentric responsive circular
-  sliders with jQuery. Requires jQuery.
+description: Provides jQuery Circular Sliders for Rails Asset Pipeline.
 email:
 - speterlin@gmail.com
 executables: []
@@ -87,8 +86,7 @@ files:
 - circular-sliders-rails.gemspec
 - lib/circular/sliders/rails.rb
 - lib/circular/sliders/rails/version.rb
-- vendor/assets/javascripts/circular-sliders.js
-- vendor/assets/javascripts/shapes.js
+- vendor/assets/javascripts/jquery.circular-sliders.js
 homepage: https://github.com/speterlin/circular-sliders-rails
 licenses:
 - MIT
@@ -113,5 +111,5 @@ rubyforge_project:
 rubygems_version: 2.7.6
 signing_key: 
 specification_version: 4
-summary: Draw concentric circles and responsively set each value.
+summary: Provides jQuery Circular Sliders for Rails Asset Pipeline.
 test_files: []

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

@@ -1,234 +0,0 @@
-//= require shapes
-
-(function ( $ ) {
-  'use strict';
-
-  // private global variables
-  var isMouseDown = false;
-  var defaults = {
-    name: "Slider",
-    type: "Plain",
-    color: "#0000FF",
-    minValue: 0,
-    maxValue: 100,
-    step: 10,
-    units: "",
-    priceUnits: "",
-    // centerX, centerY, and radius set in $.fn.sliders() because they are specific/modified to each canvas
-    lineWidth: 5,
-    strokeColor: "#D3D3D3",
-    ballColor: "#000000",
-    gradientFill: true,
-    legend: true,
-    legendFont: "12px Arial",
-    legendColor: "#000000"
-  }
-
-  $.fn.sliders = function(slidersOptions) {
-    this.each(function() {
-      var canvas = this;
-      canvas.sliders = [];
-      [defaults.centerX, defaults.centerY, defaults.radius] = [canvas.width / 2, canvas.height / 2, 40];
-      // 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) {
-          defaults.centerX = canvas.sliders[i-1].centerX;
-          defaults.centerY = canvas.sliders[i-1].centerY;
-          defaults.radius = canvas.sliders[i-1].radius + canvas.sliders[i-1].lineWidth + defaults.lineWidth;
-        }
-        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].value);
-      }
-      canvas.selectedSlider = canvas.sliders[0];
-      draw(canvas);
-      canvas.addEventListener("mousedown", handleMouseDown);
-      canvas.addEventListener("mouseup", handleMouseUp);
-      canvas.addEventListener("mousemove", handleMouseMove);
-    })
-  }
-
-  function Slider(settings) {
-    this.name = settings.name;
-    this.type = settings.type;
-    this.centerX = settings.centerX;
-    this.centerY = settings.centerY;
-    this.color = settings.color;
-    this.minValue = settings.minValue;
-    this.maxValue = settings.maxValue;
-    this.step = settings.step;
-    this.units = settings.units;
-    this.priceUnits = settings.priceUnits;
-    this.radius = settings.radius;
-    this.lineWidth = settings.lineWidth;
-    this.strokeColor = settings.strokeColor;
-    this.value = 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);
-  }
-
-  function Ball(sliderSettings) {
-    this.x = sliderSettings.centerX;
-    // ball starts at top of circle
-    this.y = sliderSettings.centerY - sliderSettings.radius;
-    this.radius = sliderSettings.lineWidth;
-    this.color = sliderSettings.ballColor;
-  }
-
-  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);
-    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;
-    ctx.setLineDash([slider.lineDashLength, slider.lineDashSpacing]);
-    ctx.beginPath();
-    ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI * 2, false);
-    ctx.stroke();
-    ctx.closePath();
-    if (slider.type != "Plain") {
-      ctx.beginPath();
-      ctx.setLineDash([10, 0]);
-      ctx.lineWidth = 5;
-      var my_gradient = null;
-      if (slider.type == "Shoe") {
-        my_gradient = drawShoeWithGradient(ctx, slider);
-      } else if (slider.type == "Waist") {
-        my_gradient = drawWaistWithGradient(ctx, slider);
-      } else if (slider.type == "Height") {
-        my_gradient = drawPersonWithGradient(ctx, slider);
-      } else if (slider.type == "Weight") {
-        my_gradient = drawPersonWithGradient(ctx, slider, {style: "Weight"});
-      }
-      if (slider.gradientFill) {
-        var scale = (slider.value - slider.minValue) / slider.range;
-        my_gradient.addColorStop(0,slider.color);
-        my_gradient.addColorStop(scale,"#ffffff");
-        ctx.fillStyle = my_gradient;
-        ctx.fill();
-      }
-      ctx.stroke();
-      ctx.closePath();
-    }
-  }
-
-  function drawBall(ctx, slider) {
-    ctx.beginPath();
-    ctx.arc(slider.ball.x, slider.ball.y, slider.ball.radius, 0, Math.PI * 2);
-    ctx.fillStyle = slider.ball.color;
-    ctx.fill();
-    ctx.closePath();
-  }
-
-  function drawArc(ctx, slider) {
-    // add this if want arc to stop at edge of ball: var angleOffset = Math.atan(slider.ball.radius / slider.radius), then also need check for (π / 2) + slider.angle) < angleOffset) for when go past the 0˚ mark at top of circle, π / 2 + slider.angle since angle starts at -π / 2 at top of circle
-    ctx.beginPath();
-    ctx.arc(slider.centerX, slider.centerY, slider.radius, -(Math.PI / 2), slider.angle, false);
-    ctx.lineWidth = slider.lineWidth;
-    ctx.strokeStyle = slider.color;
-    // have to set lineDashLength to a number > 0 for arc to be completely full in browsers like Safari, set it arbitrarily to 10 here
-    ctx.setLineDash([10, 0]);
-    ctx.stroke();
-    ctx.closePath();
-  }
-
-  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) {
-    var slider = canvas.selectedSlider;
-    var dx = mouseX - slider.centerX;
-    var dy = mouseY - slider.centerY;
-    slider.angle = Math.atan(dy / dx);
-    if (dx < 0) { slider.angle += Math.PI; }
-    slider.ball.x = slider.centerX + slider.radius * Math.cos(slider.angle);
-    slider.ball.y = slider.centerY + slider.radius * Math.sin(slider.angle);
-    slider.value = slider.minValue + slider.range * ((slider.angle + (Math.PI / 2)) / (2 * Math.PI)); //add π / 2 because 0˚ starts at -π / 2, divide by 2π because this is 360˚ in radians
-    // refactor - bug if give step value below 0.5
-    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);
-  }
-
-  function handleMouseDown(e) {
-    e.preventDefault();
-    isMouseDown = true;
-    var [mouseX, mouseY] = setMouse(e);
-    var sliders = e.target.sliders;
-    for (var i = 0; i < sliders.length; i++) {
-      if (onBall(mouseX, mouseY, sliders[i])) {
-        e.target.selectedSlider = sliders[i];
-      }
-    }
-  }
-
-  function handleMouseUp(e) {
-    e.preventDefault();
-    isMouseDown = false;
-    moveBallToStep(e.target);
-  }
-
-  function handleMouseMove(e) {
-    if (!isMouseDown) {
-      return;
-    }
-    e.preventDefault();
-    var [mouseX, mouseY] = setMouse(e);
-    moveBall(mouseX, mouseY, e.target);
-  }
-
-  function roundToStep(value, step) {
-    return Math.ceil(value / step) * step;
-  }
-
-  function onBall(x, y, slider) {
-    if (x > (slider.ball.x - slider.ball.radius) && x < (slider.ball.x + slider.ball.radius) && y > (slider.ball.y - slider.ball.radius) && y < (slider.ball.y + slider.ball.radius)) {
-      return true;
-    }
-    return false;
-  }
-
-  function setMouse(e) {
-    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())];
-  }
-
-}( jQuery ));

data/vendor/assets/javascripts/shapes.js

@@ -1,46 +0,0 @@
-// 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);
-}