Merge pull request 'Added file paste/drop support' (#35) from BordedDev/snek:feat/copy-paste-drag-drop into main
Reviewed-on: #35 Reviewed-by: retoor <retoor@noreply@molodetz.nl>
This commit is contained in:
commit
b0666a0090
@ -30,13 +30,8 @@
|
|||||||
function getInputField(){
|
function getInputField(){
|
||||||
return document.querySelector("textarea")
|
return document.querySelector("textarea")
|
||||||
}
|
}
|
||||||
|
|
||||||
function initInputField(textBox) {
|
|
||||||
textBox.addEventListener('change', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
this.dispatchEvent(new CustomEvent('change', { detail: e.target.value, bubbles: true }));
|
|
||||||
});
|
|
||||||
|
|
||||||
|
function initInputField(textBox) {
|
||||||
textBox.addEventListener('keydown', (e) => {
|
textBox.addEventListener('keydown', (e) => {
|
||||||
if (e.key === 'Enter' && !e.shiftKey) {
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -47,11 +42,59 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
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();
|
||||||
}
|
}
|
||||||
@ -63,7 +106,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";
|
||||||
@ -85,7 +128,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() {
|
||||||
@ -108,9 +151,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) => {
|
||||||
@ -140,7 +183,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" });
|
||||||
@ -161,14 +204,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 }}") {
|
||||||
@ -178,7 +221,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);
|
||||||
|
Loading…
Reference in New Issue
Block a user