Skip to content

Commit b372cfa

Browse files
codefraucodefrau
committed
etoys/demo: use new layout
1 parent b8e6966 commit b372cfa

File tree

7 files changed

+61
-44
lines changed

7 files changed

+61
-44
lines changed

‎demo/simple.css

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,29 @@ body {
22
background-color: #eae6d1;
33
font-family: sans-serif;
44
}
5-
progress {
6-
vertical-align: top;
7-
}
85
canvas {
9-
display: block;
10-
margin-left: auto;
11-
margin-right: auto;
6+
position: absolute;
7+
background: #000;
128
cursor: default;
139
-webkit-user-select: none;
1410
-moz-user-select: none;
1511
-ms-user-select: none;
1612
-o-user-select: none;
1713
user-select: none;
1814
}
15+
div#sqHeader {
16+
position: absolute;
17+
top: 0;
18+
left: 0;
19+
right: 0;
20+
padding: 10px;
21+
border-bottom: 6px double gray;
22+
}
23+
div#sqFooter {
24+
position: absolute;
25+
left: 0;
26+
right: 0;
27+
bottom: 0;
28+
padding: 10px;
29+
border-top: 6px double gray;
30+
}

‎demo/simple.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,17 @@
4040

4141
</head>
4242
<body>
43+
<div id="sqHeader">
4344
<h1>SqueakJS</h1>
44-
<progress value="0" max="100">Loading image ...</progress>
45-
<canvas width="800" height="600" contenteditable="true"></canvas>
45+
</div>
46+
<canvas id="sqCanvas" contenteditable="true"></canvas>
47+
<div id="sqFooter">
4648
<p>SqueakJS is a <a href="http://squeak.org/" target="_blank">Squeak</a> VM written in pure JavaScript by Bert Freudenberg.
4749
It is normally developed and used in the <a href="http://lively-web.org/" target="_blank">Lively</a> environment.
4850
This page demonstrates that SqueakJS also works outside Lively (and e.g. on an iPad).
4951
For the full interface, please visit the <a href= "http://lively-web.org/users/bert/squeak.html">Lively SqueakJS</a> page.
5052
</p>
53+
</div>
5154
<div class="github-fork-ribbon-wrapper right">
5255
<div class="github-fork-ribbon">
5356
<a href="https://github.com/bertfreudenberg/SqueakJS" target="_blank">Fork me on GitHub</a>

‎demo/simple.js

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,13 @@
2424
var fullscreen = navigator.standalone;
2525

2626
window.onload = function() {
27-
var canvas = document.getElementsByTagName("canvas")[0];
2827
if (fullscreen) {
2928
document.body.style.margin = 0;
3029
document.body.style.backgroundColor = 'black';
31-
['h1','p','div'].forEach(function(n){document.getElementsByTagName(n)[0].style.display="none"});
32-
var scale = screen.width / canvas.width;
33-
var head = document.getElementsByTagName("head")[0];
34-
head.innerHTML += '<meta name="viewport" content="initial-scale=' + scale + '">';
30+
sqHeader.style.display = 'none';
31+
sqFooter.style.display = 'none';
3532
}
36-
var display = createSqueakDisplay(canvas, {swapButtons: true});
33+
var display = createSqueakDisplay(sqCanvas, {fullscreen: fullscreen, header: sqHeader, footer: sqFooter, swapButtons: true});
3734
var loop;
3835
function runImage(buffer, name) {
3936
window.clearTimeout(loop);
@@ -49,9 +46,9 @@ window.onload = function() {
4946
if (typeof ms === 'number') { // continue running
5047
loop = window.setTimeout(run, ms);
5148
} else { // quit
52-
canvas.style.webkitTransition = "-webkit-transform 0.5s";
53-
canvas.style.webkitTransform = "scale(0)";
54-
window.setTimeout(function(){canvas.style.display = 'none'}, 500);
49+
sqCanvas.style.webkitTransition = "-webkit-transform 0.5s";
50+
sqCanvas.style.webkitTransform = "scale(0)";
51+
window.setTimeout(function(){sqCanvas.style.display = 'none'}, 500);
5552
}
5653
});
5754
} catch(error) {
@@ -92,15 +89,13 @@ window.onload = function() {
9289
});
9390
function downloadImage(url) {
9491
display.showBanner("Downloading " + url);
95-
var progress = document.getElementsByTagName("progress")[0];
9692
var rq = new XMLHttpRequest();
9793
rq.open('GET', url);
9894
rq.responseType = 'arraybuffer';
9995
rq.onprogress = function(e) {
100-
if (e.lengthComputable) progress.value = 100 * e.loaded / e.total;
96+
if (e.lengthComputable) display.showProgress(e.loaded / e.total);
10197
}
10298
rq.onload = function(e) {
103-
progress.style.display = "none";
10499
runImage(rq.response, url);
105100
};
106101
rq.send();

‎etoys/etoys.css

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,29 @@ body {
22
background-color: #eae6d1;
33
font-family: sans-serif;
44
}
5-
progress {
6-
vertical-align: top;
7-
}
85
canvas {
9-
display: block;
10-
margin-left: auto;
11-
margin-right: auto;
6+
position: absolute;
7+
background: #000;
128
cursor: default;
139
-webkit-user-select: none;
1410
-moz-user-select: none;
1511
-ms-user-select: none;
1612
-o-user-select: none;
1713
user-select: none;
1814
}
15+
div#sqHeader {
16+
position: absolute;
17+
top: 0;
18+
left: 0;
19+
right: 0;
20+
padding: 10px;
21+
border-bottom: 6px double gray;
22+
}
23+
div#sqFooter {
24+
position: absolute;
25+
left: 0;
26+
right: 0;
27+
bottom: 0;
28+
padding: 10px;
29+
border-top: 6px double gray;
30+
}

