mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Split 'scrollTo' function
This commit is contained in:
parent
c0fbce32ce
commit
fe87abc5a8
1 changed files with 53 additions and 51 deletions
|
@ -316,73 +316,74 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Scrolls the document to a given position or element.
|
* Scrolls the document to a given position.
|
||||||
*
|
*
|
||||||
* @param {Object} options scroll options
|
* @param {number} scrollX horizontal coordinate
|
||||||
* @param {number} [options.x] horizontal coordinate
|
* @param {number} scrollY vertical coordinate
|
||||||
* @param {number} [options.y] vertical coordinate
|
* @param {boolean} [smooth=false] smooth scrolling
|
||||||
* @param {HTMLElement} [options.element] target element of scroll task
|
|
||||||
* @param {boolean} [options.smooth=false] smooth scrolling
|
|
||||||
*/
|
*/
|
||||||
var scrollTo = function(options) {
|
var scrollTo = function(scrollX, scrollY, smooth) {
|
||||||
|
|
||||||
var element = options.element;
|
smooth = !!smooth;
|
||||||
var smooth = !!options.smooth;
|
|
||||||
|
|
||||||
var xScroller;
|
|
||||||
var yScroller;
|
|
||||||
var scrollX;
|
|
||||||
var scrollY;
|
|
||||||
|
|
||||||
// Scroller is document itself by default
|
// Scroller is document itself by default
|
||||||
xScroller = yScroller = getScrollableParent(null, false);
|
var scroller = getScrollableParent(null, false);
|
||||||
|
|
||||||
if (options.element !== undefined) {
|
var xScrollerData = getScrollerData(scroller, false);
|
||||||
var scrollCenterX = true;
|
var yScrollerData = getScrollerData(scroller, true);
|
||||||
var scrollCenterY = true;
|
|
||||||
|
|
||||||
var offsetParent = element.offsetParent;
|
scrollX = clamp(Math.round(scrollX), 0, xScrollerData.scrollSize - xScrollerData.clientSize);
|
||||||
|
scrollY = clamp(Math.round(scrollY), 0, yScrollerData.scrollSize - yScrollerData.clientSize);
|
||||||
|
|
||||||
var isFixed = offsetParent && !offsetParent.offsetParent;
|
doScroll(scroller, scrollX, scroller, scrollY, smooth);
|
||||||
|
}
|
||||||
|
|
||||||
// Scroll fixed elements to nearest edge (or do not scroll at all)
|
/**
|
||||||
if (isFixed) {
|
* Scrolls the document to a given element.
|
||||||
scrollCenterX = scrollCenterY = false;
|
*
|
||||||
}
|
* @param {HTMLElement} element target element of scroll task
|
||||||
|
* @param {boolean} [smooth=false] smooth scrolling
|
||||||
|
*/
|
||||||
|
var scrollToElement = function(element, smooth) {
|
||||||
|
|
||||||
xScroller = getScrollableParent(element, false);
|
smooth = !!smooth;
|
||||||
|
|
||||||
var elementRect = element.getBoundingClientRect();
|
var scrollCenterX = true;
|
||||||
|
var scrollCenterY = true;
|
||||||
|
|
||||||
var xScrollerData = getScrollerData(xScroller, false);
|
var offsetParent = element.offsetParent;
|
||||||
var yScrollerData = getScrollerData(yScroller, true);
|
|
||||||
|
|
||||||
var xPos = getScrollerChildPos(xScroller, element, false);
|
var isFixed = offsetParent && !offsetParent.offsetParent;
|
||||||
var yPos = getScrollerChildPos(yScroller, element, true);
|
|
||||||
|
|
||||||
scrollX = calcScroll(xScrollerData, xPos, elementRect.width, scrollCenterX);
|
// Scroll fixed elements to nearest edge (or do not scroll at all)
|
||||||
scrollY = calcScroll(yScrollerData, yPos, elementRect.height, scrollCenterY);
|
if (isFixed) {
|
||||||
|
scrollCenterX = scrollCenterY = false;
|
||||||
|
}
|
||||||
|
|
||||||
// HACK: Scroll to top for top menu because it is hidden
|
var xScroller = getScrollableParent(element, false);
|
||||||
// FIXME: Need a marker to scroll top/bottom
|
var yScroller = getScrollableParent(element, true);
|
||||||
if (isFixed && elementRect.bottom < 0) {
|
|
||||||
scrollY = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// HACK: Ensure we are at the top
|
var elementRect = element.getBoundingClientRect();
|
||||||
// FIXME: Need a marker to scroll top/bottom
|
|
||||||
if (scrollY < minimumScrollY()) {
|
|
||||||
scrollY = 0;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
scrollX = (options.x !== undefined ? Math.round(options.x) : xScroller.scrollLeft);
|
|
||||||
scrollY = (options.y !== undefined ? Math.round(options.y) : yScroller.scrollTop);
|
|
||||||
|
|
||||||
var xScrollerData = getScrollerData(xScroller, false);
|
var xScrollerData = getScrollerData(xScroller, false);
|
||||||
var yScrollerData = getScrollerData(yScroller, true);
|
var yScrollerData = getScrollerData(yScroller, true);
|
||||||
|
|
||||||
scrollX = clamp(scrollX, 0, xScrollerData.scrollSize - xScrollerData.clientSize);
|
var xPos = getScrollerChildPos(xScroller, element, false);
|
||||||
scrollY = clamp(scrollY, 0, yScrollerData.scrollSize - yScrollerData.clientSize);
|
var yPos = getScrollerChildPos(yScroller, element, true);
|
||||||
|
|
||||||
|
var scrollX = calcScroll(xScrollerData, xPos, elementRect.width, scrollCenterX);
|
||||||
|
var scrollY = calcScroll(yScrollerData, yPos, elementRect.height, scrollCenterY);
|
||||||
|
|
||||||
|
// HACK: Scroll to top for top menu because it is hidden
|
||||||
|
// FIXME: Need a marker to scroll top/bottom
|
||||||
|
if (isFixed && elementRect.bottom < 0) {
|
||||||
|
scrollY = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// HACK: Ensure we are at the top
|
||||||
|
// FIXME: Need a marker to scroll top/bottom
|
||||||
|
if (scrollY < minimumScrollY()) {
|
||||||
|
scrollY = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
doScroll(xScroller, scrollX, yScroller, scrollY, smooth);
|
doScroll(xScroller, scrollX, yScroller, scrollY, smooth);
|
||||||
|
@ -391,13 +392,14 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
|
||||||
if (isEnabled()) {
|
if (isEnabled()) {
|
||||||
dom.addEventListener(window, "focusin", function(e) {
|
dom.addEventListener(window, "focusin", function(e) {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
scrollTo({element: e.target, smooth: useSmoothScroll()});
|
scrollToElement(e.target, useSmoothScroll());
|
||||||
}, 0);
|
}, 0);
|
||||||
}, {capture: true});
|
}, {capture: true});
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
isEnabled: isEnabled,
|
isEnabled: isEnabled,
|
||||||
scrollTo: scrollTo
|
scrollTo: scrollTo,
|
||||||
|
scrollToElement: scrollToElement
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue