2024-05-25 15:57:15 +00:00
|
|
|
|
import {CodeJar} from "./codejar.js"
|
2024-06-03 18:31:01 +00:00
|
|
|
|
import hljs from "./highlight.min.js"
|
|
|
|
|
import "./htmx.js"
|
|
|
|
|
|
|
|
|
|
htmx.defineExtension('json-enc', {
|
|
|
|
|
onEvent: function (name, evt) {
|
|
|
|
|
if (name === "htmx:configRequest") {
|
|
|
|
|
evt.detail.headers['Content-Type'] = "application/json";
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
encodeParameters : function(xhr, parameters, elt) {
|
|
|
|
|
xhr.overrideMimeType('text/json');
|
|
|
|
|
return (JSON.stringify(parameters));
|
|
|
|
|
}
|
|
|
|
|
});
|
2024-05-25 15:57:15 +00:00
|
|
|
|
|
2024-05-25 16:33:44 +00:00
|
|
|
|
function highlight(editor) {
|
|
|
|
|
editor.textContent = editor.textContent;
|
|
|
|
|
editor.removeAttribute("data-highlighted");
|
|
|
|
|
hljs.highlightElement(editor);
|
|
|
|
|
}
|
2024-05-25 15:57:15 +00:00
|
|
|
|
|
|
|
|
|
function base64ToBytes(base64) {
|
|
|
|
|
const binString = atob(base64);
|
|
|
|
|
return Uint8Array.from(binString, (m) => m.codePointAt(0));
|
|
|
|
|
}
|
|
|
|
|
function base64Encode(str) {
|
|
|
|
|
return bytesToBase64(new TextEncoder().encode(str));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function bytesToBase64(bytes) {
|
|
|
|
|
const binString = Array.from(bytes, (byte) =>
|
|
|
|
|
String.fromCodePoint(byte),
|
|
|
|
|
).join("");
|
|
|
|
|
return btoa(binString);
|
|
|
|
|
}
|
|
|
|
|
function base64Decode(bytes) {
|
|
|
|
|
return new TextDecoder().decode(base64ToBytes(bytes));
|
|
|
|
|
}
|
|
|
|
|
|
2024-06-03 18:31:22 +00:00
|
|
|
|
function debounce(func, timeout = 300){
|
|
|
|
|
let timer;
|
|
|
|
|
return (...args) => {
|
|
|
|
|
clearTimeout(timer);
|
|
|
|
|
timer = setTimeout(() => { func.apply(this, args); }, timeout);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function saveToStorage(code) {
|
|
|
|
|
if (code.length) {
|
|
|
|
|
localStorage.setItem("code", code);
|
|
|
|
|
} else {
|
|
|
|
|
localStorage.removeItem("code");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2024-05-25 15:57:15 +00:00
|
|
|
|
let jar = CodeJar(document.querySelector('.editor'), highlight)
|
2024-06-03 18:31:22 +00:00
|
|
|
|
jar.onUpdate(debounce(saveToStorage));
|
2024-05-25 15:57:15 +00:00
|
|
|
|
const defaultCode = `use fmt;
|
|
|
|
|
|
|
|
|
|
export fn main() void = {
|
2024-05-25 16:28:00 +00:00
|
|
|
|
const greetings = [
|
|
|
|
|
"Hello, world!",
|
|
|
|
|
"¡Hola Mundo!",
|
|
|
|
|
"Γειά σου Κόσμε!",
|
|
|
|
|
"Привіт, світ!",
|
|
|
|
|
"こんにちは世界!",
|
|
|
|
|
];
|
|
|
|
|
for (let greeting .. greetings) {
|
|
|
|
|
fmt::println(greeting)!;
|
|
|
|
|
};
|
|
|
|
|
};`;
|
2024-05-25 15:57:15 +00:00
|
|
|
|
|
2024-06-03 18:31:22 +00:00
|
|
|
|
let savedCode = localStorage.getItem("code");
|
2024-05-25 15:57:15 +00:00
|
|
|
|
if (location.hash) {
|
|
|
|
|
let code = base64Decode(location.hash.substr(1));
|
|
|
|
|
jar.updateCode(code)
|
2024-06-03 18:31:22 +00:00
|
|
|
|
|
|
|
|
|
} else if (savedCode && savedCode.length) {
|
|
|
|
|
jar.updateCode(savedCode);
|
2024-05-25 15:57:15 +00:00
|
|
|
|
} else {
|
|
|
|
|
jar.updateCode(defaultCode);
|
|
|
|
|
}
|
|
|
|
|
|
2024-06-03 18:31:01 +00:00
|
|
|
|
document.getElementById("share-button").onclick = (e) => {
|
2024-05-25 15:57:15 +00:00
|
|
|
|
e.preventDefault();
|
|
|
|
|
let code = document.querySelector('.editor').innerText;
|
|
|
|
|
location.hash = base64Encode(code);
|
|
|
|
|
|
|
|
|
|
if (navigator.clipboard) {
|
|
|
|
|
let text = location.href;
|
|
|
|
|
navigator.clipboard.writeText(text).then(function() {
|
2024-06-03 18:31:01 +00:00
|
|
|
|
document.getElementById("status").innerText = "✓ Link copied!"
|
2024-05-25 15:57:15 +00:00
|
|
|
|
}, function(err) {
|
2024-06-03 18:31:01 +00:00
|
|
|
|
document.getElementById("status").innerText = "✓ Link changed. Copy the URL now."
|
2024-05-25 15:57:15 +00:00
|
|
|
|
});
|
|
|
|
|
} else {
|
2024-06-03 18:31:01 +00:00
|
|
|
|
document.getElementById("status").innerText = "✓ Link changed. Copy the URL now."
|
2024-05-25 15:57:15 +00:00
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
2024-06-03 18:31:01 +00:00
|
|
|
|
window.getCode = function getCode() {
|
|
|
|
|
return jar.toString();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let statusElem = document.getElementById("status");
|
|
|
|
|
|
|
|
|
|
document.body.addEventListener('htmx:beforeRequest', (event) => {
|
|
|
|
|
let elem = document.getElementById("htmx-indicator");
|
|
|
|
|
elem.style.display = "inline";
|
|
|
|
|
});
|
|
|
|
|
document.body.addEventListener('htmx:afterRequest', (event) => {
|
|
|
|
|
let elem = document.getElementById("htmx-indicator");
|
|
|
|
|
elem.style.display = "none";
|
|
|
|
|
});
|
|
|
|
|
document.body.addEventListener('htmx:beforeSwap', (event) => {
|
|
|
|
|
let detail = event.detail;
|
|
|
|
|
if (detail.isError) {
|
|
|
|
|
statusElem.innerText = "✘ Failed";
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
detail.shouldSwap = false;
|
|
|
|
|
statusElem.innerText = "✓ Done";
|
|
|
|
|
|
|
|
|
|
let x = detail.xhr;
|
|
|
|
|
let resp = JSON.parse(x.response);
|
|
|
|
|
|
|
|
|
|
let output = document.querySelector(".code-output code.stderr");
|
|
|
|
|
output.innerText = resp.stderr;
|
|
|
|
|
output = document.querySelector(".code-output code.stdout");
|
|
|
|
|
output.innerText = resp.stdout;
|
|
|
|
|
});
|