modifications to support chrome and safari

deanlandolt · Mar 6, 2012 · 1dcae1f · 1dcae1f
1 parent 95e1d9e
commit 1dcae1f
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 17 deletions.
diff --git a/README.md b/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.

diff --git a/clock.html b/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>

diff --git a/js/clock.js b/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', '*');
 });
diff --git a/style/clock.css b/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);
 }