ドライブ複数選択できるようになった可能性がある
This commit is contained in:
mattyatea
parent
a328a03c51
commit
a0927c5353
9 changed files with 524 additions and 274 deletions
|
|
@ -4,239 +4,290 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[$style.root, { [$style.isSelected]: isSelected }]"
|
||||
draggable="true"
|
||||
:title="title"
|
||||
@click="onClick"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
@dragstart="onDragstart"
|
||||
@dragend="onDragend"
|
||||
>
|
||||
<div style="pointer-events: none;">
|
||||
<div v-if="$i?.avatarId == file.id" :class="[$style.label]">
|
||||
<img :class="$style.labelImg" src="/client-assets/label.svg"/>
|
||||
<p :class="$style.labelText">{{ i18n.ts.avatar }}</p>
|
||||
</div>
|
||||
<div v-if="$i?.bannerId == file.id" :class="[$style.label]">
|
||||
<img :class="$style.labelImg" src="/client-assets/label.svg"/>
|
||||
<p :class="$style.labelText">{{ i18n.ts.banner }}</p>
|
||||
</div>
|
||||
<div v-if="file.isSensitive" :class="[$style.label, $style.red]">
|
||||
<img :class="$style.labelImg" src="/client-assets/label-red.svg"/>
|
||||
<p :class="$style.labelText">{{ i18n.ts.sensitive }}</p>
|
||||
</div>
|
||||
<div
|
||||
:class="[$style.root, { [$style.isSelected]: isSelected },{[$style.isSelected]: isMultiSelect}]"
|
||||
draggable="true"
|
||||
:title="title"
|
||||
@click="onClick"
|
||||
@pointerdown="startLongPress(file)"
|
||||
@pointerup="endLongPress"
|
||||
@contextmenu.stop="onContextmenu"
|
||||
@dragstart="onDragstart"
|
||||
@dragend="onDragend"
|
||||
>
|
||||
<div style="pointer-events: none;">
|
||||
<div v-if="$i?.avatarId == file.id" :class="[$style.label]">
|
||||
<img :class="$style.labelImg" src="/client-assets/label.svg"/>
|
||||
<p :class="$style.labelText">{{ i18n.ts.avatar }}</p>
|
||||
</div>
|
||||
<div v-if="$i?.bannerId == file.id" :class="[$style.label]">
|
||||
<img :class="$style.labelImg" src="/client-assets/label.svg"/>
|
||||
<p :class="$style.labelText">{{ i18n.ts.banner }}</p>
|
||||
</div>
|
||||
<div v-if="file.isSensitive" :class="[$style.label, $style.red]">
|
||||
<img :class="$style.labelImg" src="/client-assets/label-red.svg"/>
|
||||
<p :class="$style.labelText">{{ i18n.ts.sensitive }}</p>
|
||||
</div>
|
||||
|
||||
<MkDriveFileThumbnail :class="$style.thumbnail" :file="file" fit="contain"/>
|
||||
<MkDriveFileThumbnail :class="$style.thumbnail" :file="file" fit="contain"/>
|
||||
|
||||
<p :class="$style.name">
|
||||
<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substring(0, file.name.lastIndexOf('.')) : file.name }}</span>
|
||||
<span v-if="file.name.lastIndexOf('.') != -1" style="opacity: 0.5;">{{ file.name.substring(file.name.lastIndexOf('.')) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p :class="$style.name">
|
||||
<span>{{
|
||||
file.name.lastIndexOf('.') != -1 ? file.name.substring(0, file.name.lastIndexOf('.')) : file.name
|
||||
}}</span>
|
||||
<span v-if="file.name.lastIndexOf('.') != -1"
|
||||
style="opacity: 0.5;">{{ file.name.substring(file.name.lastIndexOf('.')) }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import {computed, ref, watch} from 'vue';
|
||||
import * as Misskey from 'misskey-js';
|
||||
import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
|
||||
import bytes from '@/filters/bytes.js';
|
||||
import * as os from '@/os.js';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { $i } from '@/account.js';
|
||||
import { getDriveFileMenu } from '@/scripts/get-drive-file-menu.js';
|
||||
import {i18n} from '@/i18n.js';
|
||||
import {$i} from '@/account.js';
|
||||
import {getDriveFileMenu, getDriveFileMultiMenu} from '@/scripts/get-drive-file-menu.js';
|
||||
const isLongPressing = ref(false);
|
||||
let longPressTimeout = null;
|
||||
import {defaultStore} from '@/store.js'
|
||||
function startLongPress() {
|
||||
isLongPressing.value = true;
|
||||
longPressTimeout = setTimeout(() => {
|
||||
if (isLongPressing) {
|
||||
}
|
||||
}, 800); // 長押しと判断する時間（1秒）を設定
|
||||
}
|
||||
|
||||
function endLongPress() {
|
||||
isLongPressing.value = false;
|
||||
clearTimeout(longPressTimeout);
|
||||
}
|
||||
|
||||
const isMultiSelect = ref(false);
|
||||
const props = withDefaults(defineProps<{
|
||||
file: Misskey.entities.DriveFile;
|
||||
folder: Misskey.entities.DriveFolder | null;
|
||||
isSelected?: boolean;
|
||||
selectMode?: boolean;
|
||||
file: Misskey.entities.DriveFile;
|
||||
folder: Misskey.entities.DriveFolder | null;
|
||||
isSelected?: boolean;
|
||||
selectMode?: boolean;
|
||||
multipleselect?;
|
||||
isLongPressing?;
|
||||
}>(), {
|
||||
isSelected: false,
|
||||
selectMode: false,
|
||||
isSelected: false,
|
||||
selectMode: false,
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'chosen', r: Misskey.entities.DriveFile): void;
|
||||
(ev: 'dragstart'): void;
|
||||
(ev: 'dragend'): void;
|
||||
(ev: 'chosen', r: Misskey.entities.DriveFile): void;
|
||||
(ev: 'dragstart'): void;
|
||||
(ev: 'dragend'): void;
|
||||
}>();
|
||||
|
||||
const isDragging = ref(false);
|
||||
|
||||
const title = computed(() => `${props.file.name}\n${props.file.type} ${bytes(props.file.size)}`);
|
||||
|
||||
watch(props.multipleselect, () => {
|
||||
isMultiSelect.value = !!props.multipleselect.some(item => item.id === props.file.id);
|
||||
});
|
||||
function onClick(ev: MouseEvent) {
|
||||
if (props.selectMode) {
|
||||
emit('chosen', props.file);
|
||||
} else {
|
||||
os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
||||
}
|
||||
}
|
||||
|
||||
if (props.selectMode) {
|
||||
emit('chosen', props.file);
|
||||
} else if (ev.shiftKey && ev.button === 2 || isMultiSelect.value ) {
|
||||
os.popupMenu(getDriveFileMultiMenu(props.multipleselect, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
||||
|
||||
}
|
||||
else if (!ev.shiftKey) {
|
||||
os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
||||
|
||||
}
|
||||
}
|
||||
function device() {
|
||||
var ua = navigator.userAgent;
|
||||
if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
|
||||
return 'mobile';
|
||||
}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
|
||||
return 'tablet';
|
||||
}else{
|
||||
return 'desktop';
|
||||
}
|
||||
}
|
||||
function onContextmenu(ev: MouseEvent) {
|
||||
os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
|
||||
|
||||
if (!ev.shiftKey && !isMultiSelect.value) {
|
||||
os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
|
||||
} else if (ev.shiftKey && props.multipleselect.length > 0 && ev.button === 2) {
|
||||
os.contextMenu(getDriveFileMultiMenu(props.multipleselect, props.folder), ev);
|
||||
} else if(device()=== "desktop"){
|
||||
os.contextMenu(getDriveFileMenu(props.file, props.folder), ev);
|
||||
|
||||
}
|
||||
if (props.isLongPressing){
|
||||
isMultiSelect.value = !isMultiSelect.value
|
||||
}
|
||||
}
|
||||
|
||||
function onDragstart(ev: DragEvent) {
|
||||
if (ev.dataTransfer) {
|
||||
ev.dataTransfer.effectAllowed = 'move';
|
||||
ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
|
||||
}
|
||||
isDragging.value = true;
|
||||
if (ev.dataTransfer) {
|
||||
ev.dataTransfer.effectAllowed = 'move';
|
||||
ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
|
||||
}
|
||||
isDragging.value = true;
|
||||
|
||||
emit('dragstart');
|
||||
emit('dragstart');
|
||||
}
|
||||
|
||||
function onDragend() {
|
||||
isDragging.value = false;
|
||||
emit('dragend');
|
||||
isDragging.value = false;
|
||||
emit('dragend');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
position: relative;
|
||||
padding: 8px 0 0 0;
|
||||
min-height: 180px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
padding: 8px 0 0 0;
|
||||
min-height: 180px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgba(#000, 0.05);
|
||||
&:hover {
|
||||
background: rgba(#000, 0.05);
|
||||
|
||||
> .label {
|
||||
&:before,
|
||||
&:after {
|
||||
background: #0b65a5;
|
||||
}
|
||||
> .label {
|
||||
&:before,
|
||||
&:after {
|
||||
background: #0b65a5;
|
||||
}
|
||||
|
||||
&.red {
|
||||
&:before,
|
||||
&:after {
|
||||
background: #c12113;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.red {
|
||||
&:before,
|
||||
&:after {
|
||||
background: #c12113;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: rgba(#000, 0.1);
|
||||
&:active {
|
||||
background: rgba(#000, 0.1);
|
||||
|
||||
> .label {
|
||||
&:before,
|
||||
&:after {
|
||||
background: #0b588c;
|
||||
}
|
||||
> .label {
|
||||
&:before,
|
||||
&:after {
|
||||
background: #0b588c;
|
||||
}
|
||||
|
||||
&.red {
|
||||
&:before,
|
||||
&:after {
|
||||
background: #ce2212;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.red {
|
||||
&:before,
|
||||
&:after {
|
||||
background: #ce2212;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.isSelected {
|
||||
background: var(--accent);
|
||||
&.isSelected {
|
||||
background: var(--accent);
|
||||
|
||||
&:hover {
|
||||
background: var(--accentLighten);
|
||||
}
|
||||
&:hover {
|
||||
background: var(--accentLighten);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--accentDarken);
|
||||
}
|
||||
&:active {
|
||||
background: var(--accentDarken);
|
||||
}
|
||||
|
||||
> .label {
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
> .label {
|
||||
&:before,
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .name {
|
||||
color: #fff;
|
||||
}
|
||||
> .name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
> .thumbnail {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
> .thumbnail {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: #0c7ac9;
|
||||
}
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background: #0c7ac9;
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
left: 57px;
|
||||
width: 28px;
|
||||
height: 8px;
|
||||
}
|
||||
&:before {
|
||||
top: 0;
|
||||
left: 57px;
|
||||
width: 28px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 57px;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 28px;
|
||||
}
|
||||
&:after {
|
||||
top: 57px;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
&.red {
|
||||
&:before,
|
||||
&:after {
|
||||
background: #c12113;
|
||||
}
|
||||
}
|
||||
&.red {
|
||||
&:before,
|
||||
&:after {
|
||||
background: #c12113;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.labelImg {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.labelText {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 19px;
|
||||
left: -28px;
|
||||
width: 120px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
transform: rotate(-45deg);
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
top: 19px;
|
||||
left: -28px;
|
||||
width: 120px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
color: #fff;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
margin: auto;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
margin: 4px 0 0 0;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
color: var(--fg);
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
margin: 4px 0 0 0;
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
color: var(--fg);
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
@drop.prevent.stop="onDrop"
|
||||
@dragstart="onDragstart"
|
||||
@dragend="onDragend"
|
||||
|
||||
>
|
||||
<p :class="$style.name">
|
||||
<template v-if="hover"><i :class="$style.icon" class="ti ti-folder ti-fw"></i></template>
|
||||
|
|
@ -44,6 +45,7 @@ const props = withDefaults(defineProps<{
|
|||
folder: Misskey.entities.DriveFolder;
|
||||
isSelected?: boolean;
|
||||
selectMode?: boolean;
|
||||
multipleselect?;
|
||||
}>(), {
|
||||
isSelected: false,
|
||||
selectMode: false,
|
||||
|
|
@ -143,11 +145,22 @@ function onDrop(ev: DragEvent) {
|
|||
if (driveFile != null && driveFile !== '') {
|
||||
const file = JSON.parse(driveFile);
|
||||
emit('removeFile', file.id);
|
||||
os.api('drive/files/update', {
|
||||
fileId: file.id,
|
||||
folderId: props.folder.id,
|
||||
});
|
||||
}
|
||||
if (props.multipleselect.length > 0) {
|
||||
props.multipleselect.forEach((e)=>{
|
||||
os.api('drive/files/update', {
|
||||
fileId: e.id,
|
||||
folderId: props.folder.id,
|
||||
});
|
||||
})
|
||||
}else{
|
||||
os.api('drive/files/update', {
|
||||
fileId: file.id,
|
||||
folderId: props.folder.id,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
//#endregion
|
||||
|
||||
//#region ドライブのフォルダ
|
||||
|
|
@ -221,28 +234,118 @@ function rename() {
|
|||
}
|
||||
|
||||
function deleteFolder() {
|
||||
os.api('drive/folders/delete', {
|
||||
folderId: props.folder.id,
|
||||
}).then(() => {
|
||||
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: i18n.ts.unableToDelete,
|
||||
text: i18n.ts.hasChildFilesOrFolders,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.unableToDelete,
|
||||
});
|
||||
}
|
||||
});
|
||||
os.api('drive/folders/show', {
|
||||
folderId: props.folder.id,
|
||||
}).then(async (r) => {
|
||||
|
||||
if (r.foldersCount > 0) {
|
||||
await os.alert({
|
||||
type: 'error',
|
||||
title: i18n.ts.unableToDelete,
|
||||
text: 'フォルダ内にフォルダが存在するため、削除できません。 \n フォルダ内のフォルダを削除してから試してみてください。',
|
||||
});
|
||||
}
|
||||
|
||||
if (r.filesCount > 0) {
|
||||
|
||||
const {canceled} = await os.confirm({
|
||||
type: 'warning',
|
||||
text: i18n.t('driveFolderDeleteConfirm', {name: props.folder.name}),
|
||||
});
|
||||
|
||||
if (canceled) return;
|
||||
|
||||
let allResults = [];
|
||||
let Result = await os.api('drive/files', {folderId: props.folder.id, limit: 31});
|
||||
allResults = allResults.concat(Result)
|
||||
while (Result.length >= 31) {
|
||||
const untilId = Result[Result.length - 1].id;
|
||||
Result = await os.api('drive/files', { folderId: props.folder.id, limit: 31, untilId });
|
||||
allResults = allResults.concat(Result); // pushをconcatに変更
|
||||
}
|
||||
allResults.forEach((r,i)=>{
|
||||
os.api('drive/files/delete',{fileId: r.id})
|
||||
})
|
||||
|
||||
|
||||
os.api('drive/folders/show', {
|
||||
folderId: props.folder.id,
|
||||
}).then(async (r) =>{
|
||||
if (r.filesCount > 0) {
|
||||
|
||||
let allResults = [];
|
||||
let Result = await os.api('drive/files', {folderId: props.folder.id, limit: 31});
|
||||
allResults = allResults.concat(Result)
|
||||
while (Result.length >= 31) {
|
||||
const untilId = Result[Result.length - 1].id;
|
||||
Result = await os.api('drive/files', { folderId: props.folder.id, limit: 31, untilId });
|
||||
allResults = allResults.concat(Result); // pushをconcatに変更
|
||||
}
|
||||
allResults.forEach((r,i)=>{
|
||||
console.log(r)
|
||||
os.api('drive/files/delete',{fileId: r.id})
|
||||
})
|
||||
|
||||
os.api('drive/folders/delete', {
|
||||
folderId: props.folder.id,
|
||||
}).then(() => {
|
||||
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: i18n.ts.unableToDelete,
|
||||
text: i18n.ts.hasChildFilesOrFolders,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.unableToDelete,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
os.api('drive/folders/delete', {
|
||||
folderId: props.folder.id,
|
||||
})
|
||||
}else{
|
||||
os.api('drive/folders/delete', {
|
||||
folderId: props.folder.id,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
} else {
|
||||
|
||||
await os.api('drive/folders/delete', {
|
||||
folderId: props.folder.id,
|
||||
}).then(() => {
|
||||
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: i18n.ts.unableToDelete,
|
||||
text: i18n.ts.hasChildFilesOrFolders,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
os.alert({
|
||||
type: 'error',
|
||||
text: i18n.ts.unableToDelete,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function setAsUploadFolder() {
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import { i18n } from '@/i18n.js';
|
|||
const props = defineProps<{
|
||||
folder?: Misskey.entities.DriveFolder;
|
||||
parentFolder: Misskey.entities.DriveFolder | null;
|
||||
multipleselect?;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
|
|
@ -112,10 +113,22 @@ function onDrop(ev: DragEvent) {
|
|||
if (driveFile != null && driveFile !== '') {
|
||||
const file = JSON.parse(driveFile);
|
||||
emit('removeFile', file.id);
|
||||
os.api('drive/files/update', {
|
||||
fileId: file.id,
|
||||
folderId: props.folder ? props.folder.id : null,
|
||||
});
|
||||
|
||||
if (props.multipleselect.length > 0) {
|
||||
|
||||
props.multipleselect.forEach((e)=>{
|
||||
os.api('drive/files/update', {
|
||||
fileId: e.id,
|
||||
folderId: props.folder ? props.folder.id : null,
|
||||
});
|
||||
})
|
||||
|
||||
}else{
|
||||
os.api('drive/files/update', {
|
||||
fileId: file.id,
|
||||
folderId: props.folder ? props.folder.id : null,
|
||||
});
|
||||
}
|
||||
}
|
||||
//#endregion
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
@upload="upload"
|
||||
@removeFile="removeFile"
|
||||
@removeFolder="removeFolder"
|
||||
:multipleselect="multipleselect"
|
||||
/>
|
||||
<template v-for="f in hierarchyFolders">
|
||||
<span :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
|
||||
|
|
@ -25,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
@upload="upload"
|
||||
@removeFile="removeFile"
|
||||
@removeFolder="removeFolder"
|
||||
:multipleselect="multipleselect"
|
||||
/>
|
||||
</template>
|
||||
<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
|
||||
|
|
@ -51,6 +53,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:folder="f"
|
||||
:selectMode="select === 'folder'"
|
||||
:isSelected="selectedFolders.some(x => x.id === f.id)"
|
||||
:multipleselect="multipleselect"
|
||||
@chosen="chooseFolder"
|
||||
@move="move"
|
||||
@upload="upload"
|
||||
|
|
@ -76,6 +79,12 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
@chosen="chooseFile"
|
||||
@dragstart="isDragSource = true"
|
||||
@dragend="isDragSource = false"
|
||||
@pointerdown="startLongPress(file)"
|
||||
@pointerup="endLongPress"
|
||||
@click.shift.left.exact="selectClick(file)"
|
||||
@click.ctrl.left.exact="selectClick(file)"
|
||||
:multipleselect="multipleselect"
|
||||
:isLongPressing="isLongPressing"
|
||||
/>
|
||||
<!-- 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>
|
||||
|
|
@ -118,6 +127,24 @@ const props = withDefaults(defineProps<{
|
|||
select: null,
|
||||
});
|
||||
|
||||
const isLongPressing = ref(false);
|
||||
let longPressTimeout = null;
|
||||
|
||||
function startLongPress(file) {
|
||||
isLongPressing.value = true;
|
||||
longPressTimeout = setTimeout(() => {
|
||||
if (isLongPressing) {
|
||||
selectClick(file)
|
||||
}
|
||||
}, 800); // 長押しと判断する時間（1秒）を設定
|
||||
}
|
||||
|
||||
function endLongPress() {
|
||||
isLongPressing.value = false;
|
||||
clearTimeout(longPressTimeout);
|
||||
}
|
||||
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
|
||||
(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
|
||||
|
|
@ -140,7 +167,7 @@ const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
|
|||
const uploadings = uploads;
|
||||
const connection = useStream().useChannel('drive');
|
||||
const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
|
||||
|
||||
let multipleselect = ref([]);
|
||||
// ドロップされようとしているか
|
||||
const draghover = ref(false);
|
||||
|
||||
|
|
@ -168,7 +195,18 @@ function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
|
|||
addFile(file, true);
|
||||
}
|
||||
}
|
||||
function selectClick(file) {
|
||||
const index = multipleselect.value.findIndex(item => item.id === file.id);
|
||||
|
||||
if (index !== -1) {
|
||||
// File is already selected, so remove it
|
||||
multipleselect.value.splice(index, 1);
|
||||
} else {
|
||||
// File is not selected, so add it
|
||||
multipleselect.value.push(file);
|
||||
}
|
||||
|
||||
}
|
||||
function onStreamDriveFileDeleted(fileId: string) {
|
||||
removeFile(fileId);
|
||||
}
|
||||
|
|
@ -405,6 +443,7 @@ function chooseFile(file: Misskey.entities.DriveFile) {
|
|||
emit('change-selection', [file]);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
|
||||
|
|
@ -427,6 +466,7 @@ function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
|
|||
}
|
||||
|
||||
function move(target?: Misskey.entities.DriveFolder) {
|
||||
multipleselect.value = []
|
||||
if (!target) {
|
||||
goRoot();
|
||||
return;
|
||||
|
|
@ -491,11 +531,17 @@ function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
|
|||
function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
|
||||
const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
|
||||
folders.value = folders.value.filter(f => f.id !== folderIdToRemove);
|
||||
const index = multipleselect.value.findIndex(item => item.id === file.id);
|
||||
if (index !== -1) {
|
||||
// File is already selected, so remove it
|
||||
multipleselect.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function removeFile(file: Misskey.entities.DriveFile | string) {
|
||||
const fileId = typeof file === 'object' ? file.id : file;
|
||||
files.value = files.value.filter(f => f.id !== fileId);
|
||||
multipleselect.value = multipleselect.value.filter(a => a.id !== fileId)
|
||||
}
|
||||
|
||||
function appendFile(file: Misskey.entities.DriveFile) {
|
||||
|
|
@ -645,10 +691,12 @@ function getMenu() {
|
|||
}
|
||||
|
||||
function showMenu(ev: MouseEvent) {
|
||||
multipleselect.value = []
|
||||
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
||||
}
|
||||
|
||||
function onContextmenu(ev: MouseEvent) {
|
||||
multipleselect.value = []
|
||||
os.contextMenu(getMenu(), ev);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue