circular-sliders-rails 0.3.2 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc0348af8cd6fca195bbc41deb04d0b9fab5fbf13c7417b147c75985340fbbc8
-  data.tar.gz: 9c5a6ba1ca636350fce374f5244b4d0890811c67e58f2edec60d2e8981c6bb5a
+  metadata.gz: d1565e797eec8a884a00b48a1b5287cb2695898f00b571582179624905f555ca
+  data.tar.gz: 96899d7bfb7c5530f31daf05a6627699052d22916e5a57c524a8c344ac072cb4
 SHA512:
-  metadata.gz: 05153f655cc5b9669e5d867532e1b7c4026a396a336128386535512b762c7015b5687c2b881ca6488237befc205e2ae14b408c5a3142d9e3e4852872ef2d08db
-  data.tar.gz: d4421717e0e33cb982a62e663d4075d688ef670b2830f79964e0e51a80796cce6e37fac5fde14a1818329c34eebad70c00f8e2334cb6bdae9b4c5cce0a971561
+  metadata.gz: 01e94406f5fa5dff7d43756200f45c31862b815665afe1cb4c064dcbbfbb0effcb39eeea6907ee5edb8d8f03115cd18b1ade1e194eb46317d056418f8e0cad64
+  data.tar.gz: 151d1fa86aed10cfdcbcd15b61e5388192567cb211436e48d66049f8efffcf8301307b8cef7be7b00770b932acd57ae42f1def82a685bd26c09e9356c4fc9aa3

data/README.md

@@ -74,7 +74,8 @@ Use jQuery to add circular sliders to the canvas area. Pass slider settings as o
           centerX: 600,
           step: 5,
           units: "kg",
-          lineWidth: 10
+          lineWidth: 10,
+          gradientFill: false
         },
         {
           name: "Waist size",
@@ -123,12 +124,13 @@ Slider settings:
 | 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 + 5)  | The radius of your slider  |
+| 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                           |
 | 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 |
 
 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 = "0.3.2"
+      VERSION = "0.4.0"
     end
   end
 end

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

@@ -1,55 +1,51 @@
 (function ( $ ) {
+  'use strict';
 
+  // private global variables
   var isMouseDown = false;
   var selectedSlider = {};
   var elem = null;
   // if multiple canvases / containers would need to refactor
-  var canvas = null
+  var canvas = null;
   var ctx = null;
-  // don't like having these as global variables
   var sliders = [];
-  // [x,y]
-  var offset = [0,0];
+  var defaults = {
+    name: "Slider",
+    type: "Plain",
+    color: "#0000FF",
+    minValue: 0,
+    maxValue: 100,
+    step: 10,
+    units: "",
+    priceUnits: "",
+    radius: 40,
+    lineWidth: 5,
+    strokeColor: "#D3D3D3",
+    ballColor: "#000000",
+    textColor: "#000000",
+    gradientFill: true,
+    legend: true
+  }
 
   $.fn.sliders = function(slidersOptions) {
     elem = this;
     // maybe refactor, add .each in case there are multiple selected canvases
     canvas = this[0];
     ctx = canvas.getContext("2d");
-    setOffset();
-    var defaults = {
-      name: "Slider",
-      type: "Plain",
-      centerX: canvas.width / 2,
-      centerY: canvas.height / 2,
-      color: "#0000FF",
-      minValue: 0,
-      maxValue: 100,
-      step: 10,
-      units: "",
-      priceUnits: "",
-      radius: 40,
-      lineWidth: 5,
-      strokeColor: "#D3D3D3",
-      ballColor: "#000000",
-      textColor: "#000000",
-      gradientFill: true
-    }
+    [defaults.centerX, defaults.centerY] = [canvas.width / 2, canvas.height / 2];
     // maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
     for (var i = 0; i < slidersOptions.length; i++) {
       defaults.name = "Slider " + (i + 1);
-      // maybe refactor, want previous centerX, centerY, and lineWidth and 10 pixels spacing between sliders
       if (i > 0) {
         defaults.centerX = sliders[i-1].centerX;
         defaults.centerY = sliders[i-1].centerY;
-        defaults.radius = sliders[i-1].radius + sliders[i-1].lineWidth + 5;
+        defaults.radius = sliders[i-1].radius + sliders[i-1].lineWidth + defaults.lineWidth;
       }
-      var sliderSettings = $.extend( {}, defaults, slidersOptions[i] )
+      var sliderSettings = $.extend( {}, defaults, slidersOptions[i] );
       sliders.push(new Slider (sliderSettings));
       // maybe refactor, visible if have it like this: elem.attr('data-'+sliders[i].name.split(" ").join("_"), sliders[i].minValue);
       elem.data(sliders[i].name.split(" ").join("_"), sliders[i].minValue);
     }
-    // maybe refactor, first slider by default selected
     selectedSlider = sliders[0];
     draw();
     canvas.addEventListener("mousedown", handleMouseDown);
@@ -75,7 +71,8 @@
     this.value = settings.minValue;
     this.range = settings.maxValue - settings.minValue;
     this.gradientFill = settings.gradientFill;
-    // ball starts at top of circle which is - pi / 2
+    this.legend = settings.legend;
+    // ball starts at top of circle which is - π / 2
     this.angle = -(Math.PI / 2);
     this.ball = new Ball (settings);
   }
@@ -88,13 +85,13 @@
     this.color = sliderSettings.ballColor;
   }
 
-  function draw () {
+  function draw() {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     for (var i = 0; i < sliders.length; i++) {
       drawSlider(sliders[i]);
-      drawBall(sliders[i]);
       drawArc(sliders[i]);
-      drawText(sliders[i], i);
+      drawBall(sliders[i]);
+      if (sliders[i].legend) { drawText(sliders[i], i); }
     }
   }
 
@@ -107,7 +104,7 @@
     var sliderLineDashSpacing = (1 / 3) * (sliderCircumference / (slider.range / slider.step));
     ctx.setLineDash([sliderLineDashLength, sliderLineDashSpacing]);
     ctx.beginPath();
-    ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI*2, false);
+    ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI * 2, false);
     ctx.stroke();
     ctx.closePath();
     if (slider.type != "Plain") {
@@ -125,7 +122,7 @@
         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);
       } 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);
+        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);
@@ -136,9 +133,9 @@
         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);
       } 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.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.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);
@@ -150,9 +147,9 @@
         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);
       } 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.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.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);
@@ -179,22 +176,16 @@
 
   function drawBall(slider) {
     ctx.beginPath();
-    ctx.arc(slider.ball.x, slider.ball.y, slider.ball.radius, 0, Math.PI*2);
+    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 (slider) {
-    // refactor - bug, gap in arc visible if you have a large circular slider, arc comes to edge of ball, does not finish inside ball, maybe change name of angleOffset variable
-    var angleOffset = slider.ball.radius / slider.radius
-    if (((Math.PI / 2) + slider.angle) < angleOffset) {
-      var endAngle = slider.angle
-    } else {
-      var endAngle = slider.angle - angleOffset;
-    }
+  function drawArc(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), endAngle, false);
+    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
@@ -203,23 +194,23 @@
     ctx.closePath();
   }
 
-  function drawText (slider, count) {
+  function drawText(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));
+    ctx.fillText(slider.name + ": " + slider.priceUnits + slider.value + " " + slider.units, 10, 20 * (count + 1));
   }
 
-  function moveBall (mouseX, mouseY, slider) {
+  function moveBall(mouseX, mouseY, slider) {
     var dx = mouseX - slider.centerX;
     var dy = mouseY - slider.centerY;
     slider.angle = Math.atan(dy / dx);
-    if (dx < 0) { slider.angle += Math.PI };
+    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) );
+    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 = round(slider.value, slider.step);
+    var roundedValue = roundToStep(slider.value, slider.step);
     elem.data(slider.name.split(" ").join("_"), roundedValue);
     slider.value = roundedValue;
     draw();
@@ -228,7 +219,6 @@
   function handleMouseDown(e) {
     e.preventDefault();
     isMouseDown = true;
-    setOffset();
     var [mouseX, mouseY] = setMouse(e);
     for (var i = 0; i < sliders.length; i++) {
       if (onBall(mouseX, mouseY, sliders[i])) {
@@ -247,30 +237,24 @@
       return;
     }
     e.preventDefault();
-    setOffset();
     var [mouseX, mouseY] = setMouse(e);
     moveBall(mouseX, mouseY, selectedSlider);
   }
 
-  function round(x, target) {
-    return Math.ceil(x/target) * target;
+  function roundToStep(value, step) {
+    return Math.ceil(value / step) * step;
   }
 
-  function onBall (x, y, slider) {
+  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 setOffset() {
-    // refactor, need to call every time mouse is down or moves in case you have moved the canvas and offset positon is cached, could avoid having to call this if your project has no cache
-    offset = [canvas.offsetLeft, canvas.offsetTop];
-  }
-
   function setMouse(e) {
     // $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
-    return [parseInt(e.clientX - offset[0] + $(window).scrollLeft()), parseInt(e.clientY - offset[1] + $(window).scrollTop())];
+    return [parseInt(e.clientX - canvas.offsetLeft + $(window).scrollLeft()), parseInt(e.clientY - canvas.offsetTop + $(window).scrollTop())];
   }
 
 }( jQuery ));

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: circular-sliders-rails
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.4.0
 platform: ruby
 authors:
 - Sebastian Peterlin
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-07-02 00:00:00.000000000 Z
+date: 2018-07-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler