Initial
This commit is contained in:
commit
7d93dffaed
27 changed files with 7735 additions and 0 deletions
393
app/public/app.js
Normal file
393
app/public/app.js
Normal file
|
|
@ -0,0 +1,393 @@
|
|||
// theme preference
|
||||
function media_theme_pref() {
|
||||
document.documentElement.removeAttribute("class");
|
||||
|
||||
if (
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches &&
|
||||
(!window.localStorage.getItem("malachite.app:theme") ||
|
||||
window.localStorage.getItem("malachite.app: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("malachite.app:theme") ||
|
||||
window.localStorage.getItem("malachite.app: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("malachite.app:theme")) {
|
||||
/* restore theme */
|
||||
const current = window.localStorage.getItem("malachite.app: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.temporary_set_theme = (theme) => {
|
||||
document.documentElement.className = theme.toLowerCase();
|
||||
|
||||
if (theme === "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("malachite.app: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=/`;
|
||||
}
|
||||
}
|
||||
|
||||
globalThis.show_message = (message, message_good = true) => {
|
||||
const element = document.getElementById("messages");
|
||||
element.style.marginBottom = "1rem";
|
||||
element.style.paddingLeft = "1rem";
|
||||
element.innerHTML = `<li class="${message_good ? "green" : "red"}">${message.replaceAll('"', "")}</li>`;
|
||||
};
|
||||
|
||||
check_message();
|
||||
|
||||
// editor
|
||||
globalThis.init_editor = (
|
||||
name = "editor",
|
||||
mode = "markdown",
|
||||
element = "editor_tab",
|
||||
content_element = "editor_content",
|
||||
) => {
|
||||
globalThis[name] = CodeMirror(document.getElementById(element), {
|
||||
value: (document.getElementById(content_element) || { innerHTML: "" })
|
||||
.innerHTML,
|
||||
mode,
|
||||
lineWrapping: true,
|
||||
lineNumbers: false,
|
||||
autoCloseBrackets: true,
|
||||
autofocus: true,
|
||||
viewportMargin: Number.POSITIVE_INFINITY,
|
||||
inputStyle: "contenteditable",
|
||||
highlightFormatting: false,
|
||||
fencedCodeBlockHighlighting: false,
|
||||
xml: false,
|
||||
smartIndent: false,
|
||||
indentUnit: 4,
|
||||
tabSize: 4,
|
||||
indentWithTabs: false,
|
||||
placeholder: "",
|
||||
extraKeys: {
|
||||
Home: "goLineLeft",
|
||||
End: "goLineRight",
|
||||
Enter: (cm) => {
|
||||
cm.replaceSelection("\n");
|
||||
},
|
||||
Tab: "insertSoftTab",
|
||||
},
|
||||
});
|
||||
|
||||
if (name === "editor") {
|
||||
window.addEventListener("beforeunload", (e) => {
|
||||
if (!globalThis.ALLOW_LEAVE) {
|
||||
e.preventDefault();
|
||||
return null;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
globalThis.tab_editor = () => {
|
||||
document.getElementById("editor_tab").classList.remove("hidden");
|
||||
document.getElementById("preview_tab").classList.add("hidden");
|
||||
document.getElementById("metadata_tab").classList.add("hidden");
|
||||
|
||||
document.getElementById("editor_tab_button").classList.remove("camo");
|
||||
document.getElementById("preview_tab_button").classList.add("camo");
|
||||
document.getElementById("metadata_tab_button").classList.add("camo");
|
||||
|
||||
if (document.getElementById("metadata_css")) {
|
||||
document.getElementById("metadata_css").remove();
|
||||
}
|
||||
};
|
||||
|
||||
globalThis.get_preview = async () => {
|
||||
return await (
|
||||
await fetch("/api/v1/render", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
content: globalThis.editor.getValue(),
|
||||
metadata: globalThis.metadata_editor.getValue(),
|
||||
}),
|
||||
})
|
||||
).text();
|
||||
};
|
||||
|
||||
globalThis.tab_preview = async () => {
|
||||
if (
|
||||
!document
|
||||
.getElementById("preview_tab_button")
|
||||
.classList.contains("camo")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// render
|
||||
const res = await get_preview();
|
||||
|
||||
document.getElementById("preview_tab").innerHTML = res;
|
||||
hljs.highlightAll();
|
||||
|
||||
// ...
|
||||
document.getElementById("editor_tab").classList.add("hidden");
|
||||
document.getElementById("preview_tab").classList.remove("hidden");
|
||||
document.getElementById("metadata_tab").classList.add("hidden");
|
||||
|
||||
document.getElementById("editor_tab_button").classList.add("camo");
|
||||
document.getElementById("preview_tab_button").classList.remove("camo");
|
||||
document.getElementById("metadata_tab_button").classList.add("camo");
|
||||
};
|
||||
|
||||
globalThis.first_time_on_metadata_tab = true;
|
||||
globalThis.tab_metadata = () => {
|
||||
document.getElementById("editor_tab").classList.add("hidden");
|
||||
document.getElementById("preview_tab").classList.add("hidden");
|
||||
document.getElementById("metadata_tab").classList.remove("hidden");
|
||||
|
||||
document.getElementById("editor_tab_button").classList.add("camo");
|
||||
document.getElementById("preview_tab_button").classList.add("camo");
|
||||
document.getElementById("metadata_tab_button").classList.remove("camo");
|
||||
|
||||
if (globalThis.first_time_on_metadata_tab) {
|
||||
globalThis.metadata_editor.refresh();
|
||||
}
|
||||
|
||||
globalThis.first_time_on_metadata_tab = false;
|
||||
};
|
||||
|
||||
let exists_timeout = null;
|
||||
globalThis.check_exists_input = (e) => {
|
||||
if (exists_timeout) {
|
||||
clearTimeout(exists_timeout);
|
||||
}
|
||||
|
||||
exists_timeout = setTimeout(async () => {
|
||||
if (e.target.value.length < 2 || e.target.value.length > 32) {
|
||||
e.target.setCustomValidity("");
|
||||
e.target.removeAttribute("data-invalid");
|
||||
e.target.reportValidity();
|
||||
return;
|
||||
}
|
||||
|
||||
const exists = (
|
||||
await (await fetch(`/api/v1/entries/${e.target.value}`)).json()
|
||||
).payload;
|
||||
|
||||
console.log(exists);
|
||||
if (exists) {
|
||||
e.target.setCustomValidity("Slug is already in use");
|
||||
e.target.setAttribute("data-invalid", "true");
|
||||
} else {
|
||||
e.target.setCustomValidity("");
|
||||
e.target.removeAttribute("data-invalid");
|
||||
}
|
||||
|
||||
e.target.reportValidity();
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// components
|
||||
function close_dropdowns() {
|
||||
for (const dropdown of Array.from(
|
||||
document.querySelectorAll(".inner.open"),
|
||||
)) {
|
||||
dropdown.classList.remove("open");
|
||||
}
|
||||
}
|
||||
|
||||
globalThis.open_dropdown = (event) => {
|
||||
event.stopImmediatePropagation();
|
||||
let target = event.target;
|
||||
|
||||
while (!target.matches(".dropdown")) {
|
||||
target = target.parentElement;
|
||||
}
|
||||
|
||||
// close all others
|
||||
close_dropdowns();
|
||||
|
||||
// open
|
||||
setTimeout(() => {
|
||||
for (const dropdown of Array.from(target.querySelectorAll(".inner"))) {
|
||||
// check y
|
||||
const box = target.getBoundingClientRect();
|
||||
|
||||
let parent = dropdown.parentElement;
|
||||
|
||||
while (!parent.matches("html, .window")) {
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
|
||||
let parent_height = parent.getBoundingClientRect().y;
|
||||
|
||||
if (parent.nodeName === "HTML") {
|
||||
parent_height = window.screen.height;
|
||||
}
|
||||
|
||||
const scroll = window.scrollY;
|
||||
const height = parent_height;
|
||||
const y = box.y + scroll;
|
||||
|
||||
if (y > height - scroll - 375) {
|
||||
dropdown.classList.add("top");
|
||||
} else {
|
||||
dropdown.classList.remove("top");
|
||||
}
|
||||
|
||||
// open
|
||||
dropdown.classList.add("open");
|
||||
|
||||
if (dropdown.classList.contains("open")) {
|
||||
dropdown.removeAttribute("aria-hidden");
|
||||
} else {
|
||||
dropdown.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
}
|
||||
}, 5);
|
||||
};
|
||||
|
||||
globalThis.init_dropdowns = (bind_to) => {
|
||||
for (const dropdown of Array.from(document.querySelectorAll(".inner"))) {
|
||||
dropdown.setAttribute("aria-hidden", "true");
|
||||
}
|
||||
|
||||
bind_to.addEventListener("click", (event) => {
|
||||
if (
|
||||
event.target.matches(".dropdown") ||
|
||||
event.target.matches("[exclude=dropdown]")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (const dropdown of Array.from(
|
||||
document.querySelectorAll(".inner.open"),
|
||||
)) {
|
||||
dropdown.classList.remove("open");
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
globalThis.METADATA_CSS_ENABLED = true;
|
||||
globalThis.toggle_metadata_css = (e) => {
|
||||
e.target.classList.add("yellow");
|
||||
|
||||
METADATA_CSS_ENABLED = !METADATA_CSS_ENABLED;
|
||||
if (!METADATA_CSS_ENABLED) {
|
||||
media_theme_pref(); // user user theme
|
||||
document.getElementById("metadata_css").remove(); // remove css
|
||||
|
||||
// reset colored text
|
||||
for (const element of Array.from(
|
||||
document.querySelectorAll("#content_rect .color_block"),
|
||||
)) {
|
||||
element.removeAttribute("style");
|
||||
element.classList.remove("color_block");
|
||||
}
|
||||
|
||||
// strikethrough auto theme since it's disabled
|
||||
if (document.getElementById("auto_theme")) {
|
||||
document.getElementById("auto_theme").style.textDecoration =
|
||||
"line-through";
|
||||
}
|
||||
|
||||
// remove styles
|
||||
for (const element of Array.from(
|
||||
document.querySelectorAll("#content_rect style"),
|
||||
)) {
|
||||
element.remove();
|
||||
}
|
||||
|
||||
for (const element of Array.from(
|
||||
document.querySelectorAll("#content_rect [style]"),
|
||||
)) {
|
||||
element.removeAttribute("style");
|
||||
}
|
||||
} else {
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
globalThis.hash_check = (hash) => {
|
||||
if (hash.startsWith("#/")) {
|
||||
for (const x of Array.from(document.querySelectorAll(".subpage"))) {
|
||||
x.classList.add("hidden");
|
||||
}
|
||||
|
||||
document.getElementById(hash).classList.remove("hidden");
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("hashchange", (_) => hash_check(window.location.hash));
|
||||
|
||||
setTimeout(() => {
|
||||
// run initial hash check
|
||||
hash_check(window.location.hash);
|
||||
}, 150);
|
||||
|
||||
globalThis.submitter_load = (submitter) => {
|
||||
return {
|
||||
load() {
|
||||
submitter.querySelector("[ui_ident=text]").classList.add("hidden");
|
||||
submitter
|
||||
.querySelector("[ui_ident=loader]")
|
||||
.classList.remove("hidden");
|
||||
submitter.setAttribute("disabled", "true");
|
||||
},
|
||||
failed() {
|
||||
submitter
|
||||
.querySelector("[ui_ident=text]")
|
||||
.classList.remove("hidden");
|
||||
submitter
|
||||
.querySelector("[ui_ident=loader]")
|
||||
.classList.add("hidden");
|
||||
submitter.removeAttribute("disabled");
|
||||
},
|
||||
};
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue