Compare commits

base: retoor:b0666a00900e1b25633433b80da1ef3dd5f2ee71
Branches Tags
retoor:main
retoor:feat/make-database-async
..
compare: retoor:529ebd23fc0b50e2606ecddc5e1199774dd18384
Branches Tags
retoor:main
retoor:feat/make-database-async

No commits in common. "b0666a00900e1b25633433b80da1ef3dd5f2ee71" and "529ebd23fc0b50e2606ecddc5e1199774dd18384" have entirely different histories.
b0666a0090 ... 529ebd23fc

1 changed files with 15 additions and 58 deletions
Show Stats Expand all files Collapse all files

73
src/snek/templates/web.html
View File

@ -30,8 +30,13 @@
function getInputField(){ function getInputField(){
return document.querySelector("textarea") return document.querySelector("textarea")
} }
function initInputField(textBox) { function initInputField(textBox) {
textBox.addEventListener('change', (e) => {
e.preventDefault();
this.dispatchEvent(new CustomEvent('change', { detail: e.target.value, bubbles: true }));
});
textBox.addEventListener('keydown', (e) => { textBox.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) { if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
@ -42,59 +47,11 @@
} }
} }
}); });
textBox.addEventListener("paste", async (e) => {
try {
const clipboardItems = await navigator.clipboard.read();
// DataTransfer needs to be used to modify the files list of the input
const dt = new DataTransfer();
for (const clipboardItem of clipboardItems) {
const fileTypes = clipboardItem.types.filter(type => !type.startsWith('text/'))
for (const fileType of fileTypes) {
const blob = await clipboardItem.getType(fileType);
// Do something with the image blob.
dt.items.add(new File([blob], "image.png", { type: fileType }));
}
}
if (dt.items.length > 0) {
const uploadButton = document.querySelector("upload-button");
const input = uploadButton.shadowRoot.querySelector('.file-input')
input.files = dt.files;
await uploadButton.uploadFiles();
}
} catch (error) {
console.error("Failed to read clipboard contents: ", error);
}
});
const chatInput = document.querySelector(".chat-area")
chatInput.addEventListener("drop", async (e) => {
e.preventDefault();
const dt = e.dataTransfer;
if (dt.items.length > 0) {
const uploadButton = document.querySelector("upload-button");
const input = uploadButton.shadowRoot.querySelector('.file-input')
input.files = dt.files;
await uploadButton.uploadFiles();
}
})
chatInput.addEventListener("dragover", async (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = "link";
})
textBox.focus(); textBox.focus();
} }
function replyMessage(message) { function replyMessage(message) {
const field = getInputField() const field = getInputField()
field.value = "```markdown\n> " + (message || '') + "\n```\n"; field.value = "```markdown\n> " + (message || '') + "\n```\n";
field.focus(); field.focus();
} }
@ -106,7 +63,7 @@
const text = messageDiv.querySelector(".text").innerText; const text = messageDiv.querySelector(".text").innerText;
const time = document.createElement("span"); const time = document.createElement("span");
time.innerText = app.timeDescription(container.dataset.created_at); time.innerText = app.timeDescription(container.dataset.created_at);
container.replaceChildren(time); container.replaceChildren(time);
const reply = document.createElement("a"); const reply = document.createElement("a");
reply.innerText = " reply"; reply.innerText = " reply";
@ -128,7 +85,7 @@
rect.right <= (window.innerWidth || document.documentElement.clientWidth) rect.right <= (window.innerWidth || document.documentElement.clientWidth)
); );
} }
const messagesContainer = document.querySelector(".chat-messages"); const messagesContainer = document.querySelector(".chat-messages");
function isScrolledPastHalf() { function isScrolledPastHalf() {
@ -151,9 +108,9 @@
if (!isScrolledPastHalf()) { if (!isScrolledPastHalf()) {
return; return;
} }
isLoadingExtra = true; isLoadingExtra = true;
const messages = await app.rpc.getMessages(channelUid, 0, firstMessage.dataset.created_at); const messages = await app.rpc.getMessages(channelUid, 0, firstMessage.dataset.created_at);
messages.forEach((message) => { messages.forEach((message) => {
@ -183,7 +140,7 @@
} }
}); });
lastMessage = messagesContainer.querySelector(".message:last-child"); lastMessage = messagesContainer.querySelector(".message:last-child");
if (doScrollDown) { if (doScrollDown) {
lastMessage?.scrollIntoView({ block: "end", inline: "nearest" }); lastMessage?.scrollIntoView({ block: "end", inline: "nearest" });
const inputBox = document.querySelector(".chat-input"); const inputBox = document.querySelector(".chat-input");
inputBox.scrollIntoView({ block: "end", inline: "nearest" }); inputBox.scrollIntoView({ block: "end", inline: "nearest" });
@ -204,14 +161,14 @@
const mentionText = '@{{ user.username.value }}'; const mentionText = '@{{ user.username.value }}';
return mentions.length > 0 && mentions.indexOf(mentionText) == -1; return mentions.length > 0 && mentions.indexOf(mentionText) == -1;
} }
app.addEventListener("channel-message", (data) => { app.addEventListener("channel-message", (data) => {
if (data.channel_uid !== channelUid) { if (data.channel_uid !== channelUid) {
if(!isMentionForSomeoneElse(data.message)){ if(!isMentionForSomeoneElse(data.message)){
channelSidebar.notify(data); channelSidebar.notify(data);
app.playSound("messageOtherChannel"); app.playSound("messageOtherChannel");
} }
return; return;
} }
if (data.username !== "{{ user.username.value }}") { if (data.username !== "{{ user.username.value }}") {
@ -221,7 +178,7 @@
app.playSound("message"); app.playSound("message");
} }
} }
const messagesContainer = document.querySelector(".chat-messages"); const messagesContainer = document.querySelector(".chat-messages");
lastMessage = messagesContainer.querySelector(".message:last-child"); lastMessage = messagesContainer.querySelector(".message:last-child");
const doScrollDownBecauseLastMessageIsVisible = !lastMessage || isElementVisible(lastMessage); const doScrollDownBecauseLastMessageIsVisible = !lastMessage || isElementVisible(lastMessage);