1st commit
This commit is contained in:
+639
@@ -0,0 +1,639 @@
|
||||
// ═══════════════════════════════════════════════════════
|
||||
// Photo Renamer v2 — renderer.js
|
||||
//
|
||||
// 기능:
|
||||
// • 썸네일 그리드 (정사각형, object-fit:cover, 기본 250px)
|
||||
// • 트랙패드 핀치로 썸네일 크기 조절 (150~400px)
|
||||
// • Rubber-band(클릭 드래그) 다중 선택
|
||||
// • Shift + 클릭 드래그 → 기존 선택에 추가
|
||||
// • Command + 클릭 → 개별 토글 선택
|
||||
// • 선택된 카드들 한꺼번에 드래그 → 드롭 이동
|
||||
// • 단일 카드 드래그 → 드롭 이동
|
||||
// • 드래그 중 화면 상/하단 10% 진입 시 자동 스크롤
|
||||
// ═══════════════════════════════════════════════════════
|
||||
|
||||
// ── 썸네일 크기 상수 ─────────────────────────────────
|
||||
const THUMB_MIN = 150;
|
||||
const THUMB_MAX = 400;
|
||||
const THUMB_DEFAULT = 250;
|
||||
let thumbSize = THUMB_DEFAULT;
|
||||
|
||||
// ── 전역 상태 ────────────────────────────────────────
|
||||
let files = [];
|
||||
let currentFolder = null;
|
||||
let selectedIdxs = new Set();
|
||||
|
||||
// 드래그 상태
|
||||
let dragMode = null; // 'single' | 'multi'
|
||||
let dragSrcIdx = null;
|
||||
|
||||
// Rubber-band 상태
|
||||
let rbActive = false;
|
||||
let rbStartX = 0;
|
||||
let rbStartY = 0; // viewport 기준
|
||||
|
||||
// 자동 스크롤 상태
|
||||
let autoScrollRAF = null;
|
||||
let autoScrollSpeed = 0;
|
||||
let lastScrollTs = null;
|
||||
|
||||
// 핀치 힌트 타이머
|
||||
let thumbHintTimer = null;
|
||||
|
||||
// ── DOM ──────────────────────────────────────────────
|
||||
const grid = document.getElementById('grid');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const btnOpen = document.getElementById('btn-open');
|
||||
const btnSortName = document.getElementById('btn-sort-name');
|
||||
const btnSortDate = document.getElementById('btn-sort-date');
|
||||
const btnRename = document.getElementById('btn-rename');
|
||||
const btnReveal = document.getElementById('btn-reveal');
|
||||
const inputPrefix = document.getElementById('input-prefix');
|
||||
const inputDigits = document.getElementById('input-digits');
|
||||
const previewName = document.getElementById('preview-name');
|
||||
const fileCount = document.getElementById('file-count');
|
||||
const selCount = document.getElementById('sel-count');
|
||||
const dirPath = document.getElementById('dir-path');
|
||||
const statusDot = document.getElementById('status-dot');
|
||||
const statusText = document.getElementById('status-text');
|
||||
const loading = document.getElementById('loading');
|
||||
const loadingText = document.getElementById('loading-text');
|
||||
const toast = document.getElementById('toast');
|
||||
const rubberBand = document.getElementById('rubber-band');
|
||||
const gridContainer = document.getElementById('grid-container');
|
||||
const dragGhostEl = document.getElementById('drag-ghost');
|
||||
const thumbSizeHint = document.getElementById('thumb-size-hint');
|
||||
|
||||
// ── 초기화 ───────────────────────────────────────────
|
||||
inputPrefix.addEventListener('input', updatePreview);
|
||||
inputDigits.addEventListener('input', updatePreview);
|
||||
btnOpen.addEventListener('click', openFolder);
|
||||
btnSortName.addEventListener('click', () => sortFiles('name'));
|
||||
btnSortDate.addEventListener('click', () => sortFiles('date'));
|
||||
btnRename.addEventListener('click', doRename);
|
||||
btnReveal.addEventListener('click', () => {
|
||||
if (currentFolder) window.api.revealFolder(currentFolder);
|
||||
});
|
||||
|
||||
// Rubber-band: grid-container 위에서 시작
|
||||
gridContainer.addEventListener('mousedown', onRubberBandStart);
|
||||
window.addEventListener('mousemove', onRubberBandMove);
|
||||
window.addEventListener('mouseup', onRubberBandEnd);
|
||||
|
||||
// 드래그 중 window-level dragover → 고스트 이동 + 자동 스크롤
|
||||
window.addEventListener('dragover', onWindowDragOver);
|
||||
|
||||
// ── 핀치 줌 (트랙패드 두 손가락) ─────────────────────
|
||||
// macOS 트랙패드 핀치 = ctrlKey + wheel 이벤트
|
||||
gridContainer.addEventListener('wheel', (e) => {
|
||||
if (!e.ctrlKey) return;
|
||||
e.preventDefault();
|
||||
|
||||
// deltaY: 음수 = 벌리기(크게), 양수 = 오므리기(작게)
|
||||
const delta = -e.deltaY * 0.8;
|
||||
setThumbSize(thumbSize + delta);
|
||||
}, { passive: false });
|
||||
|
||||
// ── 썸네일 크기 변경 ─────────────────────────────────
|
||||
function setThumbSize(size) {
|
||||
thumbSize = Math.round(Math.max(THUMB_MIN, Math.min(THUMB_MAX, size)));
|
||||
document.documentElement.style.setProperty('--thumb-size', thumbSize + 'px');
|
||||
showThumbSizeHint(thumbSize);
|
||||
}
|
||||
|
||||
function showThumbSizeHint(size) {
|
||||
thumbSizeHint.textContent = `${size}px`;
|
||||
thumbSizeHint.classList.add('show');
|
||||
clearTimeout(thumbHintTimer);
|
||||
thumbHintTimer = setTimeout(() => thumbSizeHint.classList.remove('show'), 1000);
|
||||
}
|
||||
|
||||
// ── 폴더 열기 ────────────────────────────────────────
|
||||
async function openFolder() {
|
||||
const folder = await window.api.selectFolder();
|
||||
if (!folder) return;
|
||||
currentFolder = folder;
|
||||
dirPath.textContent = folder;
|
||||
showLoading('이미지 목록 불러오는 중...');
|
||||
const list = await window.api.listImages(folder);
|
||||
hideLoading();
|
||||
if (!list.length) {
|
||||
setStatus('이미지 파일 없음', false);
|
||||
showToast('⚠️ 이미지 파일이 없습니다', '#f76a6a', '#0a0a0a');
|
||||
return;
|
||||
}
|
||||
files = list;
|
||||
selectedIdxs.clear();
|
||||
setStatus(`${files.length}개 파일 로드됨`, true);
|
||||
await renderGrid();
|
||||
updatePreview();
|
||||
btnRename.disabled = false;
|
||||
btnReveal.disabled = false;
|
||||
}
|
||||
|
||||
// ── 그리드 렌더링 ────────────────────────────────────
|
||||
async function renderGrid() {
|
||||
grid.innerHTML = '';
|
||||
emptyState.style.display = 'none';
|
||||
grid.style.display = 'grid';
|
||||
fileCount.textContent = `${files.length}개 파일`;
|
||||
updateSelCount();
|
||||
|
||||
showLoading(`썸네일 로딩 중... (0/${files.length})`);
|
||||
|
||||
const BATCH = 10;
|
||||
for (let i = 0; i < files.length; i += BATCH) {
|
||||
const batch = files.slice(i, i + BATCH);
|
||||
const results = await Promise.all(batch.map(f => window.api.readImage(f.path)));
|
||||
results.forEach((dataUrl, bi) => {
|
||||
const idx = i + bi;
|
||||
grid.appendChild(createCard(files[idx], idx, dataUrl));
|
||||
});
|
||||
loadingText.textContent = `썸네일 로딩 중... (${Math.min(i + BATCH, files.length)}/${files.length})`;
|
||||
}
|
||||
|
||||
hideLoading();
|
||||
refreshCardSelection();
|
||||
updateNumberBadges();
|
||||
updateNewNameLabels();
|
||||
}
|
||||
|
||||
// ── 카드 생성 ────────────────────────────────────────
|
||||
function createCard(file, idx, dataUrl) {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card';
|
||||
card.dataset.idx = idx;
|
||||
card.dataset.filepath = file.path;
|
||||
card.draggable = true;
|
||||
|
||||
const numBadge = document.createElement('div');
|
||||
numBadge.className = 'card-num';
|
||||
numBadge.textContent = `#${idx + 1}`;
|
||||
|
||||
const checkBadge = document.createElement('div');
|
||||
checkBadge.className = 'card-check';
|
||||
checkBadge.textContent = '✓';
|
||||
|
||||
let thumb;
|
||||
if (dataUrl) {
|
||||
thumb = document.createElement('img');
|
||||
thumb.className = 'card-thumb';
|
||||
thumb.src = dataUrl;
|
||||
thumb.alt = file.name;
|
||||
thumb.draggable = false;
|
||||
} else {
|
||||
thumb = document.createElement('div');
|
||||
thumb.className = 'card-thumb-placeholder';
|
||||
thumb.textContent = '🖼️';
|
||||
}
|
||||
|
||||
const body = document.createElement('div');
|
||||
body.className = 'card-body';
|
||||
|
||||
const nameEl = document.createElement('div');
|
||||
nameEl.className = 'card-name';
|
||||
nameEl.title = file.name;
|
||||
nameEl.textContent = file.name;
|
||||
|
||||
const newNameEl = document.createElement('div');
|
||||
newNameEl.className = 'card-new-name';
|
||||
|
||||
body.appendChild(nameEl);
|
||||
body.appendChild(newNameEl);
|
||||
card.appendChild(numBadge);
|
||||
card.appendChild(checkBadge);
|
||||
card.appendChild(thumb);
|
||||
card.appendChild(body);
|
||||
|
||||
card.addEventListener('dragstart', onCardDragStart);
|
||||
card.addEventListener('dragover', onCardDragOver);
|
||||
card.addEventListener('dragenter', onCardDragEnter);
|
||||
card.addEventListener('dragleave', onCardDragLeave);
|
||||
card.addEventListener('drop', onCardDrop);
|
||||
card.addEventListener('dragend', onCardDragEnd);
|
||||
card.addEventListener('click', onCardClick);
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════
|
||||
// Command+클릭 → 개별 토글 선택
|
||||
// ═══════════════════════════════════════════════════════
|
||||
|
||||
function onCardClick(e) {
|
||||
if (!e.metaKey) return;
|
||||
e.stopPropagation();
|
||||
const idx = parseInt(this.dataset.idx);
|
||||
if (selectedIdxs.has(idx)) {
|
||||
selectedIdxs.delete(idx);
|
||||
} else {
|
||||
selectedIdxs.add(idx);
|
||||
}
|
||||
refreshCardSelection();
|
||||
updateSelCount();
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════
|
||||
// RUBBER-BAND 다중 선택
|
||||
// ═══════════════════════════════════════════════════════
|
||||
|
||||
function onRubberBandStart(e) {
|
||||
if (e.target.closest('.card')) return;
|
||||
if (e.target.closest('button, input, label')) return;
|
||||
if (e.button !== 0) return;
|
||||
|
||||
rbActive = true;
|
||||
rbStartX = e.clientX;
|
||||
rbStartY = e.clientY;
|
||||
|
||||
rubberBand.style.display = 'block';
|
||||
rubberBand.style.left = rbStartX + 'px';
|
||||
rubberBand.style.top = rbStartY + 'px';
|
||||
rubberBand.style.width = '0px';
|
||||
rubberBand.style.height = '0px';
|
||||
|
||||
if (!e.shiftKey) {
|
||||
selectedIdxs.clear();
|
||||
refreshCardSelection();
|
||||
}
|
||||
}
|
||||
|
||||
function onRubberBandMove(e) {
|
||||
if (!rbActive) return;
|
||||
|
||||
const curX = e.clientX;
|
||||
const curY = e.clientY;
|
||||
|
||||
const left = Math.min(rbStartX, curX);
|
||||
const top = Math.min(rbStartY, curY);
|
||||
const width = Math.abs(curX - rbStartX);
|
||||
const height = Math.abs(curY - rbStartY);
|
||||
|
||||
rubberBand.style.left = left + 'px';
|
||||
rubberBand.style.top = top + 'px';
|
||||
rubberBand.style.width = width + 'px';
|
||||
rubberBand.style.height = height + 'px';
|
||||
|
||||
// rubber-band 사각형 (viewport 기준)
|
||||
const selRect = { left, top, right: left + width, bottom: top + height };
|
||||
|
||||
Array.from(grid.children).forEach((card, i) => {
|
||||
const cr = card.getBoundingClientRect();
|
||||
const overlaps = !(cr.right < selRect.left ||
|
||||
cr.left > selRect.right ||
|
||||
cr.bottom < selRect.top ||
|
||||
cr.top > selRect.bottom);
|
||||
if (overlaps) {
|
||||
selectedIdxs.add(i);
|
||||
} else if (!e.shiftKey) {
|
||||
selectedIdxs.delete(i);
|
||||
}
|
||||
});
|
||||
|
||||
refreshCardSelection();
|
||||
updateSelCount();
|
||||
}
|
||||
|
||||
function onRubberBandEnd() {
|
||||
if (!rbActive) return;
|
||||
rbActive = false;
|
||||
rubberBand.style.display = 'none';
|
||||
updateSelCount();
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════
|
||||
// 드래그 앤 드롭
|
||||
// ═══════════════════════════════════════════════════════
|
||||
|
||||
function onCardDragStart(e) {
|
||||
const idx = parseInt(this.dataset.idx);
|
||||
|
||||
if (selectedIdxs.has(idx) && selectedIdxs.size > 1) {
|
||||
// 다중 드래그
|
||||
dragMode = 'multi';
|
||||
dragSrcIdx = idx;
|
||||
|
||||
selectedIdxs.forEach(i => {
|
||||
const card = getCardEl(i);
|
||||
if (card) card.classList.add('multi-dragging');
|
||||
});
|
||||
|
||||
showDragGhost(e, `📦 ${selectedIdxs.size}개 이동 중`);
|
||||
const img = new Image();
|
||||
img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
|
||||
e.dataTransfer.setDragImage(img, 0, 0);
|
||||
|
||||
} else {
|
||||
// 단일 드래그
|
||||
dragMode = 'single';
|
||||
dragSrcIdx = idx;
|
||||
this.classList.add('dragging');
|
||||
selectedIdxs.clear();
|
||||
refreshCardSelection();
|
||||
}
|
||||
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
e.dataTransfer.setData('text/plain', String(idx));
|
||||
}
|
||||
|
||||
function onCardDragOver(e) {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
}
|
||||
|
||||
function onCardDragEnter(e) {
|
||||
e.preventDefault();
|
||||
const idx = parseInt(this.dataset.idx);
|
||||
const isSource = dragMode === 'single' ? idx === dragSrcIdx : selectedIdxs.has(idx);
|
||||
if (!isSource) this.classList.add('drag-over');
|
||||
}
|
||||
|
||||
function onCardDragLeave() {
|
||||
this.classList.remove('drag-over');
|
||||
}
|
||||
|
||||
function onCardDrop(e) {
|
||||
e.preventDefault();
|
||||
this.classList.remove('drag-over');
|
||||
const targetIdx = parseInt(this.dataset.idx);
|
||||
|
||||
if (dragMode === 'single') {
|
||||
if (dragSrcIdx === null || dragSrcIdx === targetIdx) return;
|
||||
moveSingle(dragSrcIdx, targetIdx);
|
||||
} else if (dragMode === 'multi') {
|
||||
if (selectedIdxs.has(targetIdx)) return;
|
||||
moveMulti(targetIdx);
|
||||
}
|
||||
}
|
||||
|
||||
function onCardDragEnd() {
|
||||
stopAutoScroll();
|
||||
hideDragGhost();
|
||||
document.querySelectorAll('.card').forEach(c => {
|
||||
c.classList.remove('dragging', 'multi-dragging', 'drag-over');
|
||||
});
|
||||
dragMode = null;
|
||||
dragSrcIdx = null;
|
||||
}
|
||||
|
||||
// ── window-level dragover: 고스트 위치 + 자동 스크롤 ──
|
||||
function onWindowDragOver(e) {
|
||||
if (!dragMode) return;
|
||||
|
||||
if (dragMode === 'multi') moveDragGhost(e);
|
||||
trackAutoScroll(e.clientY);
|
||||
}
|
||||
|
||||
// ── 단일 이동 ─────────────────────────────────────────
|
||||
function moveSingle(srcIdx, targetIdx) {
|
||||
const [moved] = files.splice(srcIdx, 1);
|
||||
files.splice(targetIdx, 0, moved);
|
||||
reorderGridSingle(srcIdx, targetIdx);
|
||||
updateNumberBadges();
|
||||
updateNewNameLabels();
|
||||
}
|
||||
|
||||
function reorderGridSingle(srcIdx, targetIdx) {
|
||||
const cards = Array.from(grid.children);
|
||||
const srcCard = cards[srcIdx];
|
||||
const targetCard = cards[targetIdx];
|
||||
if (srcIdx < targetIdx) {
|
||||
grid.insertBefore(srcCard, targetCard.nextSibling);
|
||||
} else {
|
||||
grid.insertBefore(srcCard, targetCard);
|
||||
}
|
||||
Array.from(grid.children).forEach((c, i) => { c.dataset.idx = i; });
|
||||
}
|
||||
|
||||
// ── 다중 이동 ─────────────────────────────────────────
|
||||
function moveMulti(targetIdx) {
|
||||
const sortedSel = [...selectedIdxs].sort((a, b) => a - b);
|
||||
const movedFiles = sortedSel.map(i => files[i]);
|
||||
|
||||
const removedBefore = sortedSel.filter(i => i < targetIdx).length;
|
||||
const adjustedTarget = targetIdx - removedBefore;
|
||||
|
||||
for (let i = sortedSel.length - 1; i >= 0; i--) {
|
||||
files.splice(sortedSel[i], 1);
|
||||
}
|
||||
files.splice(adjustedTarget, 0, ...movedFiles);
|
||||
|
||||
const newSelected = new Set();
|
||||
for (let i = 0; i < movedFiles.length; i++) {
|
||||
newSelected.add(adjustedTarget + i);
|
||||
}
|
||||
selectedIdxs = newSelected;
|
||||
|
||||
rerenderCardsInPlace();
|
||||
updateNumberBadges();
|
||||
updateNewNameLabels();
|
||||
refreshCardSelection();
|
||||
updateSelCount();
|
||||
}
|
||||
|
||||
// ── cards를 files[] 순서에 맞게 DOM 재정렬 (이미지 재로딩 없이) ──
|
||||
function rerenderCardsInPlace() {
|
||||
const cardsByPath = new Map();
|
||||
Array.from(grid.children).forEach(card => {
|
||||
cardsByPath.set(card.dataset.filepath, card);
|
||||
});
|
||||
|
||||
grid.innerHTML = '';
|
||||
files.forEach((f, idx) => {
|
||||
const card = cardsByPath.get(f.path);
|
||||
if (card) {
|
||||
card.dataset.idx = idx;
|
||||
grid.appendChild(card);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════
|
||||
// 자동 스크롤 (드래그 중 화면 상/하단 10% 진입 시)
|
||||
// ═══════════════════════════════════════════════════════
|
||||
|
||||
function trackAutoScroll(clientY) {
|
||||
const vh = window.innerHeight;
|
||||
const topLine = vh * 0.1;
|
||||
const botLine = vh * 0.9;
|
||||
|
||||
if (clientY < topLine) {
|
||||
// 화면 상단 10% — 위로 스크롤
|
||||
// ratio: 0 = 화면 최상단(빠름), 1 = 10% 선(느림)
|
||||
const ratio = clientY / topLine;
|
||||
// 속도: vh px/s (최상단) → vh/5 px/s (10% 선)
|
||||
const speed = vh * (1 - 0.8 * ratio);
|
||||
startAutoScroll(-speed);
|
||||
|
||||
} else if (clientY > botLine) {
|
||||
// 화면 하단 10% — 아래로 스크롤
|
||||
// ratio: 0 = 90% 선(느림), 1 = 화면 최하단(빠름)
|
||||
const ratio = (clientY - botLine) / (vh * 0.1);
|
||||
const speed = vh * (0.2 + 0.8 * ratio);
|
||||
startAutoScroll(speed);
|
||||
|
||||
} else {
|
||||
stopAutoScroll();
|
||||
}
|
||||
}
|
||||
|
||||
function startAutoScroll(speed) {
|
||||
autoScrollSpeed = speed;
|
||||
if (!autoScrollRAF) {
|
||||
lastScrollTs = performance.now();
|
||||
autoScrollRAF = requestAnimationFrame(tickAutoScroll);
|
||||
}
|
||||
}
|
||||
|
||||
function stopAutoScroll() {
|
||||
autoScrollSpeed = 0;
|
||||
if (autoScrollRAF) {
|
||||
cancelAnimationFrame(autoScrollRAF);
|
||||
autoScrollRAF = null;
|
||||
}
|
||||
}
|
||||
|
||||
function tickAutoScroll(now) {
|
||||
if (!dragMode) { stopAutoScroll(); return; }
|
||||
const dt = (now - lastScrollTs) / 1000;
|
||||
lastScrollTs = now;
|
||||
gridContainer.scrollTop += autoScrollSpeed * dt;
|
||||
autoScrollRAF = requestAnimationFrame(tickAutoScroll);
|
||||
}
|
||||
|
||||
// ═══════════════════════════════════════════════════════
|
||||
// UI 업데이트 헬퍼
|
||||
// ═══════════════════════════════════════════════════════
|
||||
|
||||
function refreshCardSelection() {
|
||||
Array.from(grid.children).forEach((card, i) => {
|
||||
card.classList.toggle('selected', selectedIdxs.has(i));
|
||||
});
|
||||
}
|
||||
|
||||
function updateNumberBadges() {
|
||||
Array.from(grid.children).forEach((card, i) => {
|
||||
const badge = card.querySelector('.card-num');
|
||||
if (badge) badge.textContent = `#${i + 1}`;
|
||||
card.dataset.idx = i;
|
||||
});
|
||||
}
|
||||
|
||||
function updateNewNameLabels() {
|
||||
const prefix = inputPrefix.value.trim() || 'photo';
|
||||
const digits = Math.max(1, Math.min(6, parseInt(inputDigits.value) || 3));
|
||||
Array.from(grid.children).forEach((card, i) => {
|
||||
const el = card.querySelector('.card-new-name');
|
||||
if (!el) return;
|
||||
const file = files[i];
|
||||
if (!file) return;
|
||||
const ext = file.name.split('.').pop().toLowerCase();
|
||||
el.textContent = `→ ${prefix}_${String(i + 1).padStart(digits, '0')}.${ext}`;
|
||||
});
|
||||
}
|
||||
|
||||
function updateSelCount() {
|
||||
const n = selectedIdxs.size;
|
||||
if (n > 0) {
|
||||
selCount.textContent = `${n}개 선택됨`;
|
||||
selCount.classList.add('visible');
|
||||
} else {
|
||||
selCount.textContent = '';
|
||||
selCount.classList.remove('visible');
|
||||
}
|
||||
}
|
||||
|
||||
function getCardEl(idx) {
|
||||
return grid.querySelector(`.card[data-idx="${idx}"]`);
|
||||
}
|
||||
|
||||
// ── 드래그 고스트 배지 ────────────────────────────────
|
||||
function showDragGhost(e, text) {
|
||||
dragGhostEl.textContent = text;
|
||||
dragGhostEl.style.display = 'block';
|
||||
moveDragGhost(e);
|
||||
}
|
||||
|
||||
function moveDragGhost(e) {
|
||||
dragGhostEl.style.left = (e.clientX + 16) + 'px';
|
||||
dragGhostEl.style.top = (e.clientY - 14) + 'px';
|
||||
}
|
||||
|
||||
function hideDragGhost() {
|
||||
dragGhostEl.style.display = 'none';
|
||||
}
|
||||
|
||||
// ── 정렬 ─────────────────────────────────────────────
|
||||
async function sortFiles(mode) {
|
||||
if (!files.length) return;
|
||||
if (mode === 'name') files.sort((a, b) => a.name.localeCompare(b.name, 'ko'));
|
||||
else files.sort((a, b) => a.mtime - b.mtime);
|
||||
selectedIdxs.clear();
|
||||
await renderGrid();
|
||||
setStatus(`${mode === 'name' ? '이름순' : '날짜순'}으로 정렬됨`, true);
|
||||
}
|
||||
|
||||
// ── 미리보기 ─────────────────────────────────────────
|
||||
function updatePreview() {
|
||||
const prefix = inputPrefix.value.trim() || 'photo';
|
||||
const digits = Math.max(1, Math.min(6, parseInt(inputDigits.value) || 3));
|
||||
const ext = files.length ? files[0].name.split('.').pop().toLowerCase() : 'jpg';
|
||||
previewName.textContent = `${prefix}_${'1'.padStart(digits, '0')}.${ext}`;
|
||||
updateNewNameLabels();
|
||||
}
|
||||
|
||||
// ── 이름 변경 ────────────────────────────────────────
|
||||
async function doRename() {
|
||||
if (!files.length || !currentFolder) return;
|
||||
const prefix = inputPrefix.value.trim() || 'photo';
|
||||
const digits = Math.max(1, Math.min(6, parseInt(inputDigits.value) || 3));
|
||||
|
||||
const examples = files.slice(0, 3).map((f, i) => {
|
||||
const ext = f.name.split('.').pop().toLowerCase();
|
||||
return `${f.name} → ${prefix}_${String(i + 1).padStart(digits, '0')}.${ext}`;
|
||||
}).join('\n');
|
||||
const more = files.length > 3 ? `\n... 외 ${files.length - 3}개` : '';
|
||||
|
||||
if (!confirm(`📂 ${files.length}개 파일을 이름 변경합니다:\n\n${examples}${more}\n\n계속하시겠습니까?`)) return;
|
||||
|
||||
showLoading('파일 이름 변경 중...');
|
||||
setStatus('이름 변경 중...', false);
|
||||
|
||||
try {
|
||||
const result = await window.api.renameFiles({ folderPath: currentFolder, files, prefix, digits });
|
||||
hideLoading();
|
||||
if (result.errors.length) {
|
||||
alert('일부 오류:\n' + result.errors.join('\n'));
|
||||
} else {
|
||||
showToast(`✅ ${result.renamed.length}개 파일 이름 변경 완료!`);
|
||||
setStatus(`${result.renamed.length}개 파일 이름 변경 완료`, true);
|
||||
}
|
||||
const newList = await window.api.listImages(currentFolder);
|
||||
files = newList;
|
||||
selectedIdxs.clear();
|
||||
await renderGrid();
|
||||
} catch (e) {
|
||||
hideLoading();
|
||||
alert('오류 발생: ' + e.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ── 유틸 ─────────────────────────────────────────────
|
||||
function showLoading(msg = '처리 중...') {
|
||||
loadingText.textContent = msg;
|
||||
loading.classList.add('show');
|
||||
}
|
||||
function hideLoading() {
|
||||
loading.classList.remove('show');
|
||||
}
|
||||
function setStatus(msg, ready) {
|
||||
statusText.textContent = msg;
|
||||
statusDot.className = 'status-dot' + (ready ? ' ready' : '');
|
||||
}
|
||||
function showToast(msg, bg = '#6af7a0', color = '#0a2a1a') {
|
||||
toast.textContent = msg;
|
||||
toast.style.background = bg;
|
||||
toast.style.color = color;
|
||||
toast.classList.add('show');
|
||||
setTimeout(() => toast.classList.remove('show'), 3000);
|
||||
}
|
||||
Reference in New Issue
Block a user