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) {
"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
var _minimumScrollY = 0;
@ -69,6 +77,16 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
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.
*
@ -293,27 +311,37 @@ define(["dom", "browser", "layoutManager"], function (dom, browser, layoutManage
* @param {number} scrollY vertical coordinate
*/
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;
function scrollAnim(currentTimestamp) {
start = start || currentTimestamp;
var dx = scrollX - xScroller.scrollLeft;
var dy = scrollY - yScroller.scrollTop;
var k = Math.min(1, (currentTimestamp - start) / ScrollTime);
if (Math.abs(dx) <= 1 && Math.abs(dy) <= 1) {
if (k === 1) {
resetScrollTimer();
xScroller.scrollLeft = scrollX;
yScroller.scrollTop = scrollY;
return;
}
var k = Math.min(1, (currentTimestamp - start) / ScrollTime);
k = ease(k);
dx = Math.round(dx*k);
dy = Math.round(dy*k);
var x = ox + dx*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);
};