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

View File

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

View File

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