circular-sliders-rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 31122b5abeb5f8ae74e2d4c0a92484c5b3d153fe
+  data.tar.gz: 5e33f54ce5d044aa9c345c15ca90d5e8c1aa6182
+SHA512:
+  metadata.gz: fa19cb7891ee504f3cf0e6892115848ccb1d6b8bed5326771d280545c10bc2a4a04f34f53005f27086d40ee9f73489a34bf88370faf1cb839e569edeae97fe5f
+  data.tar.gz: dc712f92d0229db9cf2795ba551ea32a5b4a8cace9949f9196bba670f707850c4bf7230af1ebe23efd55bc53e67a4a1b3e69449b47465b83eaecdbc53bf5c07d

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/.rspec

@@ -0,0 +1,2 @@
+--format documentation
+--color

data/.travis.yml

@@ -0,0 +1,5 @@
+sudo: false
+language: ruby
+rvm:
+  - 2.3.0
+before_install: gem install bundler -v 1.12.5

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,49 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of
+fostering an open and welcoming community, we pledge to respect all people who
+contribute through reporting issues, posting feature requests, updating
+documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free
+experience for everyone, regardless of level of experience, gender, gender
+identity and expression, sexual orientation, disability, personal appearance,
+body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic
+  addresses, without explicit permission
+* Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+By adopting this Code of Conduct, project maintainers commit themselves to
+fairly and consistently applying these principles to every aspect of managing
+this project. Project maintainers who do not follow or enforce the Code of
+Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting a project maintainer at speterlin@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. Maintainers are
+obligated to maintain confidentiality with regard to the reporter of an
+incident.
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.3.0, available at
+[http://contributor-covenant.org/version/1/3/0/][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/3/0/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in circular-sliders-rails.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2018 Sebastian Peterlin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,119 @@
+# Circular Sliders for Rails
+
+A Ruby on Rails gem which allows you to draw concentric responsive circular sliders with jQuery. Requires jQuery.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'circular-sliders-rails'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install circular-sliders-rails
+
+## Usage
+
+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="600" 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.
+
+    <script>
+      $('#sliders').sliders([
+        {
+          name: "Height",
+          color: "#FFDEAD",
+          centerX: 200,
+          centerY: 150,
+          minValue: 0,
+          maxValue: 250,
+          step: 0.5,
+          units: "cm",
+          radius: 60,
+          lineDashLength: 5,
+          lineDashSpacing: 5,
+          lineWidth: 5,
+          strokeColor: "#D3D3D3",
+        },
+        {
+          name: "Weight",
+          color: "#A52A2A",
+          minValue: 0,
+          maxValue: 150,
+          step: 5,
+          units: "kg",
+          lineDashLength: 5,
+          lineDashSpacing: 10,
+          lineWidth: 10,
+          strokeColor: "#D3D3D3",
+        },
+        {
+          name: "Waist size",
+          centerX: 400,
+          centerY: 150,
+          color: "#A0522D",
+          radius: 40,
+          minValue: 0,
+          maxValue: 50,
+          lineWidth: 10,
+          step: 2,
+          units: "cm",
+          ballColor: "#A0522D"
+        },
+        {
+          name: "Shoe size",
+          minValue: 10,
+          maxValue: 60,
+          step: 1
+        }
+      ]);
+    </script>
+
+Slider settings:
+
+| Name            | Type   | Default                  | Description                                                            |
+| --------------- | ------ | ------------------------ | ---------------------------------------------------------------------- |
+| name            | String | Slider n                 | Name your slider                                                       |
+| centerX         | Float  | Center of Canvas         | Specify the x value of where you'd like the center of the slider to be |
+| centerY         | Float  | Center of Canvas         | Specify the y value of where you'd like the center of the slider to be |
+| color           | String | "#0000FF"                | Specify the color of the arc fill                                      |
+| minValue        | Float  | 0                        | The minimum value of your slider                                       |
+| maxValue        | Float  | 0                        | The maximum value of your slider                                       |
+| step            | Float  | 10                       | The amount the value is incremented                                    |
+| units           | String | ""                       | The units your value is displayed in                                   |
+| radius          | Float  | 40 or (prevRadius +≈ 15) | The radius of your slider                                              |
+| lineDashLength  | Float  | 5                        | The arc length of each dash of your slider                             |
+| lineDashSpacing | Float  | 5                        | The arc spacing length of each dash of your slider                     |
+| lineWidth       | Float  | 5                        | The arc spacing length of each dash of your slider                     |
+| 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)                  |
+
+Retrieve values of individual sliders by calling:
+
+    $('#sliders').data('slider_name');
+
+<!-- ## Development -->
+
+<!-- To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org). -->
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/speterlin/circular-sliders-rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "circular/sliders/rails"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/circular-sliders-rails.gemspec

@@ -0,0 +1,35 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'circular/sliders/rails/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "circular-sliders-rails"
+  spec.version       = Circular::Sliders::Rails::VERSION
+  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.homepage      = "https://github.com/speterlin/circular-sliders-rails"
+  spec.license       = "MIT"
+
+  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
+  # to allow pushing to a single host or delete this section to allow pushing to any host.
+  if spec.respond_to?(:metadata)
+    spec.metadata['allowed_push_host'] = "https://rubygems.org"
+  else
+    raise "RubyGems 2.0 or newer is required to protect against public gem pushes."
+  end
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  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.rb

@@ -0,0 +1,10 @@
+require "circular/sliders/rails/version"
+
+module Circular
+  module Sliders
+    module Rails
+      class Engine < ::Rails::Engine
+      end
+    end
+  end
+end

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

