103 lines
3.3 KiB
JavaScript
103 lines
3.3 KiB
JavaScript
|
async function init() {
|
||
|
|
// Make edit button send the "blur" API call so that the MD code is visible
|
||
|
|
document.getElementById("edit-button").addEventListener("click", () => {
|
||
|
|
api({ type: "blur" });
|
||
|
|
});
|
||
|
|
document.getElementById("reload-button").addEventListener("click", () => {
|
||
|
|
api({ type: "reload" });
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll("a[data-ref]").forEach((el) => {
|
||
|
|
el.addEventListener("click", (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
syscall("editor.navigate", el.dataset.ref);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// Find all fenced code blocks and replace them with iframes (if a code widget is defined for them)
|
||
|
|
const allWidgets = document.querySelectorAll("pre[data-lang]");
|
||
|
|
for (const widget of allWidgets) {
|
||
|
|
const lang = widget.getAttribute("data-lang");
|
||
|
|
const body = widget.innerText;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const result = await syscall("widget.render", lang, body);
|
||
|
|
const iframe = document.createElement("iframe");
|
||
|
|
iframe.srcdoc = panelHtml; // set as a global
|
||
|
|
iframe.onload = () => {
|
||
|
|
iframe.contentWindow.postMessage({
|
||
|
|
type: "html",
|
||
|
|
theme: document.getElementsByTagName("html")[0].getAttribute(
|
||
|
|
"data-theme",
|
||
|
|
),
|
||
|
|
...result,
|
||
|
|
}, "*");
|
||
|
|
};
|
||
|
|
widget.parentNode.replaceChild(iframe, widget);
|
||
|
|
|
||
|
|
globalThis.addEventListener("message", (e) => {
|
||
|
|
if (e.source !== iframe.contentWindow) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const messageData = e.data;
|
||
|
|
switch (messageData.type) {
|
||
|
|
case "setHeight":
|
||
|
|
iframe.style.height = messageData.height + "px";
|
||
|
|
// Propagate height setting to parent
|
||
|
|
updateHeight();
|
||
|
|
break;
|
||
|
|
case "syscall": {
|
||
|
|
// Intercept syscall messages and send them to the parent
|
||
|
|
const { id, name, args } = messageData;
|
||
|
|
syscall(name, ...args).then((result) => {
|
||
|
|
iframe.contentWindow.postMessage(
|
||
|
|
{ id, type: "syscall-response", result },
|
||
|
|
"*",
|
||
|
|
);
|
||
|
|
}).catch((error) => {
|
||
|
|
iframe.contentWindow.postMessage({
|
||
|
|
id,
|
||
|
|
type: "syscall-response",
|
||
|
|
error,
|
||
|
|
}, "*");
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
default:
|
||
|
|
// Bubble up any other messages to parent iframe
|
||
|
|
window.parent.postMessage(messageData, "*");
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} catch (e) {
|
||
|
|
if (e.message.includes("not found")) {
|
||
|
|
// Not a code widget, ignore
|
||
|
|
} else {
|
||
|
|
console.error("Error rendering widget", e);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Find all task toggles and propagate their state
|
||
|
|
document.querySelectorAll("span[data-external-task-ref]").forEach((el) => {
|
||
|
|
const taskRef = el.dataset.externalTaskRef;
|
||
|
|
el.querySelector("input[type=checkbox]").addEventListener("change", (e) => {
|
||
|
|
const oldState = e.target.dataset.state;
|
||
|
|
const newState = oldState === " " ? "x" : " ";
|
||
|
|
// Update state in DOM as well for future toggles
|
||
|
|
e.target.dataset.state = newState;
|
||
|
|
console.log("Toggling task", taskRef);
|
||
|
|
syscall(
|
||
|
|
"system.invokeFunction",
|
||
|
|
"tasks.updateTaskState",
|
||
|
|
taskRef,
|
||
|
|
oldState,
|
||
|
|
newState,
|
||
|
|
).catch(
|
||
|
|
console.error,
|
||
|
|
);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
init().catch(console.error);
|