Add double-tap left/right navigation on chapter content page
This commit is contained in:
@@ -2104,6 +2104,7 @@ const chapterTmpl = `
|
||||
<script>
|
||||
(function () {
|
||||
var NEXT_N = {{.NextN}};
|
||||
var PREV_N = {{.PrevN}};
|
||||
var SLUG = '{{.Slug}}';
|
||||
var CHAPTER_N = {{.ChapterN}};
|
||||
|
||||
@@ -2561,6 +2562,56 @@ const chapterTmpl = `
|
||||
// ── initialise queue bar on page load ────────────────────────────────────────
|
||||
queueSetCurrent('idle', 'ready — ch.' + CHAPTER_N);
|
||||
if (NEXT_N) { queueSetNext('idle', 'waiting — ch.' + NEXT_N); }
|
||||
|
||||
// ── double-tap left/right to navigate chapters ───────────────────────────────
|
||||
// A double-tap on the left third of the screen goes to the previous chapter;
|
||||
// a double-tap on the right third goes to the next chapter.
|
||||
// Taps on interactive elements (buttons, links, inputs, selects) are ignored
|
||||
// so normal UI interactions are never swallowed.
|
||||
(function initDoubleTap() {
|
||||
var lastTap = 0;
|
||||
var lastSide = ''; // 'left' | 'right'
|
||||
var THRESHOLD = 300; // ms between taps
|
||||
|
||||
var INTERACTIVE = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'LABEL'];
|
||||
|
||||
function navigate(url) {
|
||||
var mc = document.getElementById('main-content');
|
||||
if (mc && window.htmx) {
|
||||
htmx.ajax('GET', url, { target: '#main-content', swap: 'innerHTML', pushUrl: url });
|
||||
} else {
|
||||
window.location.href = url;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('touchend', function (e) {
|
||||
// Ignore taps that land on interactive elements
|
||||
var el = e.target;
|
||||
while (el && el !== document.body) {
|
||||
if (INTERACTIVE.indexOf(el.tagName) !== -1) return;
|
||||
el = el.parentElement;
|
||||
}
|
||||
|
||||
var touch = e.changedTouches[0];
|
||||
var side = touch.clientX < window.innerWidth / 2 ? 'left' : 'right';
|
||||
var now = Date.now();
|
||||
var gap = now - lastTap;
|
||||
|
||||
if (gap < THRESHOLD && side === lastSide) {
|
||||
// Double-tap detected
|
||||
lastTap = 0;
|
||||
lastSide = '';
|
||||
if (side === 'right' && NEXT_N) {
|
||||
navigate('/books/' + SLUG + '/chapters/' + NEXT_N);
|
||||
} else if (side === 'left' && PREV_N) {
|
||||
navigate('/books/' + SLUG + '/chapters/' + PREV_N);
|
||||
}
|
||||
} else {
|
||||
lastTap = now;
|
||||
lastSide = side;
|
||||
}
|
||||
}, { passive: true });
|
||||
}());
|
||||
}());
|
||||
</script>`
|
||||
|
||||
|
||||
Reference in New Issue
Block a user