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