supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Make slideout work anywhere on the screen

Browse Source 
Also makes touchmove event passive
This commit is contained in:
Pavel Djundik 2018-03-17 11:35:12 +02:00
parent 5bb0b198e6
commit 84f460d9b8
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/js/slideout.js
View File

@ -36,13 +36,12 @@ function onTouchStart(e) {
menuWidth = parseFloat(window.getComputedStyle(menu).width); menuWidth = parseFloat(window.getComputedStyle(menu).width);
if ((!menuIsOpen && touch.screenX < 50) || (menuIsOpen && touch.screenX > menuWidth)) { if (!menuIsOpen || touch.screenX > menuWidth) {
touchStartPos = touch; touchStartPos = touch;
touchCurPos = touch; touchCurPos = touch;
touchStartTime = Date.now(); touchStartTime = Date.now();
viewport.classList.toggle("menu-dragging", true); document.body.addEventListener("touchmove", onTouchMove, {passive: true});
document.body.addEventListener("touchmove", onTouchMove);
document.body.addEventListener("touchend", onTouchEnd, {passive: true}); document.body.addEventListener("touchend", onTouchEnd, {passive: true});
} }
} }
@ -51,15 +50,20 @@ function onTouchMove(e) {
const touch = touchCurPos = e.touches.item(0); const touch = touchCurPos = e.touches.item(0);
let setX = touch.screenX - touchStartPos.screenX; let setX = touch.screenX - touchStartPos.screenX;
if (Math.abs(setX > 30)) { if (!menuIsMoving) {
menuIsMoving = true; const devicePixelRatio = window.devicePixelRatio || 2;
}
if (!menuIsMoving && Math.abs(touch.screenY - touchStartPos.screenY) > 30) { if (Math.abs(touch.screenY - touchStartPos.screenY) > devicePixelRatio) {
onTouchEnd(); onTouchEnd();
return; return;
} }
if (Math.abs(setX) > devicePixelRatio) {
viewport.classList.toggle("menu-dragging", true);
menuIsMoving = true;
}
}
if (menuIsOpen) { if (menuIsOpen) {
setX += menuWidth; setX += menuWidth;
} }
@ -72,11 +76,6 @@ function onTouchMove(e) {
menu.style.transform = "translate3d(" + setX + "px, 0, 0)"; menu.style.transform = "translate3d(" + setX + "px, 0, 0)";
sidebarOverlay.style.opacity = setX / menuWidth; sidebarOverlay.style.opacity = setX / menuWidth;
if (menuIsMoving) {
e.preventDefault();
e.stopPropagation();
}
} }
function onTouchEnd() { function onTouchEnd() {