2023-10-03 12:16:33 +00:00
|
|
|
export const panelHtml = `<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<base target="_top">
|
|
|
|
|
<script>
|
|
|
|
|
const pendingRequests = new Map();
|
|
|
|
|
let syscallReqId = 0;
|
|
|
|
|
|
|
|
|
|
self.syscall = async (name, ...args) => {
|
|
|
|
|
return await new Promise((resolve, reject) => {
|
|
|
|
|
syscallReqId++;
|
|
|
|
|
pendingRequests.set(syscallReqId, { resolve, reject });
|
|
|
|
|
window.parent.postMessage({
|
|
|
|
|
type: "syscall",
|
|
|
|
|
id: syscallReqId,
|
|
|
|
|
name,
|
|
|
|
|
args,
|
|
|
|
|
}, "*");
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
2023-10-04 14:21:18 +00:00
|
|
|
let oldHeight = undefined;
|
|
|
|
|
let heightChecks = 0;
|
|
|
|
|
|
2023-10-03 12:16:33 +00:00
|
|
|
window.addEventListener("message", (message) => {
|
|
|
|
|
const data = message.data;
|
|
|
|
|
switch (data.type) {
|
|
|
|
|
case "html":
|
|
|
|
|
document.body.innerHTML = data.html;
|
|
|
|
|
if(data.theme) {
|
|
|
|
|
document.getElementsByTagName("html")[0].setAttribute("data-theme", data.theme);
|
|
|
|
|
}
|
|
|
|
|
if (data.script) {
|
|
|
|
|
try {
|
|
|
|
|
eval(data.script);
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error("Error evaling script", e);
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-10-04 14:21:18 +00:00
|
|
|
setTimeout(() => {
|
|
|
|
|
oldHeight = undefined;
|
|
|
|
|
heightChecks = 0;
|
|
|
|
|
updateHeight();
|
|
|
|
|
});
|
2023-10-03 12:16:33 +00:00
|
|
|
break;
|
|
|
|
|
case "syscall-response":
|
|
|
|
|
{
|
|
|
|
|
const syscallId = data.id;
|
|
|
|
|
const lookup = pendingRequests.get(syscallId);
|
|
|
|
|
if (!lookup) {
|
|
|
|
|
console.log(
|
|
|
|
|
"Current outstanding requests",
|
|
|
|
|
pendingRequests,
|
|
|
|
|
"looking up",
|
|
|
|
|
syscallId,
|
|
|
|
|
);
|
|
|
|
|
throw Error("Invalid request id");
|
|
|
|
|
}
|
|
|
|
|
pendingRequests.delete(syscallId);
|
|
|
|
|
if (data.error) {
|
|
|
|
|
lookup.reject(new Error(data.error));
|
|
|
|
|
} else {
|
|
|
|
|
lookup.resolve(data.result);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function api(obj) {
|
|
|
|
|
window.parent.postMessage(obj, "*");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateHeight() {
|
|
|
|
|
const body = document.body, html = document.documentElement;
|
2023-10-04 11:47:02 +00:00
|
|
|
let height = Math.max(body.offsetHeight, html.offsetHeight);
|
2023-10-03 12:16:33 +00:00
|
|
|
heightChecks++;
|
|
|
|
|
if(height !== oldHeight) {
|
|
|
|
|
oldHeight = height;
|
|
|
|
|
api({
|
|
|
|
|
type: "setHeight",
|
|
|
|
|
height: height,
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if(heightChecks < 25) {
|
|
|
|
|
setTimeout(updateHeight, 100);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function loadJsByUrl(url) {
|
|
|
|
|
const script = document.createElement("script");
|
|
|
|
|
script.src = url;
|
|
|
|
|
|
|
|
|
|
return new Promise((resolve) => {
|
|
|
|
|
script.onload = resolve;
|
|
|
|
|
document.documentElement.firstChild.appendChild(script);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2023-11-12 10:50:49 +00:00
|
|
|
<!-- Load SB's own CSS here too -->
|
2023-11-15 08:31:44 +00:00
|
|
|
<link rel="stylesheet" href="/.client/main.css">
|
2023-11-12 10:50:49 +00:00
|
|
|
<style>
|
|
|
|
|
html,
|
|
|
|
|
body {
|
|
|
|
|
height: initial !important;
|
2023-11-16 08:59:37 +00:00
|
|
|
overflow-x: initial !important;
|
|
|
|
|
overflow-y: hidden !important;
|
2023-11-12 10:50:49 +00:00
|
|
|
background-color: var(--root-background-color);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
2023-10-03 12:16:33 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>`;
|
