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

Migrate scroller to ES6

This commit is contained in:
MrTimscampi 2020-08-06 21:15:16 +02:00
parent 0cd82da8f2
commit f2e1d03ae9
3 changed files with 838 additions and 879 deletions

View file

@ -276,6 +276,7 @@
"src/elements/emby-textarea/emby-textarea.js",
"src/elements/emby-toggle/emby-toggle.js",
"src/libraries/navdrawer/navdrawer.js",
"src/libraries/scroller.js",
"src/plugins/backdropScreensaver/plugin.js",
"src/plugins/bookPlayer/plugin.js",
"src/plugins/bookPlayer/tableOfContents.js",

View file

@ -1,4 +1,4 @@
define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'scroller', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, scroller, playbackManager, AlphaPicker) {
define(['globalize', 'listView', 'layoutManager', 'userSettings', 'focusManager', 'cardBuilder', 'loading', 'connectionManager', 'alphaNumericShortcuts', 'playbackManager', 'alphaPicker', 'emby-itemscontainer', 'emby-scroller'], function (globalize, listView, layoutManager, userSettings, focusManager, cardBuilder, loading, connectionManager, AlphaNumericShortcuts, playbackManager, AlphaPicker) {
'use strict';
playbackManager = playbackManager.default || playbackManager;

View file

@ -1,17 +1,22 @@
define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'scrollStyles'], function (browser, layoutManager, dom, focusManager, ResizeObserver) {
'use strict';
/* Cleaning this file properly is not neecessary, since it's an outdated library
* and will be replaced soon by a Vue component.
*/
browser = browser.default || browser;
focusManager = focusManager.default || focusManager;
import browser from 'browser';
import layoutManager from 'layoutManager';
import dom from 'dom';
import focusManager from 'focusManager';
import ResizeObserver from 'ResizeObserver';
import 'scrollStyles';
/**
/**
* Return type of the value.
*
* @param {Mixed} value
*
* @return {String}
*/
function type(value) {
function type(value) {
if (value == null) {
return String(value);
}
@ -21,23 +26,23 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}
return typeof value;
}
}
/**
/**
* Disables an event it was triggered on and unbinds itself.
*
* @param {Event} event
*
* @return {Void}
*/
function disableOneEvent(event) {
function disableOneEvent(event) {
/*jshint validthis:true */
event.preventDefault();
event.stopPropagation();
this.removeEventListener(event.type, disableOneEvent);
}
}
/**
/**
* Make sure that number is within the limits.
*
* @param {Number} number
@ -46,28 +51,17 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
*
* @return {Number}
*/
function within(number, min, max) {
function within(number, min, max) {
return number < min ? min : number > max ? max : number;
}
}
// Other global values
var dragMouseEvents = ['mousemove', 'mouseup'];
var dragTouchEvents = ['touchmove', 'touchend'];
var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
var interactiveElements = ['INPUT', 'SELECT', 'TEXTAREA'];
var tmpArray = [];
var time;
// Math shorthands
var abs = Math.abs;
var sqrt = Math.sqrt;
var pow = Math.pow;
var round = Math.round;
var max = Math.max;
var min = Math.min;
var scrollerFactory = function (frame, options) {
// Other global values
var dragMouseEvents = ['mousemove', 'mouseup'];
var dragTouchEvents = ['touchmove', 'touchend'];
var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
var interactiveElements = ['INPUT', 'SELECT', 'TEXTAREA'];
var scrollerFactory = function (frame, options) {
// Extend options
var o = Object.assign({}, {
slidee: null, // Selector, DOM element, or jQuery object with DOM element representing SLIDEE.
@ -100,11 +94,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
// native smooth scroll
options.enableNativeScroll = true;
} else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) {
// transform is the only way to guarantee animation
options.enableNativeScroll = false;
} else if (!layoutManager.tv || !browser.animate) {
options.enableNativeScroll = true;
}
@ -165,9 +157,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
var frameSize = 0;
var slideeSize = 0;
function ensureSizeInfo() {
if (requiresReflow) {
requiresReflow = false;
// Reset global variables
@ -176,7 +166,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
slideeSize = o.scrollWidth || Math.max(slideeElement[o.horizontal ? 'offsetWidth' : 'offsetHeight'], slideeElement[o.horizontal ? 'scrollWidth' : 'scrollHeight']);
// Set position limits & relativess
self._pos.end = max(slideeSize - frameSize, 0);
self._pos.end = Math.max(slideeSize - frameSize, 0);
}
}
@ -189,11 +179,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Void}
*/
function load(isInit) {
requiresReflow = true;
if (!isInit) {
ensureSizeInfo();
// Fix possible overflowing
@ -203,7 +191,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}
function initFrameResizeObserver() {
var observerOptions = {};
self.frameResizeObserver = new ResizeObserver(onResize, observerOptions);
@ -228,16 +215,13 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
};
function nativeScrollTo(container, pos, immediate) {
if (container.scroll) {
if (o.horizontal) {
container.scroll({
left: pos,
behavior: immediate ? 'instant' : 'smooth'
});
} else {
container.scroll({
top: pos,
behavior: immediate ? 'instant' : 'smooth'
@ -245,15 +229,15 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}
} else if (!immediate && container.scrollTo) {
if (o.horizontal) {
container.scrollTo(Math.round(pos), 0);
container.scrollTo(Math.Math.round(pos), 0);
} else {
container.scrollTo(0, Math.round(pos));
container.scrollTo(0, Math.Math.round(pos));
}
} else {
if (o.horizontal) {
container.scrollLeft = Math.round(pos);
container.scrollLeft = Math.Math.round(pos);
} else {
container.scrollTop = Math.round(pos);
container.scrollTop = Math.Math.round(pos);
}
}
}
@ -269,14 +253,12 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Void}
*/
self.slideTo = function (newPos, immediate, fullItemPos) {
ensureSizeInfo();
var pos = self._pos;
newPos = within(newPos, pos.start, pos.end);
if (!transform) {
nativeScrollTo(nativeScrollElement, newPos, immediate);
return;
}
@ -294,7 +276,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}
if (!immediate && o.skipSlideToWhenVisible && fullItemPos && fullItemPos.isVisible) {
return;
}
@ -306,7 +287,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
};
function setStyleProperty(elem, name, value, speed, resetTransition) {
var style = elem.style;
if (resetTransition || browser.edge) {
@ -328,7 +308,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}
function renderAnimateWithTransform(fromPosition, toPosition, immediate) {
var speed = o.speed;
if (immediate) {
@ -336,9 +315,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}
if (o.horizontal) {
setStyleProperty(slideeElement, 'transform', 'translateX(' + (-round(toPosition)) + 'px)', speed);
setStyleProperty(slideeElement, 'transform', 'translateX(' + (-Math.round(toPosition)) + 'px)', speed);
} else {
setStyleProperty(slideeElement, 'transform', 'translateY(' + (-round(toPosition)) + 'px)', speed);
setStyleProperty(slideeElement, 'transform', 'translateY(' + (-Math.round(toPosition)) + 'px)', speed);
}
self._pos.cur = toPosition;
@ -346,7 +325,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}
function getBoundingClientRect(elem) {
// Support: BlackBerry 5, iOS 3 (original iPhone)
// If we don't have gBCR, just use 0,0 rather than error
if (elem.getBoundingClientRect) {
@ -364,14 +342,10 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Object}
*/
self.getPos = function (item) {
var scrollElement = transform ? slideeElement : nativeScrollElement;
var slideeOffset = getBoundingClientRect(scrollElement);
var itemOffset = getBoundingClientRect(item);
var slideeStartPos = o.horizontal ? slideeOffset.left : slideeOffset.top;
var slideeEndPos = o.horizontal ? slideeOffset.right : slideeOffset.bottom;
var offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
var size = o.horizontal ? itemOffset.width : itemOffset.height;
@ -408,7 +382,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
};
self.getCenterPosition = function (item) {
ensureSizeInfo();
var pos = self.getPos(item);
@ -453,7 +426,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
// Bind dragging events
if (transform) {
if (isTouch) {
dragTouchEvents.forEach(function (eventName) {
dom.addEventListener(document, eventName, dragHandler, {
@ -482,7 +454,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
var pointer = dragging.touch ? event[dragging.released ? 'changedTouches' : 'touches'][0] : event;
dragging.pathX = pointer.pageX - dragging.initX;
dragging.pathY = pointer.pageY - dragging.initY;
dragging.path = sqrt(pow(dragging.pathX, 2) + pow(dragging.pathY, 2));
dragging.path = Math.sqrt(Math.pow(dragging.pathX, 2) + Math.pow(dragging.pathY, 2));
dragging.delta = o.horizontal ? dragging.pathX : dragging.pathY;
if (!dragging.released && dragging.path < 1) {
@ -499,7 +471,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
} else {
// If dragging path is sufficiently long we can confidently start a drag
// if drag is in different direction than scroll, ignore it
if (o.horizontal ? abs(dragging.pathX) > abs(dragging.pathY) : abs(dragging.pathX) < abs(dragging.pathY)) {
if (o.horizontal ? Math.abs(dragging.pathX) > Math.abs(dragging.pathY) : Math.abs(dragging.pathX) < Math.abs(dragging.pathY)) {
dragging.init = 1;
} else {
return dragEnd();
@ -520,7 +492,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
dragEnd();
}
self.slideTo(round(dragging.initPos - dragging.delta));
self.slideTo(Math.round(dragging.initPos - dragging.delta));
}
/**
@ -557,9 +529,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Boolean}
*/
function isInteractive(element) {
while (element) {
if (interactiveElements.indexOf(element.tagName) !== -1) {
return true;
}
@ -595,7 +565,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Void}
*/
function scrollHandler(event) {
ensureSizeInfo();
var pos = self._pos;
// Ignore if there is no scrolling to be done
@ -612,7 +581,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
self.slideBy(o.scrollBy * delta);
} else {
if (isSmoothScrollSupported) {
delta *= 12;
}
@ -631,7 +599,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Void}
*/
self.destroy = function () {
if (self.frameResizeObserver) {
self.frameResizeObserver.disconnect();
self.frameResizeObserver = null;
@ -667,11 +634,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
var contentRect = {};
function onResize(entries) {
var entry = entries[0];
if (entry) {
var newRect = entry.contentRect;
// handle element being hidden
@ -680,7 +645,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}
if (newRect.width !== contentRect.width || newRect.height !== contentRect.height) {
contentRect = newRect;
load(false);
@ -706,7 +670,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}
self.getScrollPosition = function () {
if (transform) {
return self._pos.cur;
}
@ -719,7 +682,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
};
self.getScrollSize = function () {
if (transform) {
return slideeSize;
}
@ -795,7 +757,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
initFrameResizeObserver();
if (transform) {
dom.addEventListener(dragSourceElement, 'touchstart', dragInitSlidee, {
passive: true
});
@ -812,9 +773,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
passive: true
});
}
} else if (o.horizontal) {
// Don't bind to mouse events with vertical scroll since the mouse wheel can handle this natively
if (o.mouseWheel) {
@ -839,9 +798,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
// Return instance
return self;
};
};
};
/**
/**
* Slide SLIDEE by amount of pixels.
*
* @param {Int} delta Pixels/Items. Positive means forward, negative means backward.
@ -849,14 +808,14 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
*
* @return {Void}
*/
scrollerFactory.prototype.slideBy = function (delta, immediate) {
scrollerFactory.prototype.slideBy = function (delta, immediate) {
if (!delta) {
return;
}
this.slideTo(this._pos.dest + delta, immediate);
};
};
/**
/**
* Core method for handling `toLocation` methods.
*
* @param {String} location
@ -865,7 +824,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
*
* @return {Void}
*/
scrollerFactory.prototype.to = function (location, item, immediate) {
scrollerFactory.prototype.to = function (location, item, immediate) {
// Optional arguments logic
if (type(item) === 'boolean') {
immediate = item;
@ -881,9 +840,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
this.slideTo(itemPos[location], immediate, itemPos);
}
}
};
};
/**
/**
* Animate element or the whole SLIDEE to the start of the frame.
*
* @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
@ -891,11 +850,11 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
*
* @return {Void}
*/
scrollerFactory.prototype.toStart = function (item, immediate) {
scrollerFactory.prototype.toStart = function (item, immediate) {
this.to('start', item, immediate);
};
};
/**
/**
* Animate element or the whole SLIDEE to the end of the frame.
*
* @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
@ -903,11 +862,11 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
*
* @return {Void}
*/
scrollerFactory.prototype.toEnd = function (item, immediate) {
scrollerFactory.prototype.toEnd = function (item, immediate) {
this.to('end', item, immediate);
};
};
/**
/**
* Animate element or the whole SLIDEE to the center of the frame.
*
* @param {Mixed} item Item DOM element, or index starting at 0. Omitting will animate SLIDEE.
@ -915,14 +874,13 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
*
* @return {Void}
*/
scrollerFactory.prototype.toCenter = function (item, immediate) {
scrollerFactory.prototype.toCenter = function (item, immediate) {
this.to('center', item, immediate);
};
};
scrollerFactory.create = function (frame, options) {
scrollerFactory.create = function (frame, options) {
var instance = new scrollerFactory(frame, options);
return Promise.resolve(instance);
};
};
return scrollerFactory;
});
export default scrollerFactory;