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

Revert slideout.js changes

Browse Source
This commit is contained in:
Pavel Djundik 2018-07-13 18:33:22 +03:00 committed by Pavel Djundik
parent 5d8a581201
commit a15b10ca45
1 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
client/js/slideout.js
View File

@ -1,5 +1,9 @@
"use strict"; "use strict";
const viewport = document.getElementById("viewport");
const menu = document.getElementById("sidebar");
const sidebarOverlay = document.getElementById("sidebar-overlay");
let touchStartPos = null; let touchStartPos = null;
let touchCurPos = null; let touchCurPos = null;
let touchStartTime = 0; let touchStartTime = 0;
@ -10,16 +14,12 @@ let menuIsAbsolute = false;
class SlideoutMenu { class SlideoutMenu {
static enable() { static enable() {
this.viewport = document.getElementById("viewport");
this.menu = document.getElementById("sidebar");
this.sidebarOverlay = document.getElementById("sidebar-overlay");
document.body.addEventListener("touchstart", onTouchStart, {passive: true}); document.body.addEventListener("touchstart", onTouchStart, {passive: true});
} }
static toggle(state) { static toggle(state) {
menuIsOpen = state; menuIsOpen = state;
this.viewport.classList.toggle("menu-open", state); viewport.classList.toggle("menu-open", state);
} }
static isOpen() { static isOpen() {
@ -35,7 +35,7 @@ function onTouchStart(e) {
return; return;
} }
const styles = window.getComputedStyle(SlideoutMenu.menu); const styles = window.getComputedStyle(menu);
menuWidth = parseFloat(styles.width); menuWidth = parseFloat(styles.width);
menuIsAbsolute = styles.position === "absolute"; menuIsAbsolute = styles.position === "absolute";
@ -65,7 +65,7 @@ function onTouchMove(e) {
const devicePixelRatio = window.devicePixelRatio || 2; const devicePixelRatio = window.devicePixelRatio || 2;
if (Math.abs(distX) > devicePixelRatio) { if (Math.abs(distX) > devicePixelRatio) {
SlideoutMenu.viewport.classList.toggle("menu-dragging", true); viewport.classList.toggle("menu-dragging", true);
menuIsMoving = true; menuIsMoving = true;
} }
} }
@ -85,8 +85,8 @@ function onTouchMove(e) {
distX = 0; distX = 0;
} }
SlideoutMenu.menu.style.transform = "translate3d(" + distX + "px, 0, 0)"; menu.style.transform = "translate3d(" + distX + "px, 0, 0)";
SlideoutMenu.sidebarOverlay.style.opacity = distX / menuWidth; sidebarOverlay.style.opacity = distX / menuWidth;
} }
function onTouchEnd() { function onTouchEnd() {
@ -99,9 +99,9 @@ function onTouchEnd() {
document.body.removeEventListener("touchmove", onTouchMove); document.body.removeEventListener("touchmove", onTouchMove);
document.body.removeEventListener("touchend", onTouchEnd); document.body.removeEventListener("touchend", onTouchEnd);
SlideoutMenu.viewport.classList.toggle("menu-dragging", false); viewport.classList.toggle("menu-dragging", false);
SlideoutMenu.menu.style.transform = null; menu.style.transform = null;
SlideoutMenu.sidebarOverlay.style.opacity = null; sidebarOverlay.style.opacity = null;
touchStartPos = null; touchStartPos = null;
touchCurPos = null; touchCurPos = null;