fluffle/app/public/app.js

137 lines
4.5 KiB
JavaScript
Raw Normal View History

2025-07-20 02:49:01 -04:00
// theme preference
function media_theme_pref() {
document.documentElement.removeAttribute("class");
if (
window.matchMedia("(prefers-color-scheme: dark)").matches &&
(!window.localStorage.getItem("attobin:theme") ||
window.localStorage.getItem("attobin:theme") === "Auto")
) {
document.documentElement.classList.add("dark");
document.getElementById("switch_light").classList.add("hidden");
document.getElementById("switch_dark").classList.remove("hidden");
} else if (
window.matchMedia("(prefers-color-scheme: light)").matches &&
(!window.localStorage.getItem("attobin:theme") ||
window.localStorage.getItem("attobin:theme") === "Auto")
) {
document.documentElement.classList.remove("dark");
document.getElementById("switch_light").classList.remove("hidden");
document.getElementById("switch_dark").classList.add("hidden");
} else if (window.localStorage.getItem("attobin:theme")) {
/* restore theme */
const current = window.localStorage.getItem("attobin:theme");
document.documentElement.className = current.toLowerCase();
if (current === "Light") {
document.getElementById("switch_light").classList.remove("hidden");
document.getElementById("switch_dark").classList.add("hidden");
} else {
document.getElementById("switch_light").classList.add("hidden");
document.getElementById("switch_dark").classList.remove("hidden");
}
}
}
globalThis.set_theme = (theme) => {
window.localStorage.setItem("attobin:theme", theme);
document.documentElement.className = theme;
media_theme_pref();
};
media_theme_pref();
// messages
function get_cookie(key) {
return (document.cookie.split(`${key}=`)[1] || "").split(";")[0];
}
function check_message() {
const element = document.getElementById("messages");
const message = get_cookie("Atto-Message");
const message_good = get_cookie("Atto-Message-Good") === "true";
if (message) {
element.style.marginBottom = "1rem";
element.style.paddingLeft = "1rem";
element.innerHTML += `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;
}
// clear cookies
for (cookie of document.cookie.split(";")) {
// biome-ignore lint/suspicious/noDocumentCookie: cookie store is barely supported
document.cookie = `${cookie.split("=")[0]}=; expires=${new Date(0).toUTCString()}; path=/`;
}
}
check_message();
// editor
globalThis.init_editor = () => {
globalThis.editor = CodeMirror(document.getElementById("editor_tab"), {
value: (document.getElementById("editor_content") || { innerHTML: "" })
.innerHTML,
mode: "markdown",
lineWrapping: true,
lineNumbers: false,
autoCloseBrackets: true,
autofocus: true,
viewportMargin: Number.POSITIVE_INFINITY,
inputStyle: "contenteditable",
highlightFormatting: false,
fencedCodeBlockHighlighting: false,
xml: false,
smartIndent: true,
indentUnit: 4,
placeholder: "",
extraKeys: {
Home: "goLineLeft",
End: "goLineRight",
Enter: (cm) => {
cm.replaceSelection("\n");
},
},
});
window.addEventListener("beforeunload", (e) => {
2025-07-20 03:24:55 -04:00
if (!globalThis.ALLOW_LEAVE) {
e.preventDefault();
return null;
}
2025-07-20 02:49:01 -04:00
});
};
globalThis.tab_editor = () => {
document.getElementById("editor_tab").classList.remove("hidden");
document.getElementById("preview_tab").classList.add("hidden");
document.getElementById("editor_tab_button").classList.remove("camo");
document.getElementById("preview_tab_button").classList.add("camo");
};
globalThis.tab_preview = async () => {
// render
const res = await (
await fetch("/api/v1/render", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
content: globalThis.editor.getValue(),
}),
})
).text();
document.getElementById("preview_tab").innerHTML = res;
hljs.highlightAll();
// ...
document.getElementById("editor_tab").classList.add("hidden");
document.getElementById("preview_tab").classList.remove("hidden");
document.getElementById("editor_tab_button").classList.add("camo");
document.getElementById("preview_tab_button").classList.remove("camo");
};