413 lines
13 KiB
Svelte
413 lines
13 KiB
Svelte
<script>
|
|
import { createEventDispatcher } from 'svelte'
|
|
import FileIcon from './lib/FileIcon.svelte'
|
|
import { formatFileSize, formatFileType, getFileKind } from './lib/fileUtils.js'
|
|
import { t } from './lib/i18n'
|
|
|
|
export let item
|
|
export let selected = false
|
|
export let onDragStart
|
|
export let onDragOver
|
|
export let onDrop
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
const kind = getFileKind(item)
|
|
const isFolder = item.type === 'folder'
|
|
const fileType = formatFileType(item)
|
|
let menuOpen = false
|
|
let menuX = 0
|
|
let menuY = 0
|
|
let clickTimer = null
|
|
|
|
function handleClick(e) {
|
|
if (e.ctrlKey || e.metaKey) {
|
|
dispatch('toggleSelect', item.id)
|
|
} else if (e.shiftKey) {
|
|
dispatch('rangeSelect', item.id)
|
|
} else {
|
|
if (clickTimer) {
|
|
clearTimeout(clickTimer)
|
|
clickTimer = null
|
|
// Double click → open
|
|
if (isFolder) {
|
|
dispatch('navigate', item.id)
|
|
} else {
|
|
dispatch('preview', item)
|
|
}
|
|
} else {
|
|
clickTimer = setTimeout(() => {
|
|
clickTimer = null
|
|
// Single click → select
|
|
dispatch('selectOne', item.id)
|
|
}, 250)
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleOpenExternal() {
|
|
dispatch('openExternal', item.fileId)
|
|
}
|
|
|
|
function handleShowInFolder() {
|
|
menuOpen = false
|
|
dispatch('showInFolder', item.nodeId || item.id)
|
|
}
|
|
|
|
function handleDelete() {
|
|
menuOpen = false
|
|
dispatch('delete', { id: item.id, type: item.type })
|
|
}
|
|
|
|
function handleRename() {
|
|
menuOpen = false
|
|
dispatch('rename', { id: item.id, name: item.name })
|
|
}
|
|
|
|
function handleDuplicate() {
|
|
menuOpen = false
|
|
dispatch('duplicate', item.id)
|
|
}
|
|
|
|
function handleCut() {
|
|
menuOpen = false
|
|
dispatch('cut', item.id)
|
|
}
|
|
|
|
function handleCopy() {
|
|
menuOpen = false
|
|
dispatch('copy', item.id)
|
|
}
|
|
|
|
function handleOpen() {
|
|
menuOpen = false
|
|
if (isFolder) {
|
|
dispatch('navigate', item.id)
|
|
} else {
|
|
dispatch('preview', item)
|
|
}
|
|
}
|
|
|
|
function toggleMenu() {
|
|
menuOpen = !menuOpen
|
|
}
|
|
|
|
function closeMenu() {
|
|
menuOpen = false
|
|
}
|
|
|
|
function handleDragStart(e) {
|
|
if (onDragStart) onDragStart(e, item.id)
|
|
}
|
|
|
|
function handleDragOver(e) {
|
|
if (onDragOver && isFolder) onDragOver(e, item.id)
|
|
}
|
|
|
|
function handleDrop(e) {
|
|
if (onDrop && isFolder) onDrop(e, item.id)
|
|
}
|
|
|
|
function oncontextmenu(e) {
|
|
e.preventDefault()
|
|
menuX = Math.min(e.clientX, window.innerWidth - 240)
|
|
menuY = Math.min(e.clientY, window.innerHeight - 320)
|
|
menuOpen = true
|
|
}
|
|
|
|
function handleRowKeydown(e) {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault()
|
|
handleClick(e)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window on:click={closeMenu}/>
|
|
|
|
<div class="file-row"
|
|
class:file-row--selected={selected}
|
|
role="button"
|
|
tabindex="0"
|
|
draggable="true"
|
|
on:click={handleClick}
|
|
on:keydown={handleRowKeydown}
|
|
on:contextmenu={oncontextmenu}
|
|
on:dragstart={handleDragStart}
|
|
on:dragover={handleDragOver}
|
|
on:drop={handleDrop}
|
|
aria-label={isFolder ? t('file.ariaFolder') + ' ' + item.name : t('file.ariaFile') + ' ' + item.name}>
|
|
<div class="file-row-icon">
|
|
<FileIcon {kind} size={22}/>
|
|
</div>
|
|
<div class="file-row-body">
|
|
<div class="file-row-name" title={item.name}>{item.name}</div>
|
|
<div class="file-row-meta">
|
|
<span>{fileType}</span>
|
|
{#if !isFolder}
|
|
<span class="meta-sep">·</span>
|
|
<span>{formatFileSize(item.size)}</span>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
<div class="file-row-actions">
|
|
{#if !isFolder}
|
|
<button class="action-btn" on:click|stopPropagation={() => dispatch('preview', item)} title={t('file.preview')} aria-label={t('file.preview')}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
|
|
<circle cx="12" cy="12" r="3"/>
|
|
</svg>
|
|
</button>
|
|
<button class="action-btn" on:click|stopPropagation={handleOpenExternal} title={t('file.openExternal')} aria-label={t('file.openExternal')}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
|
|
<polyline points="15 3 21 3 21 9"/>
|
|
<line x1="10" y1="14" x2="21" y2="3"/>
|
|
</svg>
|
|
</button>
|
|
<button class="action-btn" on:click|stopPropagation={handleShowInFolder} title={t('file.showInExplorer')} aria-label={t('file.showInExplorer')}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
</svg>
|
|
</button>
|
|
{:else}
|
|
<button class="action-btn" on:click|stopPropagation={() => dispatch('navigate', item.id)} title={t('file.openFolder')} aria-label={t('file.openFolder')}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
<line x1="9" y1="14" x2="15" y2="14"/>
|
|
</svg>
|
|
</button>
|
|
<button class="action-btn" on:click|stopPropagation={handleShowInFolder} title={t('file.showInExplorer')} aria-label={t('file.showInExplorer')}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
|
</svg>
|
|
</button>
|
|
{/if}
|
|
<button class="action-btn" on:click|stopPropagation={toggleMenu} title={t('file.more')} aria-label={t('file.more')} aria-expanded={menuOpen}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<circle cx="12" cy="5" r="2"/>
|
|
<circle cx="12" cy="12" r="2"/>
|
|
<circle cx="12" cy="19" r="2"/>
|
|
</svg>
|
|
</button>
|
|
<button class="action-btn action-btn-danger" on:click|stopPropagation={handleDelete} title={t('common.delete')} aria-label={t('common.delete')}>
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="3 6 5 6 21 6"/>
|
|
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{#if menuOpen}
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div class="menu-backdrop" on:click|stopPropagation={closeMenu} role="presentation"></div>
|
|
<div class="menu" style="left: {menuX}px; top: {menuY}px; position: fixed;" on:click|stopPropagation on:keydown={(e) => { if (e.key === 'Escape') { e.stopPropagation(); closeMenu() } }} role="menu" tabindex="-1">
|
|
<button class="menu-item" on:click={handleOpen} role="menuitem">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
|
|
{t('common.open')}
|
|
</button>
|
|
<button class="menu-item" on:click={handleOpenExternal} role="menuitem">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
|
|
{t('file.openExternal')}
|
|
</button>
|
|
<button class="menu-item" on:click={handleShowInFolder} role="menuitem">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
|
|
{t('file.showInExplorer')}
|
|
</button>
|
|
<div class="menu-sep"></div>
|
|
<button class="menu-item" on:click={handleRename} role="menuitem">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
|
{t('common.rename')}
|
|
</button>
|
|
<button class="menu-item" on:click={handleDuplicate} role="menuitem">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
|
{t('common.duplicate')}
|
|
</button>
|
|
<button class="menu-item" on:click={handleCut} role="menuitem">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><line x1="20" y1="4" x2="8.12" y2="15.88"/><line x1="8.12" y1="8.12" x2="20" y2="20"/></svg>
|
|
{t('common.cut')}
|
|
</button>
|
|
<button class="menu-item" on:click={handleCopy} role="menuitem">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
|
{t('common.copy')}
|
|
</button>
|
|
<div class="menu-sep"></div>
|
|
<button class="menu-item menu-item-danger" on:click={handleDelete} role="menuitem">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
|
|
{t('common.delete')}
|
|
</button>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.file-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
border-radius: 6px;
|
|
cursor: default;
|
|
transition: background 0.12s;
|
|
min-height: 52px;
|
|
user-select: none;
|
|
position: relative;
|
|
}
|
|
|
|
.file-row:hover {
|
|
background: #1e1e30;
|
|
}
|
|
|
|
.file-row--selected {
|
|
background: #1e1e3a;
|
|
outline: 1px solid #3a3a6c;
|
|
}
|
|
|
|
.file-row--selected:hover {
|
|
background: #252545;
|
|
}
|
|
|
|
.file-row:focus-visible {
|
|
outline: 2px solid #5588ff;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.file-row-icon {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 32px;
|
|
height: 32px;
|
|
color: #888;
|
|
}
|
|
|
|
.file-row-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
|
|
.file-row-name {
|
|
font-size: 13px;
|
|
color: #ddd;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.file-row-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 11px;
|
|
color: #666;
|
|
}
|
|
|
|
.meta-sep {
|
|
color: #444;
|
|
}
|
|
|
|
.file-row-actions {
|
|
display: flex;
|
|
gap: 2px;
|
|
align-items: center;
|
|
opacity: 0;
|
|
transition: opacity 0.15s ease;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.file-row:hover .file-row-actions {
|
|
opacity: 1;
|
|
}
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
color: #666;
|
|
cursor: pointer;
|
|
transition: background 0.12s, color 0.12s;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: #2a2a3c;
|
|
color: #ccc;
|
|
}
|
|
|
|
.action-btn-danger:hover {
|
|
background: #3a2222;
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.action-btn:focus-visible {
|
|
outline: 2px solid #5588ff;
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.menu-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 99;
|
|
}
|
|
|
|
.menu {
|
|
position: fixed;
|
|
background: #1a1a28;
|
|
border: 1px solid #2a2a3c;
|
|
border-radius: 8px;
|
|
padding: 4px;
|
|
z-index: 100;
|
|
min-width: 220px;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding: 7px 10px;
|
|
border: none;
|
|
background: transparent;
|
|
color: #ccc;
|
|
font-size: 12px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.menu-item:hover {
|
|
background: #2a2a3c;
|
|
color: #fff;
|
|
}
|
|
|
|
.menu-item-danger {
|
|
color: #ff6b6b;
|
|
}
|
|
|
|
.menu-item-danger:hover {
|
|
background: #3a2222;
|
|
}
|
|
|
|
.menu-item:focus-visible {
|
|
outline: 2px solid #5588ff;
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.menu-sep {
|
|
height: 1px;
|
|
background: #2a2a3c;
|
|
margin: 4px 8px;
|
|
}
|
|
</style>
|