This commit is contained in:
tamaina 2022-05-07 15:21:33 +00:00
parent dbbc75008d
commit c2c7a06729
3 changed files with 78 additions and 75 deletions

View File

@ -74,7 +74,7 @@ const props = withDefaults(defineProps<{
});
const emit = defineEmits<{
(e: 'queue', count: number): void;
(ev: 'queue', count: number): void;
}>();
let rootEl = $ref<HTMLElement>();
@ -163,7 +163,7 @@ async function init(): Promise<void> {
offset.value = res.length;
error.value = false;
fetching.value = false;
}, e => {
}, ev => {
error.value = true;
fetching.value = false;
});
@ -235,7 +235,7 @@ const fetchMore = async (): Promise<void> => {
}
}
offset.value += res.length;
}, e => {
}, ev => {
moreFetching.value = false;
});
};
@ -263,7 +263,7 @@ const fetchMoreAhead = async (): Promise<void> => {
}
offset.value += res.length;
moreFetching.value = false;
}, e => {
}, ev => {
moreFetching.value = false;
});
};

View File

@ -1,5 +1,6 @@
<template>
<div class="pemppnzi _block"
<div
class="pemppnzi _block"
@dragover.stop="onDragover"
@drop.stop="onDrop"
>
@ -29,7 +30,7 @@
import { onMounted, watch } from 'vue';
import * as Misskey from 'misskey-js';
import autosize from 'autosize';
import insertTextAtCursor from 'insert-text-at-cursor';
//import insertTextAtCursor from 'insert-text-at-cursor';
import { formatTimeString } from '@/scripts/format-time-string';
import { selectFile } from '@/scripts/select-file';
import * as os from '@/os';
@ -37,7 +38,7 @@ import { stream } from '@/stream';
import { throttle } from 'throttle-debounce';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
import { Autocomplete } from '@/scripts/autocomplete';
//import { Autocomplete } from '@/scripts/autocomplete';
import { uploadFile } from '@/scripts/upload';
const props = defineProps<{
@ -56,27 +57,27 @@ const typing = throttle(3000, () => {
});
let draftKey = $computed(() => props.user ? 'user:' + props.user.id : 'group:' + props.group?.id);
let canSend = $computed(() => (text != null && text != '') || file != null);
let canSend = $computed(() => (text != null && text !== '') || file != null);
watch([$$(text), $$(file)], saveDraft);
async function onPaste(e: ClipboardEvent) {
if (!e.clipboardData) return;
async function onPaste(ev: ClipboardEvent) {
if (!ev.clipboardData) return;
const data = e.clipboardData;
const items = data.items;
const clipboardData = ev.clipboardData;
const items = clipboardData.items;
if (items.length == 1) {
if (items[0].kind == 'file') {
const file = items[0].getAsFile();
if (!file) return;
const lio = file.name.lastIndexOf('.');
const ext = lio >= 0 ? file.name.slice(lio) : '';
const formatted = `${formatTimeString(new Date(file.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, '1')}${ext}`;
if (formatted) upload(file, formatted);
if (items.length === 1) {
if (items[0].kind === 'file') {
const pastedFile = items[0].getAsFile();
if (!pastedFile) return;
const lio = pastedFile.name.lastIndexOf('.');
const ext = lio >= 0 ? pastedFile.name.slice(lio) : '';
const formatted = `${formatTimeString(new Date(pastedFile.lastModified), defaultStore.state.pastedFileName).replace(/{{number}}/g, '1')}${ext}`;
if (formatted) upload(pastedFile, formatted);
}
} else {
if (items[0].kind == 'file') {
if (items[0].kind === 'file') {
os.alert({
type: 'error',
text: i18n.ts.onlyOneFileCanBeAttached
@ -85,27 +86,27 @@ async function onPaste(e: ClipboardEvent) {
}
}
function onDragover(e: DragEvent) {
if (!e.dataTransfer) return;
function onDragover(ev: DragEvent) {
if (!ev.dataTransfer) return;
const isFile = e.dataTransfer.items[0].kind == 'file';
const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
const isFile = ev.dataTransfer.items[0].kind === 'file';
const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
if (isFile || isDriveFile) {
e.preventDefault();
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
ev.preventDefault();
ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
}
}
function onDrop(e: DragEvent): void {
if (!e.dataTransfer) return;
function onDrop(ev: DragEvent): void {
if (!ev.dataTransfer) return;
//
if (e.dataTransfer.files.length == 1) {
e.preventDefault();
upload(e.dataTransfer.files[0]);
if (ev.dataTransfer.files.length === 1) {
ev.preventDefault();
upload(ev.dataTransfer.files[0]);
return;
} else if (e.dataTransfer.files.length > 1) {
e.preventDefault();
} else if (ev.dataTransfer.files.length > 1) {
ev.preventDefault();
os.alert({
type: 'error',
text: i18n.ts.onlyOneFileCanBeAttached
@ -114,17 +115,17 @@ function onDrop(e: DragEvent): void {
}
//#region
const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile != '') {
const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile !== '') {
file = JSON.parse(driveFile);
e.preventDefault();
ev.preventDefault();
}
//#endregion
}
function onKeydown(e: KeyboardEvent) {
function onKeydown(ev: KeyboardEvent) {
typing();
if ((e.key === 'Enter') && (e.ctrlKey || e.metaKey) && canSend) {
if ((ev.key === 'Enter') && (ev.ctrlKey || ev.metaKey) && canSend) {
send();
}
}
@ -133,8 +134,8 @@ function onCompositionUpdate() {
typing();
}
function chooseFile(e: MouseEvent) {
selectFile(e.currentTarget ?? e.target, i18n.ts.selectFile).then(selectedFile => {
function chooseFile(ev: MouseEvent) {
selectFile(ev.currentTarget ?? ev.target, i18n.ts.selectFile).then(selectedFile => {
file = selectedFile;
});
}
@ -172,25 +173,26 @@ function clear() {
}
function saveDraft() {
const data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
data[draftKey] = {
drafts[draftKey] = {
updatedAt: new Date(),
// eslint-disable-next-line id-denylist
data: {
text: text,
file: file
}
}
localStorage.setItem('message_drafts', JSON.stringify(data));
localStorage.setItem('message_drafts', JSON.stringify(drafts));
}
function deleteDraft() {
const data = JSON.parse(localStorage.getItem('message_drafts') || '{}');
const drafts = JSON.parse(localStorage.getItem('message_drafts') || '{}');
delete data[draftKey];
delete drafts[draftKey];
localStorage.setItem('message_drafts', JSON.stringify(data));
localStorage.setItem('message_drafts', JSON.stringify(drafts));
}
async function insertEmoji(ev: MouseEvent) {

View File

@ -1,12 +1,13 @@
<template>
<div class="_section"
<div
ref="rootEl"
class="_section"
@dragover.prevent.stop="onDragover"
@drop.prevent.stop="onDrop"
ref="rootEl"
>
<div class="_content mk-messaging-room">
<div class="body">
<MkPagination ref="pagingComponent" :key="userAcct || groupId" v-if="pagination" :pagination="pagination">
<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
<template #empty>
<div class="_fullinfo">
<img src="https://xn--931a.moe/assets/info.jpg" class="_ghost"/>
@ -14,11 +15,11 @@
</div>
</template>
<template #default="{ items: messages, fetching }">
<template #default="{ items: messages, fetching: pFetching }">
<XList
v-if="messages.length > 0"
v-slot="{ item: message }"
:class="{ messages: true, 'deny-move-transition': fetching }"
:class="{ messages: true, 'deny-move-transition': pFetching }"
:items="messages"
direction="up"
reversed
@ -32,13 +33,13 @@
<div v-if="typers.length > 0" class="typers">
<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
<template #users>
<b v-for="user in typers" :key="user.id" class="user">{{ user.username }}</b>
<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b>
</template>
</I18n>
<MkEllipsis/>
</div>
<transition :name="animation ? 'fade' : ''">
<div class="new-message" v-show="showIndicator">
<div v-show="showIndicator" class="new-message">
<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas fa-fw fa-arrow-circle-down"></i>{{ i18n.ts.newMessageExists }}</button>
</div>
</transition>
@ -133,8 +134,8 @@ async function fetch() {
connection.on('message', onMessage);
connection.on('read', onRead);
connection.on('deleted', onDeleted);
connection.on('typers', typers => {
typers = typers.filter(u => u.id !== $i?.id);
connection.on('typers', _typers => {
typers = _typers.filter(u => u.id !== $i?.id);
});
document.addEventListener('visibilitychange', onVisibilitychange);
@ -149,27 +150,27 @@ async function fetch() {
});
}
function onDragover(e: DragEvent) {
if (!e.dataTransfer) return;
function onDragover(ev: DragEvent) {
if (!ev.dataTransfer) return;
const isFile = e.dataTransfer.items[0].kind == 'file';
const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
const isFile = ev.dataTransfer.items[0].kind === 'file';
const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
if (isFile || isDriveFile) {
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
ev.dataTransfer.dropEffect = ev.dataTransfer.effectAllowed === 'all' ? 'copy' : 'move';
} else {
e.dataTransfer.dropEffect = 'none';
ev.dataTransfer.dropEffect = 'none';
}
}
function onDrop(e: DragEvent): void {
if (!e.dataTransfer) return;
function onDrop(ev: DragEvent): void {
if (!ev.dataTransfer) return;
//
if (e.dataTransfer.files.length == 1) {
formEl.upload(e.dataTransfer.files[0]);
if (ev.dataTransfer.files.length === 1) {
formEl.upload(ev.dataTransfer.files[0]);
return;
} else if (e.dataTransfer.files.length > 1) {
} else if (ev.dataTransfer.files.length > 1) {
os.alert({
type: 'error',
text: i18n.ts.onlyOneFileCanBeAttached
@ -178,8 +179,8 @@ function onDrop(e: DragEvent): void {
}
//#region
const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile != '') {
const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile !== '') {
const file = JSON.parse(driveFile);
formEl.file = file;
}
@ -192,7 +193,7 @@ function onMessage(message) {
const _isBottom = isBottomVisible(rootEl, 64);
pagingComponent.prepend(message);
if (message.userId != $i?.id && !document.hidden) {
if (message.userId !== $i?.id && !document.hidden) {
connection?.send('read', {
id: message.id
});
@ -203,7 +204,7 @@ function onMessage(message) {
nextTick(() => {
thisScrollToBottom();
});
} else if (message.userId != $i?.id) {
} else if (message.userId !== $i?.id) {
// Notify
notifyNewMessage();
}
@ -213,8 +214,8 @@ function onRead(x) {
if (user) {
if (!Array.isArray(x)) x = [x];
for (const id of x) {
if (pagingComponent.items.some(x => x.id == id)) {
const exist = pagingComponent.items.map(x => x.id).indexOf(id);
if (pagingComponent.items.some(y => y.id === id)) {
const exist = pagingComponent.items.map(y => y.id).indexOf(id);
pagingComponent.items[exist] = {
...pagingComponent.items[exist],
isRead: true,
@ -223,8 +224,8 @@ function onRead(x) {
}
} else if (group) {
for (const id of x.ids) {
if (pagingComponent.items.some(x => x.id == id)) {
const exist = pagingComponent.items.map(x => x.id).indexOf(id);
if (pagingComponent.items.some(y => y.id === id)) {
const exist = pagingComponent.items.map(y => y.id).indexOf(id);
pagingComponent.items[exist] = {
...pagingComponent.items[exist],
reads: [...pagingComponent.items[exist].reads, x.userId]