Merge branch 'joelrbrandt-new-web-worker-demo'

remy · remy · commit 4e0d1f70502e · 2013-01-07T23:17:47.000Z
diff --git a/demos/worker.html b/demos/worker.html
@@ -1,38 +1,39 @@
-<html>
-<head>
-    <title>Worker</title>
-    <style>
-        body {
-            font-family: sans-serif;
-        }
-        
-        #status {
-            height: 200px;
-            max-height: 200px;
-            border: thin solid black;
-            overflow-y: scroll;
-        }
-        
-        #square {
-            position: absolute;
-            left: 0px;
-            top: 0px;
-            width: 75px;
-            height: 75px;
-            background-color: rgba(0, 0, 220, 0.3);
-            z-index: -1;
-        }
-    </style>
-</head>
-<body>    
-    <h1>Web Worker Demo</h1>
-    <p>Works in Chrome, Safari, and Firefox. Web worker portion works in Opera.</p>
-    <p>Use arrow keys to change the direction of the animated square. The square is animated with <em>requestAnimationFrame</em>.</p>
-    <p>Click the button below to start or stop the worker.</p>
-    <div><input type="button" value="start worker" id="toggleWorker" /></div>
-    <h2>Messages from Worker:</h2>
-    <div id="status"></div>
-    <div id="square"></div>
-<script src="../js/worker-main.js"></script>
-</body>
-</html>
+<title>Web Worker</title>
+<style>
+body {
+  font-family: sans-serif;
+}
+
+#status {
+  height: 200px;
+  max-height: 200px;
+  border: thin solid #aaa;
+  overflow-y: scroll;
+}
+
+#animationWrapper {
+  position: relative;
+  height: 50px;
+}
+
+#square {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 50px;
+  height: 50px;
+  background-color: rgba(0, 0, 220, 0.3);
+}
+</style>
+<article>    
+  <p>This demo shows how main window animation isn't interrupted by Web Workers. <small>Note that the animation does not work in Opera (due to lack of requestAnimationFrame support).</small></p>
+  <p>Use arrow keys to change the direction of the animated square. The square is animated with <em>requestAnimationFrame</em>.</p>
+  <div id="animationWrapper">
+     <div id="square"></div>
+  </div>
+  <p>Click the button below to start or stop the worker.</p>
+  <div><input type="button" value="start worker" id="toggleWorker" /></div>
+  <h2>Messages from Worker:</h2>
+  <div id="status"></div>
+<script src="/js/worker-main.js"></script>
+</article>
diff --git a/js/worker-main.js b/js/worker-main.js
@@ -4,7 +4,7 @@
 (function () {
     "use strict";
 
-    var SQUARE_SIZE = 75;
+    var SQUARE_SIZE = 50;
     var MOVEMENT_STEP = 3;
 
     var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
@@ -52,26 +52,26 @@
         var top = parseInt(square.style.top, 10);
         var right = left + SQUARE_SIZE;
         var bottom = top + SQUARE_SIZE;
-        
+
         switch (direction) {
         case 37: // left
             if (left > 0) {
-                square.style.left = left - MOVEMENT_STEP;
+                square.style.left = left - MOVEMENT_STEP + 'px';
             }
             break;
         case 38: // up
             if (top > 0) {
-                square.style.top = top - MOVEMENT_STEP;
+                square.style.top = top - MOVEMENT_STEP + 'px';
             }
             break;
         case 39: //right
             if (right < document.documentElement.clientWidth) {
-                square.style.left = left + MOVEMENT_STEP;
+                square.style.left = left + MOVEMENT_STEP + 'px';
             }
             break;
         case 40: // down
             if (bottom < document.documentElement.clientHeight) {
-                square.style.top = top + MOVEMENT_STEP;
+                square.style.top = top + MOVEMENT_STEP + 'px';
             }
             break;
         default:
