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

Add swipe navigation for detail view

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-20 14:03:59 +02:00
parent ff5d2a7816
commit f38f4af4ca
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() {
if (currentDetailCob === null) return;
showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);
animateDetailSwipe(-1, () => {
showEonstripDetail(currentDetailCob - COBIE_UNITS.eonstrip);
});
}
function detailNext() {
if (currentDetailCob === null) return;
showEonstripDetail(currentDetailCob + COBIE_UNITS.eonstrip);
animateDetailSwipe(1, () => {
showEonstripDetail(currentDetailCob + COBIE_UNITS.eonstrip);
});
}
function detailNow() {
@ -1005,6 +1009,30 @@ function animateSwipe(direction, onDone) {
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() {
manualMode = false;
manualCobiets = 0;
@ -1142,11 +1170,12 @@ document.getElementById('toggleExtended').addEventListener('click', () => {
});
// ── Swipe & Wheel Navigation ────────────────────────────────────────────────
let swipeStartX = null;
let swipeStartY = null;
let swipeMods = { altKey: false, shiftKey: false, ctrlKey: false };
let isSwiping = false;
let swipeGrid = null;
let swipeStartX = null;
let swipeStartY = null;
let swipeMods = { altKey: false, shiftKey: false, ctrlKey: false };
let isSwiping = false;
let swipeGrid = null;
let swipeContext = 'calendar';
function swipeStart(e) {
const touch = e.touches ? e.touches[0] : e;
@ -1157,7 +1186,17 @@ function swipeStart(e) {
shiftKey: e.shiftKey || 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) {
swipeGrid.style.transition = 'none';
}
@ -1194,9 +1233,19 @@ function swipeEnd(e) {
// prepare opposite side
swipeGrid.style.transition = 'none';
swipeGrid.style.transform = `translateX(${dx < 0 ? width : -width}px)`;
const step = getStep(swipeMods);
currentOffset += direction * step;
updateCalendar();
if (swipeContext === 'calendar') {
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;
swipeGrid.style.transition = 'transform 0.3s ease';
swipeGrid.style.transform = 'translateX(0)';
@ -1221,7 +1270,15 @@ document.addEventListener('mouseup', swipeEnd);
function wheelNavigate(e) {
if (Math.abs(e.deltaX) > Math.abs(e.deltaY) && Math.abs(e.deltaX) > 10) {
const direction = e.deltaX > 0 ? 1 : -1;
navigatePeriod(e, direction);
if (currentDetailCob !== null) {
if (direction === 1) {
detailNext();
} else {
detailPrev();
}
} else {
navigatePeriod(e, direction);
}
}
}