`;
document.body.appendChild(modal);
modal.querySelector('.lrr-settings-close').addEventListener('click', closeSettings);
modal.addEventListener('click', (e) => { if (e.target === modal) closeSettings(); });
const elAuto = document.getElementById('lrr-cfg-auto');
const elPos = document.getElementById('lrr-cfg-pos');
const elGap = document.getElementById('lrr-cfg-gap');
const elExpand = document.getElementById('lrr-cfg-expand');
const elInterval = document.getElementById('lrr-cfg-interval');
const elProgress = document.getElementById('lrr-cfg-progress-pos');
elAuto.addEventListener('change', (e) => { userSettings.autoEnter = e.target.checked; saveSettings(); });
elPos.addEventListener('change', (e) => { userSettings.btnPosition = e.target.value; saveSettings(); });
elGap.addEventListener('change', (e) => { userSettings.pageGap = parseInt(e.target.value) || 0; saveSettings(); });
elInterval.addEventListener('change', (e) => {
let val = parseFloat(e.target.value);
if (isNaN(val) || val < 1) val = 1;
userSettings.autoTurnInterval = val;
saveSettings();
});
elExpand.addEventListener('change', (e) => {
userSettings.expandDirection = e.target.value;
saveSettings();
});
// [新增] 监听进度条位置变更
elProgress.addEventListener('change', (e) => {
userSettings.autoProgressPos = e.target.value;
saveSettings();
});
}
// 同步 UI
document.getElementById('lrr-cfg-auto').checked = userSettings.autoEnter;
document.getElementById('lrr-cfg-pos').value = userSettings.btnPosition;
document.getElementById('lrr-cfg-gap').value = userSettings.pageGap;
document.getElementById('lrr-cfg-interval').value = userSettings.autoTurnInterval || 3;
document.getElementById('lrr-cfg-expand').value = userSettings.expandDirection || 'up';
document.getElementById('lrr-cfg-progress-pos').value = userSettings.autoProgressPos || 'none';
modal.style.display = 'flex';
document.body.style.userSelect = 'none';
document.body.style.webkitUserSelect = 'none';
}
// ==========================================
// 交互控制
// ==========================================
// 热区触发入口
function handleZoneTrigger() {
if (Date.now() < inputBlockUntil) return;
showControls();
}
// 显示控件并执行展开动画
function showControls() {
if (!isReadingMode()) return;
const mainBtn = document.getElementById(BUTTON_ID);
const thumbBtn = document.getElementById(THUMB_BUTTON_ID);
const autoBtn = document.getElementById(AUTO_BTN_ID);
const buttons = [mainBtn, thumbBtn, autoBtn];
// 1. 设置可见性、重置动画曲线
buttons.forEach(btn => {
if (!btn) return;
btn.style.visibility = 'visible';
btn.style.zIndex = '200001';
btn.style.transition = 'transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease, visibility 0.3s';
btn.style.pointerEvents = 'auto';
btn.style.opacity = '1';
});
// 2. 计算展开位置
const step = 63;
const dir = userSettings.expandDirection;
const pos = userSettings.btnPosition;
if (mainBtn) mainBtn.style.transform = 'translate(0, 0) scale(1)';
[thumbBtn, autoBtn].forEach((btn, index) => {
if (!btn) return;
const distance = step * (index + 1);
let x = 0, y = 0;
if (dir === 'side') {
x = (pos === 'right') ? -distance : distance;
} else {
y = -distance;
}
btn.style.transform = `translate(${x}px, ${y}px) scale(1)`;
});
// 3. 重置隐藏定时器
if (btnHideTimer) clearTimeout(btnHideTimer);
btnHideTimer = setTimeout(hideControls, 2500);
}
// 隐藏控件并收回动画
function hideControls() {
if (!isReadingMode()) return;
const btns = [
document.getElementById(BUTTON_ID),
document.getElementById(THUMB_BUTTON_ID),
document.getElementById(AUTO_BTN_ID)
];
btns.forEach(btn => {
if (!btn) return;
// --- 设置收起专用动画 ---
btn.style.transition = 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease-out, visibility 0.3s';
// 执行收回
btn.style.transform = 'translate(0, 0) scale(0.8)';
btn.style.opacity = '0';
btn.style.pointerEvents = 'none';
});
// 等待最长的动画时间 (0.3s) 结束后完全隐藏
setTimeout(() => {
btns.forEach(btn => {
if (btn && btn.style.opacity === '0') {
btn.style.visibility = 'hidden';
}
});
}, 300);
}
function preventContextMenu(e) {
e.preventDefault(); e.stopPropagation(); return false;
}
function handleTouchCapture(e) {
if (!isReadingMode()) return;
if (e.target.closest('#archivePagesOverlay') || e.target.closest('.lrr-thumb-backdrop')) return;
const t = e.target;
if (t && (t.closest('#i3') || t.closest('#display') || t.tagName === 'IMG' || t.closest('.paginator'))) {
}
}
function handleCaptureClick(e) {
if (!isReadingMode()) return;
if (e.target.closest('#archivePagesOverlay') || e.target.closest('.lrr-thumb-backdrop')) {
return;
}
if (e.target.closest(`#${BUTTON_ID}`) ||
e.target.closest(`#${THUMB_BUTTON_ID}`) ||
e.target.closest(`#${AUTO_BTN_ID}`) ||
e.target.closest(`#${HITAREA_ID}`) ||
e.target.closest(`#${SETTINGS_MODAL_ID}`)) {
return;
}
const inReaderContainer = e.target.closest('#i3');
const inDisplay = e.target.closest('#display');
const isImg = e.target.tagName === 'IMG';
if (inReaderContainer || inDisplay || isImg) {
e.stopPropagation();
}
}
function handleKeydownBlock(e) {
if (!isReadingMode()) return;
const blockKeys = ['ArrowLeft', 'ArrowRight', 'PageUp', 'PageDown', ' ', 'Spacebar', 'a', 'A', 'd', 'D'];
if (blockKeys.includes(e.key)) {
e.preventDefault(); e.stopPropagation();
}
}
function handleDragStart(e) {
if (isReadingMode() && (e.target.closest('#display') || e.target.tagName === 'IMG')) e.preventDefault();
}
function handleScroll() {
if (isReadingMode()) return;
const btn = document.getElementById(BUTTON_ID);
if (!btn) return;
const st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop && st > 100) {
btn.classList.add('hide-on-scroll');
} else {
btn.classList.remove('hide-on-scroll');
}
lastScrollTop = st <= 0 ? 0 : st;
}
function setupClickBlocker(enable) {
if (enable) {
window.addEventListener('click', handleCaptureClick, true);
window.addEventListener('contextmenu', preventContextMenu, true);
window.addEventListener('dragstart', handleDragStart, { passive: false });
window.addEventListener('keydown', handleKeydownBlock, true);
window.removeEventListener('scroll', handleScroll);
} else {
window.removeEventListener('click', handleCaptureClick, true);
window.removeEventListener('contextmenu', preventContextMenu, true);
window.removeEventListener('dragstart', handleDragStart);
window.removeEventListener('touchstart', handleTouchCapture, true);
window.removeEventListener('touchend', handleTouchCapture, true);
window.removeEventListener('touchcancel', handleTouchCapture, true);
window.removeEventListener('keydown', handleKeydownBlock, true);
window.addEventListener('scroll', handleScroll);
}
}
// -------- 缩略图面板与遮罩 --------
function ensureThumbBackdrop() {
let bd = document.querySelector('.lrr-thumb-backdrop');
if (bd) return bd;
bd = document.createElement('div');
bd.className = 'lrr-thumb-backdrop';
bd.addEventListener('click', closeThumbnailOverlay);
document.body.appendChild(bd);
return bd;
}
function removeThumbBackdrop() {
const bd = document.querySelector('.lrr-thumb-backdrop');
if (bd) bd.remove();
}
function closeThumbnailOverlay() {
const overlay = document.getElementById('archivePagesOverlay');
if (overlay) overlay.style.display = 'none';
removeThumbBackdrop();
if (typeof LRR !== 'undefined' && LRR.closeOverlay) LRR.closeOverlay();
}
function openThumbnailOverlay() {
const nativeBtn = document.getElementById('toggle-archive-overlay');
if (nativeBtn) nativeBtn.click();
else document.dispatchEvent(new KeyboardEvent('keydown', { key: 'q', code: 'KeyQ', bubbles: true }));
setTimeout(() => {
const overlay = document.getElementById('archivePagesOverlay');
if (overlay) {
overlay.style.setProperty('display', 'block', 'important');
ensureThumbBackdrop();
if (!overlay._hasDelegatedClick) {
overlay.addEventListener('click', function(e) {
const thumb = e.target.closest('.quick-thumbnail');
if (thumb) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
const pageAttr = thumb.getAttribute('page');
if (pageAttr !== null) {
const pageIndex = parseInt(pageAttr, 10);
if (typeof Reader !== 'undefined' && Reader.goToPage) {
Reader.goToPage(pageIndex);
}
closeThumbnailOverlay();
waitForPageImageLoaded(pageIndex).then(() => {
const info = getPageInfo();
updatePageIndicator();
updateGhosts(info);
});
return;
}
}
if (e.target.closest('.id3') || e.target.tagName === 'A' || e.target.tagName === 'IMG') {
if (!thumb) {
setTimeout(closeThumbnailOverlay, 50);
}
}
}, true);
overlay._hasDelegatedClick = true;
}
}
}, 100);
}
// -------- 翻页逻辑 --------
function exitFromLastPageWithAnimation(display, diffSign) {
const width = window.innerWidth || 1;
const finalDiff = diffSign >= 0 ? width : -width;
display.style.transition = 'transform 0.25s ease-out, opacity 0.25s ease-out';
display.style.transform = `translateX(${finalDiff}px)`;
display.style.opacity = '0.0';
setTimeout(() => {
setReadingMode(false);
setTimeout(() => {
display.style.transform = '';
display.style.opacity = '';
display.style.transition = '';
}, 300);
}, 250);
}
function executePageTurn(intent) {
// 1. 时间间隔检查
const now = Date.now();
if (now - lastTurnTime < 150) return;
lastTurnTime = now;
// [新增] 逻辑核心：如果开启了自动翻页，无论这次是由自动触发还是手动触发，
// 都立即重置当前的计时器和进度条，给用户“重置”的反馈。
if (autoTurnState.active) {
if (autoTurnState.timer) clearTimeout(autoTurnState.timer);
// 立即重置进度条动画到 0
const progressBar = document.getElementById(PROGRESS_BAR_ID);
const pos = userSettings.autoProgressPos || 'none';
if (progressBar && pos !== 'none') {
progressBar.style.transition = 'none';
if (pos === 'top' || pos === 'bottom') progressBar.style.width = '0%';
else progressBar.style.height = '0%';
}
}
// 2. 立即开启遮罩，防止后续操作和连点
toggleLoadingMask(true);
const manga = isMangaMode();
const canUseReader = (typeof Reader !== 'undefined') && Reader && typeof Reader.changePage === 'function';
// 3. 执行翻页动作
if (canUseReader) {
let dir = 0;
if (intent === 'next') dir = manga ? -1 : 1;
else dir = manga ? 1 : -1;
Reader.changePage(dir, true);
} else {
let action = '';
if (intent === 'next') action = manga ? 'left' : 'right';
else action = manga ? 'right' : 'left';
const link = document.querySelector(`.page-link[value="${action}"]`);
if (link) link.click();
else {
const key = action === 'left' ? 'ArrowLeft' : 'ArrowRight';
const keyCode = action === 'left' ? 37 : 39;
document.dispatchEvent(new KeyboardEvent('keydown', { key: key, keyCode: keyCode, which: keyCode, bubbles: true }));
}
}
// 4. 延迟检测加载状态
setTimeout(() => {
updatePageIndicator();
attachDragEvents();
// 获取下一页的索引用于检测
const info = getPageInfo();
// 如果自动翻页开启，继续调度（此时会重新开始进度条动画）
if (autoTurnState.active) {
scheduleNextAutoTurn();
}
// 开始等待图片加载，加载完后会自动关闭遮罩
waitForPageImageLoaded(info.index).then(() => {
// 动画优化：确保位置归位
const display = document.getElementById('display');
if (display) {
display.style.transition = 'none';
display.style.transform = 'translateX(0px)';
void display.offsetWidth;
display.style.transition = 'transform 0.2s ease-out';
}
});
}, 150);
}
function handleClickFlip(imgEl, startX, info) {
let rectWidth = window.innerWidth;
let rectLeft = 0;
if (imgEl && imgEl.tagName === 'IMG') {
const rect = imgEl.getBoundingClientRect();
rectWidth = rect.width;
rectLeft = rect.left;
}
const ratio = (startX - rectLeft) / rectWidth;
let intent = null;
const manga = isMangaMode();
if (ratio > 0.65) intent = manga ? 'prev' : 'next';
else if (ratio < 0.35) intent = manga ? 'next' : 'prev';
else return false;
if (intent === 'prev' && info.current === 1) return false;
if (intent === 'next' && info.current === info.total) {
exitFromLastPageWithAnimation(document.getElementById('display'), 1);
return true;
}
executePageTurn(intent);
return true;
}
function getCurrentPageIndices(info) {
const pages = (typeof Reader !== 'undefined' && Reader.pages) || archiveData.pages || [];
const imgs = document.querySelectorAll('#display img.reader-image');
const result = [];
if (pages.length === 0) {
if (typeof info.index === 'number') return [info.index];
return [];
}
imgs.forEach(img => {
const src = img.currentSrc || img.src || '';
let found = -1;
for (let i = 0; i < pages.length; i++) {
const pageUrl = pages[i];
if (!pageUrl) continue;
if (src === pageUrl || src.startsWith(pageUrl) || pageUrl.startsWith(src)) {
found = i;
break;
}
}
if (found >= 0 && !result.includes(found)) {
result.push(found);
}
});
if (result.length === 0 && typeof info.index === 'number') {
return [info.index];
}
return result.sort((a, b) => a - b);
}
function resolveGroupStart(minIdx) {
if (minIdx <= 0) return 0;
if (minIdx === 1 || minIdx === 2) return 1;
if (minIdx % 2 === 0) return minIdx - 1;
return minIdx;
}
function updateGhosts(info) {
const display = document.getElementById('display');
if (!display) return;
let leftGhost = display.querySelector('.lrr-ghost-left');
let rightGhost = display.querySelector('.lrr-ghost-right');
if (!leftGhost) {
leftGhost = document.createElement('div');
leftGhost.className = 'lrr-ghost-side lrr-ghost-left';
display.appendChild(leftGhost);
}
if (!rightGhost) {
rightGhost = document.createElement('div');
rightGhost.className = 'lrr-ghost-side lrr-ghost-right';
display.appendChild(rightGhost);
}
leftGhost.innerHTML = '';
rightGhost.innerHTML = '';
const mainImg = document.getElementById('img') || display.querySelector('img.reader-image');
let inheritedStyle = '';
let baseWidth = null;
let baseHeight = null;
if (mainImg) {
inheritedStyle = mainImg.getAttribute('style') || '';
const rect = mainImg.getBoundingClientRect();
baseWidth = rect.width;
baseHeight = rect.height;
}
const manga = isMangaMode();
const double = isDoublePageMode();
const idx = info.index;
const total = info.total;
let logicalNextIndices = [];
let logicalPrevIndices = [];
let nextLimit = 10;
try {
const storedLimit = parseInt(localStorage.getItem('preloadCount') || '10', 10);
if (!isNaN(storedLimit)) {
nextLimit = Math.min(10, Math.max(1, storedLimit));
}
} catch(e) {}
if (double) {
const currentIndices = getCurrentPageIndices(info);
if (currentIndices.length === 0) {
if (idx === 0) {
let nextCursor = 1;
while (logicalNextIndices.length < nextLimit && nextCursor < total) {
logicalNextIndices.push(nextCursor);
nextCursor++;
}
} else if (idx === 1) {
logicalPrevIndices = [0];
let nextCursor = idx + 2;
while (logicalNextIndices.length < nextLimit && nextCursor < total) {
logicalNextIndices.push(nextCursor);
nextCursor++;
}
} else {
logicalPrevIndices = [idx - 2, idx - 1].filter(i => i >= 0);
let nextCursor = idx + 2;
while (logicalNextIndices.length < nextLimit && nextCursor < total) {
logicalNextIndices.push(nextCursor);
nextCursor++;
}
}
} else {
const minIdx = currentIndices[0];
const groupStart = resolveGroupStart(minIdx);
if (groupStart > 0) {
const prevStart = groupStart - 2;
if (prevStart <= 0) {
logicalPrevIndices = [0];
} else {
const p1 = prevStart;
const p2 = prevStart + 1;
if (p1 >= 0 && p1 < total) logicalPrevIndices.push(p1);
if (p2 >= 0 && p2 < total) logicalPrevIndices.push(p2);
}
}
const nextStart = groupStart === 0 ? 1 : groupStart + 2;
if (nextStart < total) {
if (nextStart === 0) {
logicalNextIndices = [0];
} else {
let cursor = nextStart;
while(logicalNextIndices.length < nextLimit && cursor < total) {
if (cursor >= 0) logicalNextIndices.push(cursor);
cursor++;
}
}
}
}
} else {
let cursor = idx + 1;
while(logicalNextIndices.length < nextLimit && cursor < total) {
logicalNextIndices.push(cursor);
cursor++;
}
if (idx - 1 >= 0) logicalPrevIndices = [idx - 1];
}
let leftPages = manga ? logicalNextIndices : logicalPrevIndices;
let rightPages = manga ? logicalPrevIndices : logicalNextIndices;
const createGhostContent = (indices) => {
const validIndices = indices.filter(i => i >= 0 && i < total);
if (validIndices.length === 0) return ``;
let sortedIndices = [...validIndices];
if (manga && isVisualDouble) {
sortedIndices.sort((a, b) => b - a);
} else {
sortedIndices.sort((a, b) => a - b);
}
sortedIndices.forEach((pageIdx, loopIndex) => {
const url = getPageUrl(pageIdx);
if (!url) return;
let sizeStyle = '';
if (baseWidth && baseHeight) {
sizeStyle = `width:${baseWidth}px; height:${baseHeight}px; max-width:none; max-height:none;`;
}
let visibilityStyle = '';
if (loopIndex >= visibleCount) {
visibilityStyle = 'display: none !important;';
}
const onErrorScript = "this.onerror=null; setTimeout(()=>{ const curr = this.src; this.src = ''; this.src = curr; }, 1000);";
html += `
`;
});
html += `