nivo-rails 0.0.1 → 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 13060e7dd2b7d307b03802890cae83f518fb99df
+  data.tar.gz: 719dabb72098692c0448a126cffb748110c0f9d2
+SHA512:
+  metadata.gz: 9cae638085d55133bdafac1b074f5494e2306642b74b35bf30a469d36bfda6d85bd90f68ffa8a1952c936f060d5e90fe095475c819d67e1c3cbbdba8e70c3b04
+  data.tar.gz: 531f7208310f905ba96c1f3f7bc42e7163d7d5c3d0837f3c81ed1a6bb31abf81e2e40768b8f1a4c99bd0583213e1175addf844f8ec6e5a2a34a642c92c99d9f3

data/.gitignore

@@ -15,3 +15,6 @@ spec/reports
 test/tmp
 test/version_tmp
 tmp
+
+# ignore idea files
+.idea/*

data/README.md

@@ -1,24 +1,80 @@
-# Nivo::Rails
+# Nivo Slider with Ruby on Rails
 
-TODO: Write a gem description
+Nivo Slider is one of the most popular JavaScript slider. This gem provides
+integration with Ruby on Rails.
 
 ## Installation
 
-Add this line to your application's Gemfile:
+First, add this to your Gemfile:
 
-    gem 'nivo-rails'
+~~~ruby
+gem 'nivo-rails'
+~~~
 
-And then execute:
+Then run the `bundle` command to install the gem.
 
-    $ bundle
+## Usage
 
-Or install it yourself as:
+This gem provides files required to setup correctly NivoSlider on your site.
+It requires a few lines of code to setup a slideshow. First, make sure to
+import the CSS file:
 
-    $ gem install nivo-rails
+~~~css
+/* Inside a normal application.css file
+ *= require nivo
+ */
+~~~
 
-## Usage
+~~~sass
+// Inside an application.scss or application.sass
+@import "nivo";
+~~~
+
+And then import the JavaScript file as well:
+
+~~~javascript
+//= require nivo
+~~~
+
+You can now easily add slideshows in your web pages. To avoid writing all the
+boilerplate needed by Nivo Slider, you can rely on the `nivo_slider` tag:
+
+~~~erb
+<%= nivo_slider id: "slider" do %>
+  <%= image_tag "foo.png", title: "A very nice photo!" %>
+  <%= image_tag "bar.png" %>
+<% end %>
+~~~
+
+This helper behaves like Action View's `content_tag` helper apart from the fact that
+it **doesn't** escape the provided content by default. It also sets the div's id
+to `"slider"` by default and adds a `nivoSlider` class as well.
 
-TODO: Write usage instructions here
+If you want to set a theme, you should wrap the `nivo_slider` call with a `div` element
+with the proper class:
+
+~~~erb
+<div class="theme-dark">
+  <%= nivo_slider id: "slider" do %>
+    <!-- ... ->
+  <% end %>
+</div>
+~~~
+
+Make sure then to initialize Nivo Slider on the given element:
+
+~~~javascript
+$(window).load(function() {
+  $('#slider').nivoSlider();
+});
+
+// Or if you are using Turbolinks
+$(document).on('page:change', function () {
+  $('#slider').nivoSlider();
+});
+~~~
+
+Enjoy!
 
 ## Contributing
 
@@ -27,3 +83,8 @@ TODO: Write usage instructions here
 3. Commit your changes (`git commit -am 'Add some feature'`)
 4. Push to the branch (`git push origin my-new-feature`)
 5. Create new Pull Request
+
+## License
+
+This project is released under the MIT license. Please see the `LICENSE` file for
+more information.

data/Rakefile

@@ -1 +1,9 @@
 require "bundler/gem_tasks"
+require "rake/testtask"
+
+Rake::TestTask.new("test") do |t|
+  t.libs << "test"
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = true
+  t.description = "Run the unit tests"
+end

data/app/helpers/nivo_helper.rb

@@ -1,15 +1,24 @@
 module NivoHelper