‎etoys/etoys.js

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,30 +24,23 @@
2424
var fullscreen = navigator.standalone;
2525

2626
window.onload = function() {
27-
var canvas = document.getElementsByTagName("canvas")[0];
2827
if (fullscreen) {
2928
document.body.style.margin = 0;
3029
document.body.style.backgroundColor = 'black';
31-
['h1','p','div'].forEach(function(n){document.getElementsByTagName(n)[0].style.display="none"});
32-
var scale = screen.width / canvas.width;
33-
var head = document.getElementsByTagName("head")[0];
34-
head.innerHTML += '<meta name="viewport" content="initial-scale=' + scale + '">';
35-
} else {
36-
canvas.style.width = "80%";
30+
sqHeader.style.display = 'none';
31+
sqFooter.style.display = 'none';
3732
}
38-
var display = createSqueakDisplay(canvas, {fixedWidth: 1200, fixedHeight: 900});
33+
var display = createSqueakDisplay(sqCanvas, {fixedWidth: 1200, fixedHeight: 900, fullscreen: fullscreen, header: sqHeader, footer: sqFooter});
3934
function loadAndRunImage(url) {
4035
var imageName = Squeak.splitFilePath(url).basename;
4136
display.showBanner("Downloading " + imageName);
42-
var progress = document.getElementsByTagName("progress")[0];
4337
var rq = new XMLHttpRequest();
4438
rq.open('GET', url);
4539
rq.responseType = 'arraybuffer';
4640
rq.onprogress = function(e) {
47-
if (e.lengthComputable) progress.value = 100 * e.loaded / e.total;
41+
if (e.lengthComputable) display.showProgress(e.loaded / e.total);
4842
}
4943
rq.onload = function(e) {
50-
progress.style.display = "none";
5144
display.showBanner("Initializing, please wait");
5245
window.setTimeout(function(){
5346
var image = new Squeak.Image(rq.response, imageName);
@@ -59,9 +52,9 @@ window.onload = function() {
5952
if (typeof ms === 'number') { // continue running
6053
window.setTimeout(run, ms);
6154
} else { // quit
62-
canvas.style.webkitTransition = "-webkit-transform 0.5s";
63-
canvas.style.webkitTransform = "scale(0)";
64-
window.setTimeout(function(){canvas.style.display = 'none'}, 500);
55+
sqCanvas.style.webkitTransition = "-webkit-transform 0.5s";
56+
sqCanvas.style.webkitTransform = "scale(0)";
57+
window.setTimeout(function(){sqCanvas.style.display = 'none'}, 500);
6558
}
6659
});
6760
} catch(error) {
@@ -80,5 +73,5 @@ window.onload = function() {
8073
if (addToHomescreen.isStandalone)
8174
fullscreen = true;
8275
else addToHomescreen({
83-
appID: 'squeakjs.etoys.add2home',
76+
appID: 'squeakjs.etoys.add2home',
8477
});

‎etoys/index.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,19 @@
3939

4040
</head>
4141
<body>
42+
<div id="sqHeader">
4243
<h1>SqueakJS/Etoys</h1>
43-
<progress value="0" max="100">Loading image ...</progress>
44-
<canvas width="1200" height="900" contenteditable="true"></canvas>
44+
</div>
45+
<canvas id="sqCanvas" width="1200" height="900" contenteditable="true"></canvas>
46+
<div id="sqFooter">
4547
<p>This is a very early version of SqueakJS running an Etoys image.
4648
<a href="http://bertfreudenberg.github.io/SqueakJS/" target="_blank">Feedback and contributions</a> welcome!<br><br>
4749
SqueakJS is a <a href="http://squeak.org/" target="_blank">Squeak</a> VM written in pure JavaScript by Bert Freudenberg.
4850
It is normally developed and used in the <a href="http://lively-web.org/" target="_blank">Lively</a> environment.
4951
This page demonstrates that SqueakJS also works outside Lively (and e.g. on an iPad).
5052
For the full interface, please visit the <a href= "http://lively-web.org/users/bert/squeak.html">Lively SqueakJS</a> page.
5153
</p>
54+
</div>
5255
<div class="github-fork-ribbon-wrapper right">
5356
<div class="github-fork-ribbon">
5457
<a href="https://github.com/bertfreudenberg/SqueakJS" target="_blank">Fork me on GitHub</a>

‎test/test-layout.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
canvas {
1010
position: absolute;
1111
background: #000;
12-
// positioned and sized by script
1312
}
1413
div#header {
1514
position: absolute;

0 commit comments

Comments
 (0)