-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtry.html
266 lines (261 loc) · 12 KB
/
try.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Try Squeak</title>
<link rel="icon" type="image/png" href="squeakjs.png">
<link rel="stylesheet" href="try.css">
<script src="squeakjs/dist/squeak_bundle.js"></script>
<script>
function runDemo(imageName) {
SqueakJS.runSqueak("images/Squeak6.0.zip", sqCanvas, {
spinner: sqSpinner,
appName: "Squeak 6.0",
embedded: true, // use canvas as is
wizard: false, // skip the Welcome Wizard
});
}
function runSqueak(imageName) {
// Squeak.debugFiles = true;
sqText.style.display = "none";
sqCanvas.style.display = "block";
SqueakJS.runSqueak(imageName, sqCanvas,{
spinner: sqSpinner,
appName: imageName && imageName.replace(/.*\//, "").replace(/\.image$/, ""),
fullscreen: true,
onStart: function(vm, display, options) {
// debugger
// vm.breakOn("FileDirectory class>>activeDirectoryClass");
// vm.breakOnMessageNotUnderstood = true;
},
onQuit: function(vm, display, options) {
display.showBanner(SqueakJS.appName + " stopped.");
setTimeout(function() {
location.hash = ""; // show index page
location.href = location.href.replace(/\?.*/, "");
}, 0);
},
});
}
function importItems(items) {
var entries = [];
for (var i = 0; i < items.length; i++) {
var item = items[i];
if (item.kind === "file") {
entries.push(item.webkitGetAsEntry());
}
}
importEntriesRecursively(entries, []);
}
function importEntriesRecursively(entries, todo) {
var imageName = null;
entries.forEach(function(entry) {
if (entry.isFile) {
var path = entry.fullPath;
entry.file(function(file) {
var reader = new FileReader();
reader.onload = function () {
var buffer = this.result;
console.log("Storing " + path + " (" + buffer.byteLength + " bytes)");
if (/.*image$/.test(path)) imageName = path;
todo.push(path);
Squeak.filePut(path, buffer, function success() {
var index = todo.indexOf(path);
todo.splice(index, 1);
if (todo.length > 0) return;
afterImport(imageName);
});
}
reader.onerror = function() {
alert("Failed to read " + path);
drop.style.borderColor = "";
}
reader.readAsArrayBuffer(file);
});
} else if (entry.isDirectory) {
Squeak.dirCreate(entry.fullPath, true);
var reader = entry.createReader();
reader.readEntries(function(entries) {
importEntriesRecursively(entries, todo);
});
}
});
}
function importFiles(files) {
files = [].slice.call(files);
var todo = files.length,
imageName = null;
files.forEach(function(f) {
var reader = new FileReader();
reader.onload = function () {
var buffer = this.result;
console.log("Storing " + f.name + " (" + buffer.byteLength + " bytes)");
if (/.*image$/.test(f.name)) imageName = f.name;
Squeak.filePut(f.name, buffer, function success() {
if (--todo > 0) return;
afterImport(imageName);
});
}
reader.onerror = function() {
alert("Failed to read " + f.name);
drop.style.borderColor = "";
}
reader.readAsArrayBuffer(f);
});
}
function afterImport(imageName) {
setTimeout(() => drop.style.borderColor = "", 500);
if (!imageName) showFiles();
else {
const hash = '#' + paramsForImage(imageName);
if (location.hash !== hash) history.pushState({}, "", hash);
runSqueak(imageName);
}
}
function exportFile(a) {
var path = Squeak.splitFilePath(a.innerText);
Squeak.fileGet(path.fullname, function(buffer) {
var blob = new Blob([buffer], {type: 'application/octet-stream'});
FileSaver_saveAs(blob, path.basename, true);
}, alert);
return false;
}
function paramsForImage(imageName) {
var params = new URLSearchParams(location.hash.slice(1));
params.set("image", imageName);
return params.toString();
}
function showFiles() {
var imgList = [],
fileList = [],
dirs = [''],
nFiles = 0,
nDirs = 0,
nBytes = 0;
while (dirs.length > 0) {
var dir = dirs.pop(),
entries = Squeak.dirList(dir);
for (var f in entries) {
var entry = entries[f],
path = dir + '/' + f;
if (!entry[3] && f.match(/\.image$/))
imgList.push('<li><a href="#' + paramsForImage(path) + '">' + path + '</a> (' + (entry[4]/1000000).toFixed(1) + ' MB)</li>');
if (entry[3]) {
dirs.push(path);
nDirs++;
} else {
nFiles++;
nBytes += entry[4];
fileList.push('<li><a href="squeak:' + path + '" onclick="return exportFile(this)" target="_blank">' + path + '</a>' +
(entry[4] >= 100000 ? ' (' + (entry[4]/1000000).toFixed(1) + ' MB)'
: ' (' + (entry[4]/1000).toFixed(1) + ' KB)') + '</li>');
}
};
}
function fdir(s) { return s.replace(/<[^>]*>/gi,'').replace(/[^\/]*$/, ''); }
function fsort(a, b) { return fdir(a).localeCompare(fdir(b)) || a.localeCompare(b); }
if (fileList.length) {
files.innerHTML = "<ul>" + fileList.sort(fsort).join("") + "</ul>";
filestats.innerHTML = nFiles + " files in " + nDirs + " directories, " +
(nBytes/1000000).toFixed(1) + " MBytes total";
}
if (imgList.length) images.innerHTML = "<p>Select a local image to run:</p><ul>" + imgList.sort(fsort).join("") + "</ul>";
else images.innerHTML = "<ul>[Once you have dropped local images to this page they will be listed here.]</ul>"
}
window.onhashchange = function() {
window.location.reload();
}
window.onload = function() {
// if we have an image or zip in hash then we run Squeak with the options provided in the url
if ((location.hash || location.search).match(/(\.image(\W|$)|\Wzip=)/)) {
return runSqueak();
}
// otherwise we run the demo ...
runDemo();
// ... and generate the text to display
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
var link = links[i],
href = link.getAttribute("href");
if (href[0] === "#") {
link.innerHTML = href;
link.onclick = (function(href) {
return function onclick() { window.location = href; }
})(href);
}
}
// show stored files and images. Update after fsck (which takes a while)
showFiles();
setTimeout(function() {
Squeak.fsck(function(stats) { if (stats.deleted) showFiles(); });
}, 0);
// also, enable drag-and-drop even if no image loaded yet
// (squeak.js will replace these when an image is running)
document.body.ondragover = function(evt) {
evt.preventDefault();
};
document.body.ondragenter = function(evt) {
drop.style.borderColor = "#0E0";
evt.dataTransfer.dropEffect = "copy";
};
document.body.ondragleave = function(evt) {
drop.style.borderColor = "";
};
document.body.ondrop = function(evt) {
evt.preventDefault();
drop.style.borderColor = "#080";
importItems(evt.dataTransfer.items);
return false;
};
fileInput.onchange = function(evt) {
drop.style.borderColor = "#0F0";
importFiles(evt.target.files);
};
}
</script>
</head>
<body>
<canvas id="sqCanvas" width="800" height="600"></canvas>
<div id="sqSpinner"><div></div></div>
<div id="sqText">
<h1></h1>
<p>This page gives you a glimpse of <a href="http://squeak.org/" target="_blank">Squeak</a> without installing anything. It is using
<a href="https://squeak.js.org/" target="_blank">SqueakJS</a>, a way of running Squeak directly in a web browser.</p>
<p>It is quite slow compared to <a href="http://www.squeak.org/downloads" target="_blank">native Squeak</a>,
because this is executing a Squeak Virtual Machine inside a JavaScript Virtual Machine.</p>
<p>Above you see Squeak 6.0. You can try older versions below.</p>
<h2>Other Squeak images</h2>
You can try your own Squeak images by dropping them into this page.
Or you can construct a URL linking to this page and pass the image and options.
<em>Beware that the server needs to allow script access via <a href="https://enable-cors.org/server.html" target="_blank">CORS</a>.</em>
<br>Here are a few examples (the zip files here each contain an image, changes and sources file):
<ul>
<li>Squeak 1.13 (1996) <a href="#url=images&zip=Squeak1.13u.zip&swapButtons=true">link</a></li>
<li>Squeak 2.8 (2000) <a href="#url=images&zip=Squeak2.8.zip&swapButtons=true">link</a></li>
<li>Squeak 3.8 (2006) <a href="#url=images&zip=Squeak3.8.1.zip&swapButtons=true">link</a></li>
<li>Squeak 3.9 (2008) <a href="#url=images&zip=Squeak3.9.1.zip&swapButtons=true">link</a></li>
<li>Squeak 4.5 (2014) <a href="#url=images&zip=Squeak4.5.zip">link</a></li>
<li>Squeak 5.0 (2015) <a href="#url=images&zip=Squeak5.0.zip">link</a></li>
<li>Squeak 5.3 (2020) <a href="#url=images&zip=Squeak5.3.zip&wizard=false">link</a></li>
<li>Squeak 6.0 (2024) <a href="#url=images&zip=Squeak6.0.zip&wizard=false">link</a></li>
<li>VMMaker (2025) <a href="#url=images&zip=VMMaker.zip">link</a></li>
<li>Mini + JSBridge <a href="#url=images&zip=SqueakJS.zip&swapButtons=true">link</a></li>
</ul>
On the first run these will be cached locally. Subsequent starts are faster. You can modify and save an image, it will be stored in and loaded from your local browser (see the file list below).
<h2>Run Squeak For Real</h2>
<a href="https://www.squeak.org/downloads" target="_blank">Download</a> a high-performance Virtual Machine for Squeak and run it as an app from your desktop.
Other optimized Virtual Machines are available for iOS and Android mobile devices.
<h2>Your SqueakJS Files</h2>
You can use drag-and-drop to run a Squeak image from your machine: drop the image (perhaps together with a changes and sources file) into this page.
<div id="images"></div>
All images and related files are stored persistently in a database inside your browser.
The box below shows the files that are currently in your database. Inside Squeak, you can use a FileList
to manage them.
<div id="drop">Drop Squeak images and other files here, or <input id="fileInput" type="file" multiple>
<div id="files" class="filelist"></div>
<div id="filestats"></div>
</div>
Clicking on a name in the box will export that file to your browser's downloads folder.
</div>
</body>
</html>