123 lines
3.8 KiB
JavaScript
123 lines
3.8 KiB
JavaScript
let escCallback = () => {};
|
|
document.onkeydown = (e) => {
|
|
const isEsc = e.key === "Escape" || e.key === "Esc";
|
|
if (isEsc) escCallback();
|
|
};
|
|
|
|
const openModalFor = (elem, onConfirm, afterClose = null) => {
|
|
const overlay = elem.parentElement.querySelector(".overlay");
|
|
const modal = elem.parentElement.querySelector(".modal");
|
|
const confirmButton = elem.parentElement.querySelector(".modal-confirm");
|
|
|
|
overlay.style.display = "block";
|
|
modal.style.display = "block";
|
|
|
|
const onClose = () => {
|
|
overlay.style.display = "none";
|
|
modal.style.display = "none";
|
|
if (afterClose) afterClose();
|
|
};
|
|
|
|
overlay.addEventListener("click", onClose);
|
|
confirmButton.addEventListener("click", onConfirm);
|
|
escCallback = onClose;
|
|
|
|
return { close: onClose };
|
|
};
|
|
|
|
const composeButton = document.querySelector(".js-compose-vanishing-message");
|
|
const publishButton = document.querySelector(".js-secret-publish");
|
|
const sendingMessage = document.querySelector(".js-sending-message");
|
|
const messageInput = document.querySelector(".js-secret-message-input");
|
|
if (composeButton) {
|
|
composeButton.addEventListener("click", () => {
|
|
const onPublish = () => {
|
|
if (messageInput.value.length == 0) return;
|
|
|
|
publishButton.style.display = "none";
|
|
sendingMessage.innerHTML = "Loading...";
|
|
sendingMessage.style.display = "block";
|
|
|
|
fetch(composeButton.dataset.url, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
|
body: "message=" + encodeURIComponent(messageInput.value),
|
|
})
|
|
.then(() => {
|
|
sendingMessage.innerHTML = "✅ Sent";
|
|
|
|
setTimeout(() => {
|
|
modal.close();
|
|
messageInput.value = "";
|
|
publishButton.style.display = "block";
|
|
sendingMessage.style.display = "none";
|
|
}, 1000);
|
|
})
|
|
.catch(() => {
|
|
sendingMessage.innerHTML = "Error";
|
|
setTimeout(() => {
|
|
publishButton.style.display = "block";
|
|
sendingMessage.style.display = "none";
|
|
}, 1000);
|
|
});
|
|
};
|
|
const modal = openModalFor(composeButton, onPublish);
|
|
});
|
|
}
|
|
|
|
const messages = document.querySelectorAll(".js-vanishing-message");
|
|
messages.forEach((message) => {
|
|
message.addEventListener("click", () => {
|
|
const afterClose = () => {
|
|
const parent = message.parentElement;
|
|
parent.parentElement.removeChild(parent);
|
|
if (document.querySelectorAll(".js-vanishing-message").length == 0) {
|
|
document.querySelector(".js-vanishing-messages").style.display = "none";
|
|
}
|
|
};
|
|
|
|
const modal = openModalFor(message, () => modal.close(), afterClose);
|
|
|
|
fetch("/vanish", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/x-www-form-urlencoded" },
|
|
body: "key=" + encodeURIComponent(message.dataset.key),
|
|
});
|
|
});
|
|
});
|
|
|
|
const profilePicUpload = document.querySelector(".js-profile-pic-upload");
|
|
if (profilePicUpload) {
|
|
const placeholder = document.querySelector(".js-profile-pic-placeholder");
|
|
|
|
const previewImage = () => {
|
|
if (profilePicUpload.files && profilePicUpload.files[0]) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
placeholder.src = e.target.result;
|
|
placeholder.parentElement.style.height = "auto";
|
|
};
|
|
reader.readAsDataURL(profilePicUpload.files[0]);
|
|
}
|
|
};
|
|
|
|
profilePicUpload.addEventListener("change", previewImage);
|
|
previewImage();
|
|
}
|
|
|
|
const jsSyncing = document.querySelector(".js-syncing");
|
|
if (jsSyncing) {
|
|
let checkSyncInterval;
|
|
const checkSync = () => {
|
|
fetch("/syncing")
|
|
.then((result) => result.json())
|
|
.then((result) => {
|
|
if (!result.syncing) {
|
|
clearInterval(checkSyncInterval);
|
|
jsSyncing.parentElement.removeChild(jsSyncing);
|
|
}
|
|
});
|
|
};
|
|
checkSyncInterval = setInterval(checkSync, 5000);
|
|
}
|