rails_responsive_rater 0.0.1

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

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

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2013 swalke16
+
+MIT License
+
+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,106 @@
+# Rails Responsive Rater
+
+A simple client-side rating system packaged up as a gem for Rails projects.
+
+This project was created because I was not happy with any of the existing rating plugins
+I found for Rails. Mainly because they all relied on images (usually stars) for the rating
+display. I think a better approach is to make use of unicode symbols and CSS so that the
+rating display can easily be made responsive without the associated hassles of using images.
+
+### What It Does
+
+  * Provides a responsive display of a rating (default stars) that is easily styleable.
+  * Provides a client-side API for interacting with the rating.
+  * Provides a Rails view helper for easily creating the client-side rating display.
+
+### What It Does *NOT* Do
+
+  * Touch your Rails models, controllers, routes, etc... in any way.
+  * Interact with your Rails app via AJAX in any way.
+  * Work in older browsers...?  This has only been tested in newer browsers. If you want it to work in older browsers feel free to fork and submit a pull request.
+
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'rails_responsive_rater'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install rails_responsive_rater
+
+
+Once the gem has been installed you can attempt to have it add the necessary require statements to your application.js and application.css for you:
+
+    $ rails generate rails_responsive_rater:install
+
+If the generator does not work then manually require the JS and CSS assets in your manifest files by:
+
+    //= require jquery.responsive-rater
+
+    *= require jquery.responsive-rater
+
+## Usage
+
+In your view you can use the view helper to easily create a rater with the default options:
+
+    <%= responsive_rater_tag() %>
+
+### Options
+
+The helper can take a hash of options to override the defaults and customize the behavior:
+
+  * field     - (null) a jQuery selector that identifies a text, select, or number HTML form element that will be used to get the initial rating value from. The value will be kept in sync with the displayed rating as the user changes it.
+  * min       - (0) minimum rating value.
+  * max       - (5) maximum rating value, also corresponds to how many rating items to display.
+  * readonly  - (false) control whether the user can change the displayed rating.
+  * value     - (min) the value of the rating to start with.
+  * content   - (&#9733;) the content to use for the rating display. This can be any valid HTML. Let your imagination go wild!
+
+### Client-side API
+
+This is written as a jQuery plugin and its API functions as other jQuery plugins do.
+
+    // construct a new rater inside a container, and provide some options
+    // available options are the same described above for the view helper, passed as an object literal
+    $(".rating-container").responsiveRater(options)
+
+    // get / set the value of the rater
+    $(".rating-container").responsiveRater("value")
+    $(".rating-container").responsiveRater("value", newValue)
+
+    // get / set readonly mode
+    $(".rating-container").responsiveRater("readonly")
+    $(".rating-container").responsiveRater("readonly", newValue)
+
+    // listen to an event when the rating changes
+    $(".rating-container").on("rated", function(value){
+      // do something with new value here
+    });
+
+    // listen to an event when the rating is reset
+    // reset occurs when a user clicks the highest previously rated value, e.g. clicking the 3rd star after giving a rating of 3
+    $(".rating-container").on("reset", function(value){
+      // do something with new value here
+    });
+
+### Example Page
+  See the <a href="http://swalke16.github.io/rails_responsive_rater" target="_blank">example page</a> to see what the rater looks and functions like.
+
+## Credits
+  [Derek Briggs](https://github.com/derekbriggs) - for the idea to go the responsive route in the first place, making the styles work, creating an example page, and generally being awesome.
+
+  [rails-rateit](https://github.com/ouvrages/rails-rateit) - for the initial idea and some code for working around edge cases.
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Added some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Create new Pull Request

data/Rakefile

@@ -0,0 +1,2 @@
+#!/usr/bin/env rake
+require "bundler/gem_tasks"

data/lib/generators/rails_responsive_rater/install/install_generator.rb

@@ -0,0 +1,26 @@
+require 'rails'
+
+module RailsResponsiveRater
+  module Generators
+    class InstallGenerator < ::Rails::Generators::Base
+
+      desc "This generator installs the Rails Responsive Rater plugin"
+
+      def inject_javascript
+        begin
+          inject_into_file "app/assets/javascripts/application.js", "//= require jquery.responsive-rater\n", :after => "//= require jquery\n"
+        rescue
+          puts "Could not automatically add jquery.responsive-rater script require into application.js! Please manually\n\n //= require jquery.responsive-rater"
+        end
+      end
+
+      def inject_stylesheet
+        begin
+          inject_into_file "app/assets/stylesheets/application.css", "*= require jquery.responsive-rater\n", :after => "/*\n"
+        rescue
+          puts "Could not automatically add jquery.responsive-rater stylesheet require into application.css! Please manually\n\n *= require jquery.responsive-rater"
+        end
+      end
+    end
+  end
+end

data/lib/rails_responsive_rater/version.rb

@@ -0,0 +1,3 @@
+module RailsResponsiveRater
+  VERSION = "0.0.1"
+end

data/lib/rails_responsive_rater/view_helpers/action_view.rb

@@ -0,0 +1,14 @@
+module RailsResponsiveRater
+  module ViewHelpers
+    module ActionView
+      def responsive_rater_tag(options = {})
+        tag_options = {:class => "responsive-rater"}
+        options.each do |name, value|
+          tag_options["data-rater-#{name}"] = value
+        end
+
+        content_tag(:div, "", tag_options)
+      end
+    end
+  end
+end

data/lib/rails_responsive_rater.rb

@@ -0,0 +1,18 @@
+require "rails_responsive_rater/version"
+
+module RailsResponsiveRater
+  module Rails
+    class Engine < ::Rails::Engine
+    end
+  end
+
+  class Railtie < ::Rails::Railtie
+    initializer "rails_responsive_rater.action_view" do |app|
+      ActiveSupport.on_load :action_view do
+        require 'rails_responsive_rater/view_helpers/action_view'
+        include RailsResponsiveRater::ViewHelpers::ActionView
+      end
+    end
+  end
+end
+

data/rails_responsive_rater.gemspec

@@ -0,0 +1,17 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/rails_responsive_rater/version', __FILE__)
+
+Gem::Specification.new do |gem|
+  gem.authors       = ["Scott Walker", "Derek Briggs"]
+  gem.email         = ["swalke16@gmail.com", "derek.briggs@me.com"]
+  gem.description   = %q{This project was created because I was not happy with any of the existing rating plugins I found for Rails. Mainly because they all relied on images (usually stars) for the rating display. I think a better approach is to make use of unicode symbols and CSS so that the rating display can easily be made responsive without the associated hassles of using images.}
+  gem.summary       = %q{A simple, responsive, client-side rating system Rails.}
+  gem.homepage      = "https://github.com/swalke16/rails_responsive_rater"
+
+  gem.files         = `git ls-files`.split($\)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.name          = "rails_responsive_rater"
+  gem.require_paths = ["lib"]
+  gem.version       = RailsResponsiveRater::VERSION
+end

data/vendor/assets/javascripts/jquery.responsive-rater.js

@@ -0,0 +1,152 @@
+(function($) {
+
+  var methods = {
+    init : function(options) {
+      options = $.extend({}, $.fn.responsiveRater.defaults, options);
+
+      var $item = $(this);
+
+      if (!$item.data('rater-init')) {
+
+        if (!$item.hasClass('responsive-rater')) $item.addClass('responsive-rater');
+
+        //get our values, either from the data-* html5 attribute or from the options.
+        $item.data('rater-min', $item.data('rater-min') || options.min)
+        $item.data('rater-max', $item.data('rater-max') || options.max)
+        $item.data('rater-readonly', $item.data('rater-readonly') !== undefined ? $item.data("rater-readonly") : options.readonly)
+        $item.data('rater-field', $item.data('rater-field') || options.field)
+        $item.data('rater-value', $item.data('rater-value') || options.min)
+        $item.data('rater-content', $item.data('rater-content') || options.content)
+
+
+        var field = $item.data("rater-field");
+        if (field) {
+          field = $(field);
+          $item.data('rater-value', field.hide().val());
+
+          if (field[0].nodeName == 'INPUT') {
+            if (field[0].type == 'range' || field[0].type == 'text') { //in browsers not support the range type, it defaults to text
+
+              $item.data('rater-min', parseInt(field.attr('min')) || $item.data('rater-min')); //if we would have done fld[0].min it wouldn't have worked in browsers not supporting the range type.
+              $item.data('rater-max', parseInt(field.attr('max')) || $item.data('rater-max'));
+            }
+          }
+          if (field[0].nodeName == 'SELECT' && field[0].options.length > 1) {
+            $item.data('rater-min', Number(field[0].options[0].value));
+            $item.data('rater-max', Number(field[0].options[field[0].length - 1].value));
+          }
+        }
+
+        //Create the necessary tags.
+        for(var i=0; i<$item.data('rater-max'); i++){
+          //TODO: font size needs to scale with # of stars
+          $item.append('<span class="rating" style="width: ' + (100 / $item.data("rater-max")) + '%;">' + $item.data("rater-content") + '</span>');
+        }
+
+        $item.data('rater-init', true);
+      }
+
+      //set the value if we have it.
+      if ($item.data('rater-value')) {
+        var score = $item.data('rater-value');
+        $item.find('.rating:lt(' + score + ')').addClass("rated");
+      }
+
+      methods.bindEvents.call(this);
+    },
+
+    bindEvents : function() {
+      var $item = $(this);
+
+      if (!$item.data('rater-readonly')) {
+
+        if (!$item.data('rater-bound')) {
+          $item.on("mouseenter mouseleave", ".rating", function(){
+            $(this).toggleClass('hover').prevAll().toggleClass('hover');
+          });
+
+          $item.on("click", ".rating", function(e) {
+            e.preventDefault();
+            var newValue, event;
+
+            if( $(this).hasClass('rated') && $(this).nextAll(".rated").length === 0 ){
+              // reseting the value
+              newValue = $item.data('rater-min');
+              event = "reset";
+            }
+            else {
+              // setting a new value
+              newValue = $item.children().index(this) + 1;
+              event = "rated";
+            }
+
+            methods.value.call($item, newValue);
+            $item.trigger(event, [newValue]);
+          });
+
+          $item.data("rater-bound", true);
+        }
+      }
+    },
+
+    value : function(value)    {
+      if( typeof(value) != "undefined") {
+        var $ratings = $(this).find(".rating").removeClass("rated");
+
+        if( value > $(this).data('rater-min') ) {
+          $ratings.eq(value - 1).addClass("rated").prevAll().addClass("rated");
+        }
+
+        if ($(this).data('rater-field')) {
+          $($(this).data('rater-field')).val(value);
+        }
+
+        $(this).data("rater-value", value);
+      }
+      else {
+        return $(this).data("rater-value");
+      }
+    },
+
+    readonly : function(value) {
+      if( typeof(value) != "undefined") {
+        $(this).data("rater-readonly", value);
+
+        if (value) {
+          $(this).unbind();
+          $(this).data("rater-bound", false);
+        }
+        else {
+          methods.bindEvents.call(this);
+        }
+      }
+      else {
+        return $(this).data("rater-readonly");
+      }
+    }
+  };
+
+  $.fn.responsiveRater = function(methodOrOptions){
+    if (this.length == 0) return this;
+
+    var args = arguments;
+
+    return this.each(function() {
+
+      if ( methods[methodOrOptions] ) {
+          return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( args, 1 ));
+      } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
+          return methods.init.apply( this, args );
+      } else {
+          $.error( 'Method ' +  method + ' does not exist on jQuery.responsiveRater' );
+      }
+
+    });
+  };
+
+  $.fn.responsiveRater.defaults = { content: "&#9733", min: 0, max: 5, readonly: false };
+
+  $(function () { $('div.responsive-rater').responsiveRater(); });
+
+}( jQuery ));
+

data/vendor/assets/stylesheets/jquery.responsive-rater.css.sass

@@ -0,0 +1,23 @@
+.responsive-rater
+  width: 100%
+  //text-align: justify
+  display: inline-block
+
+.rating
+  cursor: pointer
+  display: inline-block
+  text-align: center
+  font-size: 20px
+  color: rgba(#000,.4)
+  -webkit-transition: all .4s
+  -moz-transition: all .4s
+  -ms-transition: all .4s
+  -o-transition: all .4s
+  transition: all .4s
+
+  &.hover
+    color: rgba(#59950C,1)
+
+  &.rated
+    color: rgba(#59950C,1)
+

metadata

@@ -0,0 +1,64 @@
+--- !ruby/object:Gem::Specification
+name: rails_responsive_rater
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Scott Walker
+- Derek Briggs
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2013-07-10 00:00:00.000000000 Z
+dependencies: []
+description: This project was created because I was not happy with any of the existing
+  rating plugins I found for Rails. Mainly because they all relied on images (usually
+  stars) for the rating display. I think a better approach is to make use of unicode
+  symbols and CSS so that the rating display can easily be made responsive without
+  the associated hassles of using images.
+email:
+- swalke16@gmail.com
+- derek.briggs@me.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- lib/generators/rails_responsive_rater/install/install_generator.rb
+- lib/rails_responsive_rater.rb
+- lib/rails_responsive_rater/version.rb
+- lib/rails_responsive_rater/view_helpers/action_view.rb
+- rails_responsive_rater.gemspec
+- vendor/assets/javascripts/jquery.responsive-rater.js
+- vendor/assets/stylesheets/jquery.responsive-rater.css.sass
+homepage: https://github.com/swalke16/rails_responsive_rater
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: A simple, responsive, client-side rating system Rails.
+test_files: []
+has_rdoc: