Stephen McKamey avatar Stephen McKamey committed b56ea93

demo tweaks

Comments (0)

Files changed (4)

 					min="-9999"
 					max="9999"
 					step="1"
-					value="1999"
+					value="2012"
 					size="4"
 					placeholder="year"
 				/><label for="month">-</label><input id="month"
 				<label for="max-units">max</label><input id="max-units" type="number" min="-11" max="11" value="11" />
 			<span></fieldset>
 		</form>
+
+		<h3>Timespan object</h3>
+		<pre id="timespan"></pre>
 	</div>
 
-	<h3>Timespan object</h3>
-	<pre id="timespan"></pre>
-
 	<script src="lib/json/json2.js" type="text/javascript"></script>
+	<script src="lib/raf/requestAnimationFrame.js" type="text/javascript"></script>
 	<script src="countdown.min.js" type="text/javascript"></script>
 	<script src="demo.js" type="text/javascript"></script>
 
 	// initialize units
 	for (var key in countdown) {
 		if (countdown.hasOwnProperty(key)) {
-			var unit = byId("units-"+key.toLowerCase());
+			var unit = byId('units-'+key.toLowerCase());
 			if (unit) {
 				unit.value = countdown[key];
 				unit.checked = countdown[key] & countdown.DEFAULTS;
 	function update() {
 		var units = ~countdown.ALL,
 			chx = byId('countdown-units').getElementsByTagName('input'),
-			empty = byId('empty-label').value || "",
-			max = Number(byId('max-units').value);
+			empty = byId('empty-label').value || '',
+			max = +(byId('max-units').value);
 
 		for (var i=0, count=chx.length; i<count; i++) {
 			if (chx[i].checked) {
-				units |= Number(chx[i].value);
+				units |= +(chx[i].value);
 			}
 		}
 
-		var yyyy = Number(byId('year').value),
-			MM = Number(byId('month').value)-1,
-			dd = Number(byId('date').value),
-			HH = Number(byId('hours').value),
-			mm = Number(byId('minutes').value),
-			ss = Number(byId('seconds').value),
-			fff = Number(byId('milliseconds').value);
+		var yyyy = +(byId('year').value),
+			MM = +(byId('month').value)-1,
+			dd = +(byId('date').value),
+			HH = +(byId('hours').value),
+			mm = +(byId('minutes').value),
+			ss = +(byId('seconds').value),
+			fff = +(byId('milliseconds').value);
 
 		var start = new Date(yyyy, MM, dd, HH, mm, ss, fff),
 			ts = countdown(start, null, units);
 
-		byId('counter').innerHTML = ts.toHTML("strong", max) || empty;
-		byId('timespan').innerHTML = JSON.stringify(ts, null, "  ");
+		var counter = byId('counter'),
+			timespan = byId('timespan'),
+			msg = ts.toHTML('strong', max) || empty;
+
+		if (start.getTime() === 1357027199999) {
+			msg = (ts.value > 0) ?
+				'The world ends '+msg+' ago!?!' :
+				'The world ends in '+msg+'!';
+		}
+
+		counter.innerHTML = msg;
+		timespan.innerHTML = JSON.stringify(ts, null, '  ');
+
+		requestAnimationFrame(update, timespan.parentNode);
 	}
-//	update();
-	setInterval(update, 1000/30);
+	update();
 })();

lib/raf/requestAnimationFrame.js

+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller
+// fixes from Paul Irish and Tino Zijdel
+
+(function() {
+    var lastTime = 0;
+    var vendors = ['ms', 'moz', 'webkit', 'o'];
+    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
+                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
+    }
+ 
+    if (!window.requestAnimationFrame)
+        window.requestAnimationFrame = function(callback, element) {
+            var currTime = new Date().getTime();
+            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
+              timeToCall);
+            lastTime = currTime + timeToCall;
+            return id;
+        };
+ 
+    if (!window.cancelAnimationFrame)
+        window.cancelAnimationFrame = function(id) {
+            clearTimeout(id);
+        };
+}());
 	-webkit-border-radius: 4px;
 	font-size: 150%;
 	padding: 0.25em 0.5em;
-	width: 100%;
+/*	width: 100%;*/
 }
 #countdown-start span,
 #countdown-units span {
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.