1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
jellyfin-web/src/scripts/scrollHelper.ts
2024-02-18 12:46:34 -08:00

138 lines
4.2 KiB
TypeScript

import focusManager from '../components/focusManager';
import dom from './dom';
import '../styles/scrollstyles.scss';
function getBoundingClientRect(elem: Element) {
// Support: BlackBerry 5, iOS 3 (original iPhone)
// If we don't have gBCR, just use 0,0 rather than error
if (elem.getBoundingClientRect) {
return elem.getBoundingClientRect();
} else {
return { top: 0, left: 0, width: undefined, height: undefined };
}
}
export function getPosition(scrollContainer: HTMLElement, item: HTMLElement, horizontal: boolean) {
const slideeOffset = getBoundingClientRect(scrollContainer);
const itemOffset = getBoundingClientRect(item);
let offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
let size = horizontal ? itemOffset.width : itemOffset.height;
if (!size && size !== 0) {
size = item[horizontal ? 'offsetWidth' : 'offsetHeight'];
}
const currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
offset += currentStart;
const frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
const currentEnd = currentStart + frameSize;
const isVisible = offset >= currentStart && (offset + size) <= currentEnd;
return {
start: offset,
center: (offset - (frameSize / 2) + (size / 2)),
end: offset - frameSize + size,
size: size,
isVisible: isVisible
};
}
export function toCenter(container: HTMLElement, elem: HTMLElement, horizontal: boolean, skipWhenVisible?: boolean) {
const pos = getPosition(container, elem, horizontal);
if (skipWhenVisible && pos.isVisible) {
return;
}
if (container.scrollTo) {
if (horizontal) {
container.scrollTo(pos.center, 0);
} else {
container.scrollTo(0, pos.center);
}
} else if (horizontal) {
container.scrollLeft = Math.round(pos.center);
} else {
container.scrollTop = Math.round(pos.center);
}
}
export function toStart(container: HTMLElement, elem: HTMLElement, horizontal: boolean, skipWhenVisible?: boolean) {
const pos = getPosition(container, elem, horizontal);
if (skipWhenVisible && pos.isVisible) {
return;
}
if (container.scrollTo) {
if (horizontal) {
container.scrollTo(pos.start, 0);
} else {
container.scrollTo(0, pos.start);
}
} else if (horizontal) {
container.scrollLeft = Math.round(pos.start);
} else {
container.scrollTop = Math.round(pos.start);
}
}
function centerOnFocus(e: Event, scrollSlider: HTMLElement, horizontal: boolean) {
const focused = focusManager.focusableParent(e.target);
if (focused) {
toCenter(scrollSlider, focused, horizontal);
}
}
function centerOnFocusHorizontal(this: HTMLElement, e: Event) {
centerOnFocus(e, this, true);
}
function centerOnFocusVertical(this: HTMLElement, e: Event) {
centerOnFocus(e, this, false);
}
export const centerFocus = {
on: function (element: Element, horizontal: boolean) {
element.setAttribute(`data-scroll-mode-${horizontal ? 'x' : 'y'}`, 'custom');
if (horizontal) {
dom.addEventListener(element, 'focus', centerOnFocusHorizontal, {
capture: true,
passive: true
});
} else {
dom.addEventListener(element, 'focus', centerOnFocusVertical, {
capture: true,
passive: true
});
}
},
off: function (element: Element, horizontal: boolean) {
element.removeAttribute(`data-scroll-mode-${horizontal ? 'x' : 'y'}`);
if (horizontal) {
dom.removeEventListener(element, 'focus', centerOnFocusHorizontal, {
capture: true,
passive: true
});
} else {
dom.removeEventListener(element, 'focus', centerOnFocusVertical, {
capture: true,
passive: true
});
}
}
};
export default {
getPosition: getPosition,
centerFocus: centerFocus,
toCenter: toCenter,
toStart: toStart
};