Migrate navdrawer to ES6

This commit is contained in:
MrTimscampi 2020-08-06 20:59:14 +02:00
parent 267c1582c0
commit 0cd82da8f2
4 changed files with 324 additions and 319 deletions

View file

@ -2,4 +2,3 @@ node_modules
dist dist
.idea .idea
.vscode .vscode
src/libraries

View file

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

View file

@ -1,15 +1,19 @@
define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser, dom) { /* Cleaning this file properly is not neecessary, since it's an outdated library
"use strict"; * and will be replaced soon by a Vue component.
*/
browser = browser.default || browser; import browser from 'browser';
import dom from 'dom';
import 'css!./navdrawer';
import 'scrollStyles';
return function (options) { export default function (options) {
function getTouches(e) { function getTouches(e) {
return e.changedTouches || e.targetTouches || e.touches; return e.changedTouches || e.targetTouches || e.touches;
} }
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;
@ -32,27 +36,27 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
var deltaY = endY - (menuTouchStartY || 0); var deltaY = endY - (menuTouchStartY || 0);
setVelocity(deltaX); setVelocity(deltaX);
if (isOpen && 1 !== dragMode && deltaX > 0) { if (isOpen && dragMode !== 1 && deltaX > 0) {
dragMode = 2; dragMode = 2;
} }
if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) { if (dragMode === 0 && (!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 (dragMode === 0 && Math.abs(deltaY) >= 5) {
dragMode = 2; dragMode = 2;
} }
if (1 === dragMode) { if (dragMode === 1) {
newPos = currentPos + deltaX; newPos = currentPos + deltaX;
self.changeMenuPos(); self.changeMenuPos();
} }
} }
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] || {};
@ -71,9 +75,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);
@ -90,7 +94,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);
} }
} }
@ -144,8 +148,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');
} }
} }
@ -157,10 +161,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;
@ -175,13 +179,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
@ -192,12 +196,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';
}); });
}; };
@ -208,7 +212,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();
}); });
}; };
@ -235,7 +239,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);
}; };
@ -244,7 +248,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);
}; };
@ -261,13 +265,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) {
@ -284,26 +288,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
}); });
} }
@ -322,26 +326,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
}); });
} }
@ -350,5 +354,4 @@ define(["browser", "dom", "css!./navdrawer", "scrollStyles"], function (browser,
}; };
return new TouchMenuLA(); return new TouchMenuLA();
}; }
});

View file

@ -806,6 +806,8 @@ define(['dom', 'layoutManager', 'inputManager', 'connectionManager', 'events', '
navDrawerScrollContainer.addEventListener('click', onMainDrawerClick); navDrawerScrollContainer.addEventListener('click', onMainDrawerClick);
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
require(['navdrawer'], function (navdrawer) { require(['navdrawer'], function (navdrawer) {
navdrawer = navdrawer.default || navdrawer;
navDrawerInstance = new navdrawer(getNavDrawerOptions()); navDrawerInstance = new navdrawer(getNavDrawerOptions());
if (!layoutManager.tv) { if (!layoutManager.tv) {