test
This commit is contained in:
mattyatea
parent
a0927c5353
commit
12d56d69bb
|
|
@ -4,17 +4,15 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[$style.root, { [$style.isSelected]: isSelected },{[$style.isSelected]: isMultiSelect}]"
|
||||
<div
|
||||
:class="[$style.root, { [$style.isSelected]: isSelected || isSelectedFile }]"
|
||||
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"/>
|
||||
|
|
@ -32,49 +30,30 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {computed, ref, watch} 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, 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秒）を設定
|
||||
}
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { $i } from '@/account.js';
|
||||
import { getDriveFileMenu, getDriveMultiFileMenu } from '@/scripts/get-drive-file-menu.js';
|
||||
import { isTouchUsing } from '@/scripts/touch.js';
|
||||
|
||||
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;
|
||||
multipleselect?;
|
||||
isLongPressing?;
|
||||
SelectFiles?: string[];
|
||||
}>(), {
|
||||
isSelected: false,
|
||||
selectMode: false,
|
||||
|
|
@ -87,46 +66,35 @@ const emit = defineEmits<{
|
|||
}>();
|
||||
|
||||
const isDragging = ref(false);
|
||||
|
||||
const isSelectedFile = 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) {
|
||||
|
||||
watch(props.SelectFiles, () => {
|
||||
const index = props.SelectFiles.findIndex(item => item.id === props.file.id);
|
||||
isSelectedFile.value = index !== -1;
|
||||
});
|
||||
|
||||
function onClick(ev: MouseEvent) {
|
||||
console.log('onclick');
|
||||
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) {
|
||||
} else if (!ev.shiftKey && !isTouchUsing && !isSelectedFile.value) {
|
||||
os.popupMenu(getDriveFileMenu(props.file, props.folder), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
||||
} else if (!ev.shiftKey && isSelectedFile.value && props.SelectFiles.length === 0) {
|
||||
os.popupMenu(getDriveMultiFileMenu(props.SelectFiles), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
||||
} else if (isTouchUsing && !isSelectedFile.value && props.SelectFiles.length === 0) {
|
||||
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) {
|
||||
|
||||
if (!ev.shiftKey && !isMultiSelect.value) {
|
||||
console.log('oncontext');
|
||||
if (!isTouchUsing) {
|
||||
if (!ev.shiftKey && !isSelectedFile.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);
|
||||
|
||||
} else if (isSelectedFile.value) {
|
||||
os.contextMenu(getDriveMultiFileMenu(props.SelectFiles), ev);
|
||||
}
|
||||
if (props.isLongPressing){
|
||||
isMultiSelect.value = !isMultiSelect.value
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -136,7 +104,7 @@ function onDragstart(ev: DragEvent) {
|
|||
ev.dataTransfer.setData(_DATA_TRANSFER_DRIVE_FILE_, JSON.stringify(props.file));
|
||||
}
|
||||
isDragging.value = true;
|
||||
|
||||
console.log(isDragging.value)
|
||||
emit('dragstart');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
-->
|
||||
|
||||
<template>
|
||||
<div :class="$style.root">
|
||||
<div :class="$style.root" @scroll="handleScroll">
|
||||
<nav :class="$style.nav">
|
||||
<div :class="$style.navPath" @contextmenu.prevent.stop="() => {}">
|
||||
<XNavFolder
|
||||
|
|
@ -14,7 +14,6 @@ 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>
|
||||
|
|
@ -26,7 +25,6 @@ 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>
|
||||
|
|
@ -53,7 +51,6 @@ 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,15 +73,15 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
:folder="folder"
|
||||
:selectMode="select === 'file'"
|
||||
:isSelected="selectedFiles.some(x => x.id === file.id)"
|
||||
:SelectFiles="SelectFiles"
|
||||
@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"
|
||||
@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>
|
||||
|
|
@ -116,7 +113,7 @@ 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';
|
||||
const props = withDefaults(defineProps<{
|
||||
initialFolder?: Misskey.entities.DriveFolder;
|
||||
type?: string;
|
||||
|
|
@ -127,24 +124,6 @@ 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;
|
||||
|
|
@ -167,7 +146,11 @@ 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 SelectFiles = ref([]);
|
||||
const isLongPressing = ref(false);
|
||||
let longPressTimeout = null;
|
||||
const isScrolling = ref(false); // スクロール中でない状態で初期化
|
||||
|
||||
// ドロップされようとしているか
|
||||
const draghover = ref(false);
|
||||
|
||||
|
|
@ -186,6 +169,47 @@ 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;
|
||||
|
|
@ -195,18 +219,7 @@ 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);
|
||||
}
|
||||
|
|
@ -214,7 +227,14 @@ 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) {
|
||||
|
|
@ -443,7 +463,6 @@ function chooseFile(file: Misskey.entities.DriveFile) {
|
|||
emit('change-selection', [file]);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
|
||||
|
|
@ -466,7 +485,6 @@ function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
|
|||
}
|
||||
|
||||
function move(target?: Misskey.entities.DriveFolder) {
|
||||
multipleselect.value = []
|
||||
if (!target) {
|
||||
goRoot();
|
||||
return;
|
||||
|
|
@ -531,17 +549,11 @@ 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) {
|
||||
|
|
@ -691,12 +703,10 @@ function getMenu() {
|
|||
}
|
||||
|
||||
function showMenu(ev: MouseEvent) {
|
||||
multipleselect.value = []
|
||||
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
|
||||
}
|
||||
|
||||
const contents = ref(null);
|
||||
function onContextmenu(ev: MouseEvent) {
|
||||
multipleselect.value = []
|
||||
os.contextMenu(getMenu(), ev);
|
||||
}
|
||||
|
||||
|
|
@ -733,6 +743,7 @@ onBeforeUnmount(() => {
|
|||
connection.dispose();
|
||||
ilFilesObserver.disconnect();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
|
|
|
|||
|
|
@ -39,10 +39,10 @@ function describe(file: Misskey.entities.DriveFile) {
|
|||
}, 'closed');
|
||||
}
|
||||
|
||||
function toggleSensitive(file: Misskey.entities.DriveFile , isSensitive?) {
|
||||
function toggleSensitive(file: Misskey.entities.DriveFile) {
|
||||
os.api('drive/files/update', {
|
||||
fileId: file.id,
|
||||
isSensitive: isSensitive !== null ? isSensitive : !file.isSensitive
|
||||
isSensitive: !file.isSensitive,
|
||||
}).catch(err => {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
|
|
@ -72,18 +72,32 @@ async function deleteFile(file: Misskey.entities.DriveFile) {
|
|||
fileId: file.id,
|
||||
});
|
||||
}
|
||||
async function deleteSelectFile(files) {
|
||||
async function MultideleteFile(files: Misskey.entities.DriveFile[] | null) {
|
||||
const { canceled } = await os.confirm({
|
||||
type: 'warning',
|
||||
text: files.length+'つのファイルをまとめて削除しますか？',
|
||||
text: i18n.t('driveMultiFileDeleteConfirm', { name: files.length }),
|
||||
});
|
||||
|
||||
if (canceled) return;
|
||||
files.forEach((e) => {
|
||||
files.forEach((e)=>{
|
||||
os.api('drive/files/delete', {
|
||||
fileId: e.id,
|
||||
});
|
||||
})
|
||||
}
|
||||
function isSensitive(files: Misskey.entities.DriveFile[] | null ,sensitive:boolean) {
|
||||
files.forEach((e)=>{
|
||||
os.api('drive/files/update', {
|
||||
fileId: e.id,
|
||||
isSensitive: sensitive,
|
||||
}).catch(err => {
|
||||
os.alert({
|
||||
type: 'error',
|
||||
title: i18n.ts.error,
|
||||
text: err.message,
|
||||
});
|
||||
});
|
||||
})
|
||||
|
||||
}
|
||||
export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {
|
||||
|
|
@ -144,35 +158,22 @@ export function getDriveFileMenu(file: Misskey.entities.DriveFile, folder?: Miss
|
|||
|
||||
return menu;
|
||||
}
|
||||
|
||||
export function getDriveFileMultiMenu(file, folder?: Misskey.entities.DriveFolder | null): MenuItem[] {
|
||||
|
||||
export function getDriveMultiFileMenu(files: string[] & boolean): MenuItem[] {
|
||||
let menu;
|
||||
menu = [{
|
||||
text: i18n.ts.unmarkAsSensitive,
|
||||
icon: 'ti ti-eye',
|
||||
action: () => {file.forEach((e) => toggleSensitive(e,false))}
|
||||
action: () => isSensitive(files,false),
|
||||
},{
|
||||
text: i18n.ts.markAsSensitive,
|
||||
icon: 'ti ti-eye-exclamation',
|
||||
action: () => {file.forEach((e) => toggleSensitive(e,true))}
|
||||
,
|
||||
},{
|
||||
action: () => isSensitive(files,true),
|
||||
}, {
|
||||
text: i18n.ts.delete,
|
||||
icon: 'ti ti-trash',
|
||||
danger: true,
|
||||
action: () => deleteSelectFile(file),
|
||||
action: () => MultideleteFile(files),
|
||||
}];
|
||||
|
||||
if (defaultStore.state.devMode) {
|
||||
menu = menu.concat([null, {
|
||||
icon: 'ti ti-id',
|
||||
text: i18n.ts.copyFileId,
|
||||
action: () => {
|
||||
copyToClipboard(file.id);
|
||||
},
|
||||
}]);
|
||||
}
|
||||
|
||||
return menu;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue