opendesk

1/** Eases the row to mid-view and resolves on arrival; the browser's smooth
2 * scroll has no reliable "done", and the pinned bar waits on it. */
3export function glideToRow(
4  scroller: HTMLElement,
5  rowId: string,
6  durationMs: number
7): Promise<void> {
8  const row = scroller.querySelector(`[id="${CSS.escape(rowId)}"]`);
9  if (!row) return Promise.resolve();
10  const from = scroller.scrollTop;
11  const to = from + centerOffset(scroller, row);
12  if (to === from || matchMedia("(prefers-reduced-motion: reduce)").matches) {
13    scroller.scrollTop = to;
14    return Promise.resolve();
15  }
16  return new Promise((resolve) => {
17    const start = performance.now();
18    const step = (now: number) => {
19      const progress = Math.min((now - start) / durationMs, 1);
20      scroller.scrollTop = from + (to - from) * easeOutCubic(progress);
21      if (progress < 1) requestAnimationFrame(step);
22      else resolve();
23    };
24    requestAnimationFrame(step);
25  });
26}
27
28// centre below the scroll padding like scrollIntoView, or the flash's own
29// scroll after the glide nudges the row by half the padding
30function centerOffset(scroller: HTMLElement, row: Element): number {
31  const view = scroller.getBoundingClientRect();
32  const box = row.getBoundingClientRect();
33  const padding = parseFloat(getComputedStyle(scroller).scrollPaddingTop) || 0;
34  const viewCenter = view.top + padding + (view.height - padding) / 2;
35  return box.top + box.height / 2 - viewCenter;
36}
37
38function easeOutCubic(progress: number): number {
39  return 1 - (1 - progress) ** 3;
40}
41