47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
import journey_wrapper from "../types/wrapper";
|
|
|
|
var nav = {
|
|
scrollInterval: 0,
|
|
scrollDir: 'none',
|
|
};
|
|
|
|
|
|
const sideScroll = function (element: Element, direction: 'left' | 'right' | 'none', speed: number = 25, step: number = 15) {
|
|
nav.scrollDir = direction
|
|
if (direction == 'none') return;
|
|
(nav as any).scrollInterval = setInterval(() => {
|
|
element.scrollLeft += (direction == 'left') ? -step : step;
|
|
}, speed);
|
|
}
|
|
|
|
export const focus_leg = function (journey: journey_wrapper, idx: number | null = null) {
|
|
const c = document.querySelector('.scroll-content.nav-leg')!!
|
|
const item = c.children[(idx != null ? idx : journey.sel_leg) + 1];
|
|
c.scrollLeft = (item as any).offsetLeft + ((item as any).offsetWidth / 2) - (c as any).offsetWidth / 2
|
|
}
|
|
|
|
export const focus_day = function (journey: journey_wrapper, idx: number | null = null) {
|
|
const c = document.querySelector('.scroll-content.nav-day')!!
|
|
const item = c.children[(idx != null ? idx : journey.sel_day) + 1];
|
|
c.scrollLeft = (item as any).offsetLeft + ((item as any).offsetWidth / 2) - (c as any).offsetWidth / 2;
|
|
}
|
|
|
|
export const nav_mousemove = function (e: PointerEvent) {
|
|
if (e.pointerType != 'mouse') return;
|
|
const c = (e.target as any).closest('.scroll-content') || (e.target as any).firstChild;
|
|
const left = e.pageX - c.getBoundingClientRect().left;
|
|
const newDir =
|
|
left < c.offsetWidth * 0.1 ? 'left' :
|
|
(left > c.offsetWidth * 0.9 ? 'right' : 'none')
|
|
if (!nav.scrollInterval || nav.scrollDir != newDir) {
|
|
if (nav.scrollInterval) clearInterval(nav.scrollInterval)
|
|
sideScroll(c, newDir);
|
|
}
|
|
}
|
|
export const nav_mouseleave = function (_e: PointerEvent) {
|
|
clearInterval(nav.scrollInterval);
|
|
nav.scrollDir = 'none'
|
|
nav.scrollInterval = 0
|
|
}
|
|
|