Skip to content

Commit 7070c9a

Browse files
authored
Merge pull request #59 from felipemanga/master
Added initial version of online editor
2 parents 9e252a8 + 9f0e5a2 commit 7070c9a

File tree

6 files changed

+8404
-0
lines changed

6 files changed

+8404
-0
lines changed

online/enable-threads.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// NOTE: This file creates a service worker that cross-origin-isolates the page (read more here: https://web.dev/coop-coep/) which allows us to use wasm threads.
2+
// Normally you would set the COOP and COEP headers on the server to do this, but Github Pages doesn't allow this, so this is a hack to do that.
3+
4+
/* Edited version of: coi-serviceworker v0.1.6 - Guido Zuidhof, licensed under MIT */
5+
// From here: https://github.com/gzuidhof/coi-serviceworker
6+
if(typeof window === 'undefined') {
7+
self.addEventListener("install", () => self.skipWaiting());
8+
self.addEventListener("activate", e => e.waitUntil(self.clients.claim()));
9+
10+
async function handleFetch(request) {
11+
if(request.cache === "only-if-cached" && request.mode !== "same-origin") {
12+
return;
13+
}
14+
15+
if(request.mode === "no-cors") { // We need to set `credentials` to "omit" for no-cors requests, per this comment: https://bugs.chromium.org/p/chromium/issues/detail?id=1309901#c7
16+
request = new Request(request.url, {
17+
cache: request.cache,
18+
credentials: "omit",
19+
headers: request.headers,
20+
integrity: request.integrity,
21+
destination: request.destination,
22+
keepalive: request.keepalive,
23+
method: request.method,
24+
mode: request.mode,
25+
redirect: request.redirect,
26+
referrer: request.referrer,
27+
referrerPolicy: request.referrerPolicy,
28+
signal: request.signal,
29+
});
30+
}
31+
32+
let r = await fetch(request).catch(e => console.error(e));
33+
34+
if(r.status === 0) {
35+
return r;
36+
}
37+
38+
const headers = new Headers(r.headers);
39+
headers.set("Cross-Origin-Embedder-Policy", "require-corp"); // or: require-corp
40+
headers.set("Cross-Origin-Opener-Policy", "same-origin");
41+
42+
return new Response(r.body, { status: r.status, statusText: r.statusText, headers });
43+
}
44+
45+
self.addEventListener("fetch", function(e) {
46+
e.respondWith(handleFetch(e.request)); // respondWith must be executed synchonously (but can be passed a Promise)
47+
});
48+
49+
} else {
50+
(async function() {
51+
if(window.crossOriginIsolated !== false) return;
52+
53+
let registration = await navigator.serviceWorker.register(window.document.currentScript.src).catch(e => console.error("COOP/COEP Service Worker failed to register:", e));
54+
if(registration) {
55+
console.log("COOP/COEP Service Worker registered", registration.scope);
56+
57+
registration.addEventListener("updatefound", () => {
58+
console.log("Reloading page to make use of updated COOP/COEP Service Worker.");
59+
window.location.reload();
60+
});
61+
62+
// If the registration is active, but it's not controlling the page
63+
if(registration.active && !navigator.serviceWorker.controller) {
64+
console.log("Reloading page to make use of COOP/COEP Service Worker.");
65+
window.location.reload();
66+
}
67+
}
68+
})();
69+
}
70+
71+
// Code to deregister:
72+
// let registrations = await navigator.serviceWorker.getRegistrations();
73+
// for(let registration of registrations) {
74+
// await registration.unregister();
75+
// }

