cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

Migrate NavigationDrawer to Es6

Browse Source
This commit is contained in:
grafixeyehero 2022-04-09 03:58:07 +03:00
parent 045306d5f4
commit 5c4527feaf
2 changed files with 212 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

413
src/libraries/navdrawer/navdrawer.js
View File

@ -3,134 +3,174 @@
* It is a legacy library that should be replaced at some point. * It is a legacy library that should be replaced at some point.
*/ */
/* eslint-disable no-var */
import browser from '../../scripts/browser'; import browser from '../../scripts/browser';
import dom from '../../scripts/dom'; import dom from '../../scripts/dom';
import './navdrawer.scss'; import './navdrawer.scss';
import '../../assets/css/scrollstyles.scss'; import '../../assets/css/scrollstyles.scss';
class NavigationDrawer {
mask;
newPos = 0;
currentPos = 0;
startPoint = 0;
countStart = 0;
velocity = 0;
dragMode = 0;
menuTouchStartX;
menuTouchStartY;
menuTouchStartTime;
edgeContainer = document.querySelector('.mainDrawerHandle');
isPeeking = false;
backgroundTouchStartX;
backgroundTouchStartTime;
_edgeSwipeEnabled;
export function NavigationDrawer(options) { constructor(options) {
function getTouches(e) { this.options = options;
this.defaults = {
width: 260,
handleSize: 10,
disableMask: false,
maxMaskOpacity: 0.5
};
options.target.classList.add('transition');
this.scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer');
this.scrollContainer.classList.add('scrollY');
this.isVisible = false;
this.initialize();
}
getTouches(e) {
return e.changedTouches || e.targetTouches || e.touches; return e.changedTouches || e.targetTouches || e.touches;
} }
function onMenuTouchStart(e) { disableEvent(e) {
e.preventDefault();
e.stopPropagation();
}
setVelocity(deltaX) {
const time = new Date().getTime() - (this.menuTouchStartTime || 0);
this.velocity = Math.abs(deltaX) / time;
}
onMenuTouchStart(e) {
const options = this.options;
options.target.classList.remove('transition'); options.target.classList.remove('transition');
const touches = getTouches(e); const touches = this.getTouches(e);
const touch = touches[0] || {}; const touch = touches[0] || {};
menuTouchStartX = touch.clientX; this.menuTouchStartX = touch.clientX;
menuTouchStartY = touch.clientY; this.menuTouchStartY = touch.clientY;
menuTouchStartTime = new Date().getTime(); this.menuTouchStartTime = new Date().getTime();
} }
function setVelocity(deltaX) { onMenuTouchMove(e) {
const time = new Date().getTime() - (menuTouchStartTime || 0); const scrollContainer = this.scrollContainer;
velocity = Math.abs(deltaX) / time;
}
function onMenuTouchMove(e) { const isOpen = this.visible;
const isOpen = self.visible; const touches = this.getTouches(e);
const touches = getTouches(e);
const touch = touches[0] || {}; const touch = touches[0] || {};
const endX = touch.clientX || 0; const endX = touch.clientX || 0;
const endY = touch.clientY || 0; const endY = touch.clientY || 0;
const deltaX = endX - (menuTouchStartX || 0); const deltaX = endX - (this.menuTouchStartX || 0);
const deltaY = endY - (menuTouchStartY || 0); const deltaY = endY - (this.menuTouchStartY || 0);
setVelocity(deltaX); this.setVelocity(deltaX);
if (isOpen && dragMode !== 1 && deltaX > 0) { if (isOpen && this.dragMode !== 1 && deltaX > 0) {
dragMode = 2; this.dragMode = 2;
} }
if (dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) { if (this.dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
dragMode = 1; this.dragMode = 1;
scrollContainer.addEventListener('scroll', disableEvent); scrollContainer.addEventListener('scroll', this.disableEvent);
self.showMask(); this.showMask();
} else if (dragMode === 0 && Math.abs(deltaY) >= 5) { } else if (this.dragMode === 0 && Math.abs(deltaY) >= 5) {
dragMode = 2; this.dragMode = 2;
} }
if (dragMode === 1) { if (this.dragMode === 1) {
newPos = currentPos + deltaX; this.newPos = this.currentPos + deltaX;
self.changeMenuPos(); this.changeMenuPos();
} }
} }
function onMenuTouchEnd(e) { onMenuTouchEnd(e) {
const options = this.options;
const scrollContainer = this.scrollContainer;
options.target.classList.add('transition'); options.target.classList.add('transition');
scrollContainer.removeEventListener('scroll', disableEvent); scrollContainer.removeEventListener('scroll', this.disableEvent);
dragMode = 0; this.dragMode = 0;
const touches = getTouches(e); const touches = this.getTouches(e);
const touch = touches[0] || {}; const touch = touches[0] || {};
const endX = touch.clientX || 0; const endX = touch.clientX || 0;
const endY = touch.clientY || 0; const endY = touch.clientY || 0;
const deltaX = endX - (menuTouchStartX || 0); const deltaX = endX - (this.menuTouchStartX || 0);
const deltaY = endY - (menuTouchStartY || 0); const deltaY = endY - (this.menuTouchStartY || 0);
currentPos = deltaX; this.currentPos = deltaX;
self.checkMenuState(deltaX, deltaY); this.checkMenuState(deltaX, deltaY);
} }
function onEdgeTouchStart(e) { onEdgeTouchMove(e) {
if (isPeeking) { e.preventDefault();
onMenuTouchMove(e); e.stopPropagation();
this.onEdgeTouchStart(e);
}
onEdgeTouchStart(e) {
const options = this.options;
if (this.isPeeking) {
this.onMenuTouchMove(e);
} else { } else {
if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) { if (((this.getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
isPeeking = true; this.isPeeking = true;
if (e.type === 'touchstart') { if (e.type === 'touchstart') {
dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {}); dom.removeEventListener(this.edgeContainer, 'touchmove', this.onEdgeTouchMove.bind(this), {});
dom.addEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {}); dom.addEventListener(this.edgeContainer, 'touchmove', this.onEdgeTouchMove.bind(this), {});
} }
onMenuTouchStart(e); this.onMenuTouchStart(e);
} }
} }
} }
function onEdgeTouchMove(e) { onEdgeTouchEnd(e) {
e.preventDefault(); if (this.isPeeking) {
e.stopPropagation(); this.isPeeking = false;
onEdgeTouchStart(e); dom.removeEventListener(this.edgeContainer, 'touchmove', this.onEdgeTouchMove.bind(this), {});
} this.onMenuTouchEnd(e);
function onEdgeTouchEnd(e) {
if (isPeeking) {
isPeeking = false;
dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
onMenuTouchEnd(e);
} }
} }
function disableEvent(e) { onBackgroundTouchStart(e) {
e.preventDefault(); const touches = this.getTouches(e);
e.stopPropagation();
}
function onBackgroundTouchStart(e) {
const touches = getTouches(e);
const touch = touches[0] || {}; const touch = touches[0] || {};
backgroundTouchStartX = touch.clientX; this.backgroundTouchStartX = touch.clientX;
backgroundTouchStartTime = new Date().getTime(); this.backgroundTouchStartTime = new Date().getTime();
} }
function onBackgroundTouchMove(e) { onBackgroundTouchMove(e) {
const touches = getTouches(e); const options = this.options;
const touches = this.getTouches(e);
const touch = touches[0] || {}; const touch = touches[0] || {};
const endX = touch.clientX || 0; const endX = touch.clientX || 0;
if (endX <= options.width && self.isVisible) { if (endX <= options.width && this.isVisible) {
countStart++; this.countStart++;
const deltaX = endX - (backgroundTouchStartX || 0); const deltaX = endX - (this.backgroundTouchStartX || 0);
if (countStart == 1) { if (this.countStart == 1) {
startPoint = deltaX; this.startPoint = deltaX;
} }
if (deltaX < 0 && dragMode !== 2) { if (deltaX < 0 && this.dragMode !== 2) {
dragMode = 1; this.dragMode = 1;
newPos = deltaX - startPoint + options.width; this.newPos = deltaX - this.startPoint + options.width;
self.changeMenuPos(); this.changeMenuPos();
const time = new Date().getTime() - (backgroundTouchStartTime || 0); const time = new Date().getTime() - (this.backgroundTouchStartTime || 0);
velocity = Math.abs(deltaX) / time; this.velocity = Math.abs(deltaX) / time;
} }
} }
@ -138,223 +178,194 @@ export function NavigationDrawer(options) {
e.stopPropagation(); e.stopPropagation();
} }
function onBackgroundTouchEnd(e) { onBackgroundTouchEnd(e) {
const touches = getTouches(e); const touches = this.getTouches(e);
const touch = touches[0] || {}; const touch = touches[0] || {};
const endX = touch.clientX || 0; const endX = touch.clientX || 0;
const deltaX = endX - (backgroundTouchStartX || 0); const deltaX = endX - (this.backgroundTouchStartX || 0);
self.checkMenuState(deltaX); this.checkMenuState(deltaX);
countStart = 0; this.countStart = 0;
} }
function onMaskTransitionEnd() { onMaskTransitionEnd() {
const classList = mask.classList; const classList = this.mask.classList;
if (!classList.contains('backdrop')) { if (!classList.contains('backdrop')) {
classList.add('hide'); classList.add('hide');
} }
} }
let self; initElements() {
let defaults; const options = this.options;
let mask;
var newPos = 0;
var currentPos = 0;
var startPoint = 0;
var countStart = 0;
var velocity = 0;
options.target.classList.add('transition');
var dragMode = 0;
var scrollContainer = options.target.querySelector('.mainDrawer-scrollContainer');
scrollContainer.classList.add('scrollY');
const TouchMenuLA = function () {
self = this;
defaults = {
width: 260,
handleSize: 10,
disableMask: false,
maxMaskOpacity: 0.5
};
this.isVisible = false;
this.initialize();
};
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'); this.mask = document.createElement('div');
mask.className = 'tmla-mask hide'; this.mask.className = 'tmla-mask hide';
document.body.appendChild(mask); document.body.appendChild(this.mask);
dom.addEventListener(mask, dom.whichTransitionEvent(), onMaskTransitionEnd, { dom.addEventListener(this.mask, dom.whichTransitionEvent(), this.onMaskTransitionEnd, {
passive: true passive: true
}); });
} }
}; }
let menuTouchStartX; animateToPosition(pos) {
let menuTouchStartY; const options = this.options;
let menuTouchStartTime;
var edgeContainer = document.querySelector('.mainDrawerHandle');
var isPeeking = false;
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';
}); });
};
TouchMenuLA.prototype.changeMenuPos = function () {
if (newPos <= options.width) {
this.animateToPosition(newPos);
} }
};
TouchMenuLA.prototype.clickMaskClose = function () { changeMenuPos() {
mask.addEventListener('click', function () { const options = this.options;
self.close(); if (this.newPos <= options.width) {
}); this.animateToPosition(this.newPos);
}; }
}
TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) { clickMaskClose() {
if (velocity >= 0.4) { this.close();
}
checkMenuState(deltaX, deltaY) {
if (this.velocity >= 0.4) {
if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) { if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
self.open(); this.open();
} else { } else {
self.close(); this.close();
} }
} else { } else {
if (newPos >= 100) { if (this.newPos >= 100) {
self.open(); this.open();
} else { } else {
if (newPos) { if (this.newPos) {
self.close(); this.close();
}
} }
} }
} }
};
TouchMenuLA.prototype.open = function () { open() {
const options = this.options;
this.animateToPosition(options.width); this.animateToPosition(options.width);
currentPos = options.width; this.currentPos = options.width;
this.isVisible = true; this.isVisible = true;
options.target.classList.add('drawer-open'); options.target.classList.add('drawer-open');
self.showMask(); this.showMask();
self.invoke(options.onChange); this.invoke(options.onChange);
}; }
close() {
const options = this.options;
TouchMenuLA.prototype.close = function () {
this.animateToPosition(0); this.animateToPosition(0);
currentPos = 0; this.currentPos = 0;
self.isVisible = false; this.isVisible = false;
options.target.classList.remove('drawer-open'); options.target.classList.remove('drawer-open');
self.hideMask(); this.hideMask();
self.invoke(options.onChange); this.invoke(options.onChange);
}; }
TouchMenuLA.prototype.toggle = function () { toggle() {
if (self.isVisible) { if (this.isVisible) {
self.close(); this.close();
} else { } else {
self.open(); this.open();
}
} }
};
let backgroundTouchStartX; showMask() {
let backgroundTouchStartTime; this.mask.classList.remove('hide');
this.mask.classList.add('backdrop');
}
TouchMenuLA.prototype.showMask = function () { hideMask() {
mask.classList.remove('hide'); this.mask.classList.add('hide');
mask.classList.add('backdrop'); this.mask.classList.remove('backdrop');
}; }
TouchMenuLA.prototype.hideMask = function () { invoke(fn) {
mask.classList.add('hide');
mask.classList.remove('backdrop');
};
TouchMenuLA.prototype.invoke = function (fn) {
if (fn) { if (fn) {
fn.apply(self); fn.apply(this);
}
} }
};
let _edgeSwipeEnabled; setEdgeSwipeEnabled(enabled) {
const options = this.options;
TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
if (!options.disableEdgeSwipe) { if (!options.disableEdgeSwipe) {
if (browser.touch) { if (browser.touch) {
if (enabled) { if (enabled) {
if (!_edgeSwipeEnabled) { if (!this._edgeSwipeEnabled) {
_edgeSwipeEnabled = true; this._edgeSwipeEnabled = true;
dom.addEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, { dom.addEventListener(this.edgeContainer, 'touchstart', this.onEdgeTouchStart.bind(this), {
passive: true passive: true
}); });
dom.addEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, { dom.addEventListener(this.edgeContainer, 'touchend', this.onEdgeTouchEnd.bind(this), {
passive: true passive: true
}); });
dom.addEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, { dom.addEventListener(this.edgeContainer, 'touchcancel', this.onEdgeTouchEnd.bind(this), {
passive: true passive: true
}); });
} }
} else { } else {
if (_edgeSwipeEnabled) { if (this._edgeSwipeEnabled) {
_edgeSwipeEnabled = false; this._edgeSwipeEnabled = false;
dom.removeEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, { dom.removeEventListener(this.edgeContainer, 'touchstart', this.onEdgeTouchStart.bind(this), {
passive: true passive: true
}); });
dom.removeEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, { dom.removeEventListener(this.edgeContainer, 'touchend', this.onEdgeTouchEnd.bind(this), {
passive: true passive: true
}); });
dom.removeEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, { dom.removeEventListener(this.edgeContainer, 'touchcancel', this.onEdgeTouchEnd.bind(this), {
passive: true passive: true
}); });
} }
} }
} }
} }
}; }
TouchMenuLA.prototype.initialize = function () { initialize() {
options = Object.assign(defaults, options || {}); const options = Object.assign(this.defaults, this.options || {});
if (browser.edge) { if (browser.edge) {
options.disableEdgeSwipe = true; options.disableEdgeSwipe = true;
} }
self.initElements(); this.initElements();
if (browser.touch) { if (browser.touch) {
dom.addEventListener(options.target, 'touchstart', onMenuTouchStart, { dom.addEventListener(options.target, 'touchstart', this.onMenuTouchStart.bind(this), {
passive: true passive: true
}); });
dom.addEventListener(options.target, 'touchmove', onMenuTouchMove, { dom.addEventListener(options.target, 'touchmove', this.onMenuTouchMove.bind(this), {
passive: true passive: true
}); });
dom.addEventListener(options.target, 'touchend', onMenuTouchEnd, { dom.addEventListener(options.target, 'touchend', this.onMenuTouchEnd.bind(this), {
passive: true passive: true
}); });
dom.addEventListener(options.target, 'touchcancel', onMenuTouchEnd, { dom.addEventListener(options.target, 'touchcancel', this.onMenuTouchEnd.bind(this), {
passive: true passive: true
}); });
dom.addEventListener(mask, 'touchstart', onBackgroundTouchStart, { dom.addEventListener(this.mask, 'touchstart', this.onBackgroundTouchStart.bind(this), {
passive: true passive: true
}); });
dom.addEventListener(mask, 'touchmove', onBackgroundTouchMove, {}); dom.addEventListener(this.mask, 'touchmove', this.onBackgroundTouchMove.bind(this), {});
dom.addEventListener(mask, 'touchend', onBackgroundTouchEnd, { dom.addEventListener(this.mask, 'touchend', this.onBackgroundTouchEnd.bind(this), {
passive: true passive: true
}); });
dom.addEventListener(mask, 'touchcancel', onBackgroundTouchEnd, { dom.addEventListener(this.mask, 'touchcancel', this.onBackgroundTouchEnd.bind(this), {
passive: true passive: true
}); });
} }
self.clickMaskClose(); this.mask.addEventListener('click', this.clickMaskClose.bind(this));
};
return new TouchMenuLA();
} }
/* eslint-enable no-var */ }
export default NavigationDrawer;

2
src/scripts/libraryMenu.js
View File

@ -899,7 +899,7 @@ import { getParameterByName } from '../utils/url.ts';
navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer'); navDrawerScrollContainer = navDrawerElement.querySelector('.scrollContainer');
navDrawerScrollContainer.addEventListener('click', onMainDrawerClick); navDrawerScrollContainer.addEventListener('click', onMainDrawerClick);
return new Promise(function (resolve) { return new Promise(function (resolve) {
import('../libraries/navdrawer/navdrawer').then(({ NavigationDrawer }) => { import('../libraries/navdrawer/navdrawer').then(({ default: NavigationDrawer }) => {
navDrawerInstance = new NavigationDrawer(getNavDrawerOptions()); navDrawerInstance = new NavigationDrawer(getNavDrawerOptions());
if (!layoutManager.tv) { if (!layoutManager.tv) {