helene/FoundKey
2
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor: Composition APIへ移行 (#8138)

Browse source 
* components/drive-file-thumbnail.vue

* components/drive-select-dialog.vue

* components/drive-window.vue

* wip

* wip drive.file.vue, drive.vue

* fix prop

* wip(

* components/drive.folder.vue

* maybe ok

* ✌️

* fix variable

* FIX FOLDER VARIABLE

* components/emoji-picker-dialog.vue

* Hate `$emit`

* hate global property

* components/emoji-picker-window.vue

* components/emoji-picker.section.vue

* fix

* fixx

* wip components/emoji-picker.vue

* fix

* defineExpose

* ユニコード絵文字の型をもっといい感じに

* components/featured-photos.vue

* components/follow-button.vue

* forgot-password.vue

* forgot-password.vue

* 🎨

* fix
This commit is contained in:
tamaina 2022-01-18 23:06:16 +09:00 committed by GitHub
parent efb0ffc4ec
commit 7be09a4af9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 1608 additions and 1763 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/client/src/components/dialog.vue
View file

@ -1,5 +1,5 @@
<template>
<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="$emit('closed')">
<MkModal ref="modal" :prefer-type="'dialog'" :z-priority="'high'" @click="done(true)" @closed="emit('closed')">
<div class="mk-dialog">
<div v-if="icon" class="icon">
<i :class="icon"></i>
@ -28,8 +28,8 @@
</template>
</MkSelect>
<div v-if="(showOkButton || showCancelButton) && !actions" class="buttons">
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? $ts.ok : $ts.gotIt }}</MkButton>
<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ $ts.cancel }}</MkButton>
<MkButton v-if="showOkButton" inline primary :autofocus="!input && !select" @click="ok">{{ (showCancelButton || input || select) ? i18n.locale.ok : i18n.locale.gotIt }}</MkButton>
<MkButton v-if="showCancelButton || input || select" inline @click="cancel">{{ i18n.locale.cancel }}</MkButton>
</div>
<div v-if="actions" class="buttons">
<MkButton v-for="action in actions" :key="action.text" inline :primary="action.primary" @click="() => { action.callback(); close(); }">{{ action.text }}</MkButton>
@ -44,6 +44,7 @@ import MkModal from '@/components/ui/modal.vue';
import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue';
import MkSelect from '@/components/form/select.vue';
import { i18n } from '@/i18n';
type Input = {
type: HTMLInputElement['type'];

71
packages/client/src/components/drive-file-thumbnail.vue
View file

@ -14,42 +14,24 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { computed } from 'vue';
import * as Misskey from 'misskey-js';
import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
import { ColdDeviceStorage } from '@/store';
export default defineComponent({
components: {
ImgWithBlurhash
},
props: {
file: {
type: Object,
required: true
},
fit: {
type: String,
required: false,
default: 'cover'
},
},
data() {
return {
isContextmenuShowing: false,
isDragging: false,
const props = defineProps<{
file: Misskey.entities.DriveFile;
fit: string;
}>();
};
},
computed: {
is(): 'image' | 'video' | 'midi' | 'audio' | 'csv' | 'pdf' | 'textfile' | 'archive' | 'unknown' {
if (this.file.type.startsWith('image/')) return 'image';
if (this.file.type.startsWith('video/')) return 'video';
if (this.file.type === 'audio/midi') return 'midi';
if (this.file.type.startsWith('audio/')) return 'audio';
if (this.file.type.endsWith('/csv')) return 'csv';
if (this.file.type.endsWith('/pdf')) return 'pdf';
if (this.file.type.startsWith('text/')) return 'textfile';
const is = computed(() => {
if (props.file.type.startsWith('image/')) return 'image';
if (props.file.type.startsWith('video/')) return 'video';
if (props.file.type === 'audio/midi') return 'midi';
if (props.file.type.startsWith('audio/')) return 'audio';
if (props.file.type.endsWith('/csv')) return 'csv';
if (props.file.type.endsWith('/pdf')) return 'pdf';
if (props.file.type.startsWith('text/')) return 'textfile';
if ([
"application/zip",
"application/x-cpio",
@ -60,25 +42,14 @@ export default defineComponent({
"application/x-tar",
"application/gzip",
"application/x-7z-compressed"
].some(e => e === this.file.type)) return 'archive';
].some(e => e === props.file.type)) return 'archive';
return 'unknown';
},
isThumbnailAvailable(): boolean {
return this.file.thumbnailUrl
? (this.is === 'image' || this.is === 'video')
});
const isThumbnailAvailable = computed(() => {
return props.file.thumbnailUrl
? (is.value === 'image' as const || is.value === 'video')
: false;
},
},
mounted() {
const audioTag = this.$refs.volumectrl as HTMLAudioElement;
if (audioTag) audioTag.volume = ColdDeviceStorage.get('mediaVolume');
},
methods: {
volumechange() {
const audioTag = this.$refs.volumectrl as HTMLAudioElement;
ColdDeviceStorage.set('mediaVolume', audioTag.volume);
}
}
});
</script>

81
packages/client/src/components/drive-select-dialog.vue
View file

@ -7,64 +7,51 @@
@click="cancel()"
@close="cancel()"
@ok="ok()"
@closed="$emit('closed')"
@closed="emit('closed')"
>
<template #header>
{{ multiple ? ((type === 'file') ? $ts.selectFiles : $ts.selectFolders) : ((type === 'file') ? $ts.selectFile : $ts.selectFolder) }}
{{ multiple ? ((type === 'file') ? i18n.locale.selectFiles : i18n.locale.selectFolders) : ((type === 'file') ? i18n.locale.selectFile : i18n.locale.selectFolder) }}
<span v-if="selected.length > 0" style="margin-left: 8px; opacity: 0.5;">({{ number(selected.length) }})</span>
</template>
<XDrive :multiple="multiple" :select="type" @changeSelection="onChangeSelection" @selected="ok()"/>
</XModalWindow>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import XDrive from './drive.vue';
import XModalWindow from '@/components/ui/modal-window.vue';
import number from '@/filters/number';
import { i18n } from '@/i18n';
export default defineComponent({
components: {
XDrive,
XModalWindow,
},
props: {
type: {
type: String,
required: false,
default: 'file'
},
multiple: {
type: Boolean,
default: false
}
},
emits: ['done', 'closed'],
data() {
return {
selected: []
};
},
methods: {
ok() {
this.$emit('done', this.selected);
this.$refs.dialog.close();
},
cancel() {
this.$emit('done');
this.$refs.dialog.close();
},
onChangeSelection(xs) {
this.selected = xs;
},
number
}
withDefaults(defineProps<{
type?: 'file' | 'folder';
multiple: boolean;
}>(), {
type: 'file',
});
const emit = defineEmits<{
(e: 'done', r?: Misskey.entities.DriveFile[]): void;
(e: 'closed'): void;
}>();
const dialog = ref<InstanceType<typeof XModalWindow>>();
const selected = ref<Misskey.entities.DriveFile[]>([]);
function ok() {
emit('done', selected.value);
dialog.value?.close();
}
function cancel() {
emit('done');
dialog.value?.close();
}
function onChangeSelection(files: Misskey.entities.DriveFile[]) {
selected.value = files;
}
</script>

39
packages/client/src/components/drive-window.vue
View file

@ -3,42 +3,27 @@
:initial-width="800"
:initial-height="500"
:can-resize="true"
@closed="$emit('closed')"
@closed="emit('closed')"
>
<template #header>
{{ $ts.drive }}
{{ i18n.locale.drive }}
</template>
<XDrive :initial-folder="initialFolder"/>
</XWindow>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { } from 'vue';
import * as Misskey from 'misskey-js';
import XDrive from './drive.vue';
import XWindow from '@/components/ui/window.vue';
import { i18n } from '@/i18n';
export default defineComponent({
components: {
XDrive,
XWindow,
},
defineProps<{
initialFolder?: Misskey.entities.DriveFolder;
}>();
props: {
initialFolder: {
type: Object,
required: false
},
},
emits: ['closed'],
data() {
return {
};
},
methods: {
}
});
const emit = defineEmits<{
(e: 'closed'): void;
}>();
</script>

202
packages/client/src/components/drive.file.vue
View file

@ -8,17 +8,17 @@
@dragstart="onDragstart"
@dragend="onDragend"
>
<div v-if="$i.avatarId == file.id" class="label">
<div v-if="$i?.avatarId == file.id" class="label">
<img src="/client-assets/label.svg"/>
<p>{{ $ts.avatar }}</p>
<p>{{ i18n.locale.avatar }}</p>
</div>
<div v-if="$i.bannerId == file.id" class="label">
<div v-if="$i?.bannerId == file.id" class="label">
<img src="/client-assets/label.svg"/>
<p>{{ $ts.banner }}</p>
<p>{{ i18n.locale.banner }}</p>
</div>
<div v-if="file.isSensitive" class="label red">
<img src="/client-assets/label-red.svg"/>
<p>{{ $ts.nsfw }}</p>
<p>{{ i18n.locale.nsfw }}</p>
</div>
<MkDriveFileThumbnail class="thumbnail" :file="file" fit="contain"/>
@ -30,179 +30,155 @@
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { computed, ref } from 'vue';
import * as Misskey from 'misskey-js';
import copyToClipboard from '@/scripts/copy-to-clipboard';
import MkDriveFileThumbnail from './drive-file-thumbnail.vue';
import bytes from '@/filters/bytes';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { $i } from '@/account';
export default defineComponent({
components: {
MkDriveFileThumbnail
},
const props = withDefaults(defineProps<{
file: Misskey.entities.DriveFile;
isSelected?: boolean;
selectMode?: boolean;
}>(), {
isSelected: false,
selectMode: false,
});
props: {
file: {
type: Object,
required: true,
},
isSelected: {
type: Boolean,
required: false,
default: false,
},
selectMode: {
type: Boolean,
required: false,
default: false,
}
},
const emit = defineEmits<{
(e: 'chosen', r: Misskey.entities.DriveFile): void;
(e: 'dragstart'): void;
(e: 'dragend'): void;
}>();
emits: ['chosen'],
const isDragging = ref(false);
data() {
return {
isDragging: false
};
},
const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
computed: {
// TODO: parentへの参照を無くす
browser(): any {
return this.$parent;
},
title(): string {
return `${this.file.name}\n${this.file.type} ${bytes(this.file.size)}`;
}
},
methods: {
getMenu() {
function getMenu() {
return [{
text: this.$ts.rename,
text: i18n.locale.rename,
icon: 'fas fa-i-cursor',
action: this.rename
action: rename
}, {
text: this.file.isSensitive ? this.$ts.unmarkAsSensitive : this.$ts.markAsSensitive,
icon: this.file.isSensitive ? 'fas fa-eye' : 'fas fa-eye-slash',
action: this.toggleSensitive
text: props.file.isSensitive ? i18n.locale.unmarkAsSensitive : i18n.locale.markAsSensitive,
icon: props.file.isSensitive ? 'fas fa-eye' : 'fas fa-eye-slash',
action: toggleSensitive
}, {
text: this.$ts.describeFile,
text: i18n.locale.describeFile,
icon: 'fas fa-i-cursor',
action: this.describe
action: describe
}, null, {
text: this.$ts.copyUrl,
text: i18n.locale.copyUrl,
icon: 'fas fa-link',
action: this.copyUrl
action: copyUrl
}, {
type: 'a',
href: this.file.url,
href: props.file.url,
target: '_blank',
text: this.$ts.download,
text: i18n.locale.download,
icon: 'fas fa-download',
download: this.file.name
download: props.file.name
}, null, {
text: this.$ts.delete,
text: i18n.locale.delete,
icon: 'fas fa-trash-alt',
danger: true,
action: this.deleteFile
action: deleteFile
}];
},
}
onClick(ev) {
if (this.selectMode) {
this.$emit('chosen', this.file);
function onClick(ev: MouseEvent) {
if (props.selectMode) {
emit('chosen', props.file);
} else {
os.popupMenu(this.getMenu(), ev.currentTarget || ev.target);
os.popupMenu(getMenu(), (ev.currentTarget || ev.target || undefined) as HTMLElement | undefined);
}
},
}
onContextmenu(e) {
os.contextMenu(this.getMenu(), e);
},
function onContextmenu(e: MouseEvent) {
os.contextMenu(getMenu(), e);
}
onDragstart(e) {
function onDragstart(e: DragEvent) {
if (e.dataTransfer) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(this.file));
this.isDragging = true;
e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
}
isDragging.value = true;
// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
// (=あなたの子供が、ドラッグを開始しましたよ)
this.browser.isDragSource = true;
},
emit('dragstart');
}
onDragend(e) {
this.isDragging = false;
this.browser.isDragSource = false;
},
function onDragend() {
isDragging.value = false;
emit('dragend');
}
rename() {
function rename() {
os.inputText({
title: this.$ts.renameFile,
placeholder: this.$ts.inputNewFileName,
default: this.file.name,
allowEmpty: false
title: i18n.locale.renameFile,
placeholder: i18n.locale.inputNewFileName,
default: props.file.name,
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/files/update', {
fileId: this.file.id,
fileId: props.file.id,
name: name
});
});
},
}
describe() {
function describe() {
os.popup(import('@/components/media-caption.vue'), {
title: this.$ts.describeFile,
title: i18n.locale.describeFile,
input: {
placeholder: this.$ts.inputNewDescription,
default: this.file.comment !== null ? this.file.comment : '',
placeholder: i18n.locale.inputNewDescription,
default: props.file.comment !== null ? props.file.comment : '',
},
image: this.file
image: props.file
}, {
done: result => {
if (!result || result.canceled) return;
let comment = result.result;
os.api('drive/files/update', {
fileId: this.file.id,
fileId: props.file.id,
comment: comment.length == 0 ? null : comment
});
}
}, 'closed');
},
}
toggleSensitive() {
function toggleSensitive() {
os.api('drive/files/update', {
fileId: this.file.id,
isSensitive: !this.file.isSensitive
fileId: props.file.id,
isSensitive: !props.file.isSensitive
});
},
}
copyUrl() {
copyToClipboard(this.file.url);
function copyUrl() {
copyToClipboard(props.file.url);
os.success();
},
addApp() {
}
/*
function addApp() {
alert('not implemented yet');
},
async deleteFile() {
}
*/
async function deleteFile() {
const { canceled } = await os.confirm({
type: 'warning',
text: this.$t('driveFileDeleteConfirm', { name: this.file.name }),
text: i18n.t('driveFileDeleteConfirm', { name: props.file.name }),
});
if (canceled) return;
os.api('drive/files/delete', {
fileId: this.file.id
fileId: props.file.id
});
},
bytes
}
});
}
</script>
<style lang="scss" scoped>

218
packages/client/src/components/drive.folder.vue
View file

@ -19,74 +19,66 @@
<template v-if="!hover"><i class="fas fa-folder fa-fw"></i></template>
{{ folder.name }}
</p>
<p v-if="$store.state.uploadFolder == folder.id" class="upload">
{{ $ts.uploadFolder }}
<p v-if="defaultStore.state.uploadFolder == folder.id" class="upload">
{{ i18n.locale.uploadFolder }}
</p>
<button v-if="selectMode" class="checkbox _button" :class="{ checked: isSelected }" @click.prevent.stop="checkboxClicked"></button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { computed, ref } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
export default defineComponent({
props: {
folder: {
type: Object,
required: true,
},
isSelected: {
type: Boolean,
required: false,
default: false,
},
selectMode: {
type: Boolean,
required: false,
default: false,
}
},
const props = withDefaults(defineProps<{
folder: Misskey.entities.DriveFolder;
isSelected?: boolean;
selectMode?: boolean;
}>(), {
isSelected: false,
selectMode: false,
});
emits: ['chosen'],
const emit = defineEmits<{
(e: 'chosen', v: Misskey.entities.DriveFolder): void;
(e: 'move', v: Misskey.entities.DriveFolder): void;
(e: 'upload', file: File, folder: Misskey.entities.DriveFolder);
(e: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
(e: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
(e: 'dragstart'): void;
(e: 'dragend'): void;
}>();
data() {
return {
hover: false,
draghover: false,
isDragging: false,
};
},
const hover = ref(false);
const draghover = ref(false);
const isDragging = ref(false);
computed: {
browser(): any {
return this.$parent;
},
title(): string {
return this.folder.name;
}
},
const title = computed(() => props.folder.name);
methods: {
checkboxClicked(e) {
this.$emit('chosen', this.folder);
},
function checkboxClicked(e) {
emit('chosen', props.folder);
}
onClick() {
this.browser.move(this.folder);
},
function onClick() {
emit('move', props.folder);
}
onMouseover() {
this.hover = true;
},
function onMouseover() {
hover.value = true;
}
onMouseout() {
this.hover = false
},
function onMouseout() {
hover.value = false
}
function onDragover(e: DragEvent) {
if (!e.dataTransfer) return;
onDragover(e) {
// 自分自身がドラッグされている場合
if (this.isDragging) {
if (isDragging.value) {
// 自分自身にはドロップさせない
e.dataTransfer.dropEffect = 'none';
return;
@ -101,23 +93,25 @@ export default defineComponent({
} else {
e.dataTransfer.dropEffect = 'none';
}
},
}
onDragenter() {
if (!this.isDragging) this.draghover = true;
},
function onDragenter() {
if (!isDragging.value) draghover.value = true;
}
onDragleave() {
this.draghover = false;
},
function onDragleave() {
draghover.value = false;
}
onDrop(e) {
this.draghover = false;
function onDrop(e: DragEvent) {
draghover.value = false;
if (!e.dataTransfer) return;
// ファイルだったら
if (e.dataTransfer.files.length > 0) {
for (const file of Array.from(e.dataTransfer.files)) {
this.browser.upload(file, this.folder);
emit('upload', file, props.folder);
}
return;
}
@ -126,10 +120,10 @@ export default defineComponent({
const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile != '') {
const file = JSON.parse(driveFile);
this.browser.removeFile(file.id);
emit('removeFile', file.id);
os.api('drive/files/update', {
fileId: file.id,
folderId: this.folder.id
folderId: props.folder.id
});
}
//#endregion
@ -140,122 +134,118 @@ export default defineComponent({
const folder = JSON.parse(driveFolder);
// 移動先が自分自身ならreject
if (folder.id == this.folder.id) return;
if (folder.id == props.folder.id) return;
this.browser.removeFolder(folder.id);
emit('removeFolder', folder.id);
os.api('drive/folders/update', {
folderId: folder.id,
parentId: this.folder.id
parentId: props.folder.id
}).then(() => {
// noop
}).catch(err => {
switch (err) {
case 'detected-circular-definition':
os.alert({
title: this.$ts.unableToProcess,
text: this.$ts.circularReferenceFolder
title: i18n.locale.unableToProcess,
text: i18n.locale.circularReferenceFolder
});
break;
default:
os.alert({
type: 'error',
text: this.$ts.somethingHappened
text: i18n.locale.somethingHappened
});
}
});
}
//#endregion
},
}
function onDragstart(e: DragEvent) {
if (!e.dataTransfer) return;
onDragstart(e) {
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(this.folder));
this.isDragging = true;
e.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FOLDER_, JSON.stringify(props.folder));
isDragging.value = true;
// 親ブラウザに対して、ドラッグが開始されたフラグを立てる
// (=あなたの子供が、ドラッグを開始しましたよ)
this.browser.isDragSource = true;
},
emit('dragstart');
}
onDragend() {
this.isDragging = false;
this.browser.isDragSource = false;
},
function onDragend() {
isDragging.value = false;
emit('dragend');
}
go() {
this.browser.move(this.folder.id);
},
function go() {
emit('move', props.folder.id);
}
newWindow() {
this.browser.newWindow(this.folder);
},
rename() {
function rename() {
os.inputText({
title: this.$ts.renameFolder,
placeholder: this.$ts.inputNewFolderName,
default: this.folder.name
title: i18n.locale.renameFolder,
placeholder: i18n.locale.inputNewFolderName,
default: props.folder.name
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/folders/update', {
folderId: this.folder.id,
folderId: props.folder.id,
name: name
});
});
},
}
deleteFolder() {
function deleteFolder() {
os.api('drive/folders/delete', {
folderId: this.folder.id
folderId: props.folder.id
}).then(() => {
if (this.$store.state.uploadFolder === this.folder.id) {
this.$store.set('uploadFolder', null);
if (defaultStore.state.uploadFolder === props.folder.id) {
defaultStore.set('uploadFolder', null);
}
}).catch(err => {
switch(err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: this.$ts.unableToDelete,
text: this.$ts.hasChildFilesOrFolders
title: i18n.locale.unableToDelete,
text: i18n.locale.hasChildFilesOrFolders
});
break;
default:
os.alert({
type: 'error',
text: this.$ts.unableToDelete
text: i18n.locale.unableToDelete
});
}
});
},
}
setAsUploadFolder() {
this.$store.set('uploadFolder', this.folder.id);
},
function setAsUploadFolder() {
defaultStore.set('uploadFolder', props.folder.id);
}
onContextmenu(e) {
function onContextmenu(e) {
os.contextMenu([{
text: this.$ts.openInWindow,
text: i18n.locale.openInWindow,
icon: 'fas fa-window-restore',
action: () => {
os.popup(import('./drive-window.vue'), {
initialFolder: this.folder
initialFolder: props.folder
}, {
}, 'closed');
}
}, null, {
text: this.$ts.rename,
text: i18n.locale.rename,
icon: 'fas fa-i-cursor',
action: this.rename
action: rename,
}, null, {
text: this.$ts.delete,
text: i18n.locale.delete,
icon: 'fas fa-trash-alt',
danger: true,
action: this.deleteFolder
action: deleteFolder,
}], e);
},
}
});
}
</script>
<style lang="scss" scoped>

99
packages/client/src/components/drive.nav-folder.vue
View file

@ -8,51 +8,48 @@
@drop.stop="onDrop"
>
<i v-if="folder == null" class="fas fa-cloud"></i>
<span>{{ folder == null ? $ts.drive : folder.name }}</span>
<span>{{ folder == null ? i18n.locale.drive : folder.name }}</span>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os';
import { i18n } from '@/i18n';
export default defineComponent({
props: {
folder: {
type: Object,
required: false,
}
},
const props = defineProps<{
folder?: Misskey.entities.DriveFolder;
parentFolder: Misskey.entities.DriveFolder | null;
}>();
data() {
return {
hover: false,
draghover: false,
};
},
const emit = defineEmits<{
(e: 'move', v?: Misskey.entities.DriveFolder): void;
(e: 'upload', file: File, folder?: Misskey.entities.DriveFolder | null): void;
(e: 'removeFile', v: Misskey.entities.DriveFile['id']): void;
(e: 'removeFolder', v: Misskey.entities.DriveFolder['id']): void;
}>();
computed: {
browser(): any {
return this.$parent;
}
},
const hover = ref(false);
const draghover = ref(false);
methods: {
onClick() {
this.browser.move(this.folder);
},
function onClick() {
emit('move', props.folder);
}
onMouseover() {
this.hover = true;
},
function onMouseover() {
hover.value = true;
}
onMouseout() {
this.hover = false;
},
function onMouseout() {
hover.value = false;
}
function onDragover(e: DragEvent) {
if (!e.dataTransfer) return;
onDragover(e) {
// このフォルダがルートかつカレントディレクトリならドロップ禁止
if (this.folder == null && this.browser.folder == null) {
if (props.folder == null && props.parentFolder == null) {
e.dataTransfer.dropEffect = 'none';
}
@ -67,23 +64,25 @@ export default defineComponent({
}
return false;
},
}
onDragenter() {
if (this.folder || this.browser.folder) this.draghover = true;
},
function onDragenter() {
if (props.folder || props.parentFolder) draghover.value = true;
}
onDragleave() {
if (this.folder || this.browser.folder) this.draghover = false;
},
function onDragleave() {
if (props.folder || props.parentFolder) draghover.value = false;
}
onDrop(e) {
this.draghover = false;
function onDrop(e: DragEvent) {
draghover.value = false;
if (!e.dataTransfer) return;
// ファイルだったら
if (e.dataTransfer.files.length > 0) {
for (const file of Array.from(e.dataTransfer.files)) {
this.browser.upload(file, this.folder);
emit('upload', file, props.folder);
}
return;
}
@ -92,10 +91,10 @@ export default defineComponent({
const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile != '') {
const file = JSON.parse(driveFile);
this.browser.removeFile(file.id);
emit('removeFile', file.id);
os.api('drive/files/update', {
fileId: file.id,
folderId: this.folder ? this.folder.id : null
folderId: props.folder ? props.folder.id : null
});
}
//#endregion
@ -105,17 +104,15 @@ export default defineComponent({
if (driveFolder != null && driveFolder != '') {
const folder = JSON.parse(driveFolder);
// 移動先が自分自身ならreject
if (this.folder && folder.id == this.folder.id) return;
this.browser.removeFolder(folder.id);
if (props.folder && folder.id == props.folder.id) return;
emit('removeFolder', folder.id);
os.api('drive/folders/update', {
folderId: folder.id,
parentId: this.folder ? this.folder.id : null
parentId: props.folder ? props.folder.id : null
});
}
//#endregion
}
}
});
}
</script>
<style lang="scss" scoped>

722
packages/client/src/components/drive.vue
View file

@ -2,10 +2,24 @@
<div class="yfudmmck">
<nav>
<div class="path" @contextmenu.prevent.stop="() => {}">
<XNavFolder :class="{ current: folder == null }"/>
<XNavFolder
:class="{ current: folder == null }"
:parent-folder="folder"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
/>
<template v-for="f in hierarchyFolders">
<span class="separator"><i class="fas fa-angle-right"></i></span>
<XNavFolder :folder="f"/>
<XNavFolder
:folder="f"
:parent-folder="folder"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
/>
</template>
<span v-if="folder != null" class="separator"><i class="fas fa-angle-right"></i></span>
<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
@ -22,192 +36,154 @@
>
<div ref="contents" class="contents">
<div v-show="folders.length > 0" ref="foldersContainer" class="folders">
<XFolder v-for="(f, i) in folders" :key="f.id" v-anim="i" class="folder" :folder="f" :select-mode="select === 'folder'" :is-selected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"/>
<XFolder
v-for="(f, i) in folders"
:key="f.id"
v-anim="i"
class="folder"
:folder="f"
:select-mode="select === 'folder'"
:is-selected="selectedFolders.some(x => x.id === f.id)"
@chosen="chooseFolder"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-if="moreFolders" ref="moreFolders">{{ $ts.loadMore }}</MkButton>
<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.locale.loadMore }}</MkButton>
</div>
<div v-show="files.length > 0" ref="filesContainer" class="files">
<XFile v-for="(file, i) in files" :key="file.id" v-anim="i" class="file" :file="file" :select-mode="select === 'file'" :is-selected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"/>
<XFile
v-for="(file, i) in files"
:key="file.id"
v-anim="i"
class="file"
:file="file"
:select-mode="select === 'file'"
:is-selected="selectedFiles.some(x => x.id === file.id)"
@chosen="chooseFile"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ $ts.loadMore }}</MkButton>
<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.locale.loadMore }}</MkButton>
</div>
<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
<p v-if="draghover">{{ $t('empty-draghover') }}</p>
<p v-if="!draghover && folder == null"><strong>{{ $ts.emptyDrive }}</strong><br/>{{ $t('empty-drive-description') }}</p>
<p v-if="!draghover && folder != null">{{ $ts.emptyFolder }}</p>
<p v-if="draghover">{{ i18n.t('empty-draghover') }}</p>
<p v-if="!draghover && folder == null"><strong>{{ i18n.locale.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</p>
<p v-if="!draghover && folder != null">{{ i18n.locale.emptyFolder }}</p>
</div>
</div>
<MkLoading v-if="fetching"/>
</div>
<div v-if="draghover" class="dropzone"></div>
<input ref="fileInput" type="file" accept="*/*" multiple="multiple" tabindex="-1" @change="onChangeFileInput"/>
<input ref="fileInput" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
</div>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
<script lang="ts" setup>
import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import * as Misskey from 'misskey-js';
import XNavFolder from './drive.nav-folder.vue';
import XFolder from './drive.folder.vue';
import XFile from './drive.file.vue';
import MkButton from './ui/button.vue';
import * as os from '@/os';
import { stream } from '@/stream';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
export default defineComponent({
components: {
XNavFolder,
XFolder,
XFile,
MkButton,
},
const props = withDefaults(defineProps<{
initialFolder?: Misskey.entities.DriveFolder;
type?: string;
multiple?: boolean;
select?: 'file' | 'folder' | null;
}>(), {
multiple: false,
select: null,
});
props: {
initialFolder: {
type: Object,
required: false
},
type: {
type: String,
required: false,
default: undefined
},
multiple: {
type: Boolean,
required: false,
default: false
},
select: {
type: String,
required: false,
default: null
}
},
const emit = defineEmits<{
(e: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
(e: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
(e: 'move-root'): void;
(e: 'cd', v: Misskey.entities.DriveFolder | null): void;
(e: 'open-folder', v: Misskey.entities.DriveFolder): void;
}>();
emits: ['selected', 'change-selection', 'move-root', 'cd', 'open-folder'],
const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
const fileInput = ref<HTMLInputElement>();
data() {
return {
/**
* 現在の階層(フォルダ)
* * null でルートを表す
*/
folder: null,
const folder = ref<Misskey.entities.DriveFolder | null>(null);
const files = ref<Misskey.entities.DriveFile[]>([]);
const folders = ref<Misskey.entities.DriveFolder[]>([]);
const moreFiles = ref(false);
const moreFolders = ref(false);
const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
const uploadings = os.uploads;
const connection = stream.useChannel('drive');
files: [],
folders: [],
moreFiles: false,
moreFolders: false,
hierarchyFolders: [],
selectedFiles: [],
selectedFolders: [],
uploadings: os.uploads,
connection: null,
// ドロップされようとしているか
const draghover = ref(false);
/**
* ドロップされようとしているか
*/
draghover: false,
// 自身の所有するアイテムがドラッグをスタートさせたか
// (自分自身の階層にドロップできないようにするためのフラグ)
const isDragSource = ref(false);
/**
* 自信の所有するアイテムがドラッグをスタートさせたか
* (自分自身の階層にドロップできないようにするためのフラグ)
*/
isDragSource: false,
const fetching = ref(true);
fetching: true,
const ilFilesObserver = new IntersectionObserver(
(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles()
)
ilFilesObserver: new IntersectionObserver(
(entries) => entries.some((entry) => entry.isIntersecting)
&& !this.fetching && this.moreFiles &&
this.fetchMoreFiles()
),
moreFilesElement: null as Element,
watch(folder, () => emit('cd', folder.value));
};
},
function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
addFile(file, true);
}
watch: {
folder() {
this.$emit('cd', this.folder);
}
},
mounted() {
if (this.$store.state.enableInfiniteScroll && this.$refs.loadMoreFiles) {
this.$nextTick(() => {
this.ilFilesObserver.observe((this.$refs.loadMoreFiles as Vue).$el)
});
}
this.connection = markRaw(stream.useChannel('drive'));
this.connection.on('fileCreated', this.onStreamDriveFileCreated);
this.connection.on('fileUpdated', this.onStreamDriveFileUpdated);
this.connection.on('fileDeleted', this.onStreamDriveFileDeleted);
this.connection.on('folderCreated', this.onStreamDriveFolderCreated);
this.connection.on('folderUpdated', this.onStreamDriveFolderUpdated);
this.connection.on('folderDeleted', this.onStreamDriveFolderDeleted);
if (this.initialFolder) {
this.move(this.initialFolder);
} else {
this.fetch();
}
},
activated() {
if (this.$store.state.enableInfiniteScroll) {
this.$nextTick(() => {
this.ilFilesObserver.observe((this.$refs.loadMoreFiles as Vue).$el)
});
}
},
beforeUnmount() {
this.connection.dispose();
this.ilFilesObserver.disconnect();
},
methods: {
onStreamDriveFileCreated(file) {
this.addFile(file, true);
},
onStreamDriveFileUpdated(file) {
const current = this.folder ? this.folder.id : null;
function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
const current = folder.value ? folder.value.id : null;
if (current != file.folderId) {
this.removeFile(file);
removeFile(file);
} else {
this.addFile(file, true);
addFile(file, true);
}
},
}
onStreamDriveFileDeleted(fileId) {
this.removeFile(fileId);
},
function onStreamDriveFileDeleted(fileId: string) {
removeFile(fileId);
}
onStreamDriveFolderCreated(folder) {
this.addFolder(folder, true);
},
function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
addFolder(createdFolder, true);
}
onStreamDriveFolderUpdated(folder) {
const current = this.folder ? this.folder.id : null;
if (current != folder.parentId) {
this.removeFolder(folder);
function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
const current = folder.value ? folder.value.id : null;
if (current != updatedFolder.parentId) {
removeFolder(updatedFolder);
} else {
this.addFolder(folder, true);
addFolder(updatedFolder, true);
}
},
}
onStreamDriveFolderDeleted(folderId) {
this.removeFolder(folderId);
},
function onStreamDriveFolderDeleted(folderId: string) {
removeFolder(folderId);
}
function onDragover(e: DragEvent): any {
if (!e.dataTransfer) return;
onDragover(e): any {
// ドラッグ元が自分自身の所有するアイテムだったら
if (this.isDragSource) {
if (isDragSource.value) {
// 自分自身にはドロップさせない
e.dataTransfer.dropEffect = 'none';
return;
@ -216,7 +192,6 @@ export default defineComponent({
const isFile = e.dataTransfer.items[0].kind == 'file';
const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;
if (isFile || isDriveFile || isDriveFolder) {
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
} else {
@ -224,23 +199,25 @@ export default defineComponent({
}
return false;
},
}
onDragenter(e) {
if (!this.isDragSource) this.draghover = true;
},
function onDragenter() {
if (!isDragSource.value) draghover.value = true;
}
onDragleave(e) {
this.draghover = false;
},
function onDragleave() {
draghover.value = false;
}
onDrop(e): any {
this.draghover = false;
function onDrop(e: DragEvent): any {
draghover.value = false;
if (!e.dataTransfer) return;
// ドロップされてきたものがファイルだったら
if (e.dataTransfer.files.length > 0) {
for (const file of Array.from(e.dataTransfer.files)) {
this.upload(file, this.folder);
upload(file, folder.value);
}
return;
}
@ -249,11 +226,11 @@ export default defineComponent({
const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile != '') {
const file = JSON.parse(driveFile);
if (this.files.some(f => f.id == file.id)) return;
this.removeFile(file.id);
if (files.value.some(f => f.id == file.id)) return;
removeFile(file.id);
os.api('drive/files/update', {
fileId: file.id,
folderId: this.folder ? this.folder.id : null
folderId: folder.value ? folder.value.id : null
});
}
//#endregion
@ -261,377 +238,398 @@ export default defineComponent({
//#region ドライブのフォルダ
const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
if (driveFolder != null && driveFolder != '') {
const folder = JSON.parse(driveFolder);
const droppedFolder = JSON.parse(driveFolder);
// 移動先が自分自身ならreject
if (this.folder && folder.id == this.folder.id) return false;
if (this.folders.some(f => f.id == folder.id)) return false;
this.removeFolder(folder.id);
if (folder.value && droppedFolder.id == folder.value.id) return false;
if (folders.value.some(f => f.id == droppedFolder.id)) return false;
removeFolder(droppedFolder.id);
os.api('drive/folders/update', {
folderId: folder.id,
parentId: this.folder ? this.folder.id : null
folderId: droppedFolder.id,
parentId: folder.value ? folder.value.id : null
}).then(() => {
// noop
}).catch(err => {
switch (err) {
case 'detected-circular-definition':
os.alert({
title: this.$ts.unableToProcess,
text: this.$ts.circularReferenceFolder
title: i18n.locale.unableToProcess,
text: i18n.locale.circularReferenceFolder
});
break;
default:
os.alert({
type: 'error',
text: this.$ts.somethingHappened
text: i18n.locale.somethingHappened
});
}
});
}
//#endregion
},
}
selectLocalFile() {
(this.$refs.fileInput as any).click();
},
function selectLocalFile() {
fileInput.value?.click();
}
urlUpload() {
function urlUpload() {
os.inputText({
title: this.$ts.uploadFromUrl,
title: i18n.locale.uploadFromUrl,
type: 'url',
placeholder: this.$ts.uploadFromUrlDescription
placeholder: i18n.locale.uploadFromUrlDescription
}).then(({ canceled, result: url }) => {
if (canceled) return;
if (canceled || !url) return;
os.api('drive/files/upload-from-url', {
url: url,
folderId: this.folder ? this.folder.id : undefined
folderId: folder.value ? folder.value.id : undefined
});
os.alert({
title: this.$ts.uploadFromUrlRequested,
text: this.$ts.uploadFromUrlMayTakeTime
title: i18n.locale.uploadFromUrlRequested,
text: i18n.locale.uploadFromUrlMayTakeTime
});
});
},
}
createFolder() {
function createFolder() {
os.inputText({
title: this.$ts.createFolder,
placeholder: this.$ts.folderName
title: i18n.locale.createFolder,
placeholder: i18n.locale.folderName
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/folders/create', {
name: name,
parentId: this.folder ? this.folder.id : undefined
}).then(folder => {
this.addFolder(folder, true);
parentId: folder.value ? folder.value.id : undefined
}).then(createdFolder => {
addFolder(createdFolder, true);
});
});
},
}
renameFolder(folder) {
function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
os.inputText({
title: this.$ts.renameFolder,
placeholder: this.$ts.inputNewFolderName,
default: folder.name
title: i18n.locale.renameFolder,
placeholder: i18n.locale.inputNewFolderName,
default: folderToRename.name
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/folders/update', {
folderId: folder.id,
folderId: folderToRename.id,
name: name
}).then(folder => {
}).then(updatedFolder => {
// FIXME: 画面を更新するために自分自身に移動
this.move(folder);
move(updatedFolder);
});
});
},
}
deleteFolder(folder) {
function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
os.api('drive/folders/delete', {
folderId: folder.id
folderId: folderToDelete.id
}).then(() => {
// 削除時に親フォルダに移動
this.move(folder.parentId);
move(folderToDelete.parentId);
}).catch(err => {
switch(err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: this.$ts.unableToDelete,
text: this.$ts.hasChildFilesOrFolders
title: i18n.locale.unableToDelete,
text: i18n.locale.hasChildFilesOrFolders
});
break;
default:
os.alert({
type: 'error',
text: this.$ts.unableToDelete
text: i18n.locale.unableToDelete
});
}
});
},
}
onChangeFileInput() {
for (const file of Array.from((this.$refs.fileInput as any).files)) {
this.upload(file, this.folder);
function onChangeFileInput() {
if (!fileInput.value?.files) return;
for (const file of Array.from(fileInput.value.files)) {
upload(file, folder.value);
}
},
}
upload(file, folder) {
if (folder && typeof folder == 'object') folder = folder.id;
os.upload(file, folder).then(res => {
this.addFile(res, true);
function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
os.upload(file, (folderToUpload && typeof folderToUpload == 'object') ? folderToUpload.id : null).then(res => {
addFile(res, true);
});
},
}
chooseFile(file) {
const isAlreadySelected = this.selectedFiles.some(f => f.id == file.id);
if (this.multiple) {
function chooseFile(file: Misskey.entities.DriveFile) {
const isAlreadySelected = selectedFiles.value.some(f => f.id == file.id);
if (props.multiple) {
if (isAlreadySelected) {
this.selectedFiles = this.selectedFiles.filter(f => f.id != file.id);
selectedFiles.value = selectedFiles.value.filter(f => f.id != file.id);
} else {
this.selectedFiles.push(file);
selectedFiles.value.push(file);
}
this.$emit('change-selection', this.selectedFiles);
emit('change-selection', selectedFiles.value);
} else {
if (isAlreadySelected) {
this.$emit('selected', file);
emit('selected', file);
} else {
this.selectedFiles = [file];
this.$emit('change-selection', [file]);
selectedFiles.value = [file];
emit('change-selection', [file]);
}
}
},
}
chooseFolder(folder) {
const isAlreadySelected = this.selectedFolders.some(f => f.id == folder.id);
if (this.multiple) {
function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
const isAlreadySelected = selectedFolders.value.some(f => f.id == folderToChoose.id);
if (props.multiple) {
if (isAlreadySelected) {
this.selectedFolders = this.selectedFolders.filter(f => f.id != folder.id);
selectedFolders.value = selectedFolders.value.filter(f => f.id != folderToChoose.id);
} else {
this.selectedFolders.push(folder);
selectedFolders.value.push(folderToChoose);
}
this.$emit('change-selection', this.selectedFolders);
emit('change-selection', selectedFolders.value);
} else {
if (isAlreadySelected) {
this.$emit('selected', folder);
emit('selected', folderToChoose);
} else {
this.selectedFolders = [folder];
this.$emit('change-selection', [folder]);
selectedFolders.value = [folderToChoose];
emit('change-selection', [folderToChoose]);
}
}
},
}
move(target) {
if (target == null) {
this.goRoot();
function move(target?: Misskey.entities.DriveFolder) {
if (!target) {
goRoot();
return;
} else if (typeof target == 'object') {
target = target.id;
}
this.fetching = true;
fetching.value = true;
os.api('drive/folders/show', {
folderId: target
}).then(folder => {
this.folder = folder;
this.hierarchyFolders = [];
}).then(folderToMove => {
folder.value = folderToMove;
hierarchyFolders.value = [];
const dive = folder => {
this.hierarchyFolders.unshift(folder);
if (folder.parent) dive(folder.parent);
const dive = folderToDive => {
hierarchyFolders.value.unshift(folderToDive);
if (folderToDive.parent) dive(folderToDive.parent);
};
if (folder.parent) dive(folder.parent);
if (folderToMove.parent) dive(folderToMove.parent);
this.$emit('open-folder', folder);
this.fetch();
emit('open-folder', folderToMove);
fetch();
});
},
}
addFolder(folder, unshift = false) {
const current = this.folder ? this.folder.id : null;
if (current != folder.parentId) return;
function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
const current = folder.value ? folder.value.id : null;
if (current != folderToAdd.parentId) return;
if (this.folders.some(f => f.id == folder.id)) {
const exist = this.folders.map(f => f.id).indexOf(folder.id);
this.folders[exist] = folder;
if (folders.value.some(f => f.id == folderToAdd.id)) {
const exist = folders.value.map(f => f.id).indexOf(folderToAdd.id);
folders.value[exist] = folderToAdd;
return;
}
if (unshift) {
this.folders.unshift(folder);
folders.value.unshift(folderToAdd);
} else {
this.folders.push(folder);
folders.value.push(folderToAdd);
}
},
}
addFile(file, unshift = false) {
const current = this.folder ? this.folder.id : null;
if (current != file.folderId) return;
function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
const current = folder.value ? folder.value.id : null;
if (current != fileToAdd.folderId) return;
if (this.files.some(f => f.id == file.id)) {
const exist = this.files.map(f => f.id).indexOf(file.id);
this.files[exist] = file;
if (files.value.some(f => f.id == fileToAdd.id)) {
const exist = files.value.map(f => f.id).indexOf(fileToAdd.id);
files.value[exist] = fileToAdd;
return;
}
if (unshift) {
this.files.unshift(file);
files.value.unshift(fileToAdd);
} else {
this.files.push(file);
files.value.push(fileToAdd);
}
},
}
removeFolder(folder) {
if (typeof folder == 'object') folder = folder.id;
this.folders = this.folders.filter(f => f.id != folder);
},
function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
folders.value = folders.value.filter(f => f.id != folderIdToRemove);
}
removeFile(file) {
if (typeof file == 'object') file = file.id;
this.files = this.files.filter(f => f.id != file);
},
function removeFile(file: Misskey.entities.DriveFile | string) {
const fileId = typeof file === 'object' ? file.id : file;
files.value = files.value.filter(f => f.id != fileId);
}
appendFile(file) {
this.addFile(file);
},
function appendFile(file: Misskey.entities.DriveFile) {
addFile(file);
}
appendFolder(folder) {
this.addFolder(folder);
},
function appendFolder(folderToAppend: Misskey.entities.DriveFolder) {
addFolder(folderToAppend);
}
/*
function prependFile(file: Misskey.entities.DriveFile) {
addFile(file, true);
}
prependFile(file) {
this.addFile(file, true);
},
prependFolder(folder) {
this.addFolder(folder, true);
},
goRoot() {
function prependFolder(folderToPrepend: Misskey.entities.DriveFolder) {
addFolder(folderToPrepend, true);
}
*/
function goRoot() {
// 既にrootにいるなら何もしない
if (this.folder == null) return;
if (folder.value == null) return;
this.folder = null;
this.hierarchyFolders = [];
this.$emit('move-root');
this.fetch();
},
folder.value = null;
hierarchyFolders.value = [];
emit('move-root');
fetch();
}
fetch() {
this.folders = [];
this.files = [];
this.moreFolders = false;
this.moreFiles = false;
this.fetching = true;
let fetchedFolders = null;
let fetchedFiles = null;
async function fetch() {
folders.value = [];
files.value = [];
moreFolders.value = false;
moreFiles.value = false;
fetching.value = true;
const foldersMax = 30;
const filesMax = 30;
// フォルダ一覧取得
os.api('drive/folders', {
folderId: this.folder ? this.folder.id : null,
const foldersPromise = os.api('drive/folders', {
folderId: folder.value ? folder.value.id : null,
limit: foldersMax + 1
}).then(folders => {
if (folders.length == foldersMax + 1) {
this.moreFolders = true;
folders.pop();
}).then(fetchedFolders => {
if (fetchedFolders.length == foldersMax + 1) {
moreFolders.value = true;
fetchedFolders.pop();
}
fetchedFolders = folders;
complete();
return fetchedFolders;
});
// ファイル一覧取得
os.api('drive/files', {
folderId: this.folder ? this.folder.id : null,
type: this.type,
const filesPromise = os.api('drive/files', {
folderId: folder.value ? folder.value.id : null,
type: props.type,
limit: filesMax + 1
}).then(files => {
if (files.length == filesMax + 1) {
this.moreFiles = true;
files.pop();
}).then(fetchedFiles => {
if (fetchedFiles.length == filesMax + 1) {
moreFiles.value = true;
fetchedFiles.pop();
}
fetchedFiles = files;
complete();
return fetchedFiles;
});
let flag = false;
const complete = () => {
if (flag) {
for (const x of fetchedFolders) this.appendFolder(x);
for (const x of fetchedFiles) this.appendFile(x);
this.fetching = false;
} else {
flag = true;
}
};
},
const [fetchedFolders, fetchedFiles] = await Promise.all([foldersPromise, filesPromise]);
fetchMoreFiles() {
this.fetching = true;
for (const x of fetchedFolders) appendFolder(x);
for (const x of fetchedFiles) appendFile(x);
fetching.value = false;
}
function fetchMoreFiles() {
fetching.value = true;
const max = 30;
// ファイル一覧取得
os.api('drive/files', {
folderId: this.folder ? this.folder.id : null,
type: this.type,
untilId: this.files[this.files.length - 1].id,
folderId: folder.value ? folder.value.id : null,
type: props.type,
untilId: files.value[files.value.length - 1].id,
limit: max + 1
}).then(files => {
if (files.length == max + 1) {
this.moreFiles = true;
moreFiles.value = true;
files.pop();
} else {
this.moreFiles = false;
moreFiles.value = false;
}
for (const x of files) this.appendFile(x);
this.fetching = false;
for (const x of files) appendFile(x);
fetching.value = false;
});
},
}
getMenu() {
function getMenu() {
return [{
text: this.$ts.addFile,
text: i18n.locale.addFile,
type: 'label'
}, {
text: this.$ts.upload,
text: i18n.locale.upload,
icon: 'fas fa-upload',
action: () => { this.selectLocalFile(); }
action: () => { selectLocalFile(); }
}, {
text: this.$ts.fromUrl,
text: i18n.locale.fromUrl,
icon: 'fas fa-link',
action: () => { this.urlUpload(); }
action: () => { urlUpload(); }
}, null, {
text: this.folder ? this.folder.name : this.$ts.drive,
text: folder.value ? folder.value.name : i18n.locale.drive,
type: 'label'
}, this.folder ? {
text: this.$ts.renameFolder,
}, folder.value ? {
text: i18n.locale.renameFolder,
icon: 'fas fa-i-cursor',
action: () => { this.renameFolder(this.folder); }
} : undefined, this.folder ? {
text: this.$ts.deleteFolder,
action: () => { renameFolder(folder.value); }
} : undefined, folder.value ? {
text: i18n.locale.deleteFolder,
icon: 'fas fa-trash-alt',
action: () => { this.deleteFolder(this.folder); }
action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); }
} : undefined, {
text: this.$ts.createFolder,
text: i18n.locale.createFolder,
icon: 'fas fa-folder-plus',
action: () => { this.createFolder(); }
action: () => { createFolder(); }
}];
},
}
showMenu(ev) {
os.popupMenu(this.getMenu(), ev.currentTarget || ev.target);
},
function showMenu(ev: MouseEvent) {
os.popupMenu(getMenu(), (ev.currentTarget || ev.target || undefined) as HTMLElement | undefined);
}
onContextmenu(ev) {
os.contextMenu(this.getMenu(), ev);
},
function onContextmenu(ev: MouseEvent) {
os.contextMenu(getMenu(), ev);
}
onMounted(() => {
if (defaultStore.state.enableInfiniteScroll && loadMoreFiles.value) {
nextTick(() => {
ilFilesObserver.observe(loadMoreFiles.value?.$el)
});
}
connection.on('fileCreated', onStreamDriveFileCreated);
connection.on('fileUpdated', onStreamDriveFileUpdated);
connection.on('fileDeleted', onStreamDriveFileDeleted);
connection.on('folderCreated', onStreamDriveFolderCreated);
connection.on('folderUpdated', onStreamDriveFolderUpdated);
connection.on('folderDeleted', onStreamDriveFolderDeleted);
if (props.initialFolder) {
move(props.initialFolder);
} else {
fetch();
}
});
onActivated(() => {
if (defaultStore.state.enableInfiniteScroll) {
nextTick(() => {
ilFilesObserver.observe(loadMoreFiles.value?.$el)
});
}
});
onBeforeUnmount(() => {
connection.dispose();
ilFilesObserver.disconnect();
});
</script>

101
packages/client/src/components/emoji-picker-dialog.vue
View file

@ -1,58 +1,65 @@
<template>
<MkModal ref="modal" v-slot="{ type, maxHeight }" :z-priority="'middle'" :prefer-type="asReactionPicker && $store.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'" :transparent-bg="true" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
<MkEmojiPicker ref="picker" class="ryghynhb _popup _shadow" :class="{ drawer: type === 'drawer' }" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" :as-drawer="type === 'drawer'" :max-height="maxHeight" @chosen="chosen"/>
<MkModal
ref="modal"
v-slot="{ type, maxHeight }"
:z-priority="'middle'"
:prefer-type="asReactionPicker && defaultStore.state.reactionPickerUseDrawerForMobile === false ? 'popup' : 'auto'"
:transparent-bg="true"
:manual-showing="manualShowing"
:src="src"
@click="modal?.close()"
@opening="opening"
@close="emit('close')"
@closed="emit('closed')"
>
<MkEmojiPicker
ref="picker"
class="ryghynhb _popup _shadow"
:class="{ drawer: type === 'drawer' }"
:show-pinned="showPinned"
:as-reaction-picker="asReactionPicker"
:as-drawer="type === 'drawer'"
:max-height="maxHeight"
@chosen="chosen"
/>
</MkModal>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import MkModal from '@/components/ui/modal.vue';
import MkEmojiPicker from '@/components/emoji-picker.vue';
import { defaultStore } from '@/store';
export default defineComponent({
components: {
MkModal,
MkEmojiPicker,
},
props: {
manualShowing: {
type: Boolean,
required: false,
default: null,
},
src: {
required: false
},
showPinned: {
required: false,
default: true
},
asReactionPicker: {
required: false
},
},
emits: ['done', 'close', 'closed'],
data() {
return {
};
},
methods: {
chosen(emoji: any) {
this.$emit('done', emoji);
this.$refs.modal.close();
},
opening() {
this.$refs.picker.reset();
this.$refs.picker.focus();
}
}
withDefaults(defineProps<{
manualShowing?: boolean;
src?: HTMLElement;
showPinned?: boolean;
asReactionPicker?: boolean;
}>(), {
manualShowing: false,
showPinned: true,
asReactionPicker: false,
});
const emit = defineEmits<{
(e: 'done', v: any): void;
(e: 'close'): void;
(e: 'closed'): void;
}>();
const modal = ref<InstanceType<typeof MkModal>>();
const picker = ref<InstanceType<typeof MkEmojiPicker>>();
function chosen(emoji: any) {
emit('done', emoji);
modal.value?.close();
}
function opening() {
picker.value?.reset();
picker.value?.focus();
}
</script>
<style lang="scss" scoped>

53
packages/client/src/components/emoji-picker-window.vue
View file

@ -5,50 +5,33 @@
:can-resize="false"
:mini="true"
:front="true"
@closed="$emit('closed')"
@closed="emit('closed')"
>
<MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen"/>
</MkWindow>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
<script lang="ts" setup>
import { } from 'vue';
import MkWindow from '@/components/ui/window.vue';
import MkEmojiPicker from '@/components/emoji-picker.vue';
export default defineComponent({
components: {
MkWindow,
MkEmojiPicker,
},
props: {
src: {
required: false
},
showPinned: {
required: false,
default: true
},
asReactionPicker: {
required: false
},
},
emits: ['chosen', 'closed'],
data() {
return {
};
},
methods: {
chosen(emoji: any) {
this.$emit('chosen', emoji);
},
}
withDefaults(defineProps<{
src?: HTMLElement;
showPinned?: boolean;
asReactionPicker?: boolean;
}>(), {
showPinned: true,
});
const emit = defineEmits<{
(e: 'chosen', v: any): void;
(e: 'closed'): void;
}>();
function chosen(emoji: any) {
emit('chosen', emoji);
}
</script>
<style lang="scss" scoped>

38
packages/client/src/components/emoji-picker.section.vue
View file

@ -7,7 +7,7 @@
<button v-for="emoji in emojis"
:key="emoji"
class="_button"
@click="chosen(emoji, $event)"
@click="emit('chosen', emoji, $event)"
>
<MkEmoji :emoji="emoji" :normal="true"/>
</button>
@ -15,35 +15,19 @@
</section>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
<script lang="ts" setup>
import { ref } from 'vue';
export default defineComponent({
props: {
emojis: {
required: true,
},
initialShown: {
required: false
}
},
const props = defineProps<{
emojis: string[];
initialShown?: boolean;
}>();
emits: ['chosen'],
const emit = defineEmits<{
(e: 'chosen', v: string, ev: MouseEvent): void;
}>();
data() {
return {
getStaticImageUrl,
shown: this.initialShown,
};
},
methods: {
chosen(emoji: any, ev) {
this.$parent.chosen(emoji, ev);
},
}
});
const shown = ref(!!props.initialShown);
</script>
<style lang="scss" scoped>

241
packages/client/src/components/emoji-picker.vue
View file

@ -1,18 +1,18 @@
<template>
<div class="omfetrab" :class="['w' + width, 'h' + height, { big, asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : null }">
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="$ts.search" @paste.stop="paste" @keyup.enter="done()">
<div class="omfetrab" :class="['w' + width, 'h' + height, { big, asDrawer }]" :style="{ maxHeight: maxHeight ? maxHeight + 'px' : undefined }">
<input ref="search" v-model.trim="q" class="search" data-prevent-emoji-insert :class="{ filled: q != null && q != '' }" :placeholder="i18n.locale.search" @paste.stop="paste" @keyup.enter="done()">
<div ref="emojis" class="emojis">
<section class="result">
<div v-if="searchResultCustom.length > 0">
<button v-for="emoji in searchResultCustom"
:key="emoji"
:key="emoji.id"
class="_button"
:title="emoji.name"
tabindex="0"
@click="chosen(emoji, $event)"
>
<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>
<img v-else :src="$store.state.disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
<!--<MkEmoji v-if="emoji.char != null" :emoji="emoji.char"/>-->
<img :src="disableShowingAnimatedImages ? getStaticImageUrl(emoji.url) : emoji.url"/>
</button>
</div>
<div v-if="searchResultUnicode.length > 0">
@ -43,9 +43,9 @@
</section>
<section>
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ $ts.recentUsed }}</header>
<header class="_acrylic"><i class="far fa-clock fa-fw"></i> {{ i18n.locale.recentUsed }}</header>
<div>
<button v-for="emoji in $store.state.recentlyUsedEmojis"
<button v-for="emoji in recentlyUsedEmojis"
:key="emoji"
class="_button"
@click="chosen(emoji, $event)"
@ -56,12 +56,12 @@
</section>
</div>
<div>
<header class="_acrylic">{{ $ts.customEmojis }}</header>
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')">{{ category || $ts.other }}</XSection>
<header class="_acrylic">{{ i18n.locale.customEmojis }}</header>
<XSection v-for="category in customEmojiCategories" :key="'custom:' + category" :initial-shown="false" :emojis="customEmojis.filter(e => e.category === category).map(e => ':' + e.name + ':')" @chosen="chosen">{{ category || i18n.locale.other }}</XSection>
</div>
<div>
<header class="_acrylic">{{ $ts.emoji }}</header>
<XSection v-for="category in categories" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)">{{ category }}</XSection>
<header class="_acrylic">{{ i18n.locale.emoji }}</header>
<XSection v-for="category in categories" :emojis="emojilist.filter(e => e.category === category).map(e => e.char)" @chosen="chosen">{{ category }}</XSection>
</div>
</div>
<div class="tabs">
@ -73,82 +73,75 @@
</div>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
import { emojilist } from '@/scripts/emojilist';
<script lang="ts" setup>
import { ref, computed, watch, onMounted } from 'vue';
import * as Misskey from 'misskey-js';
import { emojilist, UnicodeEmojiDef, unicodeEmojiCategories as categories } from '@/scripts/emojilist';
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
import Ripple from '@/components/ripple.vue';
import * as os from '@/os';
import { isTouchUsing } from '@/scripts/touch';
import { isMobile } from '@/scripts/is-mobile';
import { emojiCategories } from '@/instance';
import { emojiCategories, instance } from '@/instance';
import XSection from './emoji-picker.section.vue';
import { i18n } from '@/i18n';
import { defaultStore } from '@/store';
export default defineComponent({
components: {
XSection
},
const props = withDefaults(defineProps<{
showPinned?: boolean;
asReactionPicker?: boolean;
maxHeight?: number;
asDrawer?: boolean;
}>(), {
showPinned: true,
});
props: {
showPinned: {
required: false,
default: true,
},
asReactionPicker: {
required: false,
},
maxHeight: {
type: Number,
required: false,
},
asDrawer: {
type: Boolean,
required: false
},
},
const emit = defineEmits<{
(e: 'chosen', v: string): void;
}>();
emits: ['chosen'],
const search = ref<HTMLInputElement>();
const emojis = ref<HTMLDivElement>();
data() {
return {
emojilist: markRaw(emojilist),
getStaticImageUrl,
pinned: this.$store.reactiveState.reactions,
width: this.asReactionPicker ? this.$store.state.reactionPickerWidth : 3,
height: this.asReactionPicker ? this.$store.state.reactionPickerHeight : 2,
big: this.asReactionPicker ? isTouchUsing : false,
customEmojiCategories: emojiCategories,
customEmojis: this.$instance.emojis,
q: null,
searchResultCustom: [],
searchResultUnicode: [],
tab: 'index',
categories: ['face', 'people', 'animals_and_nature', 'food_and_drink', 'activity', 'travel_and_places', 'objects', 'symbols', 'flags'],
};
},
const {
reactions: pinned,
reactionPickerWidth,
reactionPickerHeight,
disableShowingAnimatedImages,
recentlyUsedEmojis,
} = defaultStore.reactiveState;
watch: {
q() {
this.$refs.emojis.scrollTop = 0;
const width = computed(() => props.asReactionPicker ? reactionPickerWidth.value : 3);
const height = computed(() => props.asReactionPicker ? reactionPickerHeight.value : 2);
const big = props.asReactionPicker ? isTouchUsing : false;
const customEmojiCategories = emojiCategories;
const customEmojis = instance.emojis;
const q = ref<string | null>(null);
const searchResultCustom = ref<Misskey.entities.CustomEmoji[]>([]);
const searchResultUnicode = ref<UnicodeEmojiDef[]>([]);
const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index');
if (this.q == null || this.q === '') {
this.searchResultCustom = [];
this.searchResultUnicode = [];
watch(q, () => {
if (emojis.value) emojis.value.scrollTop = 0;
if (q.value == null || q.value === '') {
searchResultCustom.value = [];
searchResultUnicode.value = [];
return;
}
const q = this.q.replace(/:/g, '');
const newQ = q.value.replace(/:/g, '');
const searchCustom = () => {
const max = 8;
const emojis = this.customEmojis;
const matches = new Set();
const emojis = customEmojis;
const matches = new Set<Misskey.entities.CustomEmoji>();
const exactMatch = emojis.find(e => e.name === q);
const exactMatch = emojis.find(e => e.name === newQ);
if (exactMatch) matches.add(exactMatch);
if (q.includes(' ')) { // AND検索
const keywords = q.split(' ');
if (newQ.includes(' ')) { // AND検索
const keywords = newQ.split(' ');
// 名前にキーワードが含まれている
for (const emoji of emojis) {
@ -168,7 +161,7 @@ export default defineComponent({
}
} else {
for (const emoji of emojis) {
if (emoji.name.startsWith(q)) {
if (emoji.name.startsWith(newQ)) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -176,7 +169,7 @@ export default defineComponent({
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.aliases.some(alias => alias.startsWith(q))) {
if (emoji.aliases.some(alias => alias.startsWith(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -184,7 +177,7 @@ export default defineComponent({
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.name.includes(q)) {
if (emoji.name.includes(newQ)) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -192,7 +185,7 @@ export default defineComponent({
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.aliases.some(alias => alias.includes(q))) {
if (emoji.aliases.some(alias => alias.includes(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -204,14 +197,14 @@ export default defineComponent({
const searchUnicode = () => {
const max = 8;
const emojis = this.emojilist;
const matches = new Set();
const emojis = emojilist;
const matches = new Set<UnicodeEmojiDef>();
const exactMatch = emojis.find(e => e.name === q);
const exactMatch = emojis.find(e => e.name === newQ);
if (exactMatch) matches.add(exactMatch);
if (q.includes(' ')) { // AND検索
const keywords = q.split(' ');
if (newQ.includes(' ')) { // AND検索
const keywords = newQ.split(' ');
// 名前にキーワードが含まれている
for (const emoji of emojis) {
@ -231,7 +224,7 @@ export default defineComponent({
}
} else {
for (const emoji of emojis) {
if (emoji.name.startsWith(q)) {
if (emoji.name.startsWith(newQ)) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -239,7 +232,7 @@ export default defineComponent({
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.keywords.some(keyword => keyword.startsWith(q))) {
if (emoji.keywords.some(keyword => keyword.startsWith(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -247,7 +240,7 @@ export default defineComponent({
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.name.includes(q)) {
if (emoji.name.includes(newQ)) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -255,7 +248,7 @@ export default defineComponent({
if (matches.size >= max) return matches;
for (const emoji of emojis) {
if (emoji.keywords.some(keyword => keyword.includes(q))) {
if (emoji.keywords.some(keyword => keyword.includes(newQ))) {
matches.add(emoji);
if (matches.size >= max) break;
}
@ -265,85 +258,87 @@ export default defineComponent({
return matches;
};
this.searchResultCustom = Array.from(searchCustom());
this.searchResultUnicode = Array.from(searchUnicode());
}
},
searchResultCustom.value = Array.from(searchCustom());
searchResultUnicode.value = Array.from(searchUnicode());
});
mounted() {
this.focus();
},
methods: {
focus() {
function focus() {
if (!isMobile && !isTouchUsing) {
this.$refs.search.focus({
search.value?.focus({
preventScroll: true
});
}
},
}
reset() {
this.$refs.emojis.scrollTop = 0;
this.q = '';
},
function reset() {
if (emojis.value) emojis.value.scrollTop = 0;
q.value = '';
}
getKey(emoji: any) {
function getKey(emoji: string | Misskey.entities.CustomEmoji | UnicodeEmojiDef): string {
return typeof emoji === 'string' ? emoji : (emoji.char || `:${emoji.name}:`);
},
}
chosen(emoji: any, ev) {
if (ev) {
const el = ev.currentTarget || ev.target;
function chosen(emoji: any, ev?: MouseEvent) {
const el = ev && (ev.currentTarget || ev.target) as HTMLElement | null | undefined;
if (el) {
const rect = el.getBoundingClientRect();
const x = rect.left + (el.offsetWidth / 2);
const y = rect.top + (el.offsetHeight / 2);
os.popup(Ripple, { x, y }, {}, 'end');
}
const key = this.getKey(emoji);
this.$emit('chosen', key);
const key = getKey(emoji);
emit('chosen', key);
// 最近使った絵文字更新
if (!this.pinned.includes(key)) {
let recents = this.$store.state.recentlyUsedEmojis;
if (!pinned.value.includes(key)) {
let recents = defaultStore.state.recentlyUsedEmojis;
recents = recents.filter((e: any) => e !== key);
recents.unshift(key);
this.$store.set('recentlyUsedEmojis', recents.splice(0, 32));
defaultStore.set('recentlyUsedEmojis', recents.splice(0, 32));
}
},
}
paste(event) {
function paste(event: ClipboardEvent) {
const paste = (event.clipboardData || window.clipboardData).getData('text');
if (this.done(paste)) {
if (done(paste)) {
event.preventDefault();
}
},
}
done(query) {
if (query == null) query = this.q;
if (query == null) return;
const q = query.replace(/:/g, '');
const exactMatchCustom = this.customEmojis.find(e => e.name === q);
function done(query?: any): boolean | void {
if (query == null) query = q.value;
if (query == null || typeof query !== 'string') return;
const q2 = query.replace(/:/g, '');
const exactMatchCustom = customEmojis.find(e => e.name === q2);
if (exactMatchCustom) {
this.chosen(exactMatchCustom);
chosen(exactMatchCustom);
return true;
}
const exactMatchUnicode = this.emojilist.find(e => e.char === q || e.name === q);
const exactMatchUnicode = emojilist.find(e => e.char === q2 || e.name === q2);
if (exactMatchUnicode) {
this.chosen(exactMatchUnicode);
chosen(exactMatchUnicode);
return true;
}
if (this.searchResultCustom.length > 0) {
this.chosen(this.searchResultCustom[0]);
if (searchResultCustom.value.length > 0) {
chosen(searchResultCustom.value[0]);
return true;
}
if (this.searchResultUnicode.length > 0) {
this.chosen(this.searchResultUnicode[0]);
if (searchResultUnicode.value.length > 0) {
chosen(searchResultUnicode.value[0]);
return true;
}
},
}
}
onMounted(() => {
focus();
});
defineExpose({
focus,
reset,
});
</script>

22
packages/client/src/components/featured-photos.vue
View file

@ -2,25 +2,15 @@
<div v-if="meta" class="xfbouadm" :style="{ backgroundImage: `url(${ meta.backgroundImageUrl })` }"></div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { ref } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os';
export default defineComponent({
components: {
},
const meta = ref<Misskey.entities.DetailedInstanceMetadata>();
data() {
return {
meta: null,
};
},
created() {
os.api('meta', { detail: true }).then(meta => {
this.meta = meta;
});
},
os.api('meta', { detail: true }).then(gotMeta => {
meta.value = gotMeta;
});
</script>

129
packages/client/src/components/follow-button.vue
View file

@ -6,129 +6,110 @@
>
<template v-if="!wait">
<template v-if="hasPendingFollowRequestFromYou && user.isLocked">
<span v-if="full">{{ $ts.followRequestPending }}</span><i class="fas fa-hourglass-half"></i>
<span v-if="full">{{ i18n.locale.followRequestPending }}</span><i class="fas fa-hourglass-half"></i>
</template>
<template v-else-if="hasPendingFollowRequestFromYou && !user.isLocked"> <!-- つまりリモートフォローの場合。 -->
<span v-if="full">{{ $ts.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
<span v-if="full">{{ i18n.locale.processing }}</span><i class="fas fa-spinner fa-pulse"></i>
</template>
<template v-else-if="isFollowing">
<span v-if="full">{{ $ts.unfollow }}</span><i class="fas fa-minus"></i>
<span v-if="full">{{ i18n.locale.unfollow }}</span><i class="fas fa-minus"></i>
</template>
<template v-else-if="!isFollowing && user.isLocked">
<span v-if="full">{{ $ts.followRequest }}</span><i class="fas fa-plus"></i>
<span v-if="full">{{ i18n.locale.followRequest }}</span><i class="fas fa-plus"></i>
</template>
<template v-else-if="!isFollowing && !user.isLocked">
<span v-if="full">{{ $ts.follow }}</span><i class="fas fa-plus"></i>
<span v-if="full">{{ i18n.locale.follow }}</span><i class="fas fa-plus"></i>
</template>
</template>
<template v-else>
<span v-if="full">{{ $ts.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
<span v-if="full">{{ i18n.locale.processing }}</span><i class="fas fa-spinner fa-pulse fa-fw"></i>
</template>
</button>
</template>
<script lang="ts">
import { defineComponent, markRaw } from 'vue';
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref } from 'vue';
import * as Misskey from 'misskey-js';
import * as os from '@/os';
import { stream } from '@/stream';
import { i18n } from '@/i18n';
export default defineComponent({
props: {
user: {
type: Object,
required: true
},
full: {
type: Boolean,
required: false,
default: false,
},
large: {
type: Boolean,
required: false,
default: false,
},
},
const props = withDefaults(defineProps<{
user: Misskey.entities.UserDetailed,
full?: boolean,
large?: boolean,
}>(), {
full: false,
large: false,
});
data() {
return {
isFollowing: this.user.isFollowing,
hasPendingFollowRequestFromYou: this.user.hasPendingFollowRequestFromYou,
wait: false,
connection: null,
};
},
const isFollowing = ref(props.user.isFollowing);
const hasPendingFollowRequestFromYou = ref(props.user.hasPendingFollowRequestFromYou);
const wait = ref(false);
const connection = stream.useChannel('main');
created() {
// 渡されたユーザー情報が不完全な場合
if (this.user.isFollowing == null) {
if (props.user.isFollowing == null) {
os.api('users/show', {
userId: this.user.id
userId: props.user.id
}).then(u => {
this.isFollowing = u.isFollowing;
this.hasPendingFollowRequestFromYou = u.hasPendingFollowRequestFromYou;
isFollowing.value = u.isFollowing;
hasPendingFollowRequestFromYou.value = u.hasPendingFollowRequestFromYou;
});
}
function onFollowChange(user: Misskey.entities.UserDetailed) {
if (user.id == props.user.id) {
isFollowing.value = user.isFollowing;
hasPendingFollowRequestFromYou.value = user.hasPendingFollowRequestFromYou;
}
},
}
mounted() {
this.connection = markRaw(stream.useChannel('main'));
this.connection.on('follow', this.onFollowChange);
this.connection.on('unfollow', this.onFollowChange);
},
beforeUnmount() {
this.connection.dispose();
},
methods: {
onFollowChange(user) {
if (user.id == this.user.id) {
this.isFollowing = user.isFollowing;
this.hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
}
},
async onClick() {
this.wait = true;
async function onClick() {
wait.value = true;
try {
if (this.isFollowing) {
if (isFollowing.value) {
const { canceled } = await os.confirm({
type: 'warning',
text: this.$t('unfollowConfirm', { name: this.user.name || this.user.username }),
text: i18n.t('unfollowConfirm', { name: props.user.name || props.user.username }),
});
if (canceled) return;
await os.api('following/delete', {
userId: this.user.id
userId: props.user.id
});
} else {
if (this.hasPendingFollowRequestFromYou) {
if (hasPendingFollowRequestFromYou.value) {
await os.api('following/requests/cancel', {
userId: this.user.id
userId: props.user.id
});
} else if (this.user.isLocked) {
} else if (props.user.isLocked) {
await os.api('following/create', {
userId: this.user.id
userId: props.user.id
});
this.hasPendingFollowRequestFromYou = true;
hasPendingFollowRequestFromYou.value = true;
} else {
await os.api('following/create', {
userId: this.user.id
userId: props.user.id
});
this.hasPendingFollowRequestFromYou = true;
hasPendingFollowRequestFromYou.value = true;
}
}
} catch (e) {
console.error(e);
} finally {
this.wait = false;
}
}
wait.value = false;
}
}
onMounted(() => {
connection.on('follow', onFollowChange);
connection.on('unfollow', onFollowChange);
});
onBeforeUnmount(() => {
connection.dispose();
});
</script>

72
packages/client/src/components/forgot-password.vue
View file

@ -2,72 +2,64 @@
<XModalWindow ref="dialog"
:width="370"
:height="400"
@close="$refs.dialog.close()"
@closed="$emit('closed')"
@close="dialog.close()"
@closed="emit('closed')"
>
<template #header>{{ $ts.forgotPassword }}</template>
<template #header>{{ i18n.locale.forgotPassword }}</template>
<form v-if="$instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
<form v-if="instance.enableEmail" class="bafeceda" @submit.prevent="onSubmit">
<div class="main _formRoot">
<MkInput v-model="username" class="_formBlock" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required>
<template #label>{{ $ts.username }}</template>
<template #label>{{ i18n.locale.username }}</template>
<template #prefix>@</template>
</MkInput>
<MkInput v-model="email" class="_formBlock" type="email" spellcheck="false" required>
<template #label>{{ $ts.emailAddress }}</template>
<template #caption>{{ $ts._forgotPassword.enterEmail }}</template>
<template #label>{{ i18n.locale.emailAddress }}</template>
<template #caption>{{ i18n.locale._forgotPassword.enterEmail }}</template>
</MkInput>
<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ $ts.send }}</MkButton>
<MkButton class="_formBlock" type="submit" :disabled="processing" primary style="margin: 0 auto;">{{ i18n.locale.send }}</MkButton>
</div>
<div class="sub">
<MkA to="/about" class="_link">{{ $ts._forgotPassword.ifNoEmail }}</MkA>
<MkA to="/about" class="_link">{{ i18n.locale._forgotPassword.ifNoEmail }}</MkA>
</div>
</form>
<div v-else>
{{ $ts._forgotPassword.contactAdmin }}
<div v-else class="bafecedb">
{{ i18n.locale._forgotPassword.contactAdmin }}
</div>
</XModalWindow>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
<script lang="ts" setup>
import { } from 'vue';
import XModalWindow from '@/components/ui/modal-window.vue';
import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue';
import * as os from '@/os';
import { instance } from '@/instance';
import { i18n } from '@/i18n';
export default defineComponent({
components: {
XModalWindow,
MkButton,
MkInput,
},
const emit = defineEmits<{
(e: 'done'): void;
(e: 'closed'): void;
}>();
emits: ['done', 'closed'],
let dialog: InstanceType<typeof XModalWindow> = $ref();
data() {
return {
username: '',
email: '',
processing: false,
};
},
let username = $ref('');
let email = $ref('');
let processing = $ref(false);
methods: {
async onSubmit() {
this.processing = true;
async function onSubmit() {
processing = true;
await os.apiWithDialog('request-reset-password', {
username: this.username,
email: this.email,
username,
email,
});
this.$emit('done');
this.$refs.dialog.close();
}
}
});
emit('done');
dialog.close();
}
</script>
<style lang="scss" scoped>
@ -81,4 +73,8 @@ export default defineComponent({
padding: 24px;
}
}
.bafecedb {
padding: 24px;
}
</style>

2
packages/client/src/os.ts
View file

@ -541,7 +541,7 @@ export const uploads = ref<{
img: string;
}[]>([]);
export function upload(file: File, folder?: any, name?: string) {
export function upload(file: File, folder?: any, name?: string): Promise<Misskey.entities.DriveFile> {
if (folder && typeof folder == 'object') folder = folder.id;
return new Promise((resolve, reject) => {

12
packages/client/src/scripts/emojilist.ts
View file

@ -1,7 +1,11 @@
// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
export const emojilist = require('../emojilist.json') as {
export const unicodeEmojiCategories = ['face', 'people', 'animals_and_nature', 'food_and_drink', 'activity', 'travel_and_places', 'objects', 'symbols', 'flags'] as const;
export type UnicodeEmojiDef = {
name: string;
keywords: string[];
char: string;
category: 'people' | 'animals_and_nature' | 'food_and_drink' | 'activity' | 'travel_and_places' | 'objects' | 'symbols' | 'flags';
}[];
category: typeof unicodeEmojiCategories[number];
}
// initial converted from https://github.com/muan/emojilib/commit/242fe68be86ed6536843b83f7e32f376468b38fb
export const emojilist = require('../emojilist.json') as UnicodeEmojiDef[];