Migrate navdrawer to ES6
This commit is contained in:
MrTimscampi
parent
267c1582c0
commit
0cd82da8f2
4 changed files with 324 additions and 319 deletions
|
|
@ -2,4 +2,3 @@ node_modules
|
||||||
dist
|
dist
|
||||||
.idea
|
.idea
|
||||||
.vscode
|
.vscode
|
||||||
src/libraries
|
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -1,354 +1,357 @@
|
||||||
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) {
|
||||||
|
options.target.classList.remove('transition');
|
||||||
|
var touches = getTouches(e);
|
||||||
|
var touch = touches[0] || {};
|
||||||
|
menuTouchStartX = touch.clientX;
|
||||||
|
menuTouchStartY = touch.clientY;
|
||||||
|
menuTouchStartTime = new Date().getTime();
|
||||||
|
}
|
||||||
|
|
||||||
|
function setVelocity(deltaX) {
|
||||||
|
var time = new Date().getTime() - (menuTouchStartTime || 0);
|
||||||
|
velocity = Math.abs(deltaX) / time;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMenuTouchMove(e) {
|
||||||
|
var isOpen = self.visible;
|
||||||
|
var touches = getTouches(e);
|
||||||
|
var touch = touches[0] || {};
|
||||||
|
var endX = touch.clientX || 0;
|
||||||
|
var endY = touch.clientY || 0;
|
||||||
|
var deltaX = endX - (menuTouchStartX || 0);
|
||||||
|
var deltaY = endY - (menuTouchStartY || 0);
|
||||||
|
setVelocity(deltaX);
|
||||||
|
|
||||||
|
if (isOpen && dragMode !== 1 && deltaX > 0) {
|
||||||
|
dragMode = 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
function onMenuTouchStart(e) {
|
if (dragMode === 0 && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
|
||||||
options.target.classList.remove("transition");
|
dragMode = 1;
|
||||||
var touches = getTouches(e);
|
scrollContainer.addEventListener('scroll', disableEvent);
|
||||||
var touch = touches[0] || {};
|
self.showMask();
|
||||||
menuTouchStartX = touch.clientX;
|
} else if (dragMode === 0 && Math.abs(deltaY) >= 5) {
|
||||||
menuTouchStartY = touch.clientY;
|
dragMode = 2;
|
||||||
menuTouchStartTime = new Date().getTime();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setVelocity(deltaX) {
|
if (dragMode === 1) {
|
||||||
var time = new Date().getTime() - (menuTouchStartTime || 0);
|
newPos = currentPos + deltaX;
|
||||||
velocity = Math.abs(deltaX) / time;
|
self.changeMenuPos();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function onMenuTouchMove(e) {
|
function onMenuTouchEnd(e) {
|
||||||
var isOpen = self.visible;
|
options.target.classList.add('transition');
|
||||||
var touches = getTouches(e);
|
scrollContainer.removeEventListener('scroll', disableEvent);
|
||||||
var touch = touches[0] || {};
|
dragMode = 0;
|
||||||
var endX = touch.clientX || 0;
|
var touches = getTouches(e);
|
||||||
var endY = touch.clientY || 0;
|
var touch = touches[0] || {};
|
||||||
var deltaX = endX - (menuTouchStartX || 0);
|
var endX = touch.clientX || 0;
|
||||||
var deltaY = endY - (menuTouchStartY || 0);
|
var endY = touch.clientY || 0;
|
||||||
setVelocity(deltaX);
|
var deltaX = endX - (menuTouchStartX || 0);
|
||||||
|
var deltaY = endY - (menuTouchStartY || 0);
|
||||||
|
currentPos = deltaX;
|
||||||
|
self.checkMenuState(deltaX, deltaY);
|
||||||
|
}
|
||||||
|
|
||||||
if (isOpen && 1 !== dragMode && deltaX > 0) {
|
function onEdgeTouchStart(e) {
|
||||||
dragMode = 2;
|
if (isPeeking) {
|
||||||
}
|
onMenuTouchMove(e);
|
||||||
|
} else {
|
||||||
|
if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
|
||||||
|
isPeeking = true;
|
||||||
|
|
||||||
if (0 === dragMode && (!isOpen || Math.abs(deltaX) >= 10) && Math.abs(deltaY) < 5) {
|
if (e.type === 'touchstart') {
|
||||||
dragMode = 1;
|
dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
|
||||||
scrollContainer.addEventListener("scroll", disableEvent);
|
dom.addEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
|
||||||
self.showMask();
|
|
||||||
} else if (0 === dragMode && Math.abs(deltaY) >= 5) {
|
|
||||||
dragMode = 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (1 === dragMode) {
|
|
||||||
newPos = currentPos + deltaX;
|
|
||||||
self.changeMenuPos();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMenuTouchEnd(e) {
|
|
||||||
options.target.classList.add("transition");
|
|
||||||
scrollContainer.removeEventListener("scroll", disableEvent);
|
|
||||||
dragMode = 0;
|
|
||||||
var touches = getTouches(e);
|
|
||||||
var touch = touches[0] || {};
|
|
||||||
var endX = touch.clientX || 0;
|
|
||||||
var endY = touch.clientY || 0;
|
|
||||||
var deltaX = endX - (menuTouchStartX || 0);
|
|
||||||
var deltaY = endY - (menuTouchStartY || 0);
|
|
||||||
currentPos = deltaX;
|
|
||||||
self.checkMenuState(deltaX, deltaY);
|
|
||||||
}
|
|
||||||
|
|
||||||
function onEdgeTouchStart(e) {
|
|
||||||
if (isPeeking) {
|
|
||||||
onMenuTouchMove(e);
|
|
||||||
} else {
|
|
||||||
if (((getTouches(e)[0] || {}).clientX || 0) <= options.handleSize) {
|
|
||||||
isPeeking = true;
|
|
||||||
|
|
||||||
if (e.type === "touchstart") {
|
|
||||||
dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
|
|
||||||
dom.addEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
|
|
||||||
}
|
|
||||||
|
|
||||||
onMenuTouchStart(e);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMenuTouchStart(e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function onEdgeTouchMove(e) {
|
function onEdgeTouchMove(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
onEdgeTouchStart(e);
|
onEdgeTouchStart(e);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onEdgeTouchEnd(e) {
|
||||||
|
if (isPeeking) {
|
||||||
|
isPeeking = false;
|
||||||
|
dom.removeEventListener(edgeContainer, 'touchmove', onEdgeTouchMove, {});
|
||||||
|
onMenuTouchEnd(e);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function onEdgeTouchEnd(e) {
|
function disableEvent(e) {
|
||||||
if (isPeeking) {
|
e.preventDefault();
|
||||||
isPeeking = false;
|
e.stopPropagation();
|
||||||
dom.removeEventListener(edgeContainer, "touchmove", onEdgeTouchMove, {});
|
}
|
||||||
onMenuTouchEnd(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function disableEvent(e) {
|
function onBackgroundTouchStart(e) {
|
||||||
e.preventDefault();
|
var touches = getTouches(e);
|
||||||
e.stopPropagation();
|
var touch = touches[0] || {};
|
||||||
}
|
backgroundTouchStartX = touch.clientX;
|
||||||
|
backgroundTouchStartTime = new Date().getTime();
|
||||||
|
}
|
||||||
|
|
||||||
function onBackgroundTouchStart(e) {
|
function onBackgroundTouchMove(e) {
|
||||||
var touches = getTouches(e);
|
var touches = getTouches(e);
|
||||||
var touch = touches[0] || {};
|
var touch = touches[0] || {};
|
||||||
backgroundTouchStartX = touch.clientX;
|
var endX = touch.clientX || 0;
|
||||||
backgroundTouchStartTime = new Date().getTime();
|
|
||||||
}
|
|
||||||
|
|
||||||
function onBackgroundTouchMove(e) {
|
if (endX <= options.width && self.isVisible) {
|
||||||
var touches = getTouches(e);
|
countStart++;
|
||||||
var touch = touches[0] || {};
|
|
||||||
var endX = touch.clientX || 0;
|
|
||||||
|
|
||||||
if (endX <= options.width && self.isVisible) {
|
|
||||||
countStart++;
|
|
||||||
var deltaX = endX - (backgroundTouchStartX || 0);
|
|
||||||
|
|
||||||
if (countStart == 1) {
|
|
||||||
startPoint = deltaX;
|
|
||||||
}
|
|
||||||
if (deltaX < 0 && dragMode !== 2) {
|
|
||||||
dragMode = 1;
|
|
||||||
newPos = deltaX - startPoint + options.width;
|
|
||||||
self.changeMenuPos();
|
|
||||||
var time = new Date().getTime() - (backgroundTouchStartTime || 0);
|
|
||||||
velocity = Math.abs(deltaX) / time;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
}
|
|
||||||
|
|
||||||
function onBackgroundTouchEnd(e) {
|
|
||||||
var touches = getTouches(e);
|
|
||||||
var touch = touches[0] || {};
|
|
||||||
var endX = touch.clientX || 0;
|
|
||||||
var deltaX = endX - (backgroundTouchStartX || 0);
|
var deltaX = endX - (backgroundTouchStartX || 0);
|
||||||
self.checkMenuState(deltaX);
|
|
||||||
countStart = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onMaskTransitionEnd() {
|
if (countStart == 1) {
|
||||||
var classList = mask.classList;
|
startPoint = deltaX;
|
||||||
|
}
|
||||||
if (!classList.contains("backdrop")) {
|
if (deltaX < 0 && dragMode !== 2) {
|
||||||
classList.add("hide");
|
dragMode = 1;
|
||||||
|
newPos = deltaX - startPoint + options.width;
|
||||||
|
self.changeMenuPos();
|
||||||
|
var time = new Date().getTime() - (backgroundTouchStartTime || 0);
|
||||||
|
velocity = Math.abs(deltaX) / time;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var self;
|
e.preventDefault();
|
||||||
var defaults;
|
e.stopPropagation();
|
||||||
var 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");
|
|
||||||
|
|
||||||
var TouchMenuLA = function () {
|
function onBackgroundTouchEnd(e) {
|
||||||
self = this;
|
var touches = getTouches(e);
|
||||||
defaults = {
|
var touch = touches[0] || {};
|
||||||
width: 260,
|
var endX = touch.clientX || 0;
|
||||||
handleSize: 10,
|
var deltaX = endX - (backgroundTouchStartX || 0);
|
||||||
disableMask: false,
|
self.checkMenuState(deltaX);
|
||||||
maxMaskOpacity: 0.5
|
countStart = 0;
|
||||||
};
|
}
|
||||||
this.isVisible = false;
|
|
||||||
this.initialize();
|
function onMaskTransitionEnd() {
|
||||||
|
var classList = mask.classList;
|
||||||
|
|
||||||
|
if (!classList.contains('backdrop')) {
|
||||||
|
classList.add('hide');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var self;
|
||||||
|
var defaults;
|
||||||
|
var 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');
|
||||||
|
|
||||||
|
var TouchMenuLA = function () {
|
||||||
|
self = this;
|
||||||
|
defaults = {
|
||||||
|
width: 260,
|
||||||
|
handleSize: 10,
|
||||||
|
disableMask: false,
|
||||||
|
maxMaskOpacity: 0.5
|
||||||
};
|
};
|
||||||
|
this.isVisible = false;
|
||||||
|
this.initialize();
|
||||||
|
};
|
||||||
|
|
||||||
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
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var menuTouchStartX;
|
|
||||||
var menuTouchStartY;
|
|
||||||
var menuTouchStartTime;
|
|
||||||
var edgeContainer = document.querySelector(".mainDrawerHandle");
|
|
||||||
var isPeeking = false;
|
|
||||||
|
|
||||||
TouchMenuLA.prototype.animateToPosition = function (pos) {
|
|
||||||
requestAnimationFrame(function () {
|
|
||||||
options.target.style.transform = pos ? "translateX(" + pos + "px)" : "none";
|
|
||||||
});
|
});
|
||||||
};
|
}
|
||||||
|
};
|
||||||
|
|
||||||
TouchMenuLA.prototype.changeMenuPos = function () {
|
var menuTouchStartX;
|
||||||
if (newPos <= options.width) {
|
var menuTouchStartY;
|
||||||
this.animateToPosition(newPos);
|
var menuTouchStartTime;
|
||||||
}
|
var edgeContainer = document.querySelector('.mainDrawerHandle');
|
||||||
};
|
var isPeeking = false;
|
||||||
|
|
||||||
TouchMenuLA.prototype.clickMaskClose = function () {
|
TouchMenuLA.prototype.animateToPosition = function (pos) {
|
||||||
mask.addEventListener("click", function () {
|
requestAnimationFrame(function () {
|
||||||
|
options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none';
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.changeMenuPos = function () {
|
||||||
|
if (newPos <= options.width) {
|
||||||
|
this.animateToPosition(newPos);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.clickMaskClose = function () {
|
||||||
|
mask.addEventListener('click', function () {
|
||||||
|
self.close();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
|
||||||
|
if (velocity >= 0.4) {
|
||||||
|
if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
|
||||||
|
self.open();
|
||||||
|
} else {
|
||||||
self.close();
|
self.close();
|
||||||
});
|
}
|
||||||
};
|
} else {
|
||||||
|
if (newPos >= 100) {
|
||||||
TouchMenuLA.prototype.checkMenuState = function (deltaX, deltaY) {
|
self.open();
|
||||||
if (velocity >= 0.4) {
|
} else {
|
||||||
if (deltaX >= 0 || Math.abs(deltaY || 0) >= 70) {
|
if (newPos) {
|
||||||
self.open();
|
|
||||||
} else {
|
|
||||||
self.close();
|
self.close();
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
if (newPos >= 100) {
|
|
||||||
self.open();
|
|
||||||
} else {
|
|
||||||
if (newPos) {
|
|
||||||
self.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
TouchMenuLA.prototype.open = function () {
|
|
||||||
this.animateToPosition(options.width);
|
|
||||||
currentPos = options.width;
|
|
||||||
this.isVisible = true;
|
|
||||||
options.target.classList.add("drawer-open");
|
|
||||||
self.showMask();
|
|
||||||
self.invoke(options.onChange);
|
|
||||||
};
|
|
||||||
|
|
||||||
TouchMenuLA.prototype.close = function () {
|
|
||||||
this.animateToPosition(0);
|
|
||||||
currentPos = 0;
|
|
||||||
self.isVisible = false;
|
|
||||||
options.target.classList.remove("drawer-open");
|
|
||||||
self.hideMask();
|
|
||||||
self.invoke(options.onChange);
|
|
||||||
};
|
|
||||||
|
|
||||||
TouchMenuLA.prototype.toggle = function () {
|
|
||||||
if (self.isVisible) {
|
|
||||||
self.close();
|
|
||||||
} else {
|
|
||||||
self.open();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var backgroundTouchStartX;
|
|
||||||
var backgroundTouchStartTime;
|
|
||||||
|
|
||||||
TouchMenuLA.prototype.showMask = function () {
|
|
||||||
mask.classList.remove("hide");
|
|
||||||
mask.classList.add("backdrop");
|
|
||||||
};
|
|
||||||
|
|
||||||
TouchMenuLA.prototype.hideMask = function () {
|
|
||||||
mask.classList.add("hide");
|
|
||||||
mask.classList.remove("backdrop");
|
|
||||||
};
|
|
||||||
|
|
||||||
TouchMenuLA.prototype.invoke = function (fn) {
|
|
||||||
if (fn) {
|
|
||||||
fn.apply(self);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var _edgeSwipeEnabled;
|
|
||||||
|
|
||||||
TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
|
|
||||||
if (!options.disableEdgeSwipe) {
|
|
||||||
if (browser.touch) {
|
|
||||||
if (enabled) {
|
|
||||||
if (!_edgeSwipeEnabled) {
|
|
||||||
_edgeSwipeEnabled = true;
|
|
||||||
dom.addEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
dom.addEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
dom.addEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (_edgeSwipeEnabled) {
|
|
||||||
_edgeSwipeEnabled = false;
|
|
||||||
dom.removeEventListener(edgeContainer, "touchstart", onEdgeTouchStart, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
dom.removeEventListener(edgeContainer, "touchend", onEdgeTouchEnd, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
dom.removeEventListener(edgeContainer, "touchcancel", onEdgeTouchEnd, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
TouchMenuLA.prototype.initialize = function () {
|
|
||||||
options = Object.assign(defaults, options || {});
|
|
||||||
|
|
||||||
if (browser.edge) {
|
|
||||||
options.disableEdgeSwipe = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
self.initElements();
|
|
||||||
|
|
||||||
if (browser.touch) {
|
|
||||||
dom.addEventListener(options.target, "touchstart", onMenuTouchStart, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
dom.addEventListener(options.target, "touchmove", onMenuTouchMove, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
dom.addEventListener(options.target, "touchend", onMenuTouchEnd, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
dom.addEventListener(options.target, "touchcancel", onMenuTouchEnd, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
dom.addEventListener(mask, "touchstart", onBackgroundTouchStart, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
dom.addEventListener(mask, "touchmove", onBackgroundTouchMove, {});
|
|
||||||
dom.addEventListener(mask, "touchend", onBackgroundTouchEnd, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
dom.addEventListener(mask, "touchcancel", onBackgroundTouchEnd, {
|
|
||||||
passive: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
self.clickMaskClose();
|
|
||||||
};
|
|
||||||
|
|
||||||
return new TouchMenuLA();
|
|
||||||
};
|
};
|
||||||
});
|
|
||||||
|
TouchMenuLA.prototype.open = function () {
|
||||||
|
this.animateToPosition(options.width);
|
||||||
|
currentPos = options.width;
|
||||||
|
this.isVisible = true;
|
||||||
|
options.target.classList.add('drawer-open');
|
||||||
|
self.showMask();
|
||||||
|
self.invoke(options.onChange);
|
||||||
|
};
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.close = function () {
|
||||||
|
this.animateToPosition(0);
|
||||||
|
currentPos = 0;
|
||||||
|
self.isVisible = false;
|
||||||
|
options.target.classList.remove('drawer-open');
|
||||||
|
self.hideMask();
|
||||||
|
self.invoke(options.onChange);
|
||||||
|
};
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.toggle = function () {
|
||||||
|
if (self.isVisible) {
|
||||||
|
self.close();
|
||||||
|
} else {
|
||||||
|
self.open();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var backgroundTouchStartX;
|
||||||
|
var backgroundTouchStartTime;
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.showMask = function () {
|
||||||
|
mask.classList.remove('hide');
|
||||||
|
mask.classList.add('backdrop');
|
||||||
|
};
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.hideMask = function () {
|
||||||
|
mask.classList.add('hide');
|
||||||
|
mask.classList.remove('backdrop');
|
||||||
|
};
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.invoke = function (fn) {
|
||||||
|
if (fn) {
|
||||||
|
fn.apply(self);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var _edgeSwipeEnabled;
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.setEdgeSwipeEnabled = function (enabled) {
|
||||||
|
if (!options.disableEdgeSwipe) {
|
||||||
|
if (browser.touch) {
|
||||||
|
if (enabled) {
|
||||||
|
if (!_edgeSwipeEnabled) {
|
||||||
|
_edgeSwipeEnabled = true;
|
||||||
|
dom.addEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
dom.addEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
dom.addEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (_edgeSwipeEnabled) {
|
||||||
|
_edgeSwipeEnabled = false;
|
||||||
|
dom.removeEventListener(edgeContainer, 'touchstart', onEdgeTouchStart, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
dom.removeEventListener(edgeContainer, 'touchend', onEdgeTouchEnd, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
dom.removeEventListener(edgeContainer, 'touchcancel', onEdgeTouchEnd, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
TouchMenuLA.prototype.initialize = function () {
|
||||||
|
options = Object.assign(defaults, options || {});
|
||||||
|
|
||||||
|
if (browser.edge) {
|
||||||
|
options.disableEdgeSwipe = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
self.initElements();
|
||||||
|
|
||||||
|
if (browser.touch) {
|
||||||
|
dom.addEventListener(options.target, 'touchstart', onMenuTouchStart, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
dom.addEventListener(options.target, 'touchmove', onMenuTouchMove, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
dom.addEventListener(options.target, 'touchend', onMenuTouchEnd, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
dom.addEventListener(options.target, 'touchcancel', onMenuTouchEnd, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
dom.addEventListener(mask, 'touchstart', onBackgroundTouchStart, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
dom.addEventListener(mask, 'touchmove', onBackgroundTouchMove, {});
|
||||||
|
dom.addEventListener(mask, 'touchend', onBackgroundTouchEnd, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
dom.addEventListener(mask, 'touchcancel', onBackgroundTouchEnd, {
|
||||||
|
passive: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
self.clickMaskClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return new TouchMenuLA();
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -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) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue