mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add support for easing animated scroll.

Browse source
This commit is contained in:
Dmitry Lyzo 2019-11-10 23:36:04 +03:00
parent e86058dc8c
commit b3df632164
1 changed files with 36 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/scrollManager.js
View file

@ -1,7 +1,15 @@
define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManager) { define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManager) {
"use strict"; "use strict";
var ScrollTime = 200; /**
* Scroll time in ms.
*/
var ScrollTime = 270;
/**
* Epsilon for comparing values.
*/
var Epsilon = 1e-6;
// FIXME: Need to scroll to top of page to fully show the top menu. This can be solved by some marker of top most elements or their containers // FIXME: Need to scroll to top of page to fully show the top menu. This can be solved by some marker of top most elements or their containers
var _minimumScrollY = 0; var _minimumScrollY = 0;
@ -69,6 +77,16 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
return 0; return 0;
}; };
/**
* Ease value.
*
* @param {number} t value in range [0, 1]
* @return {number} eased value in range [0, 1]
*/
function ease(t) {
return t*(2 - t); // easeOutQuad === ease-out
}
/** /**
* Document scroll wrapper helps to unify scrolling and fix issues of some browsers. * Document scroll wrapper helps to unify scrolling and fix issues of some browsers.
* *
@ -293,27 +311,37 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
* @param {number} scrollY vertical coordinate * @param {number} scrollY vertical coordinate
*/ */
function animateScroll(xScroller, scrollX, yScroller, scrollY) { function animateScroll(xScroller, scrollX, yScroller, scrollY) {
var ox = xScroller.scrollLeft;
var oy = yScroller.scrollTop;
var dx = scrollX - ox;
var dy = scrollY - oy;
if (Math.abs(dx) < Epsilon && Math.abs(dy) < Epsilon) {
return;
}
var start; var start;
function scrollAnim(currentTimestamp) { function scrollAnim(currentTimestamp) {
start = start || currentTimestamp; start = start || currentTimestamp;
var dx = scrollX - xScroller.scrollLeft; var k = Math.min(1, (currentTimestamp - start) / ScrollTime);
var dy = scrollY - yScroller.scrollTop;
if (Math.abs(dx) <= 1 && Math.abs(dy) <= 1) { if (k === 1) {
resetScrollTimer(); resetScrollTimer();
xScroller.scrollLeft = scrollX; xScroller.scrollLeft = scrollX;
yScroller.scrollTop = scrollY; yScroller.scrollTop = scrollY;
return; return;
} }
var k = Math.min(1, (currentTimestamp - start) / ScrollTime); k = ease(k);
dx = Math.round(dx*k); var x = ox + dx*k;
dy = Math.round(dy*k); var y = oy + dy*k;
builtinScroll(xScroller, xScroller.scrollLeft + dx, yScroller, yScroller.scrollTop + dy, false); builtinScroll(xScroller, x, yScroller, y, false);
scrollTimer = requestAnimationFrame(scrollAnim); scrollTimer = requestAnimationFrame(scrollAnim);
}; };