Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

modifications to support chrome and safari

  • Loading branch information...
commit 1dcae1fe693c6ab916f09946191242d24fa8bb35 1 parent 95e1d9e
@deanlandolt authored
Showing with 66 additions and 17 deletions.
  1. +1 −1  README.md
  2. +7 −2 clock.html
  3. +30 −8 js/clock.js
  4. +28 −6 style/clock.css
View
2  README.md
@@ -1,4 +1,4 @@
-This is a Gorgy-style clock intended for use in b2g.
+This is a Gorgy-style clock. It is intended for use in b2g so it will only work in firefox (although making it work in webkit should be a matter of adding the associated prefixes).
There aren't many knobs to turn yet but it's built in a highly configurable way,
so it should be easy to tweak the style to your liking.
View
9 clock.html
@@ -1,8 +1,13 @@
<!DOCTYPE html>
<html>
<head>
- <meta charset="utf-8">
- <meta http-equiv="pragma" content="no-cache">
+ <title>Gorgy Clock</title>
+ <meta charset="utf-8" />
+ <meta http-equiv="pragma" content="no-cache" />
+
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+ <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="style/clock.css" />
<script type="application/javascript" src="js/clock.js"></script>
View
38 js/clock.js
@@ -1,16 +1,23 @@
'use strict';
var config = {
- use24HourClock: true
+ use24HourClock: true,
+ //transitionSeconds: "0.25s ease",
};
window.addEventListener('load', function clockLoad(evt) {
window.removeEventListener('load', clockLoad);
- var byId = document.getElementById.bind(document);
+ function byId(id) {
+ return document.getElementById(id);
+ }
var clockNode = byId('clock');
- var secondsTicker = document.querySelector('.tick.seconds');
var secondsScale = 0.88;
+ var secondsTicker = document.querySelector('.tick.seconds');
+ if (config.transitionSeconds) {
+ secondsTicker.style.MozTransition = "-moz-transform " + config.transitionSeconds;
+ secondsTicker.style.WebkitTransition = "-webkit-transform " + config.transitionSeconds;
+ }
var cache = {
date: { node: byId('date') },
@@ -29,9 +36,8 @@ window.addEventListener('load', function clockLoad(evt) {
}
setIfChanged("hour", zeroPad(hour));
setIfChanged("minute", zeroPad(d.getMinutes()));
- var second = d.getSeconds();
- setIfChanged("second", zeroPad(second));
- setSecondsTicker(second);
+ setIfChanged("second", zeroPad(d.getSeconds()));
+ setSecondsTicker(d);
}, 16);
function zeroPad(i) {
@@ -44,8 +50,19 @@ window.addEventListener('load', function clockLoad(evt) {
if (value !== c.value) c.node.innerHTML = c.value = value;
}
- function setSecondsTicker(s) {
- secondsTicker.style.MozTransform = "rotate(" + (s * 6) + "deg) scale(" + secondsScale + ")";
+ var _lastSecond;
+ function setSecondsTicker(d) {
+ var s = d.getSeconds();
+ if (config.smoothSeconds) {
+ s += d.getMilliseconds() / 1000;
+ }
+ if (_lastSecond !== s) {
+ _lastSecond = s;
+ var transform = " scale(" + secondsScale + ")";
+ transform += " rotate(" + (s * 6) + "deg)";
+ secondsTicker.style.MozTransform = transform;
+ secondsTicker.style.WebkitTransform = transform;
+ }
}
window.onresize = resize;
@@ -69,5 +86,10 @@ window.addEventListener('load', function clockLoad(evt) {
}
}
+ // disable elastic scroll on iphone
+ document.addEventListener('touchmove', function(evt) {
+ evt.preventDefault();
+ });
+
window.parent.postMessage('appready', '*');
});
View
34 style/clock.css
@@ -30,6 +30,7 @@ div, span {
.text * {
cursor: default;
-moz-user-select: none;
+ -webkit-user-select: none;
user-select: none;
}
@@ -40,30 +41,39 @@ div, span {
}
#date {
- top: -moz-calc(25% - 0.775em);
+ top: 25%;
+ margin-top: -0.775em;
}
#time {
- top: -moz-calc(50% - 0.775em);
+ top: 50%;
+ margin-top: -0.775em;
}
#second {
- top: -moz-calc(75% - 0.775em);
+ top: 75%;
+ margin-top: -0.775em;
}
+/*.tick.seconds {
+ -moz-transition: -moz-transform 0.25s ease;
+ -webkit-transition: -webkit-transform 0.25s ease;
+ transition: transform 0.25s ease;
+}*/
+
.tick > .dot {
- position: absolute;
+ position: relative;
+ margin-left: auto;
+ margin-right: auto;
width: 1em;
height: 1em;
border-radius: 0.5em;
- left: -moz-calc(50% - 0.5em);
top: 0;
}
.tick > .dot.small {
width: 0.5em;
height: 0.5em;
border-radius: 0.25em;
- left: -moz-calc(50% - 0.25em);
}
.tick {
@@ -75,39 +85,51 @@ div, span {
.tick.s0 {
-moz-transform: scale(0.96);
+ -webkit-transform: scale(0.96);
}
.tick.s5 {
-moz-transform: scale(0.96) rotate(30deg);
+ -webkit-transform: scale(0.96) rotate(30deg);
}
.tick.s10 {
-moz-transform: scale(0.96) rotate(60deg);
+ -webkit-transform: scale(0.96) rotate(60deg);
}
.tick.s15 {
-moz-transform: scale(0.96) rotate(90deg);
+ -webkit-transform: scale(0.96) rotate(90deg);
}
.tick.s20 {
-moz-transform: scale(0.96) rotate(120deg);
+ -webkit-transform: scale(0.96) rotate(120deg);
}
.tick.s25 {
-moz-transform: scale(0.96) rotate(150deg);
+ -webkit-transform: scale(0.96) rotate(150deg);
}
.tick.s30 {
-moz-transform: scale(0.96) rotate(180deg);
+ -webkit-transform: scale(0.96) rotate(180deg);
}
.tick.s35 {
-moz-transform: scale(0.96) rotate(210deg);
+ -webkit-transform: scale(0.96) rotate(210deg);
}
.tick.s40 {
-moz-transform: scale(0.96) rotate(240deg);
+ -webkit-transform: scale(0.96) rotate(240deg);
}
.tick.s45 {
-moz-transform: scale(0.96) rotate(270deg);
+ -webkit-transform: scale(0.96) rotate(270deg);
}
.tick.s50 {
-moz-transform: scale(0.96) rotate(300deg);
+ -webkit-transform: scale(0.96) rotate(300deg);
}
.tick.s55 {
-moz-transform: scale(0.96) rotate(330deg);
+ -webkit-transform: scale(0.96) rotate(330deg);
}
Please sign in to comment.
Something went wrong with that request. Please try again.