@@ -0,0 +1,7 @@
+module Circular
+  module Sliders
+    module Rails
+      VERSION = "0.1.0"
+    end
+  end
+end

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

@@ -0,0 +1,205 @@
+(function ( $ ) {
+
+  var isMouseDown = false;
+  var selectedSlider = {};
+  var elem = null;
+  // if multiple canvases / containers would need to refactor
+  var canvas = null
+  var ctx = null;
+  // don't like having these as global variables
+  var sliders = [];
+  // [x,y]
+  var offset = [0,0];
+
+  $.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();
+    // maybe refactor and make centerX and centerY one variable [centerX, centerY]
+    var slidersCenterX = canvas.width / 2;
+    var slidersCenterY = canvas.height / 2;
+    // maybe refactor, add container option if there are multiple containers, could allow multiple containers / canvases in the future
+    var defaults = {
+      name: "Slider",
+      centerX: slidersCenterX,
+      centerY: slidersCenterY,
+      color: "#0000FF",
+      minValue: 0,
+      maxValue: 1000,
+      step: 10,
+      units: "",
+      radius: 40,
+      lineDashLength: 5,
+      lineDashSpacing: 5,
+      lineWidth: 5,
+      strokeColor: "#D3D3D3",
+      ballColor: "#000000",
+      textColor: "#000000"
+    }
+    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 + 10;
+      }
+      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);
+    canvas.addEventListener("mouseup", handleMouseUp);
+    canvas.addEventListener("mousemove", handleMouseMove);
+  }
+
+  function Slider(settings) {
+    this.name = settings.name;
+    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.radius = settings.radius;
+    this.lineDashLength = settings.lineDashLength;
+    this.lineDashSpacing = settings.lineDashSpacing;
+    this.lineWidth = settings.lineWidth;
+    this.strokeColor = settings.strokeColor;
+    this.textColor = settings.textColor;
+    this.value = settings.minValue;
+    // ball starts at top of circle which is - pi / 2
+    this.angle = -(Math.PI / 2);
+    // maybe refactor
+    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 is not editable option but could be
+    this.color = sliderSettings.ballColor;
+  }
+
+  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);
+    }
+  }
+
+  function drawSlider(slider) {
+    ctx.beginPath();
+    ctx.arc(slider.centerX, slider.centerY, slider.radius, 0, Math.PI*2, false);
+    ctx.lineWidth = slider.lineWidth;
+    ctx.strokeStyle = slider.strokeColor;
+    ctx.setLineDash([slider.lineDashLength, slider.lineDashSpacing]);
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  function drawBall(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 (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;
+    }
+    ctx.beginPath();
+    ctx.arc(slider.centerX, slider.centerY, slider.radius, -(Math.PI / 2), endAngle, false);
+    ctx.lineWidth = slider.lineWidth;
+    ctx.strokeStyle = slider.color;
+    ctx.setLineDash([0, 0]);
+    ctx.stroke();
+    ctx.closePath();
+  }
+
+  function drawText (slider, count) {
+    ctx.font = "12px Arial";
+    ctx.fillStyle = slider.textColor;
+    ctx.fillText(slider.name + ": " + slider.value + " " + slider.units, 10, 20*(count+1));
+  }
+
+  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 };
+    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.maxValue - slider.minValue) * ((slider.angle + (Math.PI/2)) / (2 * Math.PI) );
+    // refactor - bug if give step value below 0.5
+    var roundedValue = round(slider.value, slider.step);
+    elem.data(slider.name.split(" ").join("_"), roundedValue);
+    slider.value = roundedValue;
+    draw();
+  }
+
+  function handleMouseDown(e) {
+    e.preventDefault();
+    isMouseDown = true;
+    setOffset();
+    // $(window).scrollLeft() and $(window).scrollTop() to account for page scrolling
+    mouseX = parseInt(e.clientX - offset[0] + $(window).scrollLeft());
+    mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
+    for (var i = 0; i < sliders.length; i++) {
+      if (onBall(mouseX, mouseY, sliders[i])) {
+        selectedSlider = sliders[i];
+      }
+    }
+  }
+
+  function handleMouseUp(e) {
+    e.preventDefault();
+    isMouseDown = false;
+  }
+
+  function handleMouseMove(e) {
+    if (!isMouseDown) {
+      return;
+    }
+    e.preventDefault();
+    setOffset();
+    mouseX = parseInt(e.clientX - offset[0] + $(window).scrollLeft());
+    mouseY = parseInt(e.clientY - offset[1] + $(window).scrollTop());
+    moveBall(mouseX, mouseY, selectedSlider);
+  }
+
+  function round(x, target) {
+    return Math.ceil(x/target) * target;
+  }
+
+  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];
+  }
+
+}( jQuery ));

metadata

@@ -0,0 +1,116 @@
+--- !ruby/object:Gem::Specification
+name: circular-sliders-rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Sebastian Peterlin
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2018-04-28 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.12'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !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.
+email:
+- speterlin@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- ".rspec"
+- ".travis.yml"
+- CODE_OF_CONDUCT.md
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- circular-sliders-rails.gemspec
+- lib/circular/sliders/rails.rb
+- lib/circular/sliders/rails/version.rb
+- vendor/assets/javascripts/circular-sliders.js
+homepage: https://github.com/speterlin/circular-sliders-rails
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.5.1
+signing_key: 
+specification_version: 4
+summary: Draw concentric circles and responsively set each value.
+test_files: []