-  def nivo_slider(hash = {}, &block)
-    options = { :theme => :default, :id => "" }
-    options.merge!(hash)
-    klass = "slide-wrapper theme-#{options[:theme]}"
-    id = options[:id]
-
-    content_tag(:div, :class => klass) do
-      content_tag(:div, :id => id, :class => "nivoSlider #{options[:class]}") do
-        yield
-      end
+  # Convenient helper to create a div for your slider. The method's
+  # definition is similar to Action View's `content_tag` helper.
+  # It doesn't escape the given content by default though.
+  def nivo_slider(content_or_options = nil, options = {}, escape = false, &block)
+    # We are just keeping the two arguments to match Action View's
+    # definition of `content_tag` but the first argument isn't
+    # considered as the content if it's a Hash object.
+    if content_or_options.kind_of?(Hash)
+      options.merge!(content_or_options)
     end
 
+    options[:class] ? options[:class] << " nivoSlider" : options[:class] = "nivoSlider"
+    options[:id] ||= "slider"
+
+    if content_or_options.kind_of?(Hash) && !block_given?
+      content_tag_string(:div, "", options, escape)
+    elsif block_given?
+      content_tag_string(:div, capture(&block), options, escape)
+    else
+      content_tag_string(:div, content_or_options, options, escape)
+    end
   end
-end
+end

data/lib/nivo/rails/engine.rb

@@ -1,6 +1,12 @@
 module Nivo
   module Rails
     class Engine < ::Rails::Engine
+      initializer 'nivo-rails.assets.precompile' do |app|
+        app.config.assets.precompile += %w(default/arrows.png default/bullets.png default/loading.gif)
+        app.config.assets.precompile += %w(dark/arrows.png dark/bullets.png dark/loading.gif)
+        app.config.assets.precompile += %w(bar/arrows.png bar/bullets.png bar/loading.gif)
+        app.config.assets.precompile += %w(light/arrows.png light/bullets.png light/loading.gif)
+      end
     end
   end
 end

data/lib/nivo/version.rb

@@ -1,5 +1,5 @@
 module Nivo
   module Rails
-    VERSION = "0.0.1"
+    VERSION = "1.0.0"
   end
 end

data/nivo-rails.gemspec

@@ -10,7 +10,7 @@ Gem::Specification.new do |gem|
   gem.email         = ["robin.dupret@gmail.com"]
   gem.description   = %q{Nivo slider with Ruby on Rails}
   gem.summary       = %q{This gem allows you to use Nivo slider with Ruby on Rails}
-  gem.homepage      = ""
+  gem.homepage      = "https://github.com/robin850/nivo-rails"
 
   gem.files         = `git ls-files`.split($/)
   gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
@@ -18,4 +18,5 @@ Gem::Specification.new do |gem|
   gem.require_paths = ["lib"]
 
   gem.add_development_dependency("rake")
+  gem.add_development_dependency("actionview", ">= 4.2.0")
 end

data/test/nivo_slider_helper_test.rb

@@ -0,0 +1,30 @@
+require 'test_helper'
+
+class NivoSliderHelperTest < Minitest::Test
+  attr_accessor :output_buffer
+
+  include ActionView::Helpers::TagHelper
+  include NivoHelper
+
+  def test_with_content_tag_options
+    assert_match 'class="foo', nivo_slider(class: "foo")
+    assert_match 'id="bar"', nivo_slider(id: "bar")
+  end
+
+  def test_automatically_includes_nivoSlider_class
+    assert_match 'class="nivoSlider"', nivo_slider
+  end
+
+  def test_automatically_includes_slider_id
+    assert_match 'id="slider"', nivo_slider
+  end
+
+  def test_with_a_block
+    assert_match 'foo', nivo_slider { "foo" }
+  end
+
+  def test_with_options_and_block
+    expected = '<div id="foo" class="nivoSlider">Bar</div>'
+    assert_equal expected, nivo_slider(id: "foo") { "Bar" }
+  end
+end

data/test/test_helper.rb

@@ -0,0 +1,5 @@
+$:.unshift File.expand_path("../../app", __FILE__)
+
+require 'minitest/autorun'
+require 'action_view'
+require 'helpers/nivo_helper'

data/vendor/assets/stylesheets/nivo.scss

@@ -0,0 +1,583 @@
+/*
+ * jQuery Nivo Slider v3.2
+ * http://nivo.dev7studios.com
+ *
+ * Copyright 2012, Dev7studios
+ * Free to use and abuse under the MIT license.
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+
+/* The Nivo Slider styles */
+.nivoSlider {
+    position: relative;
+    width: 100%;
+    height: auto;
+    overflow: hidden;
+}
+
+.nivoSlider img {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    max-width: none;
+}
+
+.nivo-main-image {
+    display: block !important;
+    position: relative !important;
+    width: 100% !important;
+}
+
+/* If an image is wrapped in a link */
+.nivoSlider a.nivo-imageLink {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    z-index: 6;
+    display: none;
+    background: white;
+    filter: alpha(opacity=0);
+    opacity: 0;
+}
+
+/* The slices and boxes in the Slider */
+.nivo-slice {
+    display: block;
+    position: absolute;
+    z-index: 5;
+    height: 100%;
+    top: 0;
+}
+
+.nivo-box {
+    display: block;
+    position: absolute;
+    z-index: 5;
+    overflow: hidden;
+}
+
+.nivo-box img {
+    display: block;
+}
+
+/* Caption styles */
+.nivo-caption {
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    background: #000;
+    color: #fff;
+    width: 100%;
+    z-index: 8;
+    padding: 5px 10px;
+    opacity: 0.8;
+    overflow: hidden;
+    display: none;
+    -moz-opacity: 0.8;
+    filter: alpha(opacity=8);
+    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+    -moz-box-sizing: border-box; /* Firefox, other Gecko */
+    box-sizing: border-box; /* Opera/IE 8+ */
+}
+
+.nivo-caption p {
+    padding: 5px;
+    margin: 0;
+}
+
+.nivo-caption a {
+    display: inline !important;
+}
+
+.nivo-html-caption {
+    display: none;
+}
+
+/* Direction nav styles (e.g. Next & Prev) */
+.nivo-directionNav a {
+    position: absolute;
+    top: 45%;
+    z-index: 9;
+    cursor: pointer;
+}
+
+.nivo-prevNav {
+    left: 0px;
+}
+
+.nivo-nextNav {
+    right: 0px;
+}
+
+/* Control nav styles (e.g. 1,2,3...) */
+.nivo-controlNav {
+    text-align: center;
+    padding: 15px 0;
+}
+
+.nivo-controlNav a {
+    cursor: pointer;
+}
+
+.nivo-controlNav a.active {
+    font-weight: bold;
+}
+
+/* Themes */
+
+.theme-light.slider-wrapper {
+    background: #fff;
+    padding: 10px;
+}
+
+.theme-light .nivoSlider {
+    position: relative;
+    background: #fff image_url("light/loading.gif") no-repeat 50% 50%;
+    margin-bottom: 10px;
+    overflow: visible;
+}
+
+.theme-light .nivoSlider img {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: none;
+}
+
+.theme-light .nivoSlider a {
+    border: 0;
+    display: block;
+}
+
+.theme-light .nivo-controlNav {
+    text-align: left;
+    padding: 0;
+    position: relative;
+    z-index: 10;
+}
+
+.theme-light .nivo-controlNav a {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background: image_url("light/bullets.png") no-repeat;
+    text-indent: -9999px;
+    border: 0;
+    margin: 0 2px;
+}
+
+.theme-light .nivo-controlNav a.active {
+    background-position: 0 100%;
+}
+
+.theme-light .nivo-directionNav a {
+    display: block;
+    width: 30px;
+    height: 30px;
+    background: image_url("light/arrows.png") no-repeat;
+    text-indent: -9999px;
+    border: 0;
+    top: auto;
+    bottom: -36px;
+    z-index: 11;
+}
+
+.theme-light .nivo-directionNav a:hover {
+    background-color: #eee;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+}
+
+.theme-light a.nivo-nextNav {
+    background-position: 160% 50%;
+    right: 0px;
+}
+
+.theme-light a.nivo-prevNav {
+    background-position: -60% 50%;
+    left: auto;
+    right: 35px;
+}
+
+.theme-light .nivo-caption {
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+.theme-light .nivo-caption a {
+    color: #fff;
+    border-bottom: 1px dotted #fff;
+}
+
+.theme-light .nivo-caption a:hover {
+    color: #fff;
+}
+
+.theme-light .nivo-controlNav.nivo-thumbs-enabled {
+    width: 80%;
+}
+
+.theme-light .nivo-controlNav.nivo-thumbs-enabled a {
+    width: auto;
+    height: auto;
+    background: none;
+    margin-bottom: 5px;
+}
+
+.theme-light .nivo-controlNav.nivo-thumbs-enabled img {
+    display: block;
+    width: 120px;
+    height: auto;
+}
+
+.theme-default .nivoSlider {
+    position: relative;
+    background: #fff image_url("default/loading.gif") no-repeat 50% 50%;
+    margin-bottom: 10px;
+    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
+    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
+    box-shadow: 0px 1px 5px 0px #4a4a4a;
+}
+
+.theme-default .nivoSlider img {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: none;
+}
+
+.theme-default .nivoSlider a {
+    border: 0;
+    display: block;
+}
+
+.theme-default .nivo-controlNav {
+    text-align: center;
+    padding: 20px 0;
+}
+
+.theme-default .nivo-controlNav a {
+    display: inline-block;
+    width: 22px;
+    height: 22px;
+    background: image_url("default/bullets.png") no-repeat;
+    text-indent: -9999px;
+    border: 0;
+    margin: 0 2px;
+}
+
+.theme-default .nivo-controlNav a.active {
+    background-position: 0 -22px;
+}
+
+.theme-default .nivo-directionNav a {
+    display: block;
+    width: 30px;
+    height: 30px;
+    background: image_url("default/arrows.png") no-repeat;
+    text-indent: -9999px;
+    border: 0;
+    opacity: 0;
+    -webkit-transition: all 200ms ease-in-out;
+    -moz-transition: all 200ms ease-in-out;
+    -o-transition: all 200ms ease-in-out;
+    transition: all 200ms ease-in-out;
+}
+
+.theme-default:hover .nivo-directionNav a {
+    opacity: 1;
+}
+
+.theme-default a.nivo-nextNav {
+    background-position: -30px 0;
+    right: 15px;
+}
+
+.theme-default a.nivo-prevNav {
+    left: 15px;
+}
+
+.theme-default .nivo-caption {
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+.theme-default .nivo-caption a {
+    color: #fff;
+    border-bottom: 1px dotted #fff;
+}
+
+.theme-default .nivo-caption a:hover {
+    color: #fff;
+}
+
+.theme-default .nivo-controlNav.nivo-thumbs-enabled {
+    width: 100%;
+}
+
+.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
+    width: auto;
+    height: auto;
+    background: none;
+    margin-bottom: 5px;
+}
+
+.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
+    display: block;
+    width: 120px;
+    height: auto;
+}
+
+.theme-dark.slider-wrapper {
+    background: #222;
+    padding: 10px;
+}
+
+.theme-dark .nivoSlider {
+    position: relative;
+    background: #fff image_url("dark/loading.gif") no-repeat 50% 50%;
+    margin-bottom: 10px;
+    overflow: visible;
+}
+
+.theme-dark .nivoSlider img {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: none;
+}
+
+.theme-dark .nivoSlider a {
+    border: 0;
+    display: block;
+}
+
+.theme-dark .nivo-controlNav {
+    text-align: left;
+    padding: 0;
+    position: relative;
+    z-index: 10;
+}
+
+.theme-dark .nivo-controlNav a {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    background: image_url("dark/bullets.png") no-repeat 0 2px;
+    text-indent: -9999px;
+    border: 0;
+    margin: 0 2px;
+}
+
+.theme-dark .nivo-controlNav a.active {
+    background-position: 0 100%;
+}
+
+.theme-dark .nivo-directionNav a {
+    display: block;
+    width: 30px;
+    height: 30px;
+    background: image_url("dark/arrows.png") no-repeat;
+    text-indent: -9999px;
+    border: 0;
+    top: auto;
+    bottom: -36px;
+    z-index: 11;
+}
+
+.theme-dark .nivo-directionNav a:hover {
+    background-color: #333;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
+}
+
+.theme-dark a.nivo-nextNav {
+    background-position: -16px 50%;
+    right: 0px;
+}
+
+.theme-dark a.nivo-prevNav {
+    background-position: 11px 50%;
+    left: auto;
+    right: 35px;
+}
+
+.theme-dark .nivo-caption {
+    font-family: Helvetica, Arial, sans-serif;
+}
+
+.theme-dark .nivo-caption a {
+    color: #fff;
+    border-bottom: 1px dotted #fff;
+}
+
+.theme-dark .nivo-caption a:hover {
+    color: #fff;
+}
+
+.theme-dark .nivo-controlNav.nivo-thumbs-enabled {
+    width: 80%;
+}
+
+.theme-dark .nivo-controlNav.nivo-thumbs-enabled a {
+    width: auto;
+    height: auto;
+    background: none;
+    margin-bottom: 5px;
+}
+
+.theme-dark .nivo-controlNav.nivo-thumbs-enabled img {
+    display: block;
+    width: 120px;
+    height: auto;
+}
+
+.theme-bar.slider-wrapper {
+    position: relative;
+    border: 1px solid #333;
+    overflow: hidden;
+}
+
+.theme-bar .nivoSlider {
+    position: relative;
+    background: #fff image_url("bar/loading.gif") no-repeat 50% 50%;
+}
+
+.theme-bar .nivoSlider img {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    display: none;
+}
+
+.theme-bar .nivoSlider a {
+    border: 0;
+    display: block;
+}
+
+.theme-bar .nivo-controlNav {
+    position: absolute;
+    left: 0;
+    bottom: -41px;
+    z-index: 10;
+    width: 100%;
+    height: 30px;
+    text-align: center;
+    padding: 5px 0;
+    border-top: 1px solid #333;
+    background: #333;
+    background: -moz-linear-gradient(top, #565656 0%, #333333 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #333333)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top, #565656 0%, #333333 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top, #565656 0%, #333333 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top, #565656 0%, #333333 100%); /* IE10+ */
+    background: linear-gradient(to bottom, #565656 0%, #333333 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#565656', endColorstr='#333333', GradientType=0); /* IE6-9 */
+    opacity: 0.5;
+    -webkit-transition: all 200ms ease-in-out;
+    -moz-transition: all 200ms ease-in-out;
+    -o-transition: all 200ms ease-in-out;
+    transition: all 200ms ease-in-out;
+}
+
+.theme-bar:hover .nivo-controlNav {
+    bottom: 0;
+    opacity: 1;
+}
+
+.theme-bar .nivo-controlNav a {
+    display: inline-block;
+    width: 22px;
+    height: 22px;
+    background: image_url("bar/bullets.png") no-repeat;
+    text-indent: -9999px;
+    border: 0;
+    margin: 5px 2px 0 2px;
+}
+
+.theme-bar .nivo-controlNav a.active {
+    background-position: 0 -22px;
+}
+
+.theme-bar .nivo-directionNav a {
+    display: block;
+    border: 0;
+    color: #fff;
+    text-transform: uppercase;
+    top: auto;
+    bottom: 10px;
+    z-index: 11;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    line-height: 20px;
+    opacity: 0.5;
+    -webkit-transition: all 200ms ease-in-out;
+    -moz-transition: all 200ms ease-in-out;
+    -o-transition: all 200ms ease-in-out;
+    transition: all 200ms ease-in-out;
+}
+
+.theme-bar a.nivo-nextNav {
+    right: -50px;
+}
+
+.theme-bar a.nivo-prevNav {
+    left: -50px;
+}
+
+.theme-bar:hover a.nivo-nextNav {
+    right: 15px;
+    opacity: 1;
+}
+
+.theme-bar:hover a.nivo-prevNav {
+    left: 15px;
+    opacity: 1;
+}
+
+.theme-bar .nivo-directionNav a:hover {
+    color: #ddd;
+}
+
+.theme-bar .nivo-caption {
+    font-family: Helvetica, Arial, sans-serif;
+    -webkit-transition: all 200ms ease-in-out;
+    -moz-transition: all 200ms ease-in-out;
+    -o-transition: all 200ms ease-in-out;
+    transition: all 200ms ease-in-out;
+}
+
+.theme-bar:hover .nivo-caption {
+    bottom: 41px;
+}
+
+.theme-bar .nivo-caption a {
+    color: #fff;
+    border-bottom: 1px dotted #fff;
+}
+
+.theme-bar .nivo-caption a:hover {
+    color: #fff;
+}
+
+.theme-bar .nivo-controlNav.nivo-thumbs-enabled {
+    width: 100%;
+}
+
+.theme-bar .nivo-controlNav.nivo-thumbs-enabled a {
+    width: auto;
+    height: auto;
+    background: none;
+    margin-bottom: 5px;
+}
+
+.theme-bar .nivo-controlNav.nivo-thumbs-enabled img {
+    display: block;
+    width: 120px;
+    height: auto;
+}