timepiece 0.1.15 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: c1e584988953124848cdb4cd36198545a6ee41ab
-  data.tar.gz: 3f0b0d776815b79cca35a3834340909bc790aec9
+  metadata.gz: 3dbd55596f758b5e9d673b9ffa962428812d609f
+  data.tar.gz: c09ffeb76ebdb0b1ebdc937297b9bae3392dde7b
 SHA512:
-  metadata.gz: a5b920ef03111091d44683e3a6cbd4b70b6a4b2e02836e8a03b7ffe1308d4b84daeb56515f478aafdab81eae65e22e5a7cbaba91fb8ddf03864d7e4e21f1cc3c
-  data.tar.gz: 24c852eed717ec68fbd3e146ba2c48b11e582b5f2b13e0e1b53561fa13d8189ad52e4760ade51f2e43f5ddb186f6c50f3b0aac5f0543303d7285dc683dca419c
+  metadata.gz: 56793193eb90f17b3242bd56f3f60425ae523016bf79fbcd500c4a43aa8fd9d168d67f2ce010ce878e3bea8c4f287c716b4efda8c71e969f1835f4804ecc464a
+  data.tar.gz: c744cf7a3de20788d3604cd76a3151895b1bc393fa99a7d48b0796932e1bc84f47bad5d34bae0faff8038580f184b385328325c0720ce3ceda753064ee5469b2

data/app/assets/javascripts/timepiece.js

@@ -1,3 +1,71 @@
+get_analog_hours = []
+get_analog_minutes = []
+get_analog_seconds = []
+
+function get_analog(){
+  var zones = []
+  $(".timepiece-analog").each(function(){ zones.push($(this).attr('data-timezone')) })
+  var timezones = { 'timezones' : zones }
+  $.ajax({ type: "POST", url: "/timepiece/clock.json", data: timezones, dataType: "json", cache: false }).success(function(time){
+    for(var i = 0; i < time.length; i++){
+      get_analog_hours.push(parseInt(time[i].hours,10))
+      get_analog_minutes.push(parseInt(time[i].minutes,10))
+      get_analog_seconds.push(parseInt(time[i].seconds,10))
+    }
+    analog_hours = get_analog_hours
+    analog_minutes = get_analog_minutes
+    analog_seconds = get_analog_seconds
+  });
+}
+
+function show_analog(){
+  analog = setInterval(function(){
+    analog_running = true;
+    for(i = 0; i < analog_hours.length; i++){
+      if (analog_seconds[i] < 59){
+        analog_seconds[i] += 1
+      } else {
+        analog_seconds[i] = 0
+        if (analog_minutes[i] < 59){
+          analog_minutes[i] += 1
+        } else {
+          analog_minutes[i] = 0
+          if (analog_hours[i] < 23){
+            analog_hours[i] += 1
+          } else {
+            analog_hours[i] = 0
+          }
+        }
+      }
+    }
+    $(".timepiece-analog").each(function(i, e){
+      $(e).html(function(){
+        if(analog_hours[i] > 12){
+          $(e).data('analog_hours', analog_hours[i] - 12)
+        }else if(analog_hours[i] == 0){
+          $(e).data('analog_hours', 12)
+        }else if(analog_hours[i] == 12){
+          $(e).data('analog_hours', 12)
+        }else if(analog_hours[i] < 12){
+          $(e).data('analog_hours', analog_hours[i])
+        }
+        $(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)');
+      })
+    })
+  }, 1000)
+}
+
 get_hours = []
 get_minutes = []
 get_seconds = []
@@ -231,6 +299,13 @@ function show_countdown(){
   }, 1000)
 }
 
+function reset_analog(){
+  get_analog_hours = []
+  get_analog_minutes = []
+  get_analog_seconds = []
+  get_analog()
+}
+
 function reset_time(){
 	get_hours = []
 	get_minutes = []
@@ -258,6 +333,10 @@ function reset_countdown(){
 
 $(document).ready(function(){
   // Might want to reformat to move if-statement : should also be performed before 'reset_time' so as not to make a blank AJAX request.
+  if ($(".timepiece-analog").length > 0){
+    get_analog()
+    show_analog()
+  }
   if ($(".timepiece").length > 0){
     get_time()
     show_time()
@@ -272,6 +351,12 @@ $(document).ready(function(){
   }
 })
 $(document).on('page:load', function(){
+  if ($(".timepiece-analog").length > 0){
+    if (analog_running){
+      clearInterval(analog);
+    }
+    reset_analog();
+  }
   if ($(".timepiece").length > 0){
     if (clock_running){
     	clearInterval(clock);
@@ -294,6 +379,9 @@ $(document).on('page:load', function(){
 })
 
 $(window).focus(function(){
+  if ($(".timepiece-analog").length > 0){
+    reset_analog()
+  }
   if ($(".timepiece").length > 0){
   	reset_time()
   }

data/app/assets/stylesheets/timepiece.css.scss

@@ -1 +1,88 @@
-// CSS for the analogue clock version of timepiece, and maybe some optional styles for the digital.
+// CSS for the analogue clock version of timepiece, and maybe some optional styles for the digital.
+
+.timepiece-analog {
+  //border:solid 1em;
+  //border-color:#222;
+  border-radius: 50%;
+  background-color: #eee;
+  background-size: 88%;
+  position: relative;
+}
+
+.timepiece-analog:after {
+  background: #d00;
+  border-radius: 50%;
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -ms-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 5%;
+  height: 5%;
+  z-index: 10;
+}
+
+.timepiece-minutes-container, .timepiece-hours-container, .timepiece-seconds-container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.timepiece-analog-hours {
+  background: #333;
+  height: 25%; //
+  left: 48.75%;
+  position: absolute;
+  top: 25%; //
+  -ms-transform-origin: 50% 100%;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+  width: 2.5%;
+}
+
+.timepiece-analog-minutes {
+  background: #333;
+  height: 40%; //
+  left: 49%;
+  position: absolute;
+  top: 10%; //
+  -ms-transform-origin: 50% 100%;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+  width: 2%;
+}
+
+.timepiece-analog-seconds {
+  background: #d00;
+  height: 45%; //
+  left: 49.5%;
+  position: absolute;
+  top: 14%; //
+  -ms-transform-origin: 50% 80%;
+  -webkit-transform-origin: 50% 80%;
+  transform-origin: 50% 80%;
+  width: 1%;
+  z-index: 8;
+}
+
+// Animation code - unused but kept for reference:
+// We should animate the clocks into correct positions when the clock refreshes on page reentry.
+/*
+@-webkit-keyframes rotate {
+  100% {-webkit-transform: rotateZ(360deg);}
+}
+
+.timepiece-hours-container {
+  -webkit-animation: rotate 43200s infinite linear;
+}
+.timepiece-minutes-container {
+  -webkit-animation: rotate 3600s infinite steps(60);
+}
+.timepiece-seconds-container {
+  -webkit-animation: rotate 60s infinite steps(60);
+}
+*/

data/app/helpers/timepiece_helper.rb

@@ -40,6 +40,20 @@ module TimepieceHelper
   	content_tag(:span, time.html_safe, class: 'timepiece', 'data-timezone' => location, 'data-tptype' => type, 'data-lead' => lead, 'data-abbr_separator' => abbr_sep, 'id' => (id unless id.blank?))
   end
 
+  def analog(location = 'UTC', id: '', size: '10em')
+    Time.zone = location
+    hours = Time.now.in_time_zone.strftime('%I')
+    minutes = Time.now.in_time_zone.strftime('%M')
+    seconds = Time.now.in_time_zone.strftime('%S')
+    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(:article, time.html_safe, class: 'timepiece-analog', 'data-timezone' => location, 'id' => (id unless id.blank?), 'style' => 'width:' + size + ';padding-bottom:' + size + ';')
+  end
+
   def timer(time_since = Time.now, id: '')
     seconds_diff = (Time.now - time_since).to_i
 

data/lib/timepiece/version.rb

@@ -1,3 +1,3 @@
 module Timepiece
-  VERSION = "0.1.15"
+  VERSION = "0.2.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: timepiece
 version: !ruby/object:Gem::Version
-  version: 0.1.15
+  version: 0.2.0
 platform: ruby
 authors:
 - Thom Bruce
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-05-07 00:00:00.000000000 Z
+date: 2015-05-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jquery-rails