Project

timepiece

0.01
Repository is archived
No commit activity in last 3 years
No release in over 3 years
There's a lot of open issues
Timepiece provides an accurate digital clock to your Rails applications, refreshed by a jQuery script.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Runtime

>= 3.0.0
 Project Readme

Gem Version

Timepiece

Timepiece is a Rails plugin providing a simple digital clock, accurate to your server's time and maintained by jQuery.

Installation

  1. Add Timepiece to your application's Gemfile
gem 'timepiece'
  1. Require timepiece.js in app/assets/javascripts/application.js
//= require timepiece
  1. If you want to use the new analog clock, you also need to require timepiece in your css
*= require 'timepiece'

or if you're using SCSS

@import 'timepiece';

Note: If you're using Turbolinks with your Rails project, you should also install jquery-turbolinks to ensure functionality is maintained between page loads.

Usage

  • Add a functional clock to your views

    <%= timepiece %>
  • Pass a timezone paramater (Defaults to 'UTC')

    <%= timepiece('London') %>
  • Show a 12 hour clock by specifying its type: explicitly

    <%= timepiece('London', type: '12') %>

12 Hour Clock Options

By default the 12 hour clock displays time without any leading character, in the format '1:23pm'. You can add either a zero, as present on the 24 hour clock, or a leading space character the size of a numerical digit - useful for keeping your clocks aligned. To achieve this, set the Timepiece's lead:

  • To add a leading zero to hour values less than ten

    <%= timepiece('London', type: '12', lead: '0') %>

    or

    <%= timepiece('London', type: '12', lead: 'zero') %>
  • To add a space character

    <%= timepiece('London', type: '12', lead: '_') %>

    or

    <%= timepiece('London', type: '12', lead: 'space') %>

You can apply your own styles to any part of the Timepiece clock. For instance, you can capitalize the AM/PM abbreviation by targeting the span with class 'timepiece-abbr'. By default, the abbreviations are displayed without punctuation. To add punctuation, you can specify it with the abbr_sep: option.

  • Add punctuation to am/pm abbreviation

    <%= timepiece('London', type: '12', abbr_sep: '.') %>

Analog

New to version 0.2.0+, you can now include analog clocks in your projects.

  • The helper takes the same timezone parameter as the digital version (defaults to 'UTC'):

    <%= analog('London') %>
  • To specify a certain size for the clock, use the size parameter (defaults to 10em):

    <%= analog('London', :size => '100px') %>

    Note that if you pass a percentage, the size will be set as a percentage of the containing div.

Timer

It is now also possible to make use of a basic timer. To start a count from Time.now, simply include timer in your Rails projects.

  • The helper also takes a time object as a parameter, for example:

    <%= timer(User.first.created_at) %>

Countdown

There is also a basic countdown implementation. To start a countdown to 2016, simply include countdown in your Rails projects.

  • The helper also takes a time object as a parameter, for example:

    <%= countdown(Time.new(2016, 3, 14)) %> <%# My birthday and, of course, Pi day %>