135 lines
3.5 KiB
JavaScript
135 lines
3.5 KiB
JavaScript
import {CodeJar} from "./codejar.js"
|
||
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));
|
||
}
|
||
});
|
||
|
||
function highlight(editor) {
|
||
editor.textContent = editor.textContent;
|
||
editor.removeAttribute("data-highlighted");
|
||
hljs.highlightElement(editor);
|
||
}
|
||
|
||
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));
|
||
}
|
||
|
||
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");
|
||
}
|
||
}
|
||
|
||
let jar = CodeJar(document.querySelector('.editor'), highlight)
|
||
jar.onUpdate(debounce(saveToStorage));
|
||
const defaultCode = `use fmt;
|
||
|
||
export fn main() void = {
|
||
const greetings = [
|
||
"Hello, world!",
|
||
"¡Hola Mundo!",
|
||
"Γειά σου Κόσμε!",
|
||
"Привіт, світ!",
|
||
"こんにちは世界！",
|
||
];
|
||
for (let greeting .. greetings) {
|
||
fmt::println(greeting)!;
|
||
};
|
||
};`;
|
||
|
||
let savedCode = localStorage.getItem("code");
|
||
if (location.hash) {
|
||
let code = base64Decode(location.hash.substr(1));
|
||
jar.updateCode(code)
|
||
|
||
} else if (savedCode && savedCode.length) {
|
||
jar.updateCode(savedCode);
|
||
} else {
|
||
jar.updateCode(defaultCode);
|
||
}
|
||
|
||
document.getElementById("share-button").onclick = (e) => {
|
||
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() {
|
||
document.getElementById("status").innerText = "✓ Link copied!"
|
||
}, function(err) {
|
||
document.getElementById("status").innerText = "✓ Link changed. Copy the URL now."
|
||
});
|
||
} else {
|
||
document.getElementById("status").innerText = "✓ Link changed. Copy the URL now."
|
||
}
|
||
};
|
||
|
||
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;
|
||
});
|