online/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctypehtml>
2+
<html lang=en-us>
3+
<head>
4+
<meta charset=utf-8>
5+
<meta content="text/html; charset=utf-8"http-equiv=Content-Type>
6+
<title>LibreSprite 1.1-dev</title>
7+
<script src="enable-threads.js"></script>
8+
<style>
9+
body,html,canvas {
10+
position: absolute;
11+
top:0;left:0;bottom:0;right:0;
12+
margin:0; padding:0;
13+
width:100%; height:100%;
14+
}
15+
body{font-family:arial;margin:0;padding:none}.emscripten{padding-right:0;margin-left:auto;margin-right:auto;display:block}div.emscripten{text-align:center}div.emscripten_border{border:1px solid #000}canvas.emscripten{border:0 none;background-color:#000}#emscripten_logo{display:inline-block;margin:0;padding:6px;width:265px}.spinner{height:30px;width:30px;margin:0;margin-top:20px;margin-left:20px;display:inline-block;vertical-align:top;-webkit-animation:rotation .8s linear infinite;-moz-animation:rotation .8s linear infinite;-o-animation:rotation .8s linear infinite;animation:rotation .8s linear infinite;border-left:5px solid #ebebeb;border-right:5px solid #ebebeb;border-bottom:5px solid #ebebeb;border-top:5px solid #787878;border-radius:100%;background-color:#bdd72e}@-webkit-keyframes rotation{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotation{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@-o-keyframes rotation{from{-o-transform:rotate(0)}to{-o-transform:rotate(360deg)}}@keyframes rotation{from{transform:rotate(0)}to{transform:rotate(360deg)}}#status{display:inline-block;vertical-align:top;margin-top:30px;margin-left:20px;font-weight:700;color:#787878}#progress{height:20px;width:300px}#controls{display:inline-block;float:right;vertical-align:top;margin-top:30px;margin-right:20px}#output{display:none;width:100%;height:200px;margin:0 auto;margin-top:10px;border-left:0;border-right:0px;padding-left:0;padding-right:0;display:block;background-color:#000;color:#fff;font-family:'Lucida Console',Monaco,monospace;outline:0}
16+
</style>
17+
</head>
18+
<body>
19+
<div class=spinner id=spinner></div>
20+
<div class=emscripten id=status>Downloading...</div>
21+
<div class=emscripten>
22+
<progress hidden id=progress max=100 value=0></progress>
23+
</div>
24+
<canvas class=emscripten id=canvas oncontextmenu=event.preventDefault() tabindex=-1></canvas>
25+
<textarea id=output rows=8></textarea>
26+
<script>var statusElement=document.getElementById("status"),progressElement=document.getElementById("progress"),spinnerElement=document.getElementById("spinner"),Module={print:function(){var e=document.getElementById("output");return e&&(e.value=""),function(t){arguments.length>1&&(t=Array.prototype.slice.call(arguments).join(" ")),console.log(t),e&&(e.value+=t+"\n",e.scrollTop=e.scrollHeight)}}(),canvas:(()=>{var e=document.getElementById("canvas");return e.addEventListener("webglcontextlost",(e=>{alert("WebGL context lost. You will need to reload the page."),e.preventDefault()}),!1),e})(),setStatus:e=>{if(Module.setStatus.last||(Module.setStatus.last={time:Date.now(),text:""}),e!==Module.setStatus.last.text){var t=e.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/),n=Date.now();t&&n-Module.setStatus.last.time<30||(Module.setStatus.last.time=n,Module.setStatus.last.text=e,t?(e=t[1],progressElement.value=100*parseInt(t[2]),progressElement.max=100*parseInt(t[4]),progressElement.hidden=!1,spinnerElement.hidden=!1):(progressElement.value=null,progressElement.max=null,progressElement.hidden=!0,e||(spinnerElement.style.display="none")),statusElement.innerHTML=e)}},totalDependencies:0,monitorRunDependencies:e=>{this.totalDependencies=Math.max(this.totalDependencies,e),Module.setStatus(e?"Preparing... ("+(this.totalDependencies-e)+"/"+this.totalDependencies+")":"All downloads complete.")}};Module.setStatus("Downloading..."),window.onerror=e=>{Module.setStatus("Exception"),spinnerElement.style.display="none",Module.setStatus=e=>{e&&console.error("[post-exception status] "+e)}}</script><script async src=libresprite.js></script></body></html>

0 commit comments

Comments
 (0)