1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
This commit is contained in:
Cameron 2020-07-28 21:43:46 +01:00
parent f9e79c0a4e
commit d63a229e0e
2 changed files with 43 additions and 82 deletions

View file

@ -1,5 +1,5 @@
define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) { define(['browser', 'dom', 'css!./navdrawer', 'scrollStyles'], function (browser, dom) {
"use strict"; 'use strict';
return function (options) { return function (options) {
function getTouches(e) { function getTouches(e) {
@ -7,7 +7,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
} }
function onMenuTouchStart(e) { function onMenuTouchStart(e) {
options.target.classList.remove("transition"); options.target.classList.remove('transition');
var touches = getTouches(e); var touches = getTouches(e);
var touch = touches[0] || {}; var touch = touches[0] || {};
menuTouchStartX = touch.clientX; menuTouchStartX = touch.clientX;
@ -36,7 +36,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) { if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
dragMode = 1; dragMode = 1;
scrollContainer.addEventListener("scroll", disableEvent); scrollContainer.addEventListener('scroll', disableEvent);
self.showMask(); self.showMask();
} else if (0 === dragMode && Math.abs(deltaY) >= 5) { } else if (0 === dragMode && Math.abs(deltaY) >= 5) {
dragMode = 2; dragMode = 2;
@ -49,8 +49,8 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
} }
function onMenuTouchEnd(e) { function onMenuTouchEnd(e) {
options.target.classList.add("transition"); options.target.classList.add('transition');
scrollContainer.removeEventListener("scroll", disableEvent); scrollContainer.removeEventListener('scroll', disableEvent);
dragMode = 0; dragMode = 0;
var touches = getTouches(e); var touches = getTouches(e);
var touch = touches[0] || {}; var touch = touches[0] || {};
@ -69,9 +69,9 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) { if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
isPeeking = true; isPeeking = true;
if (e.type === "touchstart") { if (e.type === 'touchstart') {
dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); dom.addEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
} }
onMenuTouchStart(e); onMenuTouchStart(e);
@ -88,7 +88,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
function onEdgeTouchEnd(e) { function onEdgeTouchEnd(e) {
if (isPeeking) { if (isPeeking) {
isPeeking = false; isPeeking = false;
dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {}); dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
onMenuTouchEnd(e); onMenuTouchEnd(e);
} }
} }
@ -142,8 +142,8 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
function onMaskTransitionEnd() { function onMaskTransitionEnd() {
var classList = mask.classList; var classList = mask.classList;
if (!classList.contains("backdrop")) { if (!classList.contains('backdrop')) {
classList.add("hide"); classList.add('hide');
} }
} }
@ -155,10 +155,10 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
var startPoint = 0; var startPoint = 0;
var countStart = 0; var countStart = 0;
var velocity = 0; var velocity = 0;
options.target.classList.add("transition"); options.target.classList.add('transition');
var dragMode = 0; var dragMode = 0;
var scrollContainer = options.target.querySelector(".mainDrawer-scrollContainer"); var scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer');
scrollContainer.classList.add("scrollY"); scrollContainer.classList.add('scrollY');
var TouchMenuLA = function () { var TouchMenuLA = function () {
self = this; self = this;
@ -173,13 +173,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
}; };
TouchMenuLA.prototype.initElements = function () { TouchMenuLA.prototype.initElements = function () {
options.target.classList.add("touch-menu-la"); options.target.classList.add('touch-menu-la');
options.target.style.width = options.width + "px"; options.target.style.width = options.width + 'px';
options.target.style.left = -options.width + "px"; options.target.style.left = -options.width + 'px';
if (!options.disableMask) { if (!options.disableMask) {
mask = document.createElement("div"); mask = document.createElement('div');
mask.className = "tmla-mask hide"; mask.className = 'tmla-mask hide';
document.body.appendChild(mask); document.body.appendChild(mask);
dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, { dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, {
passive: true passive: true
@ -190,12 +190,12 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
var menuTouchStartX; var menuTouchStartX;
var menuTouchStartY; var menuTouchStartY;
var menuTouchStartTime; var menuTouchStartTime;
var edgeContainer = document.querySelector(".mainDrawerHandle"); var edgeContainer = document.querySelector('.mainDrawerHandle');
var isPeeking = false; var isPeeking = false;
TouchMenuLA.prototype.animateToPosition = function (pos) { TouchMenuLA.prototype.animateToPosition = function (pos) {
requestAnimationFrame(function () { requestAnimationFrame(function () {
options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none"; options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none';
}); });
}; };
@ -206,7 +206,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
}; };
TouchMenuLA.prototype.clickMaskClose = function () { TouchMenuLA.prototype.clickMaskClose = function () {
mask.addEventListener("click", function () { mask.addEventListener('click', function () {
self.close(); self.close();
}); });
}; };
@ -233,7 +233,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
this.animateToPosition(options.width); this.animateToPosition(options.width);
currentPos = options.width; currentPos = options.width;
this.isVisible = true; this.isVisible = true;
options.target.classList.add("drawer-open"); options.target.classList.add('drawer-open');
self.showMask(); self.showMask();
self.invoke(options.onChange); self.invoke(options.onChange);
}; };
@ -242,7 +242,7 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
this.animateToPosition(0); this.animateToPosition(0);
currentPos = 0; currentPos = 0;
self.isVisible = false; self.isVisible = false;
options.target.classList.remove("drawer-open"); options.target.classList.remove('drawer-open');
self.hideMask(); self.hideMask();
self.invoke(options.onChange); self.invoke(options.onChange);
}; };
@ -259,13 +259,13 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
var backgroundTouchStartTime; var backgroundTouchStartTime;
TouchMenuLA.prototype.showMask = function () { TouchMenuLA.prototype.showMask = function () {
mask.classList.remove("hide"); mask.classList.remove('hide');
mask.classList.add("backdrop"); mask.classList.add('backdrop');
}; };
TouchMenuLA.prototype.hideMask = function () { TouchMenuLA.prototype.hideMask = function () {
mask.classList.add("hide"); mask.classList.add('hide');
mask.classList.remove("backdrop"); mask.classList.remove('backdrop');
}; };
TouchMenuLA.prototype.invoke = function (fn) { TouchMenuLA.prototype.invoke = function (fn) {
@ -282,26 +282,26 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
if (enabled) { if (enabled) {
if (!_edgeSwipeEnabled) { if (!_edgeSwipeEnabled) {
_edgeSwipeEnabled = true; _edgeSwipeEnabled = true;
dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, { dom.addEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
passive: true passive: true
}); });
dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, { dom.addEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
passive: true passive: true
}); });
dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, { dom.addEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
passive: true passive: true
}); });
} }
} else { } else {
if (_edgeSwipeEnabled) { if (_edgeSwipeEnabled) {
_edgeSwipeEnabled = false; _edgeSwipeEnabled = false;
dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, { dom.removeEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
passive: true passive: true
}); });
dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, { dom.removeEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
passive: true passive: true
}); });
dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, { dom.removeEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
passive: true passive: true
}); });
} }
@ -320,26 +320,26 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
self.initElements(); self.initElements();
if (browser.touch) { if (browser.touch) {
dom.addEventListener(options.target, "touchstart", onMenuTouchStart, { dom.addEventListener(options.target, 'touchstart', onMenuTouchStart, {
passive: true passive: true
}); });
dom.addEventListener(options.target, "touchmove", onMenuTouchMove, { dom.addEventListener(options.target, 'touchmove', onMenuTouchMove, {
passive: true passive: true
}); });
dom.addEventListener(options.target, "touchend", onMenuTouchEnd, { dom.addEventListener(options.target, 'touchend', onMenuTouchEnd, {
passive: true passive: true
}); });
dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, { dom.addEventListener(options.target, 'touchcancel', onMenuTouchEnd, {
passive: true passive: true
}); });
dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, { dom.addEventListener(mask, 'touchstart', onBackgroundTouchStart, {
passive: true passive: true
}); });
dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {}); dom.addEventListener(mask, 'touchmove', onBackgroundTouchMove, {});
dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, { dom.addEventListener(mask, 'touchend', onBackgroundTouchEnd, {
passive: true passive: true
}); });
dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, { dom.addEventListener(mask, 'touchcancel', onBackgroundTouchEnd, {
passive: true passive: true
}); });
} }

View file

@ -52,8 +52,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
var dragTouchEvents = ['touchmove', 'touchend']; var dragTouchEvents = ['touchmove', 'touchend'];
var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel'); var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
var interactiveElements = ['INPUT', 'SELECT', 'TEXTAREA']; var interactiveElements = ['INPUT', 'SELECT', 'TEXTAREA'];
var tmpArray = [];
var time;
// Math shorthands // Math shorthands
var abs = Math.abs; var abs = Math.abs;
@ -61,10 +59,8 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
var pow = Math.pow; var pow = Math.pow;
var round = Math.round; var round = Math.round;
var max = Math.max; var max = Math.max;
var min = Math.min;
var scrollerFactory = function (frame, options) { var scrollerFactory = function (frame, options) {
// Extend options // Extend options
var o = Object.assign({}, { var o = Object.assign({}, {
slidee: null, // Selector, DOM element, or jQuery object with DOM element representing SLIDEE. slidee: null, // Selector, DOM element, or jQuery object with DOM element representing SLIDEE.
@ -97,11 +93,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
// native smooth scroll // native smooth scroll
options.enableNativeScroll = true; options.enableNativeScroll = true;
} else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) { } else if (options.requireAnimation && (browser.animate || browser.supportsCssAnimation())) {
// transform is the only way to guarantee animation // transform is the only way to guarantee animation
options.enableNativeScroll = false; options.enableNativeScroll = false;
} else if (!layoutManager.tv || !browser.animate) { } else if (!layoutManager.tv || !browser.animate) {
options.enableNativeScroll = true; options.enableNativeScroll = true;
} }
@ -162,9 +156,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
var frameSize = 0; var frameSize = 0;
var slideeSize = 0; var slideeSize = 0;
function ensureSizeInfo() { function ensureSizeInfo() {
if (requiresReflow) { if (requiresReflow) {
requiresReflow = false; requiresReflow = false;
// Reset global variables // Reset global variables
@ -186,11 +178,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Void} * @return {Void}
*/ */
function load(isInit) { function load(isInit) {
requiresReflow = true; requiresReflow = true;
if (!isInit) { if (!isInit) {
ensureSizeInfo(); ensureSizeInfo();
// Fix possible overflowing // Fix possible overflowing
@ -200,7 +190,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
} }
function initFrameResizeObserver() { function initFrameResizeObserver() {
var observerOptions = {}; var observerOptions = {};
self.frameResizeObserver = new ResizeObserver(onResize, observerOptions); self.frameResizeObserver = new ResizeObserver(onResize, observerOptions);
@ -225,16 +214,13 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}; };
function nativeScrollTo(container, pos, immediate) { function nativeScrollTo(container, pos, immediate) {
if (container.scroll) { if (container.scroll) {
if (o.horizontal) { if (o.horizontal) {
container.scroll({ container.scroll({
left: pos, left: pos,
behavior: immediate ? 'instant' : 'smooth' behavior: immediate ? 'instant' : 'smooth'
}); });
} else { } else {
container.scroll({ container.scroll({
top: pos, top: pos,
behavior: immediate ? 'instant' : 'smooth' behavior: immediate ? 'instant' : 'smooth'
@ -266,14 +252,12 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Void} * @return {Void}
*/ */
self.slideTo = function (newPos, immediate, fullItemPos) { self.slideTo = function (newPos, immediate, fullItemPos) {
ensureSizeInfo(); ensureSizeInfo();
var pos = self._pos; var pos = self._pos;
newPos = within(newPos, pos.start, pos.end); newPos = within(newPos, pos.start, pos.end);
if (!transform) { if (!transform) {
nativeScrollTo(nativeScrollElement, newPos, immediate); nativeScrollTo(nativeScrollElement, newPos, immediate);
return; return;
} }
@ -291,7 +275,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
} }
if (!immediate && o.skipSlideToWhenVisible && fullItemPos && fullItemPos.isVisible) { if (!immediate && o.skipSlideToWhenVisible && fullItemPos && fullItemPos.isVisible) {
return; return;
} }
@ -303,7 +286,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}; };
function setStyleProperty(elem, name, value, speed, resetTransition) { function setStyleProperty(elem, name, value, speed, resetTransition) {
var style = elem.style; var style = elem.style;
if (resetTransition || browser.edge) { if (resetTransition || browser.edge) {
@ -325,7 +307,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
} }
function renderAnimateWithTransform(fromPosition, toPosition, immediate) { function renderAnimateWithTransform(fromPosition, toPosition, immediate) {
var speed = o.speed; var speed = o.speed;
if (immediate) { if (immediate) {
@ -343,7 +324,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
} }
function getBoundingClientRect(elem) { function getBoundingClientRect(elem) {
// Support: BlackBerry 5, iOS 3 (original iPhone) // Support: BlackBerry 5, iOS 3 (original iPhone)
// If we don't have gBCR, just use 0,0 rather than error // If we don't have gBCR, just use 0,0 rather than error
if (elem.getBoundingClientRect) { if (elem.getBoundingClientRect) {
@ -361,14 +341,10 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Object} * @return {Object}
*/ */
self.getPos = function (item) { self.getPos = function (item) {
var scrollElement = transform ? slideeElement : nativeScrollElement; var scrollElement = transform ? slideeElement : nativeScrollElement;
var slideeOffset = getBoundingClientRect(scrollElement); var slideeOffset = getBoundingClientRect(scrollElement);
var itemOffset = getBoundingClientRect(item); 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 offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
var size = o.horizontal ? itemOffset.width : itemOffset.height; var size = o.horizontal ? itemOffset.width : itemOffset.height;
@ -405,7 +381,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}; };
self.getCenterPosition = function (item) { self.getCenterPosition = function (item) {
ensureSizeInfo(); ensureSizeInfo();
var pos = self.getPos(item); var pos = self.getPos(item);
@ -450,7 +425,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
// Bind dragging events // Bind dragging events
if (transform) { if (transform) {
if (isTouch) { if (isTouch) {
dragTouchEvents.forEach(function (eventName) { dragTouchEvents.forEach(function (eventName) {
dom.addEventListener(document, eventName, dragHandler, { dom.addEventListener(document, eventName, dragHandler, {
@ -554,9 +528,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Boolean} * @return {Boolean}
*/ */
function isInteractive(element) { function isInteractive(element) {
while (element) { while (element) {
if (interactiveElements.indexOf(element.tagName) !== -1) { if (interactiveElements.indexOf(element.tagName) !== -1) {
return true; return true;
} }
@ -592,7 +564,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Void} * @return {Void}
*/ */
function scrollHandler(event) { function scrollHandler(event) {
ensureSizeInfo(); ensureSizeInfo();
var pos = self._pos; var pos = self._pos;
// Ignore if there is no scrolling to be done // Ignore if there is no scrolling to be done
@ -609,7 +580,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
self.slideBy(o.scrollBy * delta); self.slideBy(o.scrollBy * delta);
} else { } else {
if (isSmoothScrollSupported) { if (isSmoothScrollSupported) {
delta *= 12; delta *= 12;
} }
@ -628,7 +598,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
* @return {Void} * @return {Void}
*/ */
self.destroy = function () { self.destroy = function () {
if (self.frameResizeObserver) { if (self.frameResizeObserver) {
self.frameResizeObserver.disconnect(); self.frameResizeObserver.disconnect();
self.frameResizeObserver = null; self.frameResizeObserver = null;
@ -664,11 +633,9 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
var contentRect = {}; var contentRect = {};
function onResize(entries) { function onResize(entries) {
var entry = entries[0]; var entry = entries[0];
if (entry) { if (entry) {
var newRect = entry.contentRect; var newRect = entry.contentRect;
// handle element being hidden // handle element being hidden
@ -677,7 +644,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
} }
if (newRect.width !== contentRect.width || newRect.height !== contentRect.height) { if (newRect.width !== contentRect.width || newRect.height !== contentRect.height) {
contentRect = newRect; contentRect = newRect;
load(false); load(false);
@ -703,7 +669,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
} }
self.getScrollPosition = function () { self.getScrollPosition = function () {
if (transform) { if (transform) {
return self._pos.cur; return self._pos.cur;
} }
@ -716,7 +681,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
}; };
self.getScrollSize = function () { self.getScrollSize = function () {
if (transform) { if (transform) {
return slideeSize; return slideeSize;
} }
@ -792,7 +756,6 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
initFrameResizeObserver(); initFrameResizeObserver();
if (transform) { if (transform) {
dom.addEventListener(dragSourceElement, 'touchstart', dragInitSlidee, { dom.addEventListener(dragSourceElement, 'touchstart', dragInitSlidee, {
passive: true passive: true
}); });
@ -809,9 +772,7 @@ define(['browser', 'layoutManager', 'dom', 'focusManager', 'ResizeObserver', 'sc
passive: true passive: true
}); });
} }
} else if (o.horizontal) { } else if (o.horizontal) {
// Don't bind to mouse events with vertical scroll since the mouse wheel can handle this natively // Don't bind to mouse events with vertical scroll since the mouse wheel can handle this natively
if (o.mouseWheel) { if (o.mouseWheel) {