769 lines
24 KiB
JavaScript
769 lines
24 KiB
JavaScript
|
/**
|
|||
|
|
* 图片幻灯片 - 主逻辑
|
|||
|
|
*
|
|||
|
|
* 关键设计：
|
|||
|
|
* - 两张 .slide 重叠，通过 .active 类切换显示，CSS 处理动画
|
|||
|
|
* - 持久化：DirectoryHandle 存到 IndexedDB，普通配置存到 localStorage
|
|||
|
|
* - 动画时长通过 --anim-duration CSS 变量控制，slide 动画方向由 --enter-from / --exit-to 控制
|
|||
|
|
*
|
|||
|
|
* 浏览器要求：基于 Chromium 的浏览器，且页面运行在 HTTPS 或 localhost 下。
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
(function () {
|
|||
|
|
'use strict';
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// DOM 引用
|
|||
|
|
// ============================================================
|
|||
|
|
const $ = (id) => document.getElementById(id);
|
|||
|
|
|
|||
|
|
const stage = $('stage');
|
|||
|
|
const slideshow = $('slideshow');
|
|||
|
|
const slideA = $('slideA');
|
|||
|
|
const slideB = $('slideB');
|
|||
|
|
const emptyHint = $('emptyHint');
|
|||
|
|
const loadingHint = $('loadingHint');
|
|||
|
|
const directoryListEl = $('directoryList');
|
|||
|
|
const settingsModal = $('settingsModal');
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 全局状态
|
|||
|
|
// ============================================================
|
|||
|
|
/**
|
|||
|
|
* 应用状态对象
|
|||
|
|
* @type {{
|
|||
|
|
* config: {interval: number, animation: string, duration: number, random: boolean},
|
|||
|
|
* directories: Array<{handle: FileSystemDirectoryHandle, name: string, status: string, imageCount: number}>,
|
|||
|
|
* images: Array<{url: string, name: string, size: number}>,
|
|||
|
|
* currentIndex: number,
|
|||
|
|
* isPlaying: boolean,
|
|||
|
|
* timerId: number|null,
|
|||
|
|
* activeSlide: 'A' | 'B'
|
|||
|
|
* }}
|
|||
|
|
*/
|
|||
|
|
const state = {
|
|||
|
|
config: { ...DEFAULT_CONFIG },
|
|||
|
|
directories: [],
|
|||
|
|
images: [],
|
|||
|
|
currentIndex: -1,
|
|||
|
|
isPlaying: true,
|
|||
|
|
timerId: null,
|
|||
|
|
activeSlide: 'A',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// IndexedDB：用于存储 DirectoryHandle
|
|||
|
|
// DirectoryHandle 不能被序列化到 localStorage，必须放入 IndexedDB
|
|||
|
|
// ============================================================
|
|||
|
|
/** @type {Promise<IDBDatabase> | null} */
|
|||
|
|
let dbPromise = null;
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 打开（首次访问时自动创建）IndexedDB 数据库。
|
|||
|
|
* @returns {Promise<IDBDatabase>}
|
|||
|
|
*/
|
|||
|
|
function openDB() {
|
|||
|
|
if (dbPromise) return dbPromise;
|
|||
|
|
dbPromise = new Promise((resolve, reject) => {
|
|||
|
|
const req = indexedDB.open(DB_CONFIG.name, DB_CONFIG.version);
|
|||
|
|
req.onupgradeneeded = (event) => {
|
|||
|
|
const db = event.target.result;
|
|||
|
|
if (!db.objectStoreNames.contains(DB_CONFIG.store)) {
|
|||
|
|
db.createObjectStore(DB_CONFIG.store, {
|
|||
|
|
keyPath: 'id',
|
|||
|
|
autoIncrement: true,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
req.onsuccess = () => resolve(req.result);
|
|||
|
|
req.onerror = () => reject(req.error);
|
|||
|
|
});
|
|||
|
|
return dbPromise;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 把当前所有目录句柄覆盖保存到 IndexedDB。
|
|||
|
|
* @returns {Promise<void>}
|
|||
|
|
*/
|
|||
|
|
async function persistHandles() {
|
|||
|
|
try {
|
|||
|
|
const db = await openDB();
|
|||
|
|
await new Promise((resolve, reject) => {
|
|||
|
|
const tx = db.transaction(DB_CONFIG.store, 'readwrite');
|
|||
|
|
const store = tx.objectStore(DB_CONFIG.store);
|
|||
|
|
store.clear();
|
|||
|
|
state.directories.forEach((d) => store.add({ handle: d.handle }));
|
|||
|
|
tx.oncomplete = () => resolve();
|
|||
|
|
tx.onerror = () => reject(tx.error);
|
|||
|
|
});
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('保存目录句柄失败：', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 从 IndexedDB 恢复 DirectoryHandle 列表。
|
|||
|
|
* @returns {Promise<FileSystemDirectoryHandle[]>}
|
|||
|
|
*/
|
|||
|
|
async function loadHandles() {
|
|||
|
|
const db = await openDB();
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
const tx = db.transaction(DB_CONFIG.store, 'readonly');
|
|||
|
|
const store = tx.objectStore(DB_CONFIG.store);
|
|||
|
|
const req = store.getAll();
|
|||
|
|
req.onsuccess = () => resolve(req.result.map((r) => r.handle));
|
|||
|
|
req.onerror = () => reject(req.error);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 普通配置持久化（localStorage）
|
|||
|
|
// ============================================================
|
|||
|
|
/** 把当前 state.config 写入 localStorage。 */
|
|||
|
|
function saveConfig() {
|
|||
|
|
try {
|
|||
|
|
localStorage.setItem(
|
|||
|
|
STORAGE_KEY_CONFIG,
|
|||
|
|
JSON.stringify(state.config),
|
|||
|
|
);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('保存配置失败：', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 启动时从 localStorage 读取配置。 */
|
|||
|
|
function loadConfig() {
|
|||
|
|
try {
|
|||
|
|
const saved = localStorage.getItem(STORAGE_KEY_CONFIG);
|
|||
|
|
if (!saved) return;
|
|||
|
|
const parsed = JSON.parse(saved);
|
|||
|
|
// 只保留已知的合法字段，避免被异常数据污染
|
|||
|
|
state.config = {
|
|||
|
|
interval: clampInt(
|
|||
|
|
parsed.interval,
|
|||
|
|
DEFAULT_CONFIG.interval,
|
|||
|
|
500,
|
|||
|
|
30000,
|
|||
|
|
),
|
|||
|
|
animation: ANIMATION_TYPES.includes(parsed.animation)
|
|||
|
|
? parsed.animation
|
|||
|
|
: DEFAULT_CONFIG.animation,
|
|||
|
|
duration: clampInt(parsed.duration, DEFAULT_CONFIG.duration, 0, 3000),
|
|||
|
|
random: Boolean(parsed.random),
|
|||
|
|
};
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('加载配置失败：', e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** @param {*} v @param {number} fallback @param {number} min @param {number} max */
|
|||
|
|
function clampInt(v, fallback, min, max) {
|
|||
|
|
const n = parseInt(v, 10);
|
|||
|
|
if (!Number.isFinite(n)) return fallback;
|
|||
|
|
return Math.max(min, Math.min(max, n));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// File System Access API
|
|||
|
|
// ============================================================
|
|||
|
|
/**
|
|||
|
|
* 确保对某个 DirectoryHandle 拥有读权限。
|
|||
|
|
* 首次选择目录时会直接被浏览器授权；之后重新打开页面需要重新请求权限。
|
|||
|
|
* @param {FileSystemDirectoryHandle} handle
|
|||
|
|
* @returns {Promise<'granted' | 'prompt' | 'denied'>}
|
|||
|
|
*/
|
|||
|
|
async function ensurePermission(handle) {
|
|||
|
|
if (!handle || typeof handle.queryPermission !== 'function') {
|
|||
|
|
return 'granted';
|
|||
|
|
}
|
|||
|
|
const opts = { mode: 'read' };
|
|||
|
|
try {
|
|||
|
|
const cur = await handle.queryPermission(opts);
|
|||
|
|
if (cur === 'granted') return 'granted';
|
|||
|
|
return await handle.requestPermission(opts);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('请求权限失败：', e);
|
|||
|
|
return 'denied';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 递归读取目录中的图片到 out 数组。
|
|||
|
|
* 会跳过以 "." 开头的隐藏目录。
|
|||
|
|
* @param {FileSystemDirectoryHandle} handle
|
|||
|
|
* @param {Array<{url: string, name: string, size: number}>} out
|
|||
|
|
*/
|
|||
|
|
async function readDirectory(handle, out) {
|
|||
|
|
// entries() 在某些 Chromium 版本下更兼容；这里用异步迭代器
|
|||
|
|
for await (const entry of handle.values()) {
|
|||
|
|
try {
|
|||
|
|
if (entry.kind === 'file') {
|
|||
|
|
const lower = entry.name.toLowerCase();
|
|||
|
|
if (IMAGE_EXTENSIONS.some((ext) => lower.endsWith('.' + ext))) {
|
|||
|
|
const file = await entry.getFile();
|
|||
|
|
out.push({
|
|||
|
|
url: URL.createObjectURL(file),
|
|||
|
|
name: entry.name,
|
|||
|
|
size: file.size,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} else if (entry.kind === 'directory') {
|
|||
|
|
// 跳过隐藏目录，避免读取大量无用文件
|
|||
|
|
if (entry.name && !entry.name.startsWith('.')) {
|
|||
|
|
await readDirectory(entry, out);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
// 单个文件/子目录失败不影响整体
|
|||
|
|
console.warn('读取条目失败：', entry.name, e);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 图片加载入口
|
|||
|
|
// ============================================================
|
|||
|
|
/**
|
|||
|
|
* 读取所有已添加目录中的图片，刷新 state.images 并触发首张显示。
|
|||
|
|
*/
|
|||
|
|
async function loadAllImages() {
|
|||
|
|
// 加载期间隐藏空状态提示，避免与加载提示重叠
|
|||
|
|
emptyHint.hidden = true;
|
|||
|
|
showLoading(true);
|
|||
|
|
|
|||
|
|
// 释放旧的 blob URL，避免内存泄漏
|
|||
|
|
state.images.forEach((img) => img.url && URL.revokeObjectURL(img.url));
|
|||
|
|
state.images = [];
|
|||
|
|
|
|||
|
|
const allImages = [];
|
|||
|
|
|
|||
|
|
for (const dir of state.directories) {
|
|||
|
|
const perm = await ensurePermission(dir.handle);
|
|||
|
|
if (perm !== 'granted') {
|
|||
|
|
dir.status = 'denied';
|
|||
|
|
dir.imageCount = 0;
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const list = [];
|
|||
|
|
await readDirectory(dir.handle, list);
|
|||
|
|
dir.imageCount = list.length;
|
|||
|
|
dir.status = 'ok';
|
|||
|
|
allImages.push(...list);
|
|||
|
|
} catch (e) {
|
|||
|
|
console.error('读取目录失败：', dir.name, e);
|
|||
|
|
dir.status = 'error';
|
|||
|
|
dir.imageCount = 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
state.images = allImages;
|
|||
|
|
state.currentIndex = -1;
|
|||
|
|
state.activeSlide = 'A';
|
|||
|
|
slideA.classList.remove('active');
|
|||
|
|
slideB.classList.remove('active');
|
|||
|
|
slideA.style.backgroundImage = '';
|
|||
|
|
slideB.style.backgroundImage = '';
|
|||
|
|
|
|||
|
|
showLoading(false);
|
|||
|
|
renderDirectoryList();
|
|||
|
|
|
|||
|
|
if (state.images.length > 0) {
|
|||
|
|
nextImage();
|
|||
|
|
} else {
|
|||
|
|
emptyHint.hidden = false;
|
|||
|
|
stopTimer();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 幻灯片显示
|
|||
|
|
// ============================================================
|
|||
|
|
/**
|
|||
|
|
* 在两张 slide 中切换显示指定索引的图片。
|
|||
|
|
* - 先把 nextSlide 用 .entering 类临时定位到进入位置（无过渡）
|
|||
|
|
* - 强制 reflow 后清除 .entering 并切换 .active，让 CSS 接管过渡
|
|||
|
|
* @param {number} index
|
|||
|
|
*/
|
|||
|
|
function showImage(index) {
|
|||
|
|
if (state.images.length === 0) return;
|
|||
|
|
const url = state.images[index].url;
|
|||
|
|
const currentSlide = state.activeSlide === 'A' ? slideA : slideB;
|
|||
|
|
const nextSlide = state.activeSlide === 'A' ? slideB : slideA;
|
|||
|
|
|
|||
|
|
nextSlide.style.backgroundImage = `url("${url}")`;
|
|||
|
|
|
|||
|
|
// slide 动画方向交替（A→B 时下一张从右进，B→A 时从左进）
|
|||
|
|
const dir = state.activeSlide === 'A' ? 1 : -1;
|
|||
|
|
slideshow.style.setProperty('--enter-from', `${dir * 100}%`);
|
|||
|
|
slideshow.style.setProperty('--exit-to', `${-dir * 100}%`);
|
|||
|
|
|
|||
|
|
// 把下一张临时定位到"进入位置"，并关掉过渡
|
|||
|
|
nextSlide.classList.remove('active');
|
|||
|
|
nextSlide.classList.add('entering');
|
|||
|
|
|
|||
|
|
// 强制 reflow，让 .entering 的样式生效
|
|||
|
|
void nextSlide.offsetWidth;
|
|||
|
|
|
|||
|
|
// 启动过渡到 active 位置
|
|||
|
|
nextSlide.classList.remove('entering');
|
|||
|
|
nextSlide.classList.add('active');
|
|||
|
|
currentSlide.classList.remove('active');
|
|||
|
|
|
|||
|
|
state.currentIndex = index;
|
|||
|
|
state.activeSlide = state.activeSlide === 'A' ? 'B' : 'A';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 切换到下一张（根据 config.random 决定顺序）。 */
|
|||
|
|
function nextImage() {
|
|||
|
|
if (state.images.length === 0) return;
|
|||
|
|
let next;
|
|||
|
|
if (state.config.random) {
|
|||
|
|
// 避免连续显示同一张
|
|||
|
|
do {
|
|||
|
|
next = Math.floor(Math.random() * state.images.length);
|
|||
|
|
} while (
|
|||
|
|
state.images.length > 1 &&
|
|||
|
|
next === state.currentIndex
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
if (state.currentIndex === -1) {
|
|||
|
|
next = 0;
|
|||
|
|
} else {
|
|||
|
|
next = (state.currentIndex + 1) % state.images.length;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
showImage(next);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 切换到上一张。 */
|
|||
|
|
function prevImage() {
|
|||
|
|
if (state.images.length === 0) return;
|
|||
|
|
const prev = (state.currentIndex - 1 + state.images.length) % state.images.length;
|
|||
|
|
showImage(prev);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 播放控制
|
|||
|
|
// ============================================================
|
|||
|
|
/** 启动自动切换定时器（如果条件允许）。 */
|
|||
|
|
function startTimer() {
|
|||
|
|
stopTimer();
|
|||
|
|
if (!state.isPlaying || state.images.length === 0) return;
|
|||
|
|
const interval = Math.max(state.config.interval, state.config.duration + 100);
|
|||
|
|
state.timerId = setInterval(nextImage, interval);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 停止自动切换定时器。 */
|
|||
|
|
function stopTimer() {
|
|||
|
|
if (state.timerId !== null) {
|
|||
|
|
clearInterval(state.timerId);
|
|||
|
|
state.timerId = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 切换播放/暂停。 */
|
|||
|
|
function togglePlay() {
|
|||
|
|
state.isPlaying = !state.isPlaying;
|
|||
|
|
$('iconPlayPause').textContent = state.isPlaying ? '⏸' : '▶';
|
|||
|
|
if (state.isPlaying) {
|
|||
|
|
startTimer();
|
|||
|
|
} else {
|
|||
|
|
stopTimer();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 全屏
|
|||
|
|
// ============================================================
|
|||
|
|
/** 切换全屏状态。 */
|
|||
|
|
function toggleFullscreen() {
|
|||
|
|
const el = stage;
|
|||
|
|
if (!document.fullscreenElement) {
|
|||
|
|
const fn =
|
|||
|
|
el.requestFullscreen ||
|
|||
|
|
el.webkitRequestFullscreen ||
|
|||
|
|
el.msRequestFullscreen;
|
|||
|
|
if (fn) fn.call(el);
|
|||
|
|
} else {
|
|||
|
|
const fn =
|
|||
|
|
document.exitFullscreen ||
|
|||
|
|
document.webkitExitFullscreen ||
|
|||
|
|
document.msExitFullscreen;
|
|||
|
|
if (fn) fn.call(document);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 设置面板
|
|||
|
|
// ============================================================
|
|||
|
|
/** 把 state.config 同步到表单控件。 */
|
|||
|
|
function syncSettingsForm() {
|
|||
|
|
$('inputInterval').value = state.config.interval;
|
|||
|
|
$('inputIntervalNum').value = state.config.interval;
|
|||
|
|
$('selectAnimation').value = state.config.animation;
|
|||
|
|
$('inputDuration').value = state.config.duration;
|
|||
|
|
$('inputDurationNum').value = state.config.duration;
|
|||
|
|
$('inputRandom').checked = state.config.random;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 从表单控件读取最新值写入 state.config。 */
|
|||
|
|
function collectConfig() {
|
|||
|
|
state.config.interval = clampInt(
|
|||
|
|
$('inputIntervalNum').value,
|
|||
|
|
DEFAULT_CONFIG.interval,
|
|||
|
|
500,
|
|||
|
|
30000,
|
|||
|
|
);
|
|||
|
|
state.config.animation = ANIMATION_TYPES.includes(
|
|||
|
|
$('selectAnimation').value,
|
|||
|
|
)
|
|||
|
|
? $('selectAnimation').value
|
|||
|
|
: DEFAULT_CONFIG.animation;
|
|||
|
|
state.config.duration = clampInt(
|
|||
|
|
$('inputDurationNum').value,
|
|||
|
|
DEFAULT_CONFIG.duration,
|
|||
|
|
0,
|
|||
|
|
3000,
|
|||
|
|
);
|
|||
|
|
state.config.random = $('inputRandom').checked;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 应用 config 到 UI（动画类、CSS 变量）和计时器。 */
|
|||
|
|
function applyConfig() {
|
|||
|
|
slideshow.style.setProperty(
|
|||
|
|
'--anim-duration',
|
|||
|
|
state.config.duration + 'ms',
|
|||
|
|
);
|
|||
|
|
slideshow.className = 'slideshow anim-' + state.config.animation;
|
|||
|
|
// 配置变化后重启定时器（如果当前在播放）
|
|||
|
|
if (state.isPlaying) startTimer();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 打开设置面板。 */
|
|||
|
|
function openSettings() {
|
|||
|
|
syncSettingsForm();
|
|||
|
|
renderDirectoryList();
|
|||
|
|
settingsModal.hidden = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 关闭设置面板。 */
|
|||
|
|
function closeSettings() {
|
|||
|
|
settingsModal.hidden = true;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 目录列表渲染
|
|||
|
|
// ============================================================
|
|||
|
|
|
|||
|
|
/** @param {string} s */
|
|||
|
|
function escapeHtml(s) {
|
|||
|
|
return String(s).replace(/[&<>"']/g, (ch) =>
|
|||
|
|
(
|
|||
|
|
{
|
|||
|
|
'&': '&',
|
|||
|
|
'<': '<',
|
|||
|
|
'>': '>',
|
|||
|
|
'"': '"',
|
|||
|
|
"'": ''',
|
|||
|
|
}
|
|||
|
|
)[ch],
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 根据 dir.status 给出简短显示文字。
|
|||
|
|
* @param {{status: string, imageCount: number}} dir
|
|||
|
|
*/
|
|||
|
|
function getStatusText(dir) {
|
|||
|
|
switch (dir.status) {
|
|||
|
|
case 'ok':
|
|||
|
|
return `${dir.imageCount} 张图片`;
|
|||
|
|
case 'denied':
|
|||
|
|
return '未授权（可点击右侧按钮重新请求）';
|
|||
|
|
case 'error':
|
|||
|
|
return '读取失败';
|
|||
|
|
case 'pending':
|
|||
|
|
default:
|
|||
|
|
return '等待中…';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @param {{status: string, imageCount: number}} dir
|
|||
|
|
*/
|
|||
|
|
function getStatusBadge(dir) {
|
|||
|
|
const meta = {
|
|||
|
|
ok: { cls: 'ok', text: '✓', title: '已加载' },
|
|||
|
|
denied: { cls: 'warn', text: '⚠', title: '需要授权' },
|
|||
|
|
error: { cls: 'err', text: '✕', title: '读取失败' },
|
|||
|
|
pending: { cls: 'pending', text: '…', title: '等待' },
|
|||
|
|
}[dir.status] || { cls: '', text: '', title: '' };
|
|||
|
|
return `<span class="directory-status ${meta.cls}" title="${meta.title}">${meta.text}</span>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 重新渲染设置面板中的目录列表。 */
|
|||
|
|
function renderDirectoryList() {
|
|||
|
|
directoryListEl.innerHTML = '';
|
|||
|
|
if (state.directories.length === 0) {
|
|||
|
|
const li = document.createElement('li');
|
|||
|
|
li.className = 'empty-list';
|
|||
|
|
li.textContent = '还没有添加任何目录。';
|
|||
|
|
directoryListEl.appendChild(li);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
state.directories.forEach((dir, idx) => {
|
|||
|
|
const li = document.createElement('li');
|
|||
|
|
li.className = 'directory-item';
|
|||
|
|
li.innerHTML = `
|
|||
|
|
<div class="directory-info">
|
|||
|
|
<div class="directory-name" title="${escapeHtml(dir.name)}">${escapeHtml(dir.name)}</div>
|
|||
|
|
<div class="directory-meta">${escapeHtml(getStatusText(dir))}</div>
|
|||
|
|
</div>
|
|||
|
|
${getStatusBadge(dir)}
|
|||
|
|
<div class="directory-actions">
|
|||
|
|
<button class="icon-btn" data-action="retry" data-idx="${idx}" title="重新请求授权 / 重新读取" aria-label="重新读取">↻</button>
|
|||
|
|
<button class="icon-btn danger" data-action="remove" data-idx="${idx}" title="移除" aria-label="移除">×</button>
|
|||
|
|
</div>
|
|||
|
|
`;
|
|||
|
|
directoryListEl.appendChild(li);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 事件委托
|
|||
|
|
directoryListEl.querySelectorAll('.icon-btn').forEach((btn) => {
|
|||
|
|
btn.addEventListener('click', (e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
const idx = parseInt(btn.dataset.idx, 10);
|
|||
|
|
const action = btn.dataset.action;
|
|||
|
|
if (action === 'remove') removeDirectory(idx);
|
|||
|
|
else if (action === 'retry') retryDirectory(idx);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 目录操作
|
|||
|
|
// ============================================================
|
|||
|
|
/**
|
|||
|
|
* 通过 showDirectoryPicker 选择一个新目录并加入。
|
|||
|
|
*/
|
|||
|
|
async function addDirectory() {
|
|||
|
|
if (typeof window.showDirectoryPicker !== 'function') {
|
|||
|
|
alert(
|
|||
|
|
'您的浏览器不支持 File System Access API。请使用基于 Chromium 内核的浏览器（如 Chrome、Edge、Opera）。',
|
|||
|
|
);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
try {
|
|||
|
|
const handle = await window.showDirectoryPicker({
|
|||
|
|
id: 'slideshow-dir',
|
|||
|
|
mode: 'read',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 基于指针比较去重
|
|||
|
|
if (state.directories.some((d) => d.handle === handle)) {
|
|||
|
|
alert('该目录已经添加。');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
state.directories.push({
|
|||
|
|
handle,
|
|||
|
|
name: handle.name,
|
|||
|
|
status: 'pending',
|
|||
|
|
imageCount: 0,
|
|||
|
|
});
|
|||
|
|
await persistHandles();
|
|||
|
|
renderDirectoryList();
|
|||
|
|
await loadAllImages();
|
|||
|
|
} catch (e) {
|
|||
|
|
// 用户取消选择
|
|||
|
|
if (e && e.name === 'AbortError') return;
|
|||
|
|
console.error(e);
|
|||
|
|
alert('添加目录失败：' + (e && e.message ? e.message : e));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 重新请求某个目录的权限并读取其图片。
|
|||
|
|
* 通常在恢复自 IndexedDB 的句柄，需要再次授权时使用。
|
|||
|
|
* @param {number} idx
|
|||
|
|
*/
|
|||
|
|
async function retryDirectory(idx) {
|
|||
|
|
const dir = state.directories[idx];
|
|||
|
|
if (!dir) return;
|
|||
|
|
const perm = await ensurePermission(dir.handle);
|
|||
|
|
if (perm !== 'granted') {
|
|||
|
|
alert('授权失败，仍无法访问该目录。');
|
|||
|
|
renderDirectoryList();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
await loadAllImages();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 移除某个目录（同时更新 IndexedDB 与已加载的图片）。
|
|||
|
|
* @param {number} idx
|
|||
|
|
*/
|
|||
|
|
async function removeDirectory(idx) {
|
|||
|
|
if (!confirm('确定要移除这个目录吗？')) return;
|
|||
|
|
state.directories.splice(idx, 1);
|
|||
|
|
await persistHandles();
|
|||
|
|
await loadAllImages();
|
|||
|
|
renderDirectoryList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 表单双向绑定（range 与 number 互相同步）
|
|||
|
|
// ============================================================
|
|||
|
|
/**
|
|||
|
|
* @param {string} rangeId
|
|||
|
|
* @param {string} numId
|
|||
|
|
*/
|
|||
|
|
function bindRange(rangeId, numId) {
|
|||
|
|
const range = $(rangeId);
|
|||
|
|
const num = $(numId);
|
|||
|
|
range.addEventListener('input', () => {
|
|||
|
|
num.value = range.value;
|
|||
|
|
});
|
|||
|
|
num.addEventListener('input', () => {
|
|||
|
|
const min = parseInt(num.min, 10);
|
|||
|
|
const max = parseInt(num.max, 10);
|
|||
|
|
const v = clamp(parseInt(num.value, 10), min, max);
|
|||
|
|
range.value = Number.isFinite(v) ? v : min;
|
|||
|
|
});
|
|||
|
|
num.addEventListener('change', () => {
|
|||
|
|
const min = parseInt(num.min, 10);
|
|||
|
|
const max = parseInt(num.max, 10);
|
|||
|
|
const v = clamp(parseInt(num.value, 10), min, max);
|
|||
|
|
const finalV = Number.isFinite(v) ? v : min;
|
|||
|
|
num.value = finalV;
|
|||
|
|
range.value = finalV;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** @param {number} v @param {number} min @param {number} max */
|
|||
|
|
function clamp(v, min, max) {
|
|||
|
|
if (!Number.isFinite(v)) return min;
|
|||
|
|
return Math.max(min, Math.min(max, v));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 键盘快捷键
|
|||
|
|
// ============================================================
|
|||
|
|
/** @param {KeyboardEvent} e */
|
|||
|
|
function handleKey(e) {
|
|||
|
|
// 设置面板打开时只处理 Esc
|
|||
|
|
if (!settingsModal.hidden) {
|
|||
|
|
if (e.key === 'Escape') closeSettings();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// 输入框中的按键不响应
|
|||
|
|
const tag = e.target && e.target.tagName;
|
|||
|
|
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
|
|||
|
|
|
|||
|
|
switch (e.key) {
|
|||
|
|
case ' ':
|
|||
|
|
case 'Spacebar':
|
|||
|
|
e.preventDefault();
|
|||
|
|
togglePlay();
|
|||
|
|
break;
|
|||
|
|
case 'ArrowLeft':
|
|||
|
|
prevImage();
|
|||
|
|
break;
|
|||
|
|
case 'ArrowRight':
|
|||
|
|
nextImage();
|
|||
|
|
break;
|
|||
|
|
case 'f':
|
|||
|
|
case 'F':
|
|||
|
|
toggleFullscreen();
|
|||
|
|
break;
|
|||
|
|
case 'Escape':
|
|||
|
|
if (document.fullscreenElement) toggleFullscreen();
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 加载状态提示
|
|||
|
|
// ============================================================
|
|||
|
|
/** @param {boolean} show */
|
|||
|
|
function showLoading(show) {
|
|||
|
|
loadingHint.hidden = !show;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 事件绑定
|
|||
|
|
// ============================================================
|
|||
|
|
function bindEvents() {
|
|||
|
|
// 控制按钮
|
|||
|
|
$('btnPlayPause').addEventListener('click', togglePlay);
|
|||
|
|
$('btnPrev').addEventListener('click', prevImage);
|
|||
|
|
$('btnNext').addEventListener('click', nextImage);
|
|||
|
|
$('btnFullscreen').addEventListener('click', toggleFullscreen);
|
|||
|
|
$('btnSettings').addEventListener('click', openSettings);
|
|||
|
|
|
|||
|
|
// 设置面板
|
|||
|
|
$('btnCloseSettings').addEventListener('click', closeSettings);
|
|||
|
|
$('btnAddDirectory').addEventListener('click', addDirectory);
|
|||
|
|
$('modalBackdrop').addEventListener('click', closeSettings);
|
|||
|
|
$('btnReloadImages').addEventListener('click', async () => {
|
|||
|
|
await loadAllImages();
|
|||
|
|
});
|
|||
|
|
$('btnSaveSettings').addEventListener('click', () => {
|
|||
|
|
collectConfig();
|
|||
|
|
saveConfig();
|
|||
|
|
applyConfig();
|
|||
|
|
closeSettings();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 表单控件双向绑定
|
|||
|
|
bindRange('inputInterval', 'inputIntervalNum');
|
|||
|
|
bindRange('inputDuration', 'inputDurationNum');
|
|||
|
|
|
|||
|
|
// 键盘快捷键
|
|||
|
|
document.addEventListener('keydown', handleKey);
|
|||
|
|
|
|||
|
|
// 全屏变化时无需特别处理，但保留扩展点
|
|||
|
|
document.addEventListener('fullscreenchange', () => {
|
|||
|
|
// 某些全屏实现中需要重新计算尺寸
|
|||
|
|
// 这里留给浏览器自动处理
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ============================================================
|
|||
|
|
// 启动
|
|||
|
|
// ============================================================
|
|||
|
|
async function init() {
|
|||
|
|
loadConfig();
|
|||
|
|
|
|||
|
|
// 尝试从 IndexedDB 恢复 DirectoryHandle
|
|||
|
|
try {
|
|||
|
|
const handles = await loadHandles();
|
|||
|
|
if (handles && handles.length > 0) {
|
|||
|
|
state.directories = handles.map((h) => ({
|
|||
|
|
handle: h,
|
|||
|
|
name: h.name || '(未命名目录)',
|
|||
|
|
status: 'pending',
|
|||
|
|
imageCount: 0,
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('加载目录句柄失败：', e);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
bindEvents();
|
|||
|
|
applyConfig();
|
|||
|
|
|
|||
|
|
// 加载图片（从 IndexedDB 恢复的目录可能需要用户授权）
|
|||
|
|
if (state.directories.length > 0) {
|
|||
|
|
await loadAllImages();
|
|||
|
|
} else {
|
|||
|
|
emptyHint.hidden = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
startTimer();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
init();
|
|||
|
|
})();
|