112 lines
4.2 KiB
JavaScript
112 lines
4.2 KiB
JavaScript
let blog_id = window.location.href.split("/")[4];
|
|
const post_content_area = qs("#post-content");
|
|
let images = [];
|
|
|
|
// TODO: Support videos
|
|
|
|
// Text area custom text editor
|
|
qs("#insert-sidebyside").addEventListener("click", () => textareaAction("{sidebyside}{/sidebyside}", 12));
|
|
qs("#insert-video").addEventListener("click", () => textareaAction("{video:}", 7));
|
|
qs("#insert-h1").addEventListener("click", () => textareaAction("# "));
|
|
qs("#insert-h2").addEventListener("click", () => textareaAction("## "));
|
|
qs("#insert-h3").addEventListener("click", () => textareaAction("### "));
|
|
qs("#insert-h4").addEventListener("click", () => textareaAction("#### "));
|
|
qs("#insert-underline").addEventListener("click", () => textareaAction("_", undefined, true));
|
|
qs("#insert-italics").addEventListener("click", () => textareaAction("*", undefined, true));
|
|
qs("#insert-bold").addEventListener("click", () => textareaAction("__", undefined, true));
|
|
qs("#insert-strike").addEventListener("click", () => textareaAction("~~", undefined, true));
|
|
qs("#insert-sup").addEventListener("click", () => textareaAction("^", undefined, true));
|
|
|
|
function textareaAction(insert, cursor_position, dual_side) {
|
|
// Insert the custom string at the cursor position
|
|
const selectionStart = post_content_area.selectionStart;
|
|
const selectionEnd = post_content_area.selectionEnd;
|
|
|
|
const textBefore = post_content_area.value.substring(0, selectionStart);
|
|
const textAfter = post_content_area.value.substring(selectionEnd);
|
|
const selectedText = post_content_area.value.substring(selectionStart, selectionEnd);
|
|
|
|
let updatedText;
|
|
|
|
if (dual_side) updatedText = `${textBefore}${insert}${selectedText}${insert}${textAfter}`;
|
|
else updatedText = `${textBefore}${insert}${selectedText}${textAfter}`;
|
|
|
|
post_content_area.value = updatedText;
|
|
|
|
// Set the cursor position after the custom string
|
|
post_content_area.focus();
|
|
const newPosition = selectionStart + (cursor_position || insert.length);
|
|
post_content_area.setSelectionRange(newPosition, newPosition);
|
|
}
|
|
|
|
// Upload an image to the blog post
|
|
post_content_area.addEventListener("drop", async (event) => {
|
|
event.preventDefault();
|
|
const files = event.dataTransfer.files;
|
|
// let image_queue = [];
|
|
|
|
for (let i = 0; i < files.length; i++) {
|
|
// Each dropped image will be stored in this formatted object
|
|
const image_object = {
|
|
data_blob: new Blob([await files[i].arrayBuffer()]),
|
|
content_type: files[i].type,
|
|
};
|
|
let form_data = {
|
|
buffer: await _readFile(image_object.data_blob),
|
|
post_id: blog_id,
|
|
};
|
|
|
|
const image_uploading_request = await request("/api/web/image", "POST", form_data);
|
|
|
|
if (image_uploading_request.status == 200) {
|
|
textareaAction(`{image:${image_uploading_request.body}}`);
|
|
images.push(image_uploading_request.body);
|
|
}
|
|
}
|
|
});
|
|
|
|
// We need to read the file contents in order to convert it to base64 to send to the server
|
|
function _readFile(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => resolve(reader.result);
|
|
reader.onerror = reject;
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
|
|
async function publish() {
|
|
let form_data = {
|
|
title: qs("#post-title").value,
|
|
description: qs("#post-description").value,
|
|
tags: [],
|
|
images: images,
|
|
content: qs("#post-content").value,
|
|
date: qs("#date").value,
|
|
time: qs("#time").value,
|
|
id: blog_id,
|
|
};
|
|
|
|
// Get our tags, trim them, then shove them into an array
|
|
const tags_value = qs("#post-tags").value || "";
|
|
if (tags_value.length) {
|
|
let tags_array = qs("#post-tags").value.split(",");
|
|
tags_array.forEach((tag) => form_data.tags.push(tag.trim()));
|
|
}
|
|
|
|
const post_response = await request("/api/web/post", "PATCH", form_data);
|
|
|
|
if (post_response.body.success) {
|
|
window.location.href = `/post/${post_response.body.post_id}`;
|
|
}
|
|
}
|
|
|
|
// Auto resize on page load
|
|
post_content_area.style.height = post_content_area.scrollHeight + "px";
|
|
post_content_area.style.minHeight = post_content_area.scrollHeight + "px";
|
|
// Auto expand blog area
|
|
post_content_area.addEventListener("input", (e) => {
|
|
post_content_area.style.height = post_content_area.scrollHeight + "px";
|
|
post_content_area.style.minHeight = e.target.scrollHeight + "px";
|
|
});
|