timepiece 0.2.1 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6c284c38dfc4fe85d07c377331bf1ea408ad94e4
|
4
|
+
data.tar.gz: dd2a1147e6282d3d33a37b935ffbad905e05103d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1d56c89c9d07baa6ae0d766474b4b3d1219340ea9cc521087262b6ce9a990000757bc5958f40e67a0c9416853753a983cf59a547f3483acced6f1dd1c6865dce
|
7
|
+
data.tar.gz: 154f1bf10371014913e8f77af520307a5687361c2181cfce72d05687576f73e196369619b5f7795abe3b7eefb3204bfba3d5c5c33c3d89cd94316c8be6449f3f
|
data/README.rdoc
CHANGED
@@ -14,6 +14,14 @@ Timepiece is a Rails plugin providing a simple digital clock, accurate to your s
|
|
14
14
|
|
15
15
|
//= require timepiece
|
16
16
|
|
17
|
+
3. If you want to use the new analog clock, you also need to require timepiece in your css
|
18
|
+
|
19
|
+
*= require 'timepiece'
|
20
|
+
|
21
|
+
or if you're using SCSS
|
22
|
+
|
23
|
+
@import 'timepiece';
|
24
|
+
|
17
25
|
Note: If you're using Turbolinks with your Rails project, you should also install jquery-turbolinks to ensure functionality is maintained between page loads.
|
18
26
|
|
19
27
|
== Usage
|
@@ -56,6 +64,21 @@ You can apply your own styles to any part of the Timepiece clock. For instance,
|
|
56
64
|
|
57
65
|
<%= timepiece('London', type: '12', abbr_sep: '.') %>
|
58
66
|
|
67
|
+
|
68
|
+
== Analog
|
69
|
+
|
70
|
+
New to version 0.2.0+, you can now include analog clocks in your projects.
|
71
|
+
|
72
|
+
* The helper takes the same timezone parameter as the digital version (defaults to 'UTC'):
|
73
|
+
|
74
|
+
<%= analog('London') %>
|
75
|
+
|
76
|
+
* To specify a certain size for the clock, use the `size` parameter (defaults to 10em):
|
77
|
+
|
78
|
+
<%= analog('London', :size => '100px') %>
|
79
|
+
|
80
|
+
Note that if you pass a percentage, the size will be set as a percentage of the containing div.
|
81
|
+
|
59
82
|
== Timer
|
60
83
|
|
61
84
|
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.
|
@@ -39,6 +39,13 @@ function show_analog(){
|
|
39
39
|
}
|
40
40
|
}
|
41
41
|
$(".timepiece-analog").each(function(i, e){
|
42
|
+
if(analog_hours[i] >= 6 && analog_hours[i] < 18){
|
43
|
+
$(e).addClass('timepiece-analog-day')
|
44
|
+
$(e).removeClass('timepiece-analog-night')
|
45
|
+
}else{
|
46
|
+
$(e).addClass('timepiece-analog-night')
|
47
|
+
$(e).removeClass('timepiece-analog-day')
|
48
|
+
}
|
42
49
|
$(e).html(function(){
|
43
50
|
if(analog_hours[i] > 12){
|
44
51
|
$(e).data('analog_hours', analog_hours[i] - 12)
|
@@ -52,15 +59,9 @@ function show_analog(){
|
|
52
59
|
$(e).data('hours_angle', ($(e).data('analog_hours') * 30) + (analog_minutes[i] / 2));
|
53
60
|
$(e).data('minutes_angle', analog_minutes[i] * 6);
|
54
61
|
$(e).data('seconds_angle', analog_seconds[i] * 6);
|
55
|
-
$('.timepiece-hours-container', $(e)).css('-ms-transform','rotateZ(' + $(e).data('hours_angle') + 'deg)'); // angle set on each
|
56
|
-
$('.timepiece-
|
57
|
-
$('.timepiece-
|
58
|
-
$('.timepiece-minutes-container', $(e)).css('-ms-transform','rotateZ(' + $(e).data('minutes_angle') + 'deg)');
|
59
|
-
$('.timepiece-minutes-container', $(e)).css('-webkit-transform','rotateZ(' + $(e).data('minutes_angle') + 'deg)');
|
60
|
-
$('.timepiece-minutes-container', $(e)).css('transform','rotateZ(' + $(e).data('minutes_angle') + 'deg)');
|
61
|
-
$('.timepiece-seconds-container', $(e)).css('-ms-transform','rotateZ(' + $(e).data('seconds_angle') + 'deg)');
|
62
|
-
$('.timepiece-seconds-container', $(e)).css('-webkit-transform','rotateZ(' + $(e).data('seconds_angle') + 'deg)');
|
63
|
-
$('.timepiece-seconds-container', $(e)).css('transform','rotateZ(' + $(e).data('seconds_angle') + 'deg)');
|
62
|
+
$('.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
|
63
|
+
$('.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)'});
|
64
|
+
$('.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)'});
|
64
65
|
})
|
65
66
|
})
|
66
67
|
}, 1000)
|
@@ -85,4 +85,27 @@
|
|
85
85
|
.timepiece-seconds-container {
|
86
86
|
-webkit-animation: rotate 60s infinite steps(60);
|
87
87
|
}
|
88
|
-
*/
|
88
|
+
*/
|
89
|
+
|
90
|
+
.timepiece-analog-day{
|
91
|
+
//border-color:#222;
|
92
|
+
background-color:#eee;
|
93
|
+
}
|
94
|
+
.timepiece-analog-day:after, .timepiece-analog-day .timepiece-analog-seconds {
|
95
|
+
background: #d00;
|
96
|
+
}
|
97
|
+
.timepiece-analog-day .timepiece-analog-hours, .timepiece-analog-day .timepiece-analog-minutes {
|
98
|
+
background: #333;
|
99
|
+
}
|
100
|
+
|
101
|
+
|
102
|
+
.timepiece-analog-night{
|
103
|
+
//border-color:#222;
|
104
|
+
background-color:#333;
|
105
|
+
}
|
106
|
+
.timepiece-analog-night:after, .timepiece-analog-night .timepiece-analog-seconds {
|
107
|
+
background: #d00;
|
108
|
+
}
|
109
|
+
.timepiece-analog-night .timepiece-analog-hours, .timepiece-analog-night .timepiece-analog-minutes {
|
110
|
+
background: #eee;
|
111
|
+
}
|
@@ -42,16 +42,21 @@ module TimepieceHelper
|
|
42
42
|
|
43
43
|
def analog(location = 'UTC', id: '', size: '10em')
|
44
44
|
Time.zone = location
|
45
|
-
hours = Time.now.in_time_zone.strftime('%
|
45
|
+
hours = Time.now.in_time_zone.strftime('%H')
|
46
46
|
minutes = Time.now.in_time_zone.strftime('%M')
|
47
47
|
seconds = Time.now.in_time_zone.strftime('%S')
|
48
|
+
if hours.to_i >= 6 && hours.to_i < 18
|
49
|
+
time_of_day_class = 'timepiece-analog-day'
|
50
|
+
else
|
51
|
+
time_of_day_class = 'timepiece-analog-night'
|
52
|
+
end
|
48
53
|
hours_angle = (hours.to_i * 30) + (minutes.to_i / 2)
|
49
54
|
minutes_angle = minutes.to_i * 6
|
50
55
|
seconds_angle = seconds.to_i * 6
|
51
56
|
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>"\
|
52
57
|
"<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>"\
|
53
58
|
"<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>"
|
54
|
-
content_tag(:div, time.html_safe, class: 'timepiece-analog', 'data-timezone' => location, 'id' => (id unless id.blank?), 'style' => 'width:' + size + ';padding-bottom:' + size + ';')
|
59
|
+
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 + ';')
|
55
60
|
end
|
56
61
|
|
57
62
|
def timer(time_since = Time.now, id: '')
|
data/lib/timepiece/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: timepiece
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.2.
|
4
|
+
version: 0.2.2
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Thom Bruce
|
@@ -36,7 +36,7 @@ files:
|
|
36
36
|
- README.rdoc
|
37
37
|
- Rakefile
|
38
38
|
- app/assets/javascripts/timepiece.js
|
39
|
-
- app/assets/stylesheets/timepiece.css
|
39
|
+
- app/assets/stylesheets/timepiece.css
|
40
40
|
- app/controllers/timepiece_controller.rb
|
41
41
|
- app/helpers/timepiece_helper.rb
|
42
42
|
- config/routes.rb
|