feat: explorador de arquivos, miniaturas, metadados e recursos periciais (0.3.0)
Release / Cria a release (push) Canceled after 0s
Release / CLI (linux-aarch64) (push) Canceled after 0s
Release / CLI (linux-x86_64) (push) Canceled after 0s
Release / CLI (macos-aarch64) (push) Canceled after 0s
Release / CLI (macos-x86_64) (push) Canceled after 0s
Release / CLI (windows-x86_64) (push) Canceled after 0s
Release / App desktop (linux-x86_64) (push) Canceled after 0s
Release / App desktop (macos-aarch64) (push) Canceled after 0s
Release / App desktop (macos-x86_64) (push) Canceled after 0s
Release / App desktop (windows-x86_64) (push) Canceled after 0s
Release / Publica a release (push) Canceled after 0s
Release / Cria a release (push) Canceled after 0s
Release / CLI (linux-aarch64) (push) Canceled after 0s
Release / CLI (linux-x86_64) (push) Canceled after 0s
Release / CLI (macos-aarch64) (push) Canceled after 0s
Release / CLI (macos-x86_64) (push) Canceled after 0s
Release / CLI (windows-x86_64) (push) Canceled after 0s
Release / App desktop (linux-x86_64) (push) Canceled after 0s
Release / App desktop (macos-aarch64) (push) Canceled after 0s
Release / App desktop (macos-x86_64) (push) Canceled after 0s
Release / App desktop (windows-x86_64) (push) Canceled after 0s
Release / Publica a release (push) Canceled after 0s
- Explorador com grade/lista virtualizada, navegação por tipo, data EXIF, pasta e câmera, seleção estilo gerenciador de arquivos e visualização rápida. - Miniaturas no núcleo, metadados (EXIF, PDF, Office, MP4), datas MACB do NTFS/FAT/exFAT. - Hashes MD5/SHA-1/SHA-256, busca de texto no disco, exportação CSV, relatório HTML, detecção de duplicadas, tema, correções de interface e textos sem travessões. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucas RayanandClaude Sonnet 5.5 committed
1 parent
1457caa453
commit
45d535bdb7
34 files changed
+4433
-365
No files matched your search
@@ -332,3 +332,125 @@ dialog.lightbox[open] { display: grid; }
|
||||
|
||||
.hero-logo { width: min(440px, 80%); height: auto; display: block; margin: 0 0 22px -4px; }
|
||||
.pill.accent { background: var(--accent-soft); color: var(--accent); }
|
||||
|
||||
/* ------------------------------------------------------------ explorador de arquivos */
|
||||
.main.fixed { overflow: hidden; }
|
||||
.page.wide { max-width: none; padding: 14px 18px 0; }
|
||||
.page.fill { height: 100%; display: flex; flex-direction: column; }
|
||||
.xp-top { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
|
||||
.xp-top h1 { font-size: 24px; }
|
||||
.xp-top .sub { font-size: 12.5px; }
|
||||
.xp-host { flex: 1; min-height: 0; padding-bottom: 12px; }
|
||||
.progress-card.slim { padding: 14px 18px; border-radius: 16px; gap: 10px; margin-bottom: 10px; }
|
||||
.stats.compact { gap: 22px; }
|
||||
.stats.compact .stat b { font-size: 20px; }
|
||||
.done-bar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 8px 14px; border-radius: 12px; background: var(--accent-soft); margin-bottom: 10px; font-size: 13.5px; }
|
||||
.done-bar .grow { flex: 1; }
|
||||
|
||||
.xp { position: relative; display: grid; grid-template-columns: 236px minmax(0, 1fr) 340px; grid-template-rows: auto minmax(0, 1fr); gap: 10px 14px; height: 100%; }
|
||||
.xp-bar { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; min-width: 0; }
|
||||
.xp-crumb { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; }
|
||||
.xp-crumb b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
|
||||
.xp-crumb small { color: var(--text-3); font-variant-numeric: tabular-nums; }
|
||||
.xp-q { flex: 0 1 300px !important; min-width: 120px; }
|
||||
.xp-bar .theme-switch button { display: inline-grid; place-items: center; padding: 5px 9px; }
|
||||
.xp-bar input[type="range"] { width: 110px; accent-color: var(--accent); }
|
||||
.xp-navbtn { display: none; }
|
||||
|
||||
.xp-nav { overflow-y: auto; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 8px 6px 14px; min-height: 0; }
|
||||
.xp-sec { padding: 4px 0 6px; }
|
||||
.xp-sec h4 { margin: 8px 10px 4px; font-size: 11.5px; letter-spacing: .02em; color: var(--text-3); font-weight: 600; }
|
||||
.xp-node { display: flex; align-items: center; gap: 4px; width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; padding: 6px 8px 6px calc(8px + var(--d, 0) * 14px); border-radius: 9px; font-size: 13.5px; color: var(--text); }
|
||||
.xp-node:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
|
||||
.xp-node.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
|
||||
.xp-node .l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.xp-node small { color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 400; }
|
||||
.xp-node .tw { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; flex: none; transition: transform .15s; }
|
||||
.xp-node .tw:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
|
||||
|
||||
.xp-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
|
||||
.xp-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 0 12px; }
|
||||
.xp-chips:not(:empty) { padding: 10px 12px 2px; }
|
||||
.xp-chips .chip { display: inline-flex; gap: 6px; align-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
|
||||
.xp-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; outline: none; }
|
||||
.xp-sizer { position: relative; width: 100%; }
|
||||
.xp-row { position: absolute; left: 0; right: 0; display: flex; gap: 10px; padding: 0 12px; box-sizing: border-box; }
|
||||
.xp-row.head { align-items: flex-end; }
|
||||
.xp-head { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 0 2px 6px; border-bottom: 1px solid var(--line); }
|
||||
.xp-head b::first-letter { text-transform: uppercase; }
|
||||
.xp-head b { font-size: 14px; } .xp-head small { color: var(--text-3); } .xp-hsel { margin-left: auto; border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: 12.5px; opacity: 0; }
|
||||
.xp-head:hover .xp-hsel, .xp-hsel:focus-visible { opacity: 1; }
|
||||
|
||||
.xp-tile { position: relative; flex: none; border-radius: 12px; cursor: pointer; user-select: none; -webkit-user-select: none; }
|
||||
.xp-thumb { position: relative; border-radius: 12px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
|
||||
.xp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--surface-2); }
|
||||
.xp-tile[aria-selected="true"] .xp-thumb { box-shadow: 0 0 0 3px var(--accent); }
|
||||
.xp-tile[data-cur="1"]:focus-visible .xp-thumb, .xp-tile[data-cur="1"] .xp-thumb { outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 2px; }
|
||||
.xp-ico { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; gap: 2px; color: #fff; }
|
||||
.xp-ico span { font-size: 34px; line-height: 1; } .xp-ico b { font-size: 12px; letter-spacing: .04em; opacity: .9; }
|
||||
.c-document { background: linear-gradient(145deg, #3b82f6, #1d4ed8); } .c-video { background: linear-gradient(145deg, #8b5cf6, #5b21b6); }
|
||||
.c-audio { background: linear-gradient(145deg, #ec4899, #9d174d); } .c-archive { background: linear-gradient(145deg, #f59e0b, #b45309); }
|
||||
.c-database { background: linear-gradient(145deg, #14b8a6, #0f766e); } .c-other { background: linear-gradient(145deg, #64748b, #334155); } .c-image { background: linear-gradient(145deg, #0ea5e9, #0369a1); }
|
||||
.c-bad { background: linear-gradient(145deg, #6b7280, #374151); }
|
||||
.xp-chk { position: absolute; top: 7px; left: 7px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 2px #fff; opacity: 0; transition: opacity .12s; backdrop-filter: blur(4px); }
|
||||
.xp-tile:hover .xp-chk, .xp-tile[aria-selected="true"] .xp-chk, .xp-lrow:hover .xp-chk, .xp-lrow[aria-selected="true"] .xp-chk { opacity: 1; }
|
||||
.xp-tile[aria-selected="true"] .xp-chk, .xp-lrow[aria-selected="true"] .xp-chk { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
|
||||
.xp-dot { position: absolute; right: 7px; bottom: 7px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
|
||||
.xp-dot.ok { background: var(--ok); } .xp-dot.warn { background: var(--warn); } .xp-dot.bad { background: var(--bad); }
|
||||
.xp-gps { position: absolute; left: 7px; bottom: 6px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
|
||||
.xp-cap { padding: 5px 2px 0; min-width: 0; }
|
||||
.xp-cap b { display: block; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.xp-cap small { display: block; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
.xp-lrow { position: relative; display: grid; grid-template-columns: 26px 40px minmax(0, 1fr) 132px 76px 58px; gap: 12px; align-items: center; width: 100%; height: 50px; padding: 0 10px; border-radius: 10px; cursor: pointer; user-select: none; }
|
||||
.xp-lrow:hover { background: var(--surface-2); }
|
||||
.xp-lrow[aria-selected="true"] { background: var(--accent-soft); }
|
||||
.xp-lrow .xp-chk { position: static; opacity: .0; }
|
||||
.xp-lth { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
|
||||
.xp-lth img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.xp-lth .xp-ico span { font-size: 18px; } .xp-lth .xp-ico b { display: none; }
|
||||
.xp-lico { font-size: 18px; width: 100%; height: 100%; display: grid; place-items: center; color: #fff; }
|
||||
.xp-lnm { min-width: 0; } .xp-lnm b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xp-lnm small { display: block; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.xp-lcol { color: var(--text-2); font-size: 13px; white-space: nowrap; } .xp-lcol.num { text-align: right; font-variant-numeric: tabular-nums; }
|
||||
|
||||
.xp-actions { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface); }
|
||||
.xp-actions .info { color: var(--text-2); font-size: 13.5px; margin-right: auto; }
|
||||
|
||||
.xp-insp { overflow-y: auto; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
|
||||
.xp-insp .viewer { max-height: 38vh; min-height: 150px; }
|
||||
.xp-ititle { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; } .xp-ititle b { overflow-wrap: anywhere; font-size: 15px; }
|
||||
.xp-meta h5 { margin: 6px 0 6px; font-size: 12px; color: var(--text-3); font-weight: 600; }
|
||||
.xp-multi { display: grid; gap: 12px; padding: 20px 4px; text-align: center; } .xp-multi b { font-size: 18px; }
|
||||
.xp-insp-x { display: none; align-self: flex-end; }
|
||||
.xp-veil { display: none; }
|
||||
.kv dd { overflow-wrap: anywhere; }
|
||||
|
||||
@media (max-width: 1280px) { .xp { grid-template-columns: 208px minmax(0, 1fr) 300px; } }
|
||||
@media (max-width: 1100px) {
|
||||
.xp { grid-template-columns: minmax(0, 1fr); }
|
||||
.xp-bar { flex-wrap: wrap; }
|
||||
.xp-navbtn { display: inline-grid; }
|
||||
.xp-nav { position: fixed; inset: 0 auto 0 0; width: min(86vw, 310px); z-index: 40; border-radius: 0 var(--radius) var(--radius) 0; transform: translateX(-104%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
|
||||
.xp.show-nav .xp-nav { transform: none; }
|
||||
.xp-insp { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; z-index: 40; border-radius: 20px 20px 0 0; transform: translateY(104%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
|
||||
.xp.show-insp .xp-insp { transform: none; }
|
||||
.xp-insp-x { display: inline-grid; }
|
||||
.xp-veil { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .32); opacity: 0; pointer-events: none; transition: opacity .2s; display: block; }
|
||||
.xp.show-nav .xp-veil, .xp.show-insp .xp-veil { opacity: 1; pointer-events: auto; }
|
||||
.xp-q { flex: 1 1 140px !important; }
|
||||
.xp-crumb { flex: 1 1 100%; order: -1; }
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.page.wide { padding: 10px 10px 0; }
|
||||
.xp-lrow { grid-template-columns: 26px 40px minmax(0, 1fr) 64px; } .xp-lrow .xp-lcol { display: none; }
|
||||
.xp-bar input[type="range"] { display: none !important; }
|
||||
}
|
||||
|
||||
.fld { display: grid; gap: 4px; margin: 10px 0; font-size: 13px; color: var(--text-2); }
|
||||
.fld textarea { resize: vertical; font: inherit; }
|
||||
.hits { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
|
||||
.hit { display: grid; grid-template-columns: 130px 80px 90px minmax(0, 1fr); gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 13px; align-items: start; }
|
||||
.hit.head { background: var(--surface-2); color: var(--text-3); font-size: 12px; }
|
||||
.hit .ctx { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; color: var(--text-2); }
|
||||
.hit mark { background: var(--accent-soft); color: var(--accent); padding: 0 2px; border-radius: 3px; font-weight: 600; }
|
||||
@media (max-width: 860px) { .hit { grid-template-columns: 100px 1fr; } .hit span:nth-child(2), .hit span:nth-child(3) { display: none; } }
|
||||
+133
-229
@@ -1,7 +1,7 @@
|
||||
// Guará — interface. Fala com o núcleo por `rpc(método, parâmetros)`:
|
||||
// Guará: interface. Fala com o núcleo por `rpc(método, parâmetros)`:
|
||||
// • app Tauri: invoke('rpc') • modo `guara ui`: POST /rpc/<método> com token.
|
||||
|
||||
import { renderPreview, kindOf, KIND_LABEL } from './preview.js';
|
||||
import { createExplorer } from './explorer.js';
|
||||
|
||||
const tauri = window.__TAURI__;
|
||||
const params = new URLSearchParams(location.search);
|
||||
@@ -25,6 +25,7 @@ async function rpc(method, p = {}) {
|
||||
|
||||
const isWin = /Windows/i.test(navigator.userAgent);
|
||||
const fileBase = tauri ? (isWin ? 'http://guara.localhost' : 'guara://localhost') : '';
|
||||
const thumbUrl = (job, id, s = 256) => `${fileBase}/thumb/${job}/${id}?s=${s}` + (tauri ? '' : `&t=${encodeURIComponent(token || '')}`);
|
||||
const fileUrl = (job, id) => `${fileBase}/file/${job}/${id}` + (tauri ? '' : `?t=${encodeURIComponent(token || '')}`);
|
||||
|
||||
// Atualiza o HTML só quando mudou (evita piscar e perder o foco/hover).
|
||||
@@ -63,7 +64,7 @@ const dur = (s) => {
|
||||
s = Math.round(s);
|
||||
return s < 60 ? `${s}s` : s < 3600 ? `${Math.floor(s / 60)}min ${s % 60}s` : `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}min`;
|
||||
};
|
||||
const date = (t) => (t ? new Date(t * 1000).toLocaleString('pt-BR', { dateStyle: 'medium', timeStyle: 'short' }) : '—');
|
||||
const date = (t) => (t ? new Date(t * 1000).toLocaleString('pt-BR', { dateStyle: 'medium', timeStyle: 'short' }) : 'sem data');
|
||||
const CATS = [
|
||||
['image', 'Fotos'], ['document', 'Documentos'], ['video', 'Vídeos'], ['audio', 'Áudio'],
|
||||
['archive', 'Compactados'], ['database', 'Bancos de dados'], ['other', 'Outros'],
|
||||
@@ -103,6 +104,23 @@ function ask({ title, text, value, placeholder, ok = 'OK', pick }) {
|
||||
});
|
||||
}
|
||||
|
||||
function askForm({ title, text, fields, ok = 'OK' }) {
|
||||
return new Promise((resolve) => {
|
||||
const d = $('#dlg');
|
||||
d.innerHTML = `<form method="dialog"><h2>${esc(title)}</h2><p>${text || ''}</p>
|
||||
${fields.map((f) => `<label class="fld"><span>${esc(f.label)}</span>${f.multiline ? `<textarea class="input" name="${f.name}" rows="3" placeholder="${esc(f.placeholder || '')}">${esc(f.value || '')}</textarea>` : `<input class="input" name="${f.name}" value="${esc(f.value || '')}" placeholder="${esc(f.placeholder || '')}" autocomplete="off">`}</label>`).join('')}
|
||||
<menu><button class="btn" value="cancel">Cancelar</button><button class="btn primary" value="ok">${esc(ok)}</button></menu></form>`;
|
||||
d.onclose = () => {
|
||||
if (d.returnValue !== 'ok') return resolve(null);
|
||||
const out = {};
|
||||
d.querySelectorAll('[name]').forEach((el) => (out[el.name] = el.value.trim()));
|
||||
resolve(out);
|
||||
};
|
||||
d.showModal();
|
||||
d.querySelector('[name]')?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function info({ title, html }) {
|
||||
const d = $('#dlg');
|
||||
d.innerHTML = `<form method="dialog"><h2>${esc(title)}</h2>${html}<menu><button class="btn primary" value="ok">Entendi</button></menu></form>`;
|
||||
@@ -153,7 +171,7 @@ function renderSide() {
|
||||
dl.innerHTML = S.devices.map((d, i) => `
|
||||
<li><button class="dev" data-i="${i}" aria-current="${S.device?.path === d.path}">
|
||||
<span class="ico">${icon(d.kind)}</span>
|
||||
<span><span class="t">${esc(d.name)}</span><span class="s">${esc(d.kind)} · ${d.size ? human(d.size) : '—'}${d.readable ? '' : ' · requer admin'}</span></span>
|
||||
<span><span class="t">${esc(d.name)}</span><span class="s">${esc(d.kind)} · ${d.size ? human(d.size) : '?'}${d.readable ? '' : ' · requer admin'}</span></span>
|
||||
</button></li>`).join('');
|
||||
dl.querySelectorAll('.dev').forEach((b) => (b.onclick = () => { openDevice(S.devices[+b.dataset.i]); setMenu(false); }));
|
||||
const sl = $('#sessionList');
|
||||
@@ -197,12 +215,13 @@ $('#loadSessionBtn').onclick = async () => {
|
||||
|
||||
// ------------------------------------------------------------------ início
|
||||
function renderHome() {
|
||||
main.classList.remove('fixed');
|
||||
stopPoll();
|
||||
S.device = null; S.job = null;
|
||||
renderSide();
|
||||
main.innerHTML = `<div class="page">
|
||||
<section class="hero"><img class="hero-logo" src="guara-logo.svg" alt="Guará"><h1>Encontre o que você achou que tinha perdido.</h1>
|
||||
<p>Escolha um disco, SSD ou pendrive ao lado. O Guará lê tudo — arquivos apagados, partições perdidas e espaço não particionado — sem escrever nada no disco de origem.</p></section>
|
||||
<p>Escolha um disco, SSD ou pendrive ao lado. O Guará lê tudo: arquivos apagados, partições perdidas e espaço não particionado, sem escrever nada no disco de origem.</p></section>
|
||||
<div class="cards">
|
||||
<div class="card"><h3>Uma varredura, tudo junto</h3><p>Metadados do sistema de arquivos e busca por assinatura na mesma passada, sem duplicatas.</p></div>
|
||||
<div class="card"><h3>Confiança por arquivo</h3><p>Cada achado mostra a chance de abrir corretamente: alta, média ou baixa.</p></div>
|
||||
@@ -214,6 +233,7 @@ function renderHome() {
|
||||
|
||||
// ------------------------------------------------------------------ dispositivo
|
||||
async function openDevice(d) {
|
||||
main.classList.remove('fixed');
|
||||
stopPoll();
|
||||
S.device = d; S.job = null; S.layout = null;
|
||||
renderSide();
|
||||
@@ -252,7 +272,7 @@ function renderDevice(err) {
|
||||
const notes = [];
|
||||
if (!d.readable) notes.push(['bad', 'Este disco exige permissão de administrador. ' + (tauri ? '<button class="btn sm" id="elevate" style="margin-left:6px">Reiniciar como administrador</button>' : 'Feche e rode de novo com <code>sudo guara ui</code> (Linux/macOS) ou como administrador (Windows).')]);
|
||||
if (err) notes.push(['bad', esc(err)]);
|
||||
if (d.mounted_at?.length) notes.push(['warn', `Este disco está em uso (montado em <code>${esc(d.mounted_at.join(', '))}</code>). O Guará só lê, mas evite gravar nele enquanto recupera — qualquer escrita pode sobrescrever o que você quer salvar.`]);
|
||||
if (d.mounted_at?.length) notes.push(['warn', `Este disco está em uso (montado em <code>${esc(d.mounted_at.join(', '))}</code>). O Guará só lê, mas evite gravar nele enquanto recupera, porque qualquer escrita pode sobrescrever o que você quer salvar.`]);
|
||||
if (d.trim) notes.push(['warn', 'Este SSD usa TRIM: o sistema avisa o disco quais blocos foram apagados e o próprio SSD pode zerá-los. Arquivos apagados há bastante tempo tendem a não ser recuperáveis.']);
|
||||
(l?.warnings || []).forEach((w) => notes.push(['warn', esc(w)]));
|
||||
|
||||
@@ -272,6 +292,14 @@ function renderDevice(err) {
|
||||
<div class="mode"><h3>Criar imagem do disco</h3><p>Copia o disco inteiro para um arquivo, tolerando setores ruins. Ideal para discos com defeito: você trabalha na cópia.</p>
|
||||
<button class="btn lg" id="goImage" ${d.readable ? '' : 'disabled'}>Criar imagem…</button></div>
|
||||
</div>
|
||||
<h2 style="margin-top:26px">Ferramentas de perícia</h2>
|
||||
<div class="modes">
|
||||
<div class="mode"><h3>Pesquisar texto no disco</h3><p>Procura palavras em todo o disco, inclusive em espaço livre e fora de partições (UTF-8 e UTF-16). Útil quando não há estrutura de arquivo.</p>
|
||||
<input class="input" id="srchTerms" placeholder="termos separados por vírgula" aria-label="Termos a pesquisar" style="margin-bottom:8px">
|
||||
<button class="btn lg" id="goSearch" ${d.readable ? '' : 'disabled'}>Pesquisar</button></div>
|
||||
<div class="mode"><h3>Hashes da origem</h3><p>Calcula MD5, SHA-1 e SHA-256 do disco inteiro para registrar a integridade e a cadeia de custódia no relatório.</p>
|
||||
<button class="btn lg" id="goHash" ${d.readable ? '' : 'disabled'}>Calcular hashes</button></div>
|
||||
</div>
|
||||
<details class="adv"><summary>Opções avançadas</summary>
|
||||
<label class="check"><input type="checkbox" id="optAlloc"><span><b>Incluir áreas ainda em uso</b><br><span class="sub">Também procura cópias antigas dentro de arquivos existentes. Bem mais lento.</span></span></label>
|
||||
<div class="row" id="optCats">${CATS.map(([k, n]) => `<label class="check"><input type="checkbox" value="${k}"> ${n}</label>`).join('')}</div>
|
||||
@@ -287,6 +315,9 @@ function renderDevice(err) {
|
||||
$('#goDeep')?.addEventListener('click', () => startScan(opts('deep')));
|
||||
$('#goQuick')?.addEventListener('click', () => startScan(opts('quick')));
|
||||
$('#goImage')?.addEventListener('click', startImage);
|
||||
$('#goSearch')?.addEventListener('click', startSearch);
|
||||
$('#srchTerms')?.addEventListener('keydown', (e) => { if (e.key === 'Enter') startSearch(); });
|
||||
$('#goHash')?.addEventListener('click', startHash);
|
||||
}
|
||||
|
||||
async function startScan(options) {
|
||||
@@ -312,80 +343,96 @@ async function startImage() {
|
||||
} catch (e) { toast(e.message); }
|
||||
}
|
||||
|
||||
async function startHash() {
|
||||
try {
|
||||
const { job } = await rpc('hash_start', { path: S.device.path });
|
||||
watchAux(job, 'Calculando hashes da origem', (st) => {
|
||||
const r = st.report || {};
|
||||
S.sourceHashes = { ...r, path: S.device.path };
|
||||
return `<p>Hashes do conteúdo inteiro de <code>${esc(S.device.path)}</code>:</p><dl class="kv"><dt>MD5</dt><dd class="mono">${esc(r.md5)}</dd><dt>SHA-1</dt><dd class="mono">${esc(r.sha1)}</dd><dt>SHA-256</dt><dd class="mono">${esc(r.sha256)}</dd></dl><p class="sub">Eles serão incluídos nos relatórios gerados nesta sessão.</p>`;
|
||||
});
|
||||
} catch (e) { toast(e.message); }
|
||||
}
|
||||
|
||||
async function startSearch() {
|
||||
const terms = ($('#srchTerms')?.value || '').split(',').map((t) => t.trim()).filter(Boolean);
|
||||
if (!terms.length) { toast('Digite pelo menos um termo.'); $('#srchTerms')?.focus(); return; }
|
||||
try {
|
||||
const { job } = await rpc('search_start', { path: S.device.path, terms, ignore_case: true, utf16: true });
|
||||
openSearch(job, terms);
|
||||
} catch (e) { toast(e.message); }
|
||||
}
|
||||
|
||||
function openSearch(job, terms) {
|
||||
stopPoll();
|
||||
EX?.destroy(); EX = null;
|
||||
S.job = null;
|
||||
main.classList.remove('fixed');
|
||||
main.innerHTML = `<div class="page"><button class="back" id="backBtn">‹ ${esc(S.device?.name || 'Dispositivos')}</button>
|
||||
<h1 id="shTitle">Procurando…</h1><div class="sub">Termos: ${terms.map((t) => `<code>${esc(t)}</code>`).join(', ')}</div>
|
||||
<div id="shProg" style="margin:14px 0"></div><div class="hits" id="hits"></div></div>`;
|
||||
$('#backBtn').onclick = () => (S.device ? openDevice(S.device) : renderHome());
|
||||
const termRe = new RegExp(terms.map((t) => esc(t).replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|'), 'gi');
|
||||
const tick2 = async () => {
|
||||
let st, res;
|
||||
try { st = await rpc('status', { job }); res = await rpc('search_results', { job, offset: 0, limit: 1000 }); } catch { return false; }
|
||||
const run = st.status === 'running';
|
||||
const p = st.progress || {};
|
||||
const pct = p.total ? Math.floor((p.done / p.total) * 100) : 0;
|
||||
$('#shTitle').textContent = run ? 'Procurando…' : `${res.total.toLocaleString('pt-BR')} ocorrência${res.total === 1 ? '' : 's'}`;
|
||||
setHTML($('#shProg'), run ? `<div class="bar"><i style="width:${pct}%"></i></div><div class="sub" style="margin-top:6px">${pct}% · ${res.total.toLocaleString('pt-BR')} até agora</div><button class="btn sm danger" data-stop="1" style="margin-top:8px">Parar</button>` : st.status === 'error' ? `<div class="notice bad">${warnSvg}<div>${esc(st.error)}</div></div>` : '');
|
||||
setHTML($('#hits'), res.items.length ? `<div class="hit head"><span>Posição</span><span>Partição</span><span>Codificação</span><span>Contexto</span></div>` + res.items.map((h) => `<div class="hit"><span class="mono" title="${h.offset} bytes (0x${h.offset.toString(16)})">${h.offset.toLocaleString('pt-BR')}</span><span>${h.partition ? '#' + h.partition : 'fora'}</span><span>${esc(h.encoding)}</span><span class="ctx">${esc(h.context).replace(termRe, (m) => `<mark>${m}</mark>`)}</span></div>`).join('') : (run ? '' : '<div class="empty"><h3>Nada encontrado</h3><p>Esses termos não aparecem em nenhum ponto do disco (nem em UTF-8 nem em UTF-16).</p></div>'));
|
||||
return run;
|
||||
};
|
||||
$('#shProg').onclick = (e) => { if (e.target.dataset.stop) rpc('job_stop', { job }); };
|
||||
(async () => { while (await tick2()) await new Promise((r) => setTimeout(r, 700)); })();
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------ varredura
|
||||
let EX = null; // explorador de arquivos (grade, navegação, detalhes)
|
||||
|
||||
function openJob(s) {
|
||||
stopPoll();
|
||||
EX?.destroy();
|
||||
EX = null;
|
||||
S.job = s.job;
|
||||
S.filters = { category: null, minConfidence: null, query: '', sort: 'confidence' };
|
||||
S.items = []; S.total = 0; S.selected = new Set(); S.allFiltered = false; S.current = null; S.status = null;
|
||||
S.status = null;
|
||||
renderSide();
|
||||
renderScan();
|
||||
tick();
|
||||
S.poll = setInterval(tick, 500);
|
||||
main.scrollTop = 0;
|
||||
}
|
||||
|
||||
function stopPoll() { clearInterval(S.poll); S.poll = null; }
|
||||
|
||||
let lastFound = -1, lastFilterKey = '';
|
||||
async function tick() {
|
||||
if (!S.job) return;
|
||||
let st;
|
||||
try { st = await rpc('status', { job: S.job }); } catch (e) { stopPoll(); toast(e.message); return; }
|
||||
S.status = st;
|
||||
const key = JSON.stringify(S.filters);
|
||||
if (st.found !== lastFound || key !== lastFilterKey) {
|
||||
lastFound = st.found; lastFilterKey = key;
|
||||
await loadResults(true);
|
||||
}
|
||||
paintStatus();
|
||||
if (st.status !== 'running') {
|
||||
EX?.onStatus(st);
|
||||
// continua consultando enquanto a varredura roda ou as datas/EXIF ainda estão sendo lidas
|
||||
if (st.status !== 'running' && !st.enriching) {
|
||||
stopPoll();
|
||||
if (st.status === 'error') toast(st.error);
|
||||
await loadResults(true);
|
||||
paintStatus();
|
||||
} else if (!S.poll) {
|
||||
S.poll = setInterval(tick, 700);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadResults(reset) {
|
||||
const f = S.filters;
|
||||
const query = { sort: f.sort, offset: reset ? 0 : S.items.length, limit: 200 };
|
||||
if (f.category) query.category = f.category;
|
||||
if (f.minConfidence) query.min_confidence = f.minConfidence;
|
||||
if (f.query) query.query = f.query;
|
||||
const r = await rpc('results', { job: S.job, query });
|
||||
S.items = reset ? r.items : S.items.concat(r.items);
|
||||
S.total = r.total;
|
||||
paintList();
|
||||
}
|
||||
|
||||
function renderScan() {
|
||||
main.innerHTML = `<div class="page">
|
||||
<button class="back" id="backBtn">‹ Dispositivos</button>
|
||||
<div class="dev-head"><div><h1 id="scanTitle">Procurando…</h1><div class="sub" id="scanSub"></div></div></div>
|
||||
main.classList.add('fixed');
|
||||
main.innerHTML = `<div class="page wide fill">
|
||||
<div class="xp-top"><button class="back" id="backBtn">‹ Dispositivos</button><div><h1 id="scanTitle">Procurando…</h1><div class="sub" id="scanSub"></div></div></div>
|
||||
<div id="progressArea"></div>
|
||||
<div id="warnArea"></div>
|
||||
<div class="toolbar">
|
||||
<div class="chips" id="chips" role="group" aria-label="Filtrar por tipo"></div>
|
||||
</div>
|
||||
<div class="toolbar" style="margin-top:0">
|
||||
<input class="input" id="q" type="search" placeholder="Buscar por nome ou pasta" value="${esc(S.filters.query)}" aria-label="Buscar">
|
||||
<select class="select" id="conf" aria-label="Confiança mínima"><option value="">Qualquer confiança</option><option value="medium">Média ou alta</option><option value="high">Só alta</option></select>
|
||||
<select class="select" id="sort" aria-label="Ordenar"><option value="confidence">Mais confiáveis</option><option value="size">Maiores</option><option value="name">Nome</option></select>
|
||||
</div>
|
||||
<div class="split"><div class="table" id="table"></div><aside class="preview" id="preview" aria-live="polite"></aside></div>
|
||||
</div><div id="barHost"></div>`;
|
||||
<div class="xp-host" id="xpHost"></div>
|
||||
</div>`;
|
||||
$('#backBtn').onclick = () => (S.device ? openDevice(S.device) : renderHome());
|
||||
$('#progressArea').onclick = onProgressClick;
|
||||
$('#chips').onclick = (e) => { const c = e.target.closest('.chip'); if (c) { S.filters.category = c.dataset.c || null; resetSel(); tick(); } };
|
||||
let t;
|
||||
$('#q').oninput = (e) => { clearTimeout(t); t = setTimeout(() => { S.filters.query = e.target.value; resetSel(); tick(); }, 250); };
|
||||
$('#conf').onchange = (e) => { S.filters.minConfidence = e.target.value || null; resetSel(); tick(); };
|
||||
$('#sort').onchange = (e) => { S.filters.sort = e.target.value; tick(); };
|
||||
wireTable();
|
||||
paintPreview();
|
||||
EX = createExplorer({ host: $('#xpHost'), job: S.job, rpc, esc, human, fileUrl, thumbUrl, onRecover: recover, toast });
|
||||
}
|
||||
const resetSel = () => { S.selected = new Set(); S.allFiltered = false; };
|
||||
|
||||
function paintStatus() {
|
||||
const st = S.status;
|
||||
@@ -397,26 +444,27 @@ function paintStatus() {
|
||||
$('#scanSub').innerHTML = `<span class="mono">${esc(st.target)}</span>`;
|
||||
const rate = p.total && st.elapsed > 1 && p.done ? p.done / st.elapsed : 0;
|
||||
const eta = rate && running ? dur((p.total - p.done) / rate) : null;
|
||||
setHTML($('#progressArea'), `<div class="progress-card">
|
||||
<div class="row spread"><div><b>${esc(p.phase || (running ? 'Iniciando' : ''))}</b>${pct != null ? ` <span class="sub">· ${pct}%</span>` : ''}</div>
|
||||
<div class="row">${running ? '<button class="btn sm" data-act="pause">Pausar</button><button class="btn sm danger" data-act="stop">Parar</button>' : st.status === 'paused' ? '<button class="btn sm primary" data-act="resume">Continuar</button>' : ''}
|
||||
${!running && st.found ? '<button class="btn sm" data-act="save">Salvar sessão…</button>' : ''}</div></div>
|
||||
<div class="bar ${running && pct == null ? 'indet' : ''}"><i style="width:${pct ?? (running ? 35 : 100)}%"></i></div>
|
||||
<div class="stats">
|
||||
<div class="stat"><b>${st.found.toLocaleString('pt-BR')}</b><span>arquivos encontrados</span></div>
|
||||
<div class="stat"><b>${dur(st.elapsed)}</b><span>decorrido${eta ? ' · faltam ~' + eta : ''}</span></div>
|
||||
<div class="stat"><b style="color:var(--ok)">${st.confidence.high}</b><span>confiança alta</span></div>
|
||||
<div class="stat"><b style="color:var(--warn)">${st.confidence.medium}</b><span>média</span></div>
|
||||
<div class="stat"><b style="color:var(--bad)">${st.confidence.low}</b><span>baixa</span></div>
|
||||
</div></div>`);
|
||||
const enr = st.enriching ? `<span class="sub">Lendo datas e metadados das fotos… ${st.enriching.done.toLocaleString('pt-BR')}/${st.enriching.total.toLocaleString('pt-BR')}</span>` : '';
|
||||
const buttons = running ? '<button class="btn sm" data-act="pause">Pausar</button><button class="btn sm danger" data-act="stop">Parar</button>'
|
||||
: st.status === 'paused' ? '<button class="btn sm primary" data-act="resume">Continuar</button>' : '';
|
||||
const tools = !running && st.found ? '<button class="btn sm" data-act="csv">Exportar CSV</button><button class="btn sm" data-act="report">Relatório</button><button class="btn sm" data-act="save">Salvar sessão…</button>' : '';
|
||||
if (running || st.status === 'paused') {
|
||||
setHTML($('#progressArea'), `<div class="progress-card slim">
|
||||
<div class="row spread"><div><b>${esc(p.phase || 'Iniciando')}</b>${pct != null ? ` <span class="sub">· ${pct}%</span>` : ''}</div><div class="row">${buttons}</div></div>
|
||||
<div class="bar ${running && pct == null ? 'indet' : ''}"><i style="width:${pct ?? (running ? 35 : 100)}%"></i></div>
|
||||
<div class="stats compact">
|
||||
<div class="stat"><b>${st.found.toLocaleString('pt-BR')}</b><span>arquivos</span></div>
|
||||
<div class="stat"><b>${dur(st.elapsed)}</b><span>decorrido${eta ? ' · faltam ~' + eta : ''}</span></div>
|
||||
<div class="stat"><b style="color:var(--ok)">${st.confidence.high}</b><span>alta</span></div>
|
||||
<div class="stat"><b style="color:var(--warn)">${st.confidence.medium}</b><span>média</span></div>
|
||||
<div class="stat"><b style="color:var(--bad)">${st.confidence.low}</b><span>baixa</span></div>
|
||||
</div></div>`);
|
||||
} else {
|
||||
setHTML($('#progressArea'), `<div class="done-bar"><span><b>${st.found.toLocaleString('pt-BR')}</b> arquivos em ${dur(st.elapsed)}</span>
|
||||
<span class="sub">confiança alta ${st.confidence.high} · média ${st.confidence.medium} · baixa ${st.confidence.low}</span>${enr}<span class="grow"></span>${tools}</div>`);
|
||||
}
|
||||
setHTML($('#warnArea'), (st.warnings || []).map((w) => `<div class="notice">${warnSvg}<div>${esc(w)}</div></div>`).join('')
|
||||
+ (st.error ? `<div class="notice bad">${warnSvg}<div>${esc(st.error)}</div></div>` : ''));
|
||||
// chips
|
||||
const total = st.found;
|
||||
setHTML($('#chips'), [`<button class="chip" data-c="" aria-pressed="${!S.filters.category}">Tudo<small>${total}</small></button>`]
|
||||
.concat(CATS.filter(([k]) => st.categories[k]).map(([k, n]) => `<button class="chip" data-c="${k}" aria-pressed="${S.filters.category === k}">${n}<small>${st.categories[k]}</small></button>`)).join(''));
|
||||
const sel = $('#conf'); if (sel && sel.value !== (S.filters.minConfidence || '')) sel.value = S.filters.minConfidence || '';
|
||||
paintBar();
|
||||
}
|
||||
|
||||
async function onProgressClick(e) {
|
||||
@@ -425,171 +473,27 @@ async function onProgressClick(e) {
|
||||
if (act === 'pause') { await rpc('scan_pause', { job: S.job }); toast('Pausando…'); }
|
||||
else if (act === 'stop') await rpc('scan_stop', { job: S.job });
|
||||
else if (act === 'resume') { await rpc('scan_resume', { job: S.job }); stopPoll(); S.poll = setInterval(tick, 500); tick(); }
|
||||
else if (act === 'save') {
|
||||
else if (act === 'csv') {
|
||||
const path = await ask({ title: 'Exportar para CSV', text: 'Grava os arquivos da vista atual (com os filtros aplicados). O arquivo abre direto no Excel.', value: (S.defaults.home || '') + (S.defaults.sep || '/') + 'guara-achados.csv', ok: 'Exportar' });
|
||||
if (path) { try { const r = await rpc('export_csv', { job: S.job, path, query: EX?.query() }); toast(`${r.rows.toLocaleString('pt-BR')} linhas gravadas`); } catch (err) { toast(err.message); } }
|
||||
} else if (act === 'report') {
|
||||
const f = await askForm({ title: 'Relatório de recuperação', text: 'Gera um relatório HTML pronto para imprimir, com a origem examinada, os achados e os hashes dos arquivos recuperados.', ok: 'Gerar relatório', fields: [
|
||||
{ name: 'path', label: 'Salvar em', value: (S.defaults.home || '') + (S.defaults.sep || '/') + 'guara-relatorio.html' },
|
||||
{ name: 'case_id', label: 'Número do caso' }, { name: 'examiner', label: 'Responsável pelo exame' }, { name: 'organization', label: 'Organização' },
|
||||
{ name: 'notes', label: 'Observações', multiline: true } ] });
|
||||
if (f) {
|
||||
try {
|
||||
const hashes = S.sourceHashes && S.sourceHashes.path === (S.status?.target) ? { md5: S.sourceHashes.md5, sha1: S.sourceHashes.sha1, sha256: S.sourceHashes.sha256 } : null;
|
||||
await rpc('export_report', { job: S.job, path: f.path, case: { case_id: f.case_id, examiner: f.examiner, organization: f.organization, notes: f.notes }, hashes });
|
||||
toast('Relatório gravado');
|
||||
} catch (err) { toast(err.message); }
|
||||
}
|
||||
} else if (act === 'save') {
|
||||
const path = await ask({ title: 'Salvar sessão', text: 'Guarda os resultados para recuperar depois, sem varrer de novo.', value: (S.defaults.home || '') + (S.defaults.sep || '/') + 'guara-sessao.json', ok: 'Salvar' });
|
||||
if (path) { try { await rpc('session_save', { job: S.job, path }); toast('Sessão salva'); } catch (err) { toast(err.message); } }
|
||||
}
|
||||
}
|
||||
|
||||
function rowHtml(i) {
|
||||
const [cl, cc] = CONF[i.confidence];
|
||||
const on = S.allFiltered || S.selected.has(i.id);
|
||||
return `<div class="tr" role="row" data-id="${i.id}" aria-selected="${on || S.current?.id === i.id}" tabindex="0">
|
||||
<input type="checkbox" ${on ? 'checked' : ''} aria-label="Selecionar ${esc(i.name)}">
|
||||
<div class="nm"><b>${esc(i.name)}</b><small>${esc(i.dir || (i.origin === 'carved' ? 'Encontrado por assinatura' : '—'))}</small></div>
|
||||
<div class="num">${human(i.size)}</div><div class="num" style="text-align:left">${i.origin === 'carved' ? 'assinatura' : esc(i.origin)}</div>
|
||||
<div class="num"><span class="pill ${cc}">${cl}</span></div></div>`;
|
||||
}
|
||||
|
||||
function paintList() {
|
||||
const el = $('#table');
|
||||
if (!el) return;
|
||||
const st = S.status;
|
||||
if (!S.items.length) {
|
||||
setHTML(el, `<div class="empty"><h3>${st && st.status === 'running' ? 'Procurando…' : 'Nada por aqui'}</h3><p>${st && st.status === 'running' ? 'Os arquivos aparecem aqui assim que são encontrados.' : (S.filters.category || S.filters.query || S.filters.minConfidence) ? 'Nenhum arquivo combina com os filtros.' : 'Não encontramos arquivos recuperáveis neste disco.'}</p></div>`);
|
||||
paintBar();
|
||||
return;
|
||||
}
|
||||
const allSel = S.items.every((i) => S.selected.has(i.id)) || S.allFiltered;
|
||||
setHTML(el, `<div class="thead"><input type="checkbox" id="selAll" aria-label="Selecionar todos" ${allSel ? 'checked' : ''}><span>Nome</span><span style="text-align:right">Tamanho</span><span>Origem</span><span style="text-align:right">Confiança</span></div>`
|
||||
+ S.items.map(rowHtml).join('')
|
||||
+ (S.items.length < S.total ? `<div class="more"><button class="btn" id="moreBtn">Mostrar mais (${(S.total - S.items.length).toLocaleString('pt-BR')})</button></div>` : ''));
|
||||
paintBar();
|
||||
}
|
||||
|
||||
// Eventos da tabela por delegação (o HTML é recriado, o listener não).
|
||||
function wireTable() {
|
||||
const el = $('#table');
|
||||
el.addEventListener('click', (e) => {
|
||||
if (e.target.id === 'moreBtn') return loadResults(false);
|
||||
const row = e.target.closest('.tr');
|
||||
if (e.target.id === 'selAll') {
|
||||
if (e.target.checked) S.items.forEach((i) => S.selected.add(i.id)); else resetSel();
|
||||
el._h = null; paintList();
|
||||
return;
|
||||
}
|
||||
if (!row) return;
|
||||
const id = +row.dataset.id;
|
||||
if (e.target.matches('input[type=checkbox]')) {
|
||||
if (S.allFiltered) { S.allFiltered = false; S.items.forEach((i) => S.selected.add(i.id)); }
|
||||
e.target.checked ? S.selected.add(id) : S.selected.delete(id);
|
||||
row.setAttribute('aria-selected', e.target.checked);
|
||||
el._h = null;
|
||||
paintBar();
|
||||
return;
|
||||
}
|
||||
focusItem(S.items.find((i) => i.id === id));
|
||||
});
|
||||
el.addEventListener('dblclick', (e) => { if (e.target.closest('.tr')) openLightbox(); });
|
||||
}
|
||||
|
||||
let stopPv = null;
|
||||
function focusItem(item, { scroll = false } = {}) {
|
||||
if (!item) return;
|
||||
S.current = item;
|
||||
document.querySelectorAll('.tr').forEach((r) => {
|
||||
const on = +r.dataset.id === item.id || S.selected.has(+r.dataset.id) || S.allFiltered;
|
||||
r.setAttribute('aria-selected', on);
|
||||
if (scroll && +r.dataset.id === item.id) r.scrollIntoView({ block: 'nearest' });
|
||||
});
|
||||
paintPreview();
|
||||
}
|
||||
|
||||
function detailsHtml(i) {
|
||||
const [cl, cc] = CONF[i.confidence];
|
||||
return `<dl class="kv"><dt>Nome</dt><dd>${esc(i.name)}</dd><dt>Pasta</dt><dd>${esc(i.dir || '—')}</dd><dt>Tamanho</dt><dd>${human(i.size)}</dd>
|
||||
<dt>Modificado</dt><dd>${date(i.modified)}</dd><dt>Origem</dt><dd>${i.origin === 'carved' ? 'Assinatura de formato' : esc(i.origin.toUpperCase())}</dd>
|
||||
<dt>Confiança</dt><dd><span class="pill ${cc}">${cl}</span></dd>${i.note ? `<dt>Aviso</dt><dd>${esc(i.note)}</dd>` : ''}</dl>`;
|
||||
}
|
||||
|
||||
function paintPreview() {
|
||||
const el = $('#preview');
|
||||
if (!el) return;
|
||||
stopPv?.(); stopPv = null;
|
||||
const i = S.current;
|
||||
if (!i) { el.innerHTML = '<div class="viewer"><div class="pv-note">Selecione um arquivo para pré-visualizar</div></div>'; return; }
|
||||
el.innerHTML = `<div class="viewer" id="pvHost"></div><div class="sub" style="font-size:12.5px">${esc(KIND_LABEL[kindOf(i)])}</div>${detailsHtml(i)}
|
||||
<div class="row"><button class="btn sm" id="pvFull">Tela cheia</button><button class="btn primary sm" id="recOne">Recuperar este arquivo</button></div>`;
|
||||
stopPv = renderPreview($('#pvHost'), i, { url: fileUrl(S.job, i.id) });
|
||||
$('#pvFull').onclick = openLightbox;
|
||||
$('#recOne').onclick = () => recover({ ids: [i.id] });
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------ tela cheia
|
||||
let stopLb = null;
|
||||
function openLightbox() {
|
||||
const i = S.current;
|
||||
if (!i) return;
|
||||
const d = $('#lightbox');
|
||||
const idx = S.items.findIndex((x) => x.id === i.id);
|
||||
d.innerHTML = `<div class="lb-head"><button class="icon-btn" id="lbPrev" aria-label="Anterior" ${idx <= 0 ? 'disabled' : ''}>‹</button><button class="icon-btn" id="lbNext" aria-label="Próximo" ${idx >= S.items.length - 1 ? 'disabled' : ''}>›</button>
|
||||
<div class="ttl"><b>${esc(i.name)}</b><small>${esc(KIND_LABEL[kindOf(i)])} · ${human(i.size)} · confiança ${CONF[i.confidence][0]}</small></div>
|
||||
<button class="icon-btn" id="lbClose" aria-label="Fechar"><svg viewBox="0 0 24 24" width="20" height="20"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button></div>
|
||||
<div class="lb-body"><div class="viewer large" id="lbHost"></div></div>
|
||||
<div class="lb-foot"><span class="sub">${i.note ? esc(i.note) : '← → para navegar · Esc para fechar'}</span><button class="btn primary sm" id="lbRec">Recuperar este arquivo</button></div>`;
|
||||
stopLb?.();
|
||||
stopLb = renderPreview($('#lbHost', d), i, { url: fileUrl(S.job, i.id), large: true });
|
||||
const go = (n) => { const t = S.items[idx + n]; if (t) { focusItem(t, { scroll: true }); openLightbox(); } };
|
||||
$('#lbPrev', d).onclick = () => go(-1);
|
||||
$('#lbNext', d).onclick = () => go(1);
|
||||
$('#lbClose', d).onclick = () => d.close();
|
||||
$('#lbRec', d).onclick = () => { d.close(); recover({ ids: [i.id] }); };
|
||||
d.onclose = () => { stopLb?.(); stopLb = null; };
|
||||
d.onkeydown = (e) => { if (e.key === 'ArrowLeft') go(-1); else if (e.key === 'ArrowRight') go(1); };
|
||||
if (!d.open) d.showModal();
|
||||
}
|
||||
|
||||
// Teclado: ↑/↓ percorre a lista; Espaço/Enter abre a tela cheia.
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (!S.job || document.querySelector('dialog[open]') || /^(INPUT|SELECT|TEXTAREA)$/.test(document.activeElement?.tagName) && document.activeElement.type !== 'checkbox') return;
|
||||
const idx = S.items.findIndex((x) => x.id === S.current?.id);
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
const t = S.items[Math.min(S.items.length - 1, Math.max(0, idx + (e.key === 'ArrowDown' ? 1 : -1)))];
|
||||
focusItem(t, { scroll: true });
|
||||
} else if ((e.key === ' ' || e.key === 'Enter') && S.current && !e.target.closest?.('button')) {
|
||||
e.preventDefault();
|
||||
openLightbox();
|
||||
}
|
||||
});
|
||||
|
||||
function selCount() { return S.allFiltered ? S.total : S.selected.size; }
|
||||
|
||||
function paintBar() {
|
||||
const host = $('#barHost');
|
||||
if (!host) return;
|
||||
const st = S.status;
|
||||
const n = selCount();
|
||||
const canAll = st && st.found > 0 && st.status !== 'error';
|
||||
if (!n && !canAll) { host.innerHTML = ''; host._h = null; return; }
|
||||
const moreOffer = !S.allFiltered && S.selected.size > 0 && S.selected.size < S.total && S.items.length === S.selected.size
|
||||
? '<button class="btn sm" data-bar="all">Selecionar todos os ' + S.total.toLocaleString('pt-BR') + '</button>' : '';
|
||||
const inner = `<span class="info">${n ? `${n.toLocaleString('pt-BR')} selecionado(s)` : `${S.total.toLocaleString('pt-BR')} arquivo(s) na lista`}</span>${moreOffer}
|
||||
${n ? '<button class="btn primary" data-bar="sel">Recuperar selecionados</button>' : '<button class="btn primary" data-bar="rec">Recuperar todos da lista</button>'}`;
|
||||
let bar = host.firstElementChild;
|
||||
if (!bar) {
|
||||
// A barra é criada uma vez (com animação de entrada) e depois só tem o texto atualizado.
|
||||
host.innerHTML = '<div class="actionbar enter"></div>';
|
||||
bar = host.firstElementChild;
|
||||
bar.onclick = (e) => {
|
||||
const act = e.target.closest('[data-bar]')?.dataset.bar;
|
||||
if (act === 'all') { S.allFiltered = true; $('#table')._h = null; paintList(); }
|
||||
else if (act === 'sel') recover(S.allFiltered ? { filter: currentFilter() } : { ids: [...S.selected] });
|
||||
else if (act === 'rec') recover({ filter: currentFilter() });
|
||||
};
|
||||
}
|
||||
setHTML(bar, inner);
|
||||
}
|
||||
|
||||
function currentFilter() {
|
||||
const f = S.filters;
|
||||
const q = { sort: f.sort, limit: 1 };
|
||||
if (f.category) q.category = f.category;
|
||||
if (f.minConfidence) q.min_confidence = f.minConfidence;
|
||||
if (f.query) q.query = f.query;
|
||||
return q;
|
||||
}
|
||||
|
||||
async function recover(sel) {
|
||||
const dest = await ask({
|
||||
title: 'Recuperar para…',
|
||||
|
||||
@@ -0,0 +1,630 @@
|
||||
// Explorador de arquivos recuperados: grade de miniaturas (virtualizada, aguenta
|
||||
// dezenas de milhares de itens), navegação por tipo/data/pasta/câmera, seleção
|
||||
// estilo gerenciador de arquivos (Ctrl/Shift/teclado), painel de detalhes e
|
||||
// visualização rápida em tela cheia.
|
||||
|
||||
import { renderPreview, kindOf, KIND_LABEL } from './preview.js';
|
||||
|
||||
const CAT = {
|
||||
image: ['Fotos', '🖼'], document: ['Documentos', '📄'], video: ['Vídeos', '🎞'], audio: ['Áudio', '🎵'],
|
||||
archive: ['Compactados', '🗜'], database: ['Bancos de dados', '🗄'], other: ['Outros', '📦'],
|
||||
};
|
||||
const CONF = { high: ['alta', 'ok'], medium: ['média', 'warn'], low: ['baixa', 'bad'] };
|
||||
const MONTHS = ['janeiro', 'fevereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro'];
|
||||
const SORTS = [
|
||||
['date', 'Data (mais recentes)'], ['date_asc', 'Data (mais antigas)'], ['name', 'Nome'], ['size', 'Tamanho'], ['confidence', 'Confiança'],
|
||||
];
|
||||
const GAP = 10;
|
||||
const PAD = 12;
|
||||
|
||||
const svg = (d, w = 18) => `<svg viewBox="0 0 24 24" width="${w}" height="${w}" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${d}</svg>`;
|
||||
const I = {
|
||||
grid: svg('<rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/>'),
|
||||
list: svg('<path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/>'),
|
||||
filter: svg('<path d="M4 5h16l-6 8v6l-4-2v-4z"/>'),
|
||||
chev: svg('<path d="M9 6l6 6-6 6"/>', 14),
|
||||
x: svg('<path d="M6 6l12 12M18 6L6 18"/>', 14),
|
||||
pin: svg('<path d="M12 21s-6-5.3-6-10a6 6 0 1 1 12 0c0 4.7-6 10-6 10z"/><circle cx="12" cy="11" r="2"/>', 14),
|
||||
warn: svg('<path d="M12 3l10 18H2z"/><path d="M12 10v5M12 18v.01"/>', 22),
|
||||
close: svg('<path d="M6 6l12 12M18 6L6 18"/>', 20),
|
||||
};
|
||||
|
||||
export function createExplorer(deps) {
|
||||
const { host, job, rpc, esc, human, fileUrl, thumbUrl, onRecover, toast } = deps;
|
||||
const E = {
|
||||
filters: { category: null, year: null, month: null, undated: false, folder: null, camera: null, origin: null, minConf: null, gps: false, dedupe: false, query: '' },
|
||||
sort: 'date',
|
||||
view: 'grid',
|
||||
tile: 150,
|
||||
items: [],
|
||||
total: 0,
|
||||
sel: new Set(),
|
||||
allFiltered: false,
|
||||
anchor: -1,
|
||||
curId: null,
|
||||
facets: null,
|
||||
expanded: new Set(),
|
||||
rows: [],
|
||||
height: 0,
|
||||
rendered: new Map(),
|
||||
reloadToken: 0,
|
||||
lastReload: 0,
|
||||
lastFound: -1,
|
||||
wasEnriching: false,
|
||||
status: null,
|
||||
};
|
||||
try {
|
||||
E.view = localStorage.getItem('guara-view') || 'grid';
|
||||
E.tile = +localStorage.getItem('guara-tile') || 150;
|
||||
} catch { /* sem armazenamento */ }
|
||||
|
||||
host.innerHTML = `<div class="xp" data-view="${E.view}">
|
||||
<div class="xp-bar">
|
||||
<button class="icon-btn xp-navbtn" id="xpNavBtn" aria-label="Filtros">${I.filter}</button>
|
||||
<div class="xp-crumb" id="xpCrumb"></div>
|
||||
<input class="input xp-q" id="xpQ" type="search" placeholder="Buscar por nome, pasta ou câmera" aria-label="Buscar">
|
||||
<select class="select" id="xpSort" aria-label="Ordenar">${SORTS.map(([k, n]) => `<option value="${k}">${n}</option>`).join('')}</select>
|
||||
<div class="theme-switch" role="group" aria-label="Modo de exibição"><button data-view="grid" aria-label="Grade" title="Grade de miniaturas">${I.grid}</button><button data-view="list" aria-label="Lista" title="Lista">${I.list}</button></div>
|
||||
<input type="range" id="xpSize" min="100" max="300" step="4" aria-label="Tamanho das miniaturas">
|
||||
</div>
|
||||
<aside class="xp-nav" id="xpNav" aria-label="Navegação"></aside>
|
||||
<section class="xp-main">
|
||||
<div class="xp-chips" id="xpChips"></div>
|
||||
<div class="xp-scroll" id="xpScroll" tabindex="0" role="listbox" aria-multiselectable="true" aria-label="Arquivos encontrados"><div class="xp-sizer" id="xpSizer"></div></div>
|
||||
<div class="xp-actions" id="xpActions"></div>
|
||||
</section>
|
||||
<aside class="xp-insp" id="xpInsp" aria-label="Detalhes"></aside>
|
||||
<div class="xp-veil" id="xpVeil"></div>
|
||||
</div>`;
|
||||
const $ = (s) => host.querySelector(s);
|
||||
const root = $('.xp'), scroll = $('#xpScroll'), sizer = $('#xpSizer'), nav = $('#xpNav'), insp = $('#xpInsp'), actions = $('#xpActions');
|
||||
$('#xpSort').value = E.sort;
|
||||
$('#xpSize').value = E.tile;
|
||||
|
||||
// ------------------------------------------------------------ dados
|
||||
const toQuery = () => {
|
||||
const f = E.filters;
|
||||
const q = {};
|
||||
if (f.category) q.category = f.category;
|
||||
if (f.year) q.year = f.year;
|
||||
if (f.month) q.month = f.month;
|
||||
if (f.undated) q.undated = true;
|
||||
if (f.folder) q.folder = f.folder;
|
||||
if (f.camera) q.camera = f.camera;
|
||||
if (f.origin) q.origin = f.origin;
|
||||
if (f.minConf) q.min_confidence = f.minConf;
|
||||
if (f.gps) q.has_gps = true;
|
||||
if (f.dedupe) q.dedupe = true;
|
||||
if (f.query) q.query = f.query;
|
||||
return q;
|
||||
};
|
||||
const anyFilter = () => Object.entries(E.filters).some(([k, v]) => (k === 'query' ? !!v : !!v));
|
||||
|
||||
async function reload() {
|
||||
const token = ++E.reloadToken;
|
||||
E.lastReload = Date.now();
|
||||
const base = { ...toQuery(), sort: E.sort };
|
||||
let items = [], total = 0;
|
||||
for (;;) {
|
||||
let r;
|
||||
try { r = await rpc('results', { job, query: { ...base, offset: items.length, limit: 2000 } }); } catch (e) { toast(e.message); return; }
|
||||
if (token !== E.reloadToken) return;
|
||||
items = items.concat(r.items);
|
||||
total = r.total;
|
||||
if (!r.items.length || items.length >= total || items.length >= 30000) break;
|
||||
if (items.length === 2000) { E.items = items; E.total = total; relayout(); paintAll(); }
|
||||
}
|
||||
E.items = items;
|
||||
E.total = total;
|
||||
relayout();
|
||||
paintAll();
|
||||
}
|
||||
|
||||
async function loadFacets() {
|
||||
try { E.facets = await rpc('facets', { job }); } catch { return; }
|
||||
paintNav();
|
||||
}
|
||||
|
||||
const reloadAll = () => { reload(); loadFacets(); };
|
||||
|
||||
// ------------------------------------------------------------ layout virtual
|
||||
// Agrupa por dia; se houver poucos itens por dia, agrupa por mês.
|
||||
let groupBy = 'day';
|
||||
const dayKey = (t) => (t == null ? 'Sem data' : new Date(t * 1000).toISOString().slice(0, groupBy === 'day' ? 10 : 7));
|
||||
const dayLabel = (k) => {
|
||||
if (k === 'Sem data') return k;
|
||||
return groupBy === 'day'
|
||||
? new Date(k + 'T00:00:00Z').toLocaleDateString('pt-BR', { timeZone: 'UTC', weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
|
||||
: new Date(k + '-01T00:00:00Z').toLocaleDateString('pt-BR', { timeZone: 'UTC', month: 'long', year: 'numeric' });
|
||||
};
|
||||
const fmtDate = (t) => (t == null ? 'sem data' : new Date(t * 1000).toLocaleString('pt-BR', { timeZone: 'UTC', dateStyle: 'medium', timeStyle: 'short' }));
|
||||
const fmtDay = (t) => (t == null ? '' : new Date(t * 1000).toLocaleDateString('pt-BR', { timeZone: 'UTC', day: '2-digit', month: 'short', year: 'numeric' }));
|
||||
|
||||
function geometry() {
|
||||
const W = Math.max(200, scroll.clientWidth - PAD * 2);
|
||||
if (E.view === 'list') return { W, cols: 1, tw: W, cap: 0, rowH: 54 };
|
||||
const T = E.tile;
|
||||
const cols = Math.max(1, Math.floor((W + GAP) / (T + GAP)));
|
||||
const tw = Math.floor((W - GAP * (cols - 1)) / cols);
|
||||
const cap = tw >= 128 ? 42 : 0;
|
||||
return { W, cols, tw, cap, rowH: tw + cap + GAP };
|
||||
}
|
||||
|
||||
let G = geometry();
|
||||
function relayout() {
|
||||
G = geometry();
|
||||
const grouped = E.view === 'grid' && (E.sort === 'date' || E.sort === 'date_asc');
|
||||
if (grouped) {
|
||||
groupBy = 'day';
|
||||
const days = new Set(E.items.map((it) => dayKey(it.when)));
|
||||
if (E.items.length / Math.max(1, days.size) < 2.5) groupBy = 'month';
|
||||
}
|
||||
const rows = [];
|
||||
let y = PAD;
|
||||
let cur = null, rowItems = [];
|
||||
const flush = () => {
|
||||
if (rowItems.length) { rows.push({ t: 'row', y, h: G.rowH, idx: rowItems }); y += G.rowH; rowItems = []; }
|
||||
};
|
||||
E.items.forEach((it, i) => {
|
||||
if (grouped) {
|
||||
const k = dayKey(it.when);
|
||||
if (k !== cur) {
|
||||
flush();
|
||||
cur = k;
|
||||
rows.push({ t: 'head', y, h: 40, key: k, start: i });
|
||||
y += 40;
|
||||
}
|
||||
}
|
||||
rowItems.push(i);
|
||||
if (rowItems.length === G.cols) flush();
|
||||
});
|
||||
flush();
|
||||
if (grouped) {
|
||||
// contagem por grupo
|
||||
for (let r = 0; r < rows.length; r++) {
|
||||
if (rows[r].t !== 'head') continue;
|
||||
let n = 0;
|
||||
for (let i = rows[r].start; i < E.items.length && dayKey(E.items[i].when) === rows[r].key; i++) n++;
|
||||
rows[r].count = n;
|
||||
}
|
||||
}
|
||||
E.rows = rows;
|
||||
E.height = y + PAD;
|
||||
sizer.style.height = `${E.height}px`;
|
||||
for (const el of E.rendered.values()) el.remove();
|
||||
E.rendered.clear();
|
||||
renderWindow();
|
||||
}
|
||||
|
||||
function rowAt(top) {
|
||||
let lo = 0, hi = E.rows.length - 1, ans = 0;
|
||||
while (lo <= hi) {
|
||||
const mid = (lo + hi) >> 1;
|
||||
if (E.rows[mid].y + E.rows[mid].h < top) lo = mid + 1; else { ans = mid; hi = mid - 1; }
|
||||
}
|
||||
return ans;
|
||||
}
|
||||
|
||||
function renderWindow() {
|
||||
if (!E.rows.length) { for (const el of E.rendered.values()) el.remove(); E.rendered.clear(); return; }
|
||||
const top = Math.max(0, scroll.scrollTop - 400), bottom = scroll.scrollTop + scroll.clientHeight + 400;
|
||||
const a = rowAt(top);
|
||||
let b = a;
|
||||
while (b < E.rows.length && E.rows[b].y < bottom) b++;
|
||||
for (const [ri, el] of E.rendered) {
|
||||
if (ri < a || ri >= b) { el.remove(); E.rendered.delete(ri); }
|
||||
}
|
||||
const frag = document.createDocumentFragment();
|
||||
for (let ri = a; ri < b; ri++) {
|
||||
if (E.rendered.has(ri)) continue;
|
||||
const row = E.rows[ri];
|
||||
const el = document.createElement('div');
|
||||
el.className = `xp-row ${row.t}`;
|
||||
el.style.top = `${row.y}px`;
|
||||
el.style.height = `${row.h}px`;
|
||||
el.dataset.ri = ri;
|
||||
el.innerHTML = row.t === 'head' ? headHtml(row) : row.idx.map((i) => (E.view === 'list' ? listHtml(i) : tileHtml(i))).join('');
|
||||
E.rendered.set(ri, el);
|
||||
frag.appendChild(el);
|
||||
}
|
||||
sizer.appendChild(frag);
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------ itens
|
||||
const isSel = (id) => E.allFiltered || E.sel.has(id);
|
||||
|
||||
function headHtml(row) {
|
||||
return `<div class="xp-head"><b>${esc(dayLabel(row.key))}</b><small>${row.count} ${row.count === 1 ? 'item' : 'itens'}</small><button class="xp-hsel" data-hsel="${row.start}" data-n="${row.count}" aria-label="Selecionar este grupo">Selecionar grupo</button></div>`;
|
||||
}
|
||||
|
||||
function thumbSrc(it, px) {
|
||||
const s = px <= 200 ? 256 : px <= 330 ? 384 : 640;
|
||||
return thumbUrl(job, it.id, s);
|
||||
}
|
||||
|
||||
function tileHtml(i) {
|
||||
const it = E.items[i];
|
||||
const [cl, cc] = CONF[it.confidence];
|
||||
const on = isSel(it.id);
|
||||
const [catName, catIco] = CAT[it.category] || CAT.other;
|
||||
const media = it.category === 'image'
|
||||
? `<img loading="lazy" decoding="async" alt="" src="${thumbSrc(it, G.tw * (window.devicePixelRatio > 1 ? 1.5 : 1))}" data-th="1">`
|
||||
: `<div class="xp-ico c-${it.category}"><span>${catIco}</span><b>${esc((it.ext || '?').toUpperCase().slice(0, 5))}</b></div>`;
|
||||
return `<div class="xp-tile" role="option" data-i="${i}" data-id="${it.id}" aria-selected="${on}" ${E.curId === it.id ? 'data-cur="1"' : ''} style="width:${G.tw}px;height:${G.tw + G.cap}px" title="${esc(it.name)}">
|
||||
<div class="xp-thumb" style="height:${G.tw}px">${media}
|
||||
<span class="xp-chk" data-chk="1" aria-hidden="true"></span>
|
||||
<span class="xp-dot ${cc}" title="Confiança ${cl}"></span>
|
||||
${it.gps ? `<span class="xp-gps" title="Tem localização GPS">${I.pin}</span>` : ''}
|
||||
</div>
|
||||
${G.cap ? `<div class="xp-cap"><b>${esc(it.name)}</b><small>${human(it.size)}${it.when != null ? ' · ' + esc(fmtDay(it.when)) : ''}</small></div>` : ''}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function listHtml(i) {
|
||||
const it = E.items[i];
|
||||
const [cl, cc] = CONF[it.confidence];
|
||||
const on = isSel(it.id);
|
||||
const [, catIco] = CAT[it.category] || CAT.other;
|
||||
const th = it.category === 'image' ? `<img loading="lazy" decoding="async" alt="" src="${thumbUrl(job, it.id, 128)}" data-th="1">` : `<span class="xp-lico c-${it.category}">${catIco}</span>`;
|
||||
return `<div class="xp-lrow" role="option" data-i="${i}" data-id="${it.id}" aria-selected="${on}" ${E.curId === it.id ? 'data-cur="1"' : ''}>
|
||||
<span class="xp-chk" data-chk="1" aria-hidden="true"></span><div class="xp-lth">${th}</div>
|
||||
<div class="xp-lnm"><b>${esc(it.name)}</b><small>${esc(it.dir || (it.origin === 'carved' ? 'Encontrado por assinatura' : '/'))}</small></div>
|
||||
<span class="xp-lcol">${esc(fmtDate(it.when))}</span><span class="xp-lcol num">${human(it.size)}</span><span class="pill ${cc}">${cl}</span>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// imagens que falham viram um aviso (arquivo possivelmente danificado)
|
||||
scroll.addEventListener('error', (e) => {
|
||||
const img = e.target;
|
||||
if (img.tagName !== 'IMG' || !img.dataset.th) return;
|
||||
const wrap = img.closest('.xp-thumb, .xp-lth');
|
||||
img.remove();
|
||||
wrap?.insertAdjacentHTML('afterbegin', `<div class="xp-ico c-bad" title="Não foi possível gerar a miniatura (arquivo possivelmente danificado)"><span>${I.warn}</span><b>?</b></div>`);
|
||||
}, true);
|
||||
|
||||
// ------------------------------------------------------------ seleção
|
||||
const selCount = () => (E.allFiltered ? E.total : E.sel.size);
|
||||
const idxOf = (id) => E.items.findIndex((x) => x.id === id);
|
||||
|
||||
function paintSel() {
|
||||
const set = (el) => {
|
||||
const id = +el.dataset.id;
|
||||
el.setAttribute('aria-selected', String(isSel(id)));
|
||||
if (E.curId === id) el.dataset.cur = '1'; else delete el.dataset.cur;
|
||||
};
|
||||
scroll.querySelectorAll('.xp-tile, .xp-lrow').forEach(set);
|
||||
paintActions();
|
||||
}
|
||||
|
||||
function selectRange(a, b) {
|
||||
const [lo, hi] = a < b ? [a, b] : [b, a];
|
||||
for (let i = lo; i <= hi; i++) E.sel.add(E.items[i].id);
|
||||
}
|
||||
|
||||
function setCursor(i, { extend = false, toggle = false, reveal = false } = {}) {
|
||||
if (i < 0 || i >= E.items.length) return;
|
||||
const it = E.items[i];
|
||||
if (E.allFiltered) { E.allFiltered = false; E.sel = new Set(E.items.map((x) => x.id)); }
|
||||
if (extend && E.anchor >= 0) {
|
||||
E.sel = new Set();
|
||||
selectRange(E.anchor, i);
|
||||
} else if (toggle) {
|
||||
if (E.sel.has(it.id)) E.sel.delete(it.id); else E.sel.add(it.id);
|
||||
E.anchor = i;
|
||||
} else {
|
||||
E.sel = new Set([it.id]);
|
||||
E.anchor = i;
|
||||
}
|
||||
E.curId = it.id;
|
||||
if (reveal) revealIndex(i);
|
||||
paintSel();
|
||||
schedInspector();
|
||||
if (matchMedia('(max-width: 1100px)').matches && !extend && !toggle) root.classList.add('show-insp');
|
||||
}
|
||||
|
||||
function revealIndex(i) {
|
||||
const ri = E.rows.findIndex((r) => r.t === 'row' && r.idx.includes(i));
|
||||
if (ri < 0) return;
|
||||
const r = E.rows[ri];
|
||||
if (r.y < scroll.scrollTop + 4) scroll.scrollTop = r.y - 8;
|
||||
else if (r.y + r.h > scroll.scrollTop + scroll.clientHeight) scroll.scrollTop = r.y + r.h - scroll.clientHeight + 8;
|
||||
renderWindow();
|
||||
}
|
||||
|
||||
scroll.addEventListener('scroll', () => renderWindow(), { passive: true });
|
||||
new ResizeObserver(() => { if (Math.abs(geometry().W - G.W) > 1 || geometry().cols !== G.cols) relayout(); else renderWindow(); }).observe(scroll);
|
||||
|
||||
scroll.addEventListener('click', (e) => {
|
||||
const hs = e.target.closest('[data-hsel]');
|
||||
if (hs) {
|
||||
const start = +hs.dataset.hsel, n = +hs.dataset.n;
|
||||
if (E.allFiltered) { E.allFiltered = false; E.sel = new Set(); }
|
||||
for (let i = start; i < start + n; i++) E.sel.add(E.items[i].id);
|
||||
paintSel();
|
||||
return;
|
||||
}
|
||||
const el = e.target.closest('.xp-tile, .xp-lrow');
|
||||
if (!el) return;
|
||||
const i = +el.dataset.i;
|
||||
if (e.target.closest('[data-chk]')) setCursor(i, { toggle: true });
|
||||
else setCursor(i, { extend: e.shiftKey, toggle: e.ctrlKey || e.metaKey });
|
||||
});
|
||||
scroll.addEventListener('dblclick', (e) => {
|
||||
const el = e.target.closest('.xp-tile, .xp-lrow');
|
||||
if (el) { setCursor(+el.dataset.i); openLightbox(+el.dataset.i); }
|
||||
});
|
||||
scroll.addEventListener('keydown', (e) => {
|
||||
if (!E.items.length) return;
|
||||
let i = idxOf(E.curId);
|
||||
if (i < 0) i = 0;
|
||||
const cols = G.cols;
|
||||
const move = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: cols, ArrowUp: -cols, PageDown: cols * 4, PageUp: -cols * 4 }[e.key];
|
||||
if (move != null) {
|
||||
e.preventDefault();
|
||||
setCursor(Math.max(0, Math.min(E.items.length - 1, idxOf(E.curId) < 0 ? 0 : i + move)), { extend: e.shiftKey, reveal: true });
|
||||
} else if (e.key === 'Home') { e.preventDefault(); setCursor(0, { extend: e.shiftKey, reveal: true }); }
|
||||
else if (e.key === 'End') { e.preventDefault(); setCursor(E.items.length - 1, { extend: e.shiftKey, reveal: true }); }
|
||||
else if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); if (E.curId == null) setCursor(0); openLightbox(idxOf(E.curId)); }
|
||||
else if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'a') { e.preventDefault(); E.allFiltered = true; paintSel(); }
|
||||
else if (e.key === 'Escape') { E.sel = new Set(); E.allFiltered = false; paintSel(); }
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------ barra de ações
|
||||
function paintActions() {
|
||||
const n = selCount();
|
||||
const html = n
|
||||
? `<span class="info"><b>${n.toLocaleString('pt-BR')}</b> selecionado${n === 1 ? '' : 's'}${E.allFiltered ? ' (todos desta vista)' : ''}</span>
|
||||
<button class="btn sm" data-a="clear">Limpar seleção</button>
|
||||
${!E.allFiltered && E.total > n ? `<button class="btn sm" data-a="all">Selecionar todos os ${E.total.toLocaleString('pt-BR')}</button>` : ''}
|
||||
<button class="btn primary" data-a="rec">Recuperar ${n === 1 ? 'selecionado' : 'selecionados'}</button>`
|
||||
: `<span class="info">${E.total.toLocaleString('pt-BR')} ${E.total === 1 ? 'item' : 'itens'} nesta vista${E.total > E.items.length ? ` (mostrando ${E.items.length.toLocaleString('pt-BR')})` : ''}</span>
|
||||
${E.total ? '<button class="btn sm" data-a="all">Selecionar tudo</button><button class="btn primary" data-a="recall">Recuperar tudo desta vista</button>' : ''}`;
|
||||
if (actions._h !== html) { actions._h = html; actions.innerHTML = html; }
|
||||
}
|
||||
actions.addEventListener('click', (e) => {
|
||||
const a = e.target.closest('[data-a]')?.dataset.a;
|
||||
if (a === 'clear') { E.sel = new Set(); E.allFiltered = false; paintSel(); }
|
||||
else if (a === 'all') { E.allFiltered = true; paintSel(); }
|
||||
else if (a === 'rec') onRecover(E.allFiltered ? { filter: toQuery() } : { ids: [...E.sel] });
|
||||
else if (a === 'recall') onRecover({ filter: toQuery() });
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------ navegação lateral
|
||||
function paintNav() {
|
||||
const f = E.facets;
|
||||
if (!f) return;
|
||||
const F = E.filters;
|
||||
const node = (label, count, attrs, active, depth = 0, extra = '') =>
|
||||
`<button class="xp-node${active ? ' on' : ''}" ${attrs} style="--d:${depth}" aria-pressed="${!!active}">${extra}<span class="l">${label}</span><small>${count.toLocaleString('pt-BR')}</small></button>`;
|
||||
const sec = (title, body) => (body ? `<div class="xp-sec"><h4>${title}</h4>${body}</div>` : '');
|
||||
|
||||
const cats = Object.keys(CAT).filter((k) => f.categories[k]).map((k) => node(`${CAT[k][1]} ${CAT[k][0]}`, f.categories[k], `data-f="category" data-v="${k}"`, F.category === k)).join('');
|
||||
const years = f.years.map((y) => {
|
||||
const open = E.expanded.has('y' + y.year) || F.year === y.year;
|
||||
return node(String(y.year), y.count, `data-f="year" data-v="${y.year}"`, F.year === y.year && !F.month, 0,
|
||||
`<span class="tw" data-tw="y${y.year}" aria-label="Expandir" style="${open ? 'transform:rotate(90deg)' : ''}">${I.chev}</span>`)
|
||||
+ (open ? y.months.map((m) => node(MONTHS[m.month - 1], m.count, `data-f="month" data-y="${y.year}" data-v="${m.month}"`, F.year === y.year && F.month === m.month, 1)).join('') : '');
|
||||
}).join('') + (f.undated ? node('Sem data', f.undated, 'data-f="undated" data-v="1"', F.undated) : '');
|
||||
const folders = f.folders.filter((d) => {
|
||||
// só mostra se todos os ancestrais estiverem expandidos
|
||||
const parts = d.path.split('/');
|
||||
for (let k = 1; k < parts.length; k++) if (!E.expanded.has('d' + parts.slice(0, k).join('/')) && !(F.folder || '').startsWith(parts.slice(0, k).join('/'))) return false;
|
||||
return true;
|
||||
}).map((d) => {
|
||||
const hasKids = f.folders.some((o) => o.path.startsWith(d.path + '/'));
|
||||
const open = E.expanded.has('d' + d.path) || (F.folder || '').startsWith(d.path + '/');
|
||||
return node(esc(d.name), d.count, `data-f="folder" data-v="${esc(d.path)}"`, F.folder === d.path, d.depth,
|
||||
hasKids ? `<span class="tw" data-tw="d${esc(d.path)}" style="${open ? 'transform:rotate(90deg)' : ''}">${I.chev}</span>` : '<span class="tw"></span>');
|
||||
}).join('')
|
||||
+ (f.root ? node('/ (raiz)', f.root, 'data-f="folder" data-v="@raiz"', F.folder === '@raiz') : '')
|
||||
+ (f.carved ? node('Por assinatura', f.carved, 'data-f="folder" data-v="@carved"', F.folder === '@carved') : '');
|
||||
const cams = f.cameras.map((c) => node(esc(c.name), c.count, `data-f="camera" data-v="${esc(c.name)}"`, F.camera === c.name)).join('');
|
||||
const conf = ['high', 'medium', 'low'].map((k) => node(`Confiança ${CONF[k][0]}`, f.confidence[k], `data-f="minConf" data-v="${k}"`, F.minConf === k)).join('');
|
||||
const extra = (f.gps ? node('Com localização (GPS)', f.gps, 'data-f="gps" data-v="1"', F.gps) : '')
|
||||
+ (f.duplicates ? node('Ocultar duplicadas', f.duplicates, 'data-f="dedupe" data-v="1"', F.dedupe) : '');
|
||||
|
||||
const html = `<div class="xp-sec">${node('Tudo', f.total, 'data-f="all"', !anyFilter())}</div>`
|
||||
+ sec('Tipos', cats) + sec('Datas', years) + sec('Pastas', folders) + sec('Câmeras', cams) + sec('Confiança', conf) + sec('Outros', extra);
|
||||
if (nav._h !== html) { nav._h = html; const st = nav.scrollTop; nav.innerHTML = html; nav.scrollTop = st; }
|
||||
}
|
||||
|
||||
nav.addEventListener('click', (e) => {
|
||||
const tw = e.target.closest('[data-tw]');
|
||||
if (tw) {
|
||||
const k = tw.dataset.tw;
|
||||
if (E.expanded.has(k)) E.expanded.delete(k); else E.expanded.add(k);
|
||||
nav._h = null; paintNav();
|
||||
e.stopPropagation();
|
||||
return;
|
||||
}
|
||||
const b = e.target.closest('.xp-node');
|
||||
if (!b) return;
|
||||
const F = E.filters;
|
||||
const f = b.dataset.f, v = b.dataset.v;
|
||||
if (f === 'all') clearFilters(false);
|
||||
else if (f === 'year') { const same = F.year === +v && !F.month; F.year = same ? null : +v; F.month = null; F.undated = false; E.expanded.add('y' + v); }
|
||||
else if (f === 'month') { const same = F.year === +b.dataset.y && F.month === +v; F.year = same ? null : +b.dataset.y; F.month = same ? null : +v; F.undated = false; }
|
||||
else if (f === 'undated') { F.undated = !F.undated; F.year = F.month = null; }
|
||||
else if (f === 'gps') F.gps = !F.gps;
|
||||
else if (f === 'dedupe') F.dedupe = !F.dedupe;
|
||||
else F[f] = F[f] === v ? null : v;
|
||||
if (f === 'folder' && F.folder && !F.folder.startsWith('@')) E.expanded.add('d' + F.folder);
|
||||
nav._h = null;
|
||||
root.classList.remove('show-nav');
|
||||
changed();
|
||||
});
|
||||
|
||||
function clearFilters(refresh = true) {
|
||||
E.filters = { category: null, year: null, month: null, undated: false, folder: null, camera: null, origin: null, minConf: null, gps: false, dedupe: false, query: '' };
|
||||
$('#xpQ').value = '';
|
||||
if (refresh) changed(); else changed();
|
||||
}
|
||||
|
||||
function changed() {
|
||||
E.sel = new Set(); E.allFiltered = false; E.curId = null; E.anchor = -1;
|
||||
scroll.scrollTop = 0;
|
||||
paintCrumb(); paintChips(); paintNav(); paintInspector();
|
||||
reload();
|
||||
}
|
||||
|
||||
function paintCrumb() {
|
||||
const F = E.filters, parts = [];
|
||||
if (F.category) parts.push(CAT[F.category][0]);
|
||||
if (F.year) parts.push(String(F.year));
|
||||
if (F.month) parts.push(MONTHS[F.month - 1]);
|
||||
if (F.undated) parts.push('Sem data');
|
||||
if (F.folder) parts.push(F.folder === '@carved' ? 'Por assinatura' : F.folder === '@raiz' ? 'Raiz' : F.folder.split('/').join(' › '));
|
||||
if (F.camera) parts.push(F.camera);
|
||||
$('#xpCrumb').innerHTML = `<b>${parts.length ? esc(parts.join(' › ')) : 'Todos os arquivos'}</b><small>${E.total.toLocaleString('pt-BR')}</small>`;
|
||||
}
|
||||
|
||||
function paintChips() {
|
||||
const F = E.filters, chips = [];
|
||||
const add = (label, key) => chips.push(`<button class="chip" data-x="${key}">${label} ${I.x}</button>`);
|
||||
if (F.category) add(CAT[F.category][0], 'category');
|
||||
if (F.year) add(String(F.year), 'year');
|
||||
if (F.month) add(MONTHS[F.month - 1], 'month');
|
||||
if (F.undated) add('Sem data', 'undated');
|
||||
if (F.folder) add(F.folder === '@carved' ? 'Por assinatura' : F.folder === '@raiz' ? 'Raiz' : esc(F.folder), 'folder');
|
||||
if (F.camera) add(esc(F.camera), 'camera');
|
||||
if (F.minConf) add(`Confiança ${CONF[F.minConf][0]}`, 'minConf');
|
||||
if (F.gps) add('Com GPS', 'gps');
|
||||
if (F.dedupe) add('Sem duplicadas', 'dedupe');
|
||||
if (F.query) add(`“${esc(F.query)}”`, 'query');
|
||||
$('#xpChips').innerHTML = chips.length ? chips.join('') + '<button class="btn sm" data-x="all">Limpar filtros</button>' : '';
|
||||
}
|
||||
$('#xpChips').addEventListener('click', (e) => {
|
||||
const k = e.target.closest('[data-x]')?.dataset.x;
|
||||
if (!k) return;
|
||||
if (k === 'all') return clearFilters();
|
||||
E.filters[k] = k === 'query' ? '' : k === 'undated' || k === 'gps' || k === 'dedupe' ? false : null;
|
||||
if (k === 'year') E.filters.month = null;
|
||||
if (k === 'query') $('#xpQ').value = '';
|
||||
nav._h = null;
|
||||
changed();
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------ barra superior
|
||||
let qt;
|
||||
$('#xpQ').addEventListener('input', (e) => { clearTimeout(qt); qt = setTimeout(() => { E.filters.query = e.target.value.trim(); changed(); }, 250); });
|
||||
$('#xpSort').addEventListener('change', (e) => { E.sort = e.target.value; reload(); });
|
||||
const paintView = () => {
|
||||
root.dataset.view = E.view;
|
||||
host.querySelectorAll('[data-view]').forEach((b) => { if (b.tagName === 'BUTTON') b.setAttribute('aria-pressed', String(b.dataset.view === E.view)); });
|
||||
$('#xpSize').style.display = E.view === 'grid' ? '' : 'none';
|
||||
};
|
||||
host.querySelectorAll('button[data-view]').forEach((b) => (b.onclick = () => {
|
||||
E.view = b.dataset.view;
|
||||
try { localStorage.setItem('guara-view', E.view); } catch { /* */ }
|
||||
paintView(); relayout();
|
||||
}));
|
||||
$('#xpSize').addEventListener('input', (e) => {
|
||||
E.tile = +e.target.value;
|
||||
try { localStorage.setItem('guara-tile', String(E.tile)); } catch { /* */ }
|
||||
relayout();
|
||||
});
|
||||
$('#xpNavBtn').onclick = () => root.classList.toggle('show-nav');
|
||||
$('#xpVeil').onclick = () => root.classList.remove('show-nav', 'show-insp');
|
||||
|
||||
// ------------------------------------------------------------ painel de detalhes
|
||||
let inspT, stopPv = null, metaToken = 0;
|
||||
const schedInspector = () => { clearTimeout(inspT); inspT = setTimeout(paintInspector, 90); };
|
||||
|
||||
function timesHtml(it) {
|
||||
const rows = [['Tirada em', it.taken], ['Modificado', it.modified], ['Criado', it.created], ['Acessado', it.accessed]].filter(([, v]) => v != null);
|
||||
return rows.map(([k, v]) => `<dt>${k}</dt><dd>${esc(fmtDate(v))}</dd>`).join('');
|
||||
}
|
||||
|
||||
function paintInspector() {
|
||||
stopPv?.(); stopPv = null;
|
||||
const n = selCount();
|
||||
const it = E.items[idxOf(E.curId)];
|
||||
const close = `<button class="icon-btn xp-insp-x" data-i="close" aria-label="Fechar">${I.close}</button>`;
|
||||
if (n > 1) {
|
||||
const sizeSum = E.allFiltered ? null : [...E.sel].reduce((a, id) => a + (E.items[idxOf(id)]?.size || 0), 0);
|
||||
insp.innerHTML = `${close}<div class="xp-multi"><b>${n.toLocaleString('pt-BR')} itens selecionados</b>${sizeSum != null ? `<span class="sub">${human(sizeSum)} no total</span>` : ''}
|
||||
<div class="row"><button class="btn primary" data-i="rec">Recuperar selecionados</button><button class="btn" data-i="clear">Limpar seleção</button></div></div>`;
|
||||
return;
|
||||
}
|
||||
if (!it) {
|
||||
insp.innerHTML = `${close}<div class="xp-empty-insp"><div class="viewer"><div class="pv-note">Selecione um arquivo para pré-visualizar.<br><span class="sub">Setas navegam, Espaço abre em tela cheia.</span></div></div></div>`;
|
||||
return;
|
||||
}
|
||||
const [cl, cc] = CONF[it.confidence];
|
||||
const url = kindOf(it) === 'image' ? thumbUrl(job, it.id, 640) : fileUrl(job, it.id);
|
||||
insp.innerHTML = `${close}<div class="viewer" id="xpPv"></div>
|
||||
<div class="xp-ititle"><b>${esc(it.name)}</b><span class="pill ${cc}">${cl}</span></div>
|
||||
<div class="sub" style="font-size:12.5px">${esc(KIND_LABEL[kindOf(it)])} · ${human(it.size)}</div>
|
||||
${it.note ? `<div class="pv-note bad" style="text-align:left">${esc(it.note)}</div>` : ''}
|
||||
<dl class="kv"><dt>Pasta</dt><dd>${esc(it.dir || (it.origin === 'carved' ? 'Encontrado por assinatura' : '/'))}</dd>${timesHtml(it)}${it.camera ? `<dt>Câmera</dt><dd>${esc(it.camera)}</dd>` : ''}${it.px ? `<dt>Resolução</dt><dd>${it.px[0]} × ${it.px[1]} px</dd>` : ''}</dl>
|
||||
<div class="xp-meta" id="xpMeta"></div>
|
||||
<div class="row"><button class="btn sm" data-i="full">Tela cheia</button><button class="btn primary sm" data-i="rec1">Recuperar este arquivo</button></div>`;
|
||||
stopPv = renderPreview($('#xpPv'), it, { url, thumb: kindOf(it) === 'image' });
|
||||
const my = ++metaToken;
|
||||
rpc('metadata', { job, id: it.id }).then((m) => {
|
||||
if (my !== metaToken || !$('#xpMeta')) return;
|
||||
const rows = (m.fields || []).filter(([k]) => !['Dimensões'].includes(k));
|
||||
if (!rows.length) return;
|
||||
$('#xpMeta').innerHTML = `<h5>Metadados${m.kind ? ` · ${esc(m.kind)}` : ''}</h5><dl class="kv">${rows.map(([k, v]) => `<dt>${esc(k)}</dt><dd>${esc(v)}</dd>`).join('')}</dl>`
|
||||
+ (m.gps ? `<div class="sub" style="font-size:12.5px">Coordenadas: ${m.gps[0].toFixed(5)}, ${m.gps[1].toFixed(5)}</div>` : '');
|
||||
}).catch(() => {});
|
||||
}
|
||||
insp.addEventListener('click', (e) => {
|
||||
const a = e.target.closest('[data-i]')?.dataset.i;
|
||||
if (a === 'full') openLightbox(idxOf(E.curId));
|
||||
else if (a === 'rec1') onRecover({ ids: [E.curId] });
|
||||
else if (a === 'rec') onRecover(E.allFiltered ? { filter: toQuery() } : { ids: [...E.sel] });
|
||||
else if (a === 'clear') { E.sel = new Set(); E.allFiltered = false; paintSel(); paintInspector(); }
|
||||
else if (a === 'close') root.classList.remove('show-insp');
|
||||
});
|
||||
|
||||
// ------------------------------------------------------------ tela cheia
|
||||
let stopLb = null;
|
||||
function openLightbox(i) {
|
||||
const it = E.items[i];
|
||||
if (!it) return;
|
||||
const d = document.querySelector('#lightbox');
|
||||
const [cl] = CONF[it.confidence];
|
||||
d.innerHTML = `<div class="lb-head"><button class="icon-btn" id="lbPrev" aria-label="Anterior" ${i <= 0 ? 'disabled' : ''}>‹</button><button class="icon-btn" id="lbNext" aria-label="Próximo" ${i >= E.items.length - 1 ? 'disabled' : ''}>›</button>
|
||||
<div class="ttl"><b>${esc(it.name)}</b><small>${esc(KIND_LABEL[kindOf(it)])} · ${human(it.size)}${it.when != null ? ' · ' + esc(fmtDate(it.when)) : ''} · confiança ${cl} · ${i + 1} de ${E.items.length}</small></div>
|
||||
<button class="icon-btn" id="lbClose" aria-label="Fechar">${I.close}</button></div>
|
||||
<div class="lb-body"><div class="viewer large" id="lbHost"></div></div>
|
||||
<div class="lb-foot"><span class="sub">${it.note ? esc(it.note) : '← → para navegar · Esc para fechar'}</span><button class="btn primary sm" id="lbRec">Recuperar este arquivo</button></div>`;
|
||||
stopLb?.();
|
||||
stopLb = renderPreview(d.querySelector('#lbHost'), it, { url: fileUrl(job, it.id), large: true });
|
||||
const go = (n) => { const t = i + n; if (t >= 0 && t < E.items.length) { setCursor(t, { reveal: true }); openLightbox(t); } };
|
||||
d.querySelector('#lbPrev').onclick = () => go(-1);
|
||||
d.querySelector('#lbNext').onclick = () => go(1);
|
||||
d.querySelector('#lbClose').onclick = () => d.close();
|
||||
d.querySelector('#lbRec').onclick = () => { d.close(); onRecover({ ids: [it.id] }); };
|
||||
d.onclose = () => { stopLb?.(); stopLb = null; scroll.focus({ preventScroll: true }); };
|
||||
d.onkeydown = (e) => { if (e.key === 'ArrowLeft') go(-1); else if (e.key === 'ArrowRight') go(1); };
|
||||
if (!d.open) d.showModal();
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------ paint geral
|
||||
function paintAll() { paintCrumb(); paintChips(); paintActions(); renderWindow(); }
|
||||
|
||||
paintView(); paintCrumb(); paintActions(); paintInspector();
|
||||
reloadAll();
|
||||
|
||||
return {
|
||||
/** Chamado a cada atualização de status da varredura. */
|
||||
onStatus(st) {
|
||||
E.status = st;
|
||||
const enriching = !!st.enriching;
|
||||
const now = Date.now();
|
||||
const foundChanged = st.found !== E.lastFound;
|
||||
const justDone = st.status !== 'running' && E.running;
|
||||
E.running = st.status === 'running';
|
||||
if ((foundChanged && now - E.lastReload > 1500) || justDone || (E.wasEnriching && !enriching) || (enriching && now - E.lastReload > 2500)) {
|
||||
E.lastFound = st.found;
|
||||
reloadAll();
|
||||
}
|
||||
E.wasEnriching = enriching;
|
||||
},
|
||||
query: () => toQuery(),
|
||||
destroy() { E.reloadToken++; stopPv?.(); stopLb?.(); host.innerHTML = ''; },
|
||||
focus() { scroll.focus({ preventScroll: true }); },
|
||||
};
|
||||
}
|
||||
@@ -90,7 +90,7 @@ function note(host, html, cls = '') {
|
||||
|
||||
function failure(host, item, err, withHex) {
|
||||
host.innerHTML = '';
|
||||
note(host, `<b>Não foi possível pré-visualizar.</b><br>${esc(err?.message || err || '')} O arquivo pode estar danificado, incompleto ou parcialmente sobrescrito — isso também indica que a chance de recuperação é menor.`, 'bad');
|
||||
note(host, `<b>Não foi possível pré-visualizar.</b><br>${esc(err?.message || err || '')} O arquivo pode estar danificado, incompleto ou parcialmente sobrescrito, o que também indica que a chance de recuperação é menor.`, 'bad');
|
||||
return withHex ? hex(host, item, host.dataset.url, false) : null;
|
||||
}
|
||||
|
||||
@@ -121,7 +121,7 @@ async function text(host, item, url, large) {
|
||||
if (item.size > b.length) note(host, `Mostrando o início (${human(b.length)} de ${human(item.size)}).`);
|
||||
}
|
||||
|
||||
async function image(host, item, url, state) {
|
||||
async function image(host, item, url, state, thumb) {
|
||||
await new Promise((resolve) => {
|
||||
const img = new Image();
|
||||
img.alt = `Pré-visualização de ${item.name}`;
|
||||
@@ -133,7 +133,7 @@ async function image(host, item, url, state) {
|
||||
host.appendChild(img);
|
||||
host.classList.add('zoomable');
|
||||
img.onclick = () => host.classList.toggle('actual');
|
||||
note(host, `${img.naturalWidth} × ${img.naturalHeight} px — clique para alternar entre ajustar e tamanho real.`);
|
||||
if (!thumb) note(host, `${img.naturalWidth} × ${img.naturalHeight} px. Clique para alternar entre ajustar e tamanho real.`);
|
||||
resolve();
|
||||
};
|
||||
img.onerror = () => { if (!state.dead) failure(host, item, 'A imagem não pôde ser decodificada.', true); resolve(); };
|
||||
@@ -272,7 +272,7 @@ async function zip(host, item, url, state) {
|
||||
|
||||
// ------------------------------------------------------------------ API
|
||||
/** Desenha a pré-visualização de `item` dentro de `host`. Devolve uma função de limpeza. */
|
||||
export function renderPreview(host, item, { url, large = false }) {
|
||||
export function renderPreview(host, item, { url, large = false, thumb = false }) {
|
||||
const state = { dead: false, cleanup: [] };
|
||||
host.dataset.url = url;
|
||||
host.classList.remove('zoomable', 'actual');
|
||||
@@ -281,7 +281,7 @@ export function renderPreview(host, item, { url, large = false }) {
|
||||
(async () => {
|
||||
try {
|
||||
if (!item.size) { host.innerHTML = ''; note(host, 'Arquivo vazio.'); return; }
|
||||
if (kind === 'image') await image(host, item, url, state);
|
||||
if (kind === 'image') await image(host, item, url, state, thumb);
|
||||
else if (kind === 'video') media(host, item, url, 'video', state);
|
||||
else if (kind === 'audio') media(host, item, url, 'audio', state);
|
||||
else if (kind === 'pdf') await pdf(host, item, url, state, large);
|
||||
|
||||
Reference in new issue
Block a user