|
|
|
@ -4,12 +4,13 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
<div :class="$style.root" @scroll="handleScroll">
|
|
|
|
|
<div :class="$style.root">
|
|
|
|
|
<nav :class="$style.nav">
|
|
|
|
|
<div :class="$style.navPath" @contextmenu.prevent.stop="() => {}">
|
|
|
|
|
<XNavFolder
|
|
|
|
|
:class="[$style.navPathItem, { [$style.navCurrent]: folder == null }]"
|
|
|
|
|
:parentFolder="folder"
|
|
|
|
|
:selectedFiles="selectedFiles"
|
|
|
|
|
@move="move"
|
|
|
|
|
@upload="upload"
|
|
|
|
|
@removeFile="removeFile"
|
|
|
|
@ -27,10 +28,23 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
|
@removeFolder="removeFolder"
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
|
|
|
|
|
<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i
|
|
|
|
|
class="ti ti-chevron-right"
|
|
|
|
|
></i></span>
|
|
|
|
|
<span v-if="folder != null" :class="[$style.navPathItem, $style.navCurrent]">{{ folder.name }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="_button" :class="$style.navMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
|
|
|
|
|
<button v-if="!multiple" class="_button" :class="$style.navMenu" @click="filesSelect">複数選択モード</button>
|
|
|
|
|
<span v-if="multiple && selectedFiles.length > 0" style="padding-right: 12px; margin-top: auto; margin-bottom: auto;opacity: 0.5;">
|
|
|
|
|
({{ number(selectedFiles.length) }})
|
|
|
|
|
</span>
|
|
|
|
|
<button v-if="multiple" class="_button" :class="$style.navMenu" @click="filesSelect">複数選択モード解除</button>
|
|
|
|
|
<button v-if="multiple && selectedFiles.length === 0" style="padding-right: 12px;" class="_button" @click="filesAllSelect">
|
|
|
|
|
全選択
|
|
|
|
|
</button>
|
|
|
|
|
<button v-if="multiple && selectedFiles.length !== 0" style="padding-right: 12px;" class="_button" @click="filesAllSelect">
|
|
|
|
|
全選択解除
|
|
|
|
|
</button>
|
|
|
|
|
<button class="_button" @click="showMenu"><i class="ti ti-dots"></i></button>
|
|
|
|
|
</nav>
|
|
|
|
|
<div
|
|
|
|
|
ref="main"
|
|
|
|
@ -51,6 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
|
:folder="f"
|
|
|
|
|
:selectMode="select === 'folder'"
|
|
|
|
|
:isSelected="selectedFolders.some(x => x.id === f.id)"
|
|
|
|
|
:selectedFiles="selectedFiles"
|
|
|
|
|
@chosen="chooseFolder"
|
|
|
|
|
@move="move"
|
|
|
|
|
@upload="upload"
|
|
|
|
@ -73,15 +88,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
|
:folder="folder"
|
|
|
|
|
:selectMode="select === 'file'"
|
|
|
|
|
:isSelected="selectedFiles.some(x => x.id === file.id)"
|
|
|
|
|
:SelectFiles="SelectFiles"
|
|
|
|
|
@click.shift.left.exact="filesSelect"
|
|
|
|
|
@chosen="chooseFile"
|
|
|
|
|
@dragstart="isDragSource = true"
|
|
|
|
|
@dragend="isDragSource = false"
|
|
|
|
|
@pointerdown="startLongPress(file)"
|
|
|
|
|
@pointerup="endLongPress"
|
|
|
|
|
@pointermove="debounceEvent"
|
|
|
|
|
@pointercancel="debounceEvent"
|
|
|
|
|
@click.shift.left.exact="multipleSelect(file)"
|
|
|
|
|
/>
|
|
|
|
|
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
|
|
|
|
|
<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
|
|
|
|
@ -89,14 +99,21 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="files.length == 0 && folders.length == 0 && !fetching" :class="$style.empty">
|
|
|
|
|
<div v-if="draghover">{{ i18n.t('empty-draghover') }}</div>
|
|
|
|
|
<div v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</div>
|
|
|
|
|
<div v-if="!draghover && folder == null">
|
|
|
|
|
<strong>{{
|
|
|
|
|
i18n.ts.emptyDrive
|
|
|
|
|
}}</strong><br/>{{ i18n.t('empty-drive-description') }}
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<MkLoading v-if="fetching"/>
|
|
|
|
|
</div>
|
|
|
|
|
<div v-if="draghover" :class="$style.dropzone"></div>
|
|
|
|
|
<input ref="fileInput" style="display: none;" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
|
|
|
|
|
<input
|
|
|
|
|
ref="fileInput" style="display: none;" type="file" accept="*/*" multiple tabindex="-1"
|
|
|
|
|
@change="onChangeFileInput"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
@ -113,7 +130,8 @@ import { defaultStore } from '@/store.js';
|
|
|
|
|
import { i18n } from '@/i18n.js';
|
|
|
|
|
import { uploadFile, uploads } from '@/scripts/upload.js';
|
|
|
|
|
import { claimAchievement } from '@/scripts/achievements.js';
|
|
|
|
|
import { isTouchUsing } from '@/scripts/touch.js';
|
|
|
|
|
import number from "@/filters/number.js";
|
|
|
|
|
|
|
|
|
|
const props = withDefaults(defineProps<{
|
|
|
|
|
initialFolder?: Misskey.entities.DriveFolder;
|
|
|
|
|
type?: string;
|
|
|
|
@ -146,10 +164,8 @@ const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
|
|
|
|
|
const uploadings = uploads;
|
|
|
|
|
const connection = useStream().useChannel('drive');
|
|
|
|
|
const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
|
|
|
|
|
const SelectFiles = ref([]);
|
|
|
|
|
const isLongPressing = ref(false);
|
|
|
|
|
let longPressTimeout = null;
|
|
|
|
|
const isScrolling = ref(false); // スクロール中でない状態で初期化
|
|
|
|
|
const multiple = ref(props.multiple || false);
|
|
|
|
|
const select = ref(props.select || null);
|
|
|
|
|
|
|
|
|
|
// ドロップされようとしているか
|
|
|
|
|
const draghover = ref(false);
|
|
|
|
@ -169,47 +185,6 @@ watch(folder, () => emit('cd', folder.value));
|
|
|
|
|
function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
|
|
|
|
|
addFile(file, true);
|
|
|
|
|
}
|
|
|
|
|
let timeout;
|
|
|
|
|
const debounceEvent = (event) => {
|
|
|
|
|
if (isTouchUsing && SelectFiles.value.length === 0) {
|
|
|
|
|
clearTimeout(timeout);
|
|
|
|
|
timeout = setTimeout(() => {
|
|
|
|
|
isLongPressing.value = false;
|
|
|
|
|
}, 900);
|
|
|
|
|
}else{
|
|
|
|
|
clearTimeout(timeout);
|
|
|
|
|
timeout = setTimeout(() => {
|
|
|
|
|
isLongPressing.value = false;
|
|
|
|
|
}, 80);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function startLongPress(file) {
|
|
|
|
|
console.log(SelectFiles.value.length)
|
|
|
|
|
if (isTouchUsing && SelectFiles.value.length === 0) {
|
|
|
|
|
isLongPressing.value = true;
|
|
|
|
|
longPressTimeout = setTimeout(() => {
|
|
|
|
|
if (isLongPressing.value) {
|
|
|
|
|
multipleSelect(file);
|
|
|
|
|
}
|
|
|
|
|
}, 1000);
|
|
|
|
|
}else{
|
|
|
|
|
isLongPressing.value = true;
|
|
|
|
|
longPressTimeout = setTimeout(() => {
|
|
|
|
|
if (isLongPressing.value) {
|
|
|
|
|
multipleSelect(file);
|
|
|
|
|
}
|
|
|
|
|
}, 100);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function endLongPress() {
|
|
|
|
|
if (isTouchUsing) {
|
|
|
|
|
isLongPressing.value = false;
|
|
|
|
|
clearTimeout(longPressTimeout);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
|
|
|
|
|
const current = folder.value ? folder.value.id : null;
|
|
|
|
@ -227,14 +202,7 @@ function onStreamDriveFileDeleted(fileId: string) {
|
|
|
|
|
function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
|
|
|
|
|
addFolder(createdFolder, true);
|
|
|
|
|
}
|
|
|
|
|
function multipleSelect(file) {
|
|
|
|
|
const index = SelectFiles.value.findIndex(item => item.id === file.id);
|
|
|
|
|
if (index !== -1) {
|
|
|
|
|
SelectFiles.value.splice(index, 1);
|
|
|
|
|
} else {
|
|
|
|
|
SelectFiles.value.push(file);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
|
|
|
|
|
const current = folder.value ? folder.value.id : null;
|
|
|
|
|
if (current !== updatedFolder.parentId) {
|
|
|
|
@ -448,7 +416,7 @@ function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null
|
|
|
|
|
|
|
|
|
|
function chooseFile(file: Misskey.entities.DriveFile) {
|
|
|
|
|
const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
|
|
|
|
|
if (props.multiple) {
|
|
|
|
|
if (multiple.value) {
|
|
|
|
|
if (isAlreadySelected) {
|
|
|
|
|
selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
|
|
|
|
|
} else {
|
|
|
|
@ -467,7 +435,7 @@ function chooseFile(file: Misskey.entities.DriveFile) {
|
|
|
|
|
|
|
|
|
|
function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
|
|
|
|
|
const isAlreadySelected = selectedFolders.value.some(f => f.id === folderToChoose.id);
|
|
|
|
|
if (props.multiple) {
|
|
|
|
|
if (multiple.value) {
|
|
|
|
|
if (isAlreadySelected) {
|
|
|
|
|
selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToChoose.id);
|
|
|
|
|
} else {
|
|
|
|
@ -554,6 +522,7 @@ function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
|
|
|
|
|
function removeFile(file: Misskey.entities.DriveFile | string) {
|
|
|
|
|
const fileId = typeof file === 'object' ? file.id : file;
|
|
|
|
|
files.value = files.value.filter(f => f.id !== fileId);
|
|
|
|
|
selectedFiles.value = selectedFiles.value.filter(f => f.id !== fileId);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function appendFile(file: Misskey.entities.DriveFile) {
|
|
|
|
@ -563,6 +532,7 @@ function appendFile(file: Misskey.entities.DriveFile) {
|
|
|
|
|
function appendFolder(folderToAppend: Misskey.entities.DriveFolder) {
|
|
|
|
|
addFolder(folderToAppend);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
function prependFile(file: Misskey.entities.DriveFile) {
|
|
|
|
|
addFile(file, true);
|
|
|
|
@ -679,33 +649,130 @@ function getMenu() {
|
|
|
|
|
}, {
|
|
|
|
|
text: i18n.ts.upload,
|
|
|
|
|
icon: 'ti ti-upload',
|
|
|
|
|
action: () => { selectLocalFile(); },
|
|
|
|
|
action: () => {
|
|
|
|
|
selectLocalFile();
|
|
|
|
|
},
|
|
|
|
|
}, {
|
|
|
|
|
text: i18n.ts.fromUrl,
|
|
|
|
|
icon: 'ti ti-link',
|
|
|
|
|
action: () => { urlUpload(); },
|
|
|
|
|
action: () => {
|
|
|
|
|
urlUpload();
|
|
|
|
|
},
|
|
|
|
|
}, null, {
|
|
|
|
|
text: folder.value ? folder.value.name : i18n.ts.drive,
|
|
|
|
|
type: 'label',
|
|
|
|
|
}, folder.value ? {
|
|
|
|
|
text: i18n.ts.renameFolder,
|
|
|
|
|
icon: 'ti ti-forms',
|
|
|
|
|
action: () => { renameFolder(folder.value); },
|
|
|
|
|
action: () => {
|
|
|
|
|
renameFolder(folder.value);
|
|
|
|
|
},
|
|
|
|
|
} : undefined, folder.value ? {
|
|
|
|
|
text: i18n.ts.deleteFolder,
|
|
|
|
|
icon: 'ti ti-trash',
|
|
|
|
|
action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
|
|
|
|
|
action: () => {
|
|
|
|
|
deleteFolder(folder.value as Misskey.entities.DriveFolder);
|
|
|
|
|
},
|
|
|
|
|
} : undefined, {
|
|
|
|
|
text: i18n.ts.createFolder,
|
|
|
|
|
icon: 'ti ti-folder-plus',
|
|
|
|
|
action: () => { createFolder(); },
|
|
|
|
|
action: () => {
|
|
|
|
|
createFolder();
|
|
|
|
|
},
|
|
|
|
|
}];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showMenu(ev: MouseEvent) {
|
|
|
|
|
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
|
|
|
|
async function isSensitive(Files, isSensitive: boolean) {
|
|
|
|
|
const { canceled } = await os.confirm({
|
|
|
|
|
type: 'warning',
|
|
|
|
|
text: i18n.t(isSensitive ? 'driveFilesSensitiveonConfirm' : 'driveFilesSensitiveoffConfirm', { name: Files.length }),
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (canceled) return;
|
|
|
|
|
Files.forEach((file) => {
|
|
|
|
|
os.api('drive/files/update', {
|
|
|
|
|
fileId: file.id,
|
|
|
|
|
isSensitive,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
const contents = ref(null);
|
|
|
|
|
|
|
|
|
|
async function fileDelete(Files) {
|
|
|
|
|
const { canceled } = await os.confirm({
|
|
|
|
|
type: 'warning',
|
|
|
|
|
text: i18n.t('driveFilesDeleteConfirm', { name: Files.length }),
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (canceled) return;
|
|
|
|
|
Files.forEach((file) => {
|
|
|
|
|
os.api('drive/files/delete', {
|
|
|
|
|
fileId: file.id,
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getFilesMenu(Files) {
|
|
|
|
|
return [{
|
|
|
|
|
text: i18n.ts.createNoteFromTheFile,
|
|
|
|
|
icon: 'ti ti-pencil',
|
|
|
|
|
action: () => {
|
|
|
|
|
if (Files.length >= 16) {
|
|
|
|
|
os.confirm({
|
|
|
|
|
type: 'warning',
|
|
|
|
|
text: '16ファイル以上添付しようとしています',
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
} else {
|
|
|
|
|
os.post({
|
|
|
|
|
initialFiles: [...Files],
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}, {
|
|
|
|
|
text: i18n.ts.unmarkAsSensitive,
|
|
|
|
|
icon: 'ti ti-eye',
|
|
|
|
|
action: () => {
|
|
|
|
|
isSensitive(Files, false);
|
|
|
|
|
},
|
|
|
|
|
}, {
|
|
|
|
|
text: i18n.ts.markAsSensitive,
|
|
|
|
|
icon: 'ti ti-eye-exclamation',
|
|
|
|
|
action: () => {
|
|
|
|
|
isSensitive(Files, true);
|
|
|
|
|
},
|
|
|
|
|
}, {
|
|
|
|
|
text: i18n.ts.delete,
|
|
|
|
|
icon: 'ti ti-trash',
|
|
|
|
|
danger: true,
|
|
|
|
|
action: () => {
|
|
|
|
|
fileDelete(Files);
|
|
|
|
|
},
|
|
|
|
|
}];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function filesSelect() {
|
|
|
|
|
multiple.value = !multiple.value;
|
|
|
|
|
select.value = (select.value === null) ? 'file' : null;
|
|
|
|
|
selectedFiles.value = [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function filesAllSelect() {
|
|
|
|
|
if (selectedFiles.value.length === 0) {
|
|
|
|
|
selectedFiles.value = files.value;
|
|
|
|
|
} else {
|
|
|
|
|
selectedFiles.value = [];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showMenu(ev: MouseEvent) {
|
|
|
|
|
console.log(selectedFiles.value.length);
|
|
|
|
|
if (selectedFiles.value.length === 0) {
|
|
|
|
|
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
|
|
|
|
} else {
|
|
|
|
|
os.popupMenu(getFilesMenu(selectedFiles.value), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onContextmenu(ev: MouseEvent) {
|
|
|
|
|
os.contextMenu(getMenu(), ev);
|
|
|
|
|
}
|
|
|
|
@ -743,7 +810,6 @@ onBeforeUnmount(() => {
|
|
|
|
|
connection.dispose();
|
|
|
|
|
ilFilesObserver.disconnect();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" module>
|
|
|
|
@ -755,7 +821,10 @@ onBeforeUnmount(() => {
|
|
|
|
|
|
|
|
|
|
.nav {
|
|
|
|
|
display: flex;
|
|
|
|
|
z-index: 2;
|
|
|
|
|
top: 0;
|
|
|
|
|
position: sticky;
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
background-color: var(--bg);
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 0 8px;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|