countdown

Adds a visible countdown to your views, which counts down by supplied steps via JavaScript.

Installation

Add this line to your application's Gemfile:

gem 'countdown'

And then execute:

$ bundle

Or install it yourself as:

$ gem install countdown

Rails 3.1 or greater (with asset pipeline enabled)

Add the countdown javascript file to app/assets/javascripts/application.js:

//= require countdown

Rails 3.0 (or greater with asset pipeline disabled)

Run the generator:

rails generate countdown:install

Running the generator will copy 'countdown.js' over to the public\javascripts directory. Be sure to add countdown.js to your layout file:

<%= javascript_include_tag 'countdown' %>

Usage

 <%= countdown Time.now + 28.hours %>

results in a countdown like this:

1d03h59m59s

It is updated every second and the generated html looks like this:

<div class="countdown">
  <span class="days day_001">1</span>
  <span class="day-separator">d</span>
  <span class="hours hour_03">03</span>
  <span class="hour-separator">h</span>
  <span class="minutes minute_59">59</span>
  <span class="minute-separator">m</span>
  <span class="seconds second_59">59</span>
  <span class="minute-separator">s</span>
</div>

Options

####:step

Define how often the counter should be updated. Possible steps are:

:milliseconds, :seconds, :minutes, :hours, :days

Default is

:seconds

####:units

Define which time units should be displayed and how they should be ordered.

Available keys are:

:years, :months, :weeks, :days, :hours, :minutes, :seconds, :milliseconds

Default is

[:days, :hours, :minutes, :seconds]

####:separators

Define how different time units are separated from each other.

Available keys are:

:years, :months, :weeks, :days, :hours, :minutes, :seconds, :milliseconds

Default is

{ years: 'Y', months: 'M', weeks: 'w' days: 'd', hours: 'h', minutes: 'm', seconds: 's', milliseconds: 'ms' }

You can singularize separators by supplying a hash e.g

days: {value: 'days', singular: 'day'}

By default separators are displayed after the corresponding time unit. To display them before to the units use this option:

seconds: {value: 'seconds:', align: :before}

results in this:

seconds:1

####:leading_zeroes

Set to false to remove leading zeroes (e.g 08:00:00 => 8:00:00)

Defaults to

true

.

Countup

For a reverse countdown starting at 00:00:00 use the countup method using the same options:

 <%= countup 1.hour, step: :seconds %>

TODO:

• Everything
• Note to me: How to define a callback, which happens after a complete countdown/-up?

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
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