Add auto-scroll toggle to reader settings, persisted in localStorage
This commit is contained in:
@@ -1948,10 +1948,14 @@ const chapterTmpl = `
|
||||
min="0.5" max="2" step="0.1" value="1"
|
||||
class="w-full accent-amber-500 cursor-pointer" />
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer select-none">
|
||||
<label class="flex items-center gap-2 cursor-pointer select-none mb-2.5">
|
||||
<input id="tts-autoplay" type="checkbox" class="accent-amber-500 cursor-pointer w-4 h-4" />
|
||||
<span class="text-sm text-zinc-300">Auto-play next chapter</span>
|
||||
</label>
|
||||
<label class="flex items-center gap-2 cursor-pointer select-none">
|
||||
<input id="tts-autoscroll" type="checkbox" checked class="accent-amber-500 cursor-pointer w-4 h-4" />
|
||||
<span class="text-sm text-zinc-300">Auto-scroll to paragraph</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="max-w-2xl mx-auto px-3 py-2 flex flex-col gap-0">
|
||||
@@ -2114,6 +2118,7 @@ const chapterTmpl = `
|
||||
var speedSlider = document.getElementById('tts-speed');
|
||||
var speedLabel = document.getElementById('tts-speed-label');
|
||||
var autoplayChk = document.getElementById('tts-autoplay');
|
||||
var autoscrollChk = document.getElementById('tts-autoscroll');
|
||||
var article = document.getElementById('chapter-article');
|
||||
var playerPlayBtn = document.getElementById('player-play-btn');
|
||||
var playerPlayIcon = document.getElementById('player-play-icon');
|
||||
@@ -2230,9 +2235,10 @@ const chapterTmpl = `
|
||||
document.addEventListener('click', window.__ttsClickOutside);
|
||||
|
||||
// ── localStorage settings ─────────────────────────────────────────────────────
|
||||
var LS_SPEED = 'tts_speed';
|
||||
var LS_VOICE = 'tts_voice';
|
||||
var LS_AUTONEXT = 'tts_autonext';
|
||||
var LS_SPEED = 'tts_speed';
|
||||
var LS_VOICE = 'tts_voice';
|
||||
var LS_AUTONEXT = 'tts_autonext';
|
||||
var LS_AUTOSCROLL = 'tts_autoscroll';
|
||||
|
||||
(function loadSettings() {
|
||||
var spd = localStorage.getItem(LS_SPEED);
|
||||
@@ -2247,6 +2253,8 @@ const chapterTmpl = `
|
||||
}
|
||||
var an = localStorage.getItem(LS_AUTONEXT);
|
||||
if (an !== null) autoplayChk.checked = an === 'true';
|
||||
var as = localStorage.getItem(LS_AUTOSCROLL);
|
||||
if (as !== null) autoscrollChk.checked = as !== 'false';
|
||||
})();
|
||||
|
||||
speedSlider.addEventListener('input', function () {
|
||||
@@ -2264,6 +2272,10 @@ const chapterTmpl = `
|
||||
if (stale()) return;
|
||||
localStorage.setItem(LS_AUTONEXT, autoplayChk.checked ? 'true' : 'false');
|
||||
});
|
||||
autoscrollChk.addEventListener('change', function () {
|
||||
if (stale()) return;
|
||||
localStorage.setItem(LS_AUTOSCROLL, autoscrollChk.checked ? 'true' : 'false');
|
||||
});
|
||||
|
||||
// ── paragraph indexing (highlight only) ──────────────────────────────────────
|
||||
var paras = Array.prototype.slice.call((article || {querySelectorAll: function(){return[];}}).querySelectorAll('p'));
|
||||
@@ -2289,7 +2301,7 @@ const chapterTmpl = `
|
||||
activePara = (idx >= 0 && idx < paras.length) ? paras[idx] : null;
|
||||
if (activePara) {
|
||||
activePara.classList.add('tts-active');
|
||||
if (autoScrollEnabled) activePara.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
if (autoscrollChk.checked && autoScrollEnabled) activePara.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user