Fix key events to work within iframes

Qard · Jun 8, 2012 · 4db728f · 4db728f
1 parent 6da090e
commit 4db728f
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -2,37 +2,20 @@
 <html>
   <head>
     <title>Isomap Test</title>
+    <link rel="stylesheet" href="./sample/css/style.css" />
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
-    <style type="text/css">
-    html, body, ul { margin: 0; padding: 0; }
-    body {
-      font-family: "Helvetica Neue", Helvetica, Verdana;
-      background-color: #ddd;
-      color: #555;
-      text-shadow: 0px 1px 0px rgba(255,255,255,0.6);
+    <script type="text/javascript">
+    window.onload = function () {
+      var frame = document.getElementById('frame')
+      var menu = document.getElementById('menu')
+      frame.height = screen.height - menu.height
     }
-    a, a:hover { color: #555; text-decoration: none; }
-    iframe { width: 800px; height: 480px; border: none; }
-
-    #container { width: 800px; margin: auto; }
-    #menu { float: right; }
-    #menu li { display: inline-block; padding: 8px; background-color: #fff; }
-    #menu li:hover { background-color: #555; }
-    #menu li:hover a { color: #fff; text-shadow: 0px 1px 0px rgba(0,0,0,0.6); }
-
-    #title { font-size: 4em; margin: 0; border-bottom: solid 4px #555; }
-    #subtitle { font-size: 0.2em; padding-left: 10px; }
-
-    #description { background-color: #fff; padding: 8px; }
-    #frame, #description { box-shadow: 3px 3px 3px rgba(0,0,0,0.15); }
-
-    #footer { margin-top: 10px; color: #888; font-size: 0.9em; }
-    </style>
+    </script>
   </head>
   <body>
     <div id="container">
       <ul id="menu">
-        <li><a href="docs/peint.html">Documentation</a></li>
+        <li><a href="./docs/peint.html">Documentation</a></li>
         <li><a href="http://github.com/qard/peint">Code</a></li>
       </ul>
       <h1 id="title">Peint<small id="subtitle">Event-driven canvas rendering</small></h1>

diff --git a/sample/css/style.css b/sample/css/style.css
@@ -1,8 +1,28 @@
-* {
-  padding: 0;
-  margin: 0;
+html, body, canvas, ul { padding: 0; margin: 0; }
+html, body, canvas { overflow: hidden; outline: none; height: 100%; width: 100%; }
+body {
   overflow: hidden;
-  outline: none;
-  height: 100%;
-  width: 100%;
-}
+  font-family: "Helvetica Neue", Helvetica, Verdana;
+  background-color: #ddd;
+  color: #555;
+  text-shadow: 0px 1px 0px rgba(255,255,255,0.6);
+}
+
+a, a:hover { color: #555; text-decoration: none; }
+iframe { width: 800px; height: 480px; border: none; }
+
+#container { width: 800px; margin: auto; }
+#menu { float: right; }
+#menu li, #menu li a { display: inline-block; }
+#menu li { background-color: #fff; }
+#menu li a { padding: 8px; }
+#menu li:hover { background-color: #555; }
+#menu li:hover a { color: #fff; text-shadow: 0px 1px 0px rgba(0,0,0,0.6); }
+
+#title { font-size: 4em; margin: 0; border-bottom: solid 4px #555; }
+#subtitle { font-size: 0.2em; padding-left: 10px; }
+
+#description { background-color: #fff; padding: 8px; }
+#frame, #description { box-shadow: 3px 3px 3px rgba(0,0,0,0.15); }
+
+#footer { margin-top: 10px; color: #888; font-size: 0.9em; }
diff --git a/src/peint.canvas.js b/src/peint.canvas.js
@@ -156,7 +156,6 @@ Peint.define('canvas', function (require, exports, module) {
       }
 
       var realDoc = window.parent || window
-      console.log(window)
 
       // This just passes press events through as-is.
       realDoc.addEventListener('keypress', function (e) {