etoys/demo: use new layout

codefrau · codefrau · commit b372cfa568a0 · 2014-09-04T19:29:31.000+02:00
diff --git a/demo/simple.css b/demo/simple.css
@@ -2,17 +2,29 @@ body {
     background-color: #eae6d1;
     font-family: sans-serif;
 }
-progress {
-    vertical-align: top;
-}
 canvas {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+    position: absolute;
+    background: #000;
     cursor: default;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
 }
+div#sqHeader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 10px;
+    border-bottom: 6px double gray;
+}
+div#sqFooter {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 10px;
+    border-top: 6px double gray;
+}
diff --git a/demo/simple.html b/demo/simple.html
@@ -40,14 +40,17 @@
 
 </head>
 <body>
+    <div id="sqHeader">
     <h1>SqueakJS</h1>
-    <progress value="0" max="100">Loading image ...</progress>
-    <canvas width="800" height="600" contenteditable="true"></canvas>
+    </div>
+    <canvas id="sqCanvas" contenteditable="true"></canvas>
+    <div id="sqFooter">
     <p>SqueakJS is a <a href="http://squeak.org/" target="_blank">Squeak</a> VM written in pure JavaScript by Bert Freudenberg.
     It is normally developed and used in the <a href="http://lively-web.org/" target="_blank">Lively</a> environment.
     This page demonstrates that SqueakJS also works outside Lively (and e.g. on an iPad).
     For the full interface, please visit the <a href= "http://lively-web.org/users/bert/squeak.html">Lively SqueakJS</a> page.
     </p>
+    </div>
     <div class="github-fork-ribbon-wrapper right">
         <div class="github-fork-ribbon">
             <a href="https://github.com/bertfreudenberg/SqueakJS" target="_blank">Fork me on GitHub</a>
diff --git a/demo/simple.js b/demo/simple.js
@@ -24,16 +24,13 @@
 var fullscreen = navigator.standalone;
 
 window.onload = function() {
-    var canvas = document.getElementsByTagName("canvas")[0];
     if (fullscreen) {
         document.body.style.margin = 0;
         document.body.style.backgroundColor = 'black';
-        ['h1','p','div'].forEach(function(n){document.getElementsByTagName(n)[0].style.display="none"});
-        var scale = screen.width / canvas.width;
-        var head = document.getElementsByTagName("head")[0];
-        head.innerHTML += '<meta name="viewport" content="initial-scale=' + scale + '">';
+        sqHeader.style.display = 'none';
+        sqFooter.style.display = 'none';
     }
-    var display = createSqueakDisplay(canvas, {swapButtons: true});
+    var display = createSqueakDisplay(sqCanvas, {fullscreen: fullscreen, header: sqHeader, footer: sqFooter, swapButtons: true});
     var loop;
     function runImage(buffer, name) {
         window.clearTimeout(loop);
@@ -49,9 +46,9 @@ window.onload = function() {
                         if (typeof ms === 'number') { // continue running
                             loop = window.setTimeout(run, ms);
                         } else { // quit
-                            canvas.style.webkitTransition = "-webkit-transform 0.5s";
-                            canvas.style.webkitTransform = "scale(0)";
-                            window.setTimeout(function(){canvas.style.display = 'none'}, 500);
+                            sqCanvas.style.webkitTransition = "-webkit-transform 0.5s";
+                            sqCanvas.style.webkitTransform = "scale(0)";
+                            window.setTimeout(function(){sqCanvas.style.display = 'none'}, 500);
                         }
                     });
                 } catch(error) {
@@ -92,15 +89,13 @@ window.onload = function() {
     });
     function downloadImage(url) {
         display.showBanner("Downloading " + url);
-        var progress = document.getElementsByTagName("progress")[0];
         var rq = new XMLHttpRequest();
         rq.open('GET', url);
         rq.responseType = 'arraybuffer';
         rq.onprogress = function(e) {
-            if (e.lengthComputable) progress.value = 100 * e.loaded / e.total;
+            if (e.lengthComputable) display.showProgress(e.loaded / e.total);
         }
         rq.onload = function(e) {
-            progress.style.display = "none";
             runImage(rq.response, url);
         };
         rq.send();
diff --git a/etoys/etoys.css b/etoys/etoys.css
@@ -2,17 +2,29 @@ body {
     background-color: #eae6d1;
     font-family: sans-serif;
 }
-progress {
-    vertical-align: top;
-}
 canvas {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
+    position: absolute;
+    background: #000;
     cursor: default;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
 }
+div#sqHeader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    padding: 10px;
+    border-bottom: 6px double gray;
+}
+div#sqFooter {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 10px;
+    border-top: 6px double gray;
+}
diff --git a/etoys/etoys.js b/etoys/etoys.js
@@ -24,30 +24,23 @@
 var fullscreen = navigator.standalone;
 
 window.onload = function() {
-    var canvas = document.getElementsByTagName("canvas")[0];
     if (fullscreen) {
         document.body.style.margin = 0;
         document.body.style.backgroundColor = 'black';
-        ['h1','p','div'].forEach(function(n){document.getElementsByTagName(n)[0].style.display="none"});
-        var scale = screen.width / canvas.width;
-        var head = document.getElementsByTagName("head")[0];
-        head.innerHTML += '<meta name="viewport" content="initial-scale=' + scale + '">';
-    } else {
-        canvas.style.width = "80%";
+        sqHeader.style.display = 'none';
+        sqFooter.style.display = 'none';
     }
-    var display = createSqueakDisplay(canvas, {fixedWidth: 1200, fixedHeight: 900});
+    var display = createSqueakDisplay(sqCanvas, {fixedWidth: 1200, fixedHeight: 900, fullscreen: fullscreen, header: sqHeader, footer: sqFooter});
     function loadAndRunImage(url) {
         var imageName = Squeak.splitFilePath(url).basename;
         display.showBanner("Downloading " + imageName);
-        var progress = document.getElementsByTagName("progress")[0];
         var rq = new XMLHttpRequest();
         rq.open('GET', url);
         rq.responseType = 'arraybuffer';
         rq.onprogress = function(e) {
-            if (e.lengthComputable) progress.value = 100 * e.loaded / e.total;
+            if (e.lengthComputable) display.showProgress(e.loaded / e.total);
         }
         rq.onload = function(e) {
-            progress.style.display = "none";
             display.showBanner("Initializing, please wait");
             window.setTimeout(function(){
                 var image = new Squeak.Image(rq.response, imageName);
@@ -59,9 +52,9 @@ window.onload = function() {
                             if (typeof ms === 'number') { // continue running
                                 window.setTimeout(run, ms);
                             } else { // quit
-                                canvas.style.webkitTransition = "-webkit-transform 0.5s";
-                                canvas.style.webkitTransform = "scale(0)";
-                                window.setTimeout(function(){canvas.style.display = 'none'}, 500);
+                                sqCanvas.style.webkitTransition = "-webkit-transform 0.5s";
+                                sqCanvas.style.webkitTransform = "scale(0)";
+                                window.setTimeout(function(){sqCanvas.style.display = 'none'}, 500);
                             }
                         });
                     } catch(error) {
@@ -80,5 +73,5 @@ window.onload = function() {
 if (addToHomescreen.isStandalone)
     fullscreen = true;
 else addToHomescreen({
-   appID: 'squeakjs.etoys.add2home',
+    appID: 'squeakjs.etoys.add2home',
 });
diff --git a/etoys/index.html b/etoys/index.html
@@ -39,16 +39,19 @@
 
 </head>
 <body>
+    <div id="sqHeader">
     <h1>SqueakJS/Etoys</h1>
-    <progress value="0" max="100">Loading image ...</progress>
-    <canvas width="1200" height="900" contenteditable="true"></canvas>
+    </div>
+    <canvas id="sqCanvas" width="1200" height="900" contenteditable="true"></canvas>
+    <div id="sqFooter">
     <p>This is a very early version of SqueakJS running an Etoys image.
     <a href="http://bertfreudenberg.github.io/SqueakJS/" target="_blank">Feedback and contributions</a> welcome!<br><br>
     SqueakJS is a <a href="http://squeak.org/" target="_blank">Squeak</a> VM written in pure JavaScript by Bert Freudenberg.
     It is normally developed and used in the <a href="http://lively-web.org/" target="_blank">Lively</a> environment.
     This page demonstrates that SqueakJS also works outside Lively (and e.g. on an iPad).
     For the full interface, please visit the <a href= "http://lively-web.org/users/bert/squeak.html">Lively SqueakJS</a> page.
     </p>
+    </div>
     <div class="github-fork-ribbon-wrapper right">
         <div class="github-fork-ribbon">
             <a href="https://github.com/bertfreudenberg/SqueakJS" target="_blank">Fork me on GitHub</a>
diff --git a/test/test-layout.html b/test/test-layout.html
@@ -9,7 +9,6 @@
     canvas {
         position: absolute;
         background: #000;
-        // positioned and sized by script
     }
     div#header {
         position: absolute;

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,6 @@`
`9`	`9`	`canvas {`
`10`	`10`	`position: absolute;`
`11`	`11`	`background: #000;`
`12`		`- // positioned and sized by script`
`13`	`12`	`}`
`14`	`13`	`div#header {`
`15`	`14`	`position: absolute;`