timepiece 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f5ff771e5b9f2f3590f432accfda73b7218e9306
-  data.tar.gz: 2fdb9d4ae94cd98cb0a85d82bd1fd77615fcb18a
+  metadata.gz: 6c284c38dfc4fe85d07c377331bf1ea408ad94e4
+  data.tar.gz: dd2a1147e6282d3d33a37b935ffbad905e05103d
 SHA512:
-  metadata.gz: 66f10ab82cbdfa9fa60df227804df65495fe9617134da0c9e77d209f7407e99ef1f9d7bea0db4c3f1b4b5ecc9133a1f6b5f58ad7a8594bc0c79f5c2a2bae2fe6
-  data.tar.gz: d4ada3cf9a63d0087f5a5727af39636439e7d7dbba4163378e0d8b6440bb6aee87d08052f50bd575db797fc030d91eeae1b988cd18a265b3305320c96a64ad1b
+  metadata.gz: 1d56c89c9d07baa6ae0d766474b4b3d1219340ea9cc521087262b6ce9a990000757bc5958f40e67a0c9416853753a983cf59a547f3483acced6f1dd1c6865dce
+  data.tar.gz: 154f1bf10371014913e8f77af520307a5687361c2181cfce72d05687576f73e196369619b5f7795abe3b7eefb3204bfba3d5c5c33c3d89cd94316c8be6449f3f

data/README.rdoc

@@ -14,6 +14,14 @@ Timepiece is a Rails plugin providing a simple digital clock, accurate to your s
 
     //= require timepiece
 
+3. 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
@@ -56,6 +64,21 @@ You can apply your own styles to any part of the Timepiece clock. For instance,
 
     <%= 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.

data/app/assets/javascripts/timepiece.js

@@ -39,6 +39,13 @@ function show_analog(){
       }
     }
     $(".timepiece-analog").each(function(i, e){
+      if(analog_hours[i] >= 6 && analog_hours[i] < 18){
+        $(e).addClass('timepiece-analog-day')
+        $(e).removeClass('timepiece-analog-night')
+      }else{
+        $(e).addClass('timepiece-analog-night')
+        $(e).removeClass('timepiece-analog-day')
+      }
       $(e).html(function(){
         if(analog_hours[i] > 12){
           $(e).data('analog_hours', analog_hours[i] - 12)
@@ -52,15 +59,9 @@ function show_analog(){
         $(e).data('hours_angle', ($(e).data('analog_hours') * 30) + (analog_minutes[i] / 2));
         $(e).data('minutes_angle', analog_minutes[i] * 6);
         $(e).data('seconds_angle', analog_seconds[i] * 6);
-        $('.timepiece-hours-container', $(e)).css('-ms-transform','rotateZ(' + $(e).data('hours_angle') + 'deg)'); // angle set on each
-        $('.timepiece-hours-container', $(e)).css('-webkit-transform','rotateZ(' + $(e).data('hours_angle') + 'deg)');
-        $('.timepiece-hours-container', $(e)).css('transform','rotateZ(' + $(e).data('hours_angle') + 'deg)');
-        $('.timepiece-minutes-container', $(e)).css('-ms-transform','rotateZ(' + $(e).data('minutes_angle') + 'deg)');
-        $('.timepiece-minutes-container', $(e)).css('-webkit-transform','rotateZ(' + $(e).data('minutes_angle') + 'deg)');
-        $('.timepiece-minutes-container', $(e)).css('transform','rotateZ(' + $(e).data('minutes_angle') + 'deg)');
-        $('.timepiece-seconds-container', $(e)).css('-ms-transform','rotateZ(' + $(e).data('seconds_angle') + 'deg)');
-        $('.timepiece-seconds-container', $(e)).css('-webkit-transform','rotateZ(' + $(e).data('seconds_angle') + 'deg)');
-        $('.timepiece-seconds-container', $(e)).css('transform','rotateZ(' + $(e).data('seconds_angle') + 'deg)');
+        $('.timepiece-hours-container', $(e)).css({'-ms-transform':'rotateZ(' + $(e).data('hours_angle') + 'deg)','-webkit-transform':'rotateZ(' + $(e).data('hours_angle') + 'deg)','transform':'rotateZ(' + $(e).data('hours_angle') + 'deg)'}); // angle set on each
+        $('.timepiece-minutes-container', $(e)).css({'-ms-transform':'rotateZ(' + $(e).data('minutes_angle') + 'deg)','-webkit-transform':'rotateZ(' + $(e).data('minutes_angle') + 'deg)','transform':'rotateZ(' + $(e).data('minutes_angle') + 'deg)'});
+        $('.timepiece-seconds-container', $(e)).css({'-ms-transform':'rotateZ(' + $(e).data('seconds_angle') + 'deg)','-webkit-transform':'rotateZ(' + $(e).data('seconds_angle') + 'deg)','transform':'rotateZ(' + $(e).data('seconds_angle') + 'deg)'});
       })
     })
   }, 1000)

data/app/assets/stylesheets/{timepiece.css.scss → timepiece.css}

@@ -85,4 +85,27 @@
 .timepiece-seconds-container {
   -webkit-animation: rotate 60s infinite steps(60);
 }
-*/
+*/
+
+.timepiece-analog-day{
+  //border-color:#222;
+  background-color:#eee;
+}
+.timepiece-analog-day:after, .timepiece-analog-day .timepiece-analog-seconds {
+  background: #d00;
+}
+.timepiece-analog-day .timepiece-analog-hours, .timepiece-analog-day .timepiece-analog-minutes {
+  background: #333;
+}
+
+
+.timepiece-analog-night{
+  //border-color:#222;
+  background-color:#333;
+}
+.timepiece-analog-night:after, .timepiece-analog-night .timepiece-analog-seconds {
+  background: #d00;
+}
+.timepiece-analog-night .timepiece-analog-hours, .timepiece-analog-night .timepiece-analog-minutes {
+  background: #eee;
+}

data/app/helpers/timepiece_helper.rb

@@ -42,16 +42,21 @@ module TimepieceHelper
 
   def analog(location = 'UTC', id: '', size: '10em')
     Time.zone = location
-    hours = Time.now.in_time_zone.strftime('%I')
+    hours = Time.now.in_time_zone.strftime('%H')
     minutes = Time.now.in_time_zone.strftime('%M')
     seconds = Time.now.in_time_zone.strftime('%S')
+    if hours.to_i >= 6 && hours.to_i < 18
+      time_of_day_class = 'timepiece-analog-day'
+    else
+      time_of_day_class = 'timepiece-analog-night'
+    end
     hours_angle = (hours.to_i * 30) + (minutes.to_i / 2)
     minutes_angle = minutes.to_i * 6
     seconds_angle = seconds.to_i * 6
     time = "<div class='timepiece-hours-container' style='-ms-transform:rotateZ(#{hours_angle}deg);-webkit-transform:rotateZ(#{hours_angle}deg);transform:rotateZ(#{hours_angle}deg);'><div class='timepiece-analog-hours'></div></div>"\
            "<div class='timepiece-minutes-container' style='-ms-transform:rotateZ(#{minutes_angle}deg);-webkit-transform:rotateZ(#{minutes_angle}deg);transform:rotateZ(#{minutes_angle}deg);'><div class='timepiece-analog-minutes'></div></div>"\
            "<div class='timepiece-seconds-container' style='-ms-transform:rotateZ(#{seconds_angle}deg);-webkit-transform:rotateZ(#{seconds_angle}deg);transform:rotateZ(#{seconds_angle}deg);'><div class='timepiece-analog-seconds'></div></div>"
-    content_tag(:div, time.html_safe, class: 'timepiece-analog', 'data-timezone' => location, 'id' => (id unless id.blank?), 'style' => 'width:' + size + ';padding-bottom:' + size + ';')
+    content_tag(:div, time.html_safe, class: 'timepiece-analog ' + time_of_day_class, 'data-timezone' => location, 'id' => (id unless id.blank?), 'style' => 'width:' + size + ';padding-bottom:' + size + ';')
   end
 
   def timer(time_since = Time.now, id: '')

data/lib/timepiece/version.rb

@@ -1,3 +1,3 @@
 module Timepiece
-  VERSION = "0.2.1"
+  VERSION = "0.2.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: timepiece
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Thom Bruce
@@ -36,7 +36,7 @@ files:
 - README.rdoc
 - Rakefile
 - app/assets/javascripts/timepiece.js
-- app/assets/stylesheets/timepiece.css.scss
+- app/assets/stylesheets/timepiece.css
 - app/controllers/timepiece_controller.rb
 - app/helpers/timepiece_helper.rb
 - config/routes.rb