kaizenkodo/CoBiE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #79 from ok2/codex/implement-swipe-mechanism-for-eonstrips

Browse Source 
Enable swipe navigation in detail view
This commit is contained in:
Kiyomichi Kosaka 2025-06-20 14:04:19 +02:00 committed by GitHub
commit da56bfce7a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 69 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
script.js
View File

@ -919,12 +919,16 @@ function updateDetailCurrentTime() {
function detailPrev() { function detailPrev() {
if (currentDetailCob === null) return; if (currentDetailCob === null) return;
showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip); animateDetailSwipe(-1, () => {
showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);
});
} }
function detailNext() { function detailNext() {
if (currentDetailCob === null) return; if (currentDetailCob === null) return;
showEonstripDetail(currentDetailCob + COBIE_UNITS.eonstrip); animateDetailSwipe(1, () => {
showEonstripDetail(currentDetailCob + COBIE_UNITS.eonstrip);
});
} }
function detailNow() { function detailNow() {
@ -1005,6 +1009,30 @@ function animateSwipe(direction, onDone) {
grid.addEventListener('transitionend', afterOut); grid.addEventListener('transitionend', afterOut);
} }
function animateDetailSwipe(direction, onDone) {
const tl = document.getElementById('detailTimeline');
if (!tl) { onDone(); return; }
tl.style.transition = 'none';
tl.style.transform = 'translateX(0)';
void tl.offsetWidth;
tl.style.transition = 'transform 0.3s ease';
tl.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`;
function afterOut() {
tl.removeEventListener('transitionend', afterOut);
tl.style.transition = 'none';
tl.style.transform = `translateX(${direction > 0 ? '100%' : '-100%'})`;
onDone();
void tl.offsetWidth;
tl.style.transition = 'transform 0.3s ease';
tl.style.transform = 'translateX(0)';
}
tl.addEventListener('transitionend', afterOut);
}
function goToNow() { function goToNow() {
manualMode = false; manualMode = false;
manualCobiets = 0; manualCobiets = 0;
@ -1142,11 +1170,12 @@ document.getElementById('toggleExtended').addEventListener('click', () => {
}); });
// ── Swipe & Wheel Navigation ──────────────────────────────────────────────── // ── Swipe & Wheel Navigation ────────────────────────────────────────────────
let swipeStartX = null; let swipeStartX = null;
let swipeStartY = null; let swipeStartY = null;
let swipeMods = { altKey: false, shiftKey: false, ctrlKey: false }; let swipeMods = { altKey: false, shiftKey: false, ctrlKey: false };
let isSwiping = false; let isSwiping = false;
let swipeGrid = null; let swipeGrid = null;
let swipeContext = 'calendar';
function swipeStart(e) { function swipeStart(e) {
const touch = e.touches ? e.touches[0] : e; const touch = e.touches ? e.touches[0] : e;
@ -1157,7 +1186,17 @@ function swipeStart(e) {
shiftKey: e.shiftKey || false, shiftKey: e.shiftKey || false,
ctrlKey: e.ctrlKey || false ctrlKey: e.ctrlKey || false
}; };
swipeGrid = document.getElementById('eonstripGrid');
const detailView = document.getElementById('eonstripDetailView');
const detailOpen = detailView && detailView.style.display === 'block';
if (detailOpen) {
swipeGrid = document.getElementById('detailTimeline');
swipeContext = 'detail';
} else {
swipeGrid = document.getElementById('eonstripGrid');
swipeContext = 'calendar';
}
if (swipeGrid) { if (swipeGrid) {
swipeGrid.style.transition = 'none'; swipeGrid.style.transition = 'none';
} }
@ -1194,9 +1233,19 @@ function swipeEnd(e) {
// prepare opposite side // prepare opposite side
swipeGrid.style.transition = 'none'; swipeGrid.style.transition = 'none';
swipeGrid.style.transform = `translateX(${dx < 0 ? width : -width}px)`; swipeGrid.style.transform = `translateX(${dx < 0 ? width : -width}px)`;
const step = getStep(swipeMods);
currentOffset += direction * step; if (swipeContext === 'calendar') {
updateCalendar(); const step = getStep(swipeMods);
currentOffset += direction * step;
updateCalendar();
} else if (swipeContext === 'detail') {
if (direction === 1) {
currentDetailCob !== null && showEonstripDetail(currentDetailCob + COBIE_UNITS.eonstrip);
} else {
currentDetailCob !== null && showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);
}
}
void swipeGrid.offsetWidth; void swipeGrid.offsetWidth;
swipeGrid.style.transition = 'transform 0.3s ease'; swipeGrid.style.transition = 'transform 0.3s ease';
swipeGrid.style.transform = 'translateX(0)'; swipeGrid.style.transform = 'translateX(0)';
@ -1221,7 +1270,15 @@ document.addEventListener('mouseup', swipeEnd);
function wheelNavigate(e) { function wheelNavigate(e) {
if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 10) { if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 10) {
const direction = e.deltaX > 0 ? 1 : -1; const direction = e.deltaX > 0 ? 1 : -1;
navigatePeriod(e, direction); if (currentDetailCob !== null) {
if (direction === 1) {
detailNext();
} else {
detailPrev();
}
} else {
navigatePeriod(e, direction);
}
} }
} }