107 lines
3.5 KiB
JavaScript
107 lines
3.5 KiB
JavaScript
|
import { post } from "./api.js";
|
|||
|
|
import { h, replace, showAlert } from "./dom.js";
|
|||
|
|
export const imageDrafts = new Map();
|
|||
|
|
const imageTypes = ["image/png", "image/jpeg", "image/gif", "image/webp"];
|
|||
|
|
const maxImageBytes = 5 << 20;
|
|||
|
|
export function imageTray(drop, input, key, onCount) {
|
|||
|
|
const el = h("div", { class: "compose-images" });
|
|||
|
|
const render = () => {
|
|||
|
|
const imgs = imageDrafts.get(key) ?? [];
|
|||
|
|
onCount(imgs.length);
|
|||
|
|
el.hidden = imgs.length === 0;
|
|||
|
|
replace(el, ...imgs.map((img) => {
|
|||
|
|
const remove = h("button", { type: "button", class: "remove", title: "Remove image" }, "×");
|
|||
|
|
remove.onclick = () => {
|
|||
|
|
URL.revokeObjectURL(img.url);
|
|||
|
|
const rest = (imageDrafts.get(key) ?? []).filter((i) => i !== img);
|
|||
|
|
if (rest.length > 0) {
|
|||
|
|
imageDrafts.set(key, rest);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
imageDrafts.delete(key);
|
|||
|
|
}
|
|||
|
|
render();
|
|||
|
|
};
|
|||
|
|
return h("div", { class: "thumb" }, h("img", { src: img.url, alt: "attached image" }), remove);
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
const add = (files) => {
|
|||
|
|
const added = [];
|
|||
|
|
for (const f of files) {
|
|||
|
|
if (!imageTypes.includes(f.type)) {
|
|||
|
|
void showAlert(`${f.name || "That file"} isn't a PNG, JPEG, GIF or WebP image.`);
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
if (f.size > maxImageBytes) {
|
|||
|
|
void showAlert(`${f.name || "That image"} is over ${maxImageBytes >> 20} MiB.`);
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
added.push({ file: f, url: URL.createObjectURL(f) });
|
|||
|
|
}
|
|||
|
|
if (added.length === 0) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
imageDrafts.set(key, [...(imageDrafts.get(key) ?? []), ...added]);
|
|||
|
|
render();
|
|||
|
|
return true;
|
|||
|
|
};
|
|||
|
|
input.addEventListener("paste", (e) => {
|
|||
|
|
const files = [...(e.clipboardData?.files ?? [])].filter((f) => f.type.startsWith("image/"));
|
|||
|
|
if (files.length > 0) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
add(files);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
drop.addEventListener("dragover", (e) => {
|
|||
|
|
if (e.dataTransfer?.types.includes("Files")) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
drop.classList.add("dropping");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
drop.addEventListener("dragleave", (e) => {
|
|||
|
|
if (!drop.contains(e.relatedTarget)) {
|
|||
|
|
drop.classList.remove("dropping");
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
drop.addEventListener("drop", (e) => {
|
|||
|
|
drop.classList.remove("dropping");
|
|||
|
|
const files = [...(e.dataTransfer?.files ?? [])];
|
|||
|
|
if (files.length > 0) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
add(files);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
render();
|
|||
|
|
return {
|
|||
|
|
el,
|
|||
|
|
take: () => {
|
|||
|
|
const imgs = imageDrafts.get(key) ?? [];
|
|||
|
|
imageDrafts.delete(key);
|
|||
|
|
render();
|
|||
|
|
return imgs;
|
|||
|
|
},
|
|||
|
|
restore: (imgs) => {
|
|||
|
|
if (imgs.length > 0) {
|
|||
|
|
imageDrafts.set(key, [...imgs, ...(imageDrafts.get(key) ?? [])]);
|
|||
|
|
}
|
|||
|
|
render();
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
export async function uploadImages(imgs) {
|
|||
|
|
if (imgs.length === 0) {
|
|||
|
|
return undefined;
|
|||
|
|
}
|
|||
|
|
const ids = [];
|
|||
|
|
for (const img of imgs) {
|
|||
|
|
const blob = await post("/api/blobs", { body: img.file });
|
|||
|
|
ids.push(blob.id);
|
|||
|
|
}
|
|||
|
|
return ids;
|
|||
|
|
}
|
|||
|
|
export function releaseImages(imgs) {
|
|||
|
|
for (const img of imgs) {
|
|||
|
|
URL.revokeObjectURL(img.url);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
//# sourceMappingURL=images.js.map
|