From f9b4288b0835a3da2f2b70309323256b8bfe3385 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Tue, 21 Jun 2016 11:26:15 -0400 Subject: [PATCH] update nav drawer --- .../components/navdrawer/navdrawer.css | 22 +++-- .../components/navdrawer/navdrawer.js | 86 ++++++++----------- 2 files changed, 51 insertions(+), 57 deletions(-) diff --git a/dashboard-ui/components/navdrawer/navdrawer.css b/dashboard-ui/components/navdrawer/navdrawer.css index 24a93608cf..b4c59282af 100644 --- a/dashboard-ui/components/navdrawer/navdrawer.css +++ b/dashboard-ui/components/navdrawer/navdrawer.css @@ -8,13 +8,14 @@ will-change: transform; contain: layout style; display: flex; - transition: transform ease-out 0.1s; + transition: transform ease-out 60ms; + z-index: 1099; } .touch-menu-la.transition { /*transition: transform 0.3s ease-out;*/ - transition: -webkit-transform ease-out 0.3s; - transition: transform ease-out 0.3s; + transition: -webkit-transform ease-out 280ms; + transition: transform ease-out 280ms; /*transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s; transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;*/ } @@ -31,13 +32,20 @@ } .tmla-mask { - width: 100%; - height: 100%; - position: absolute; + position: fixed; top: 0; left: 0; + right: 0; + bottom: 0; background-color: #000; opacity: 0.0; - z-index: -1; + z-index: 1098; transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s; + background-color: rgba(0, 0, 0, 0.3); + visibility: hidden; } + + .tmla-mask.backdrop { + visibility: visible; + opacity: 1; + } diff --git a/dashboard-ui/components/navdrawer/navdrawer.js b/dashboard-ui/components/navdrawer/navdrawer.js index 438e69bf96..edff9d9937 100644 --- a/dashboard-ui/components/navdrawer/navdrawer.js +++ b/dashboard-ui/components/navdrawer/navdrawer.js @@ -5,7 +5,6 @@ defaults, menuClassName = '', mask, - handle, maskHammer, menuHammer, newPos = 0, @@ -25,11 +24,8 @@ defaults = { width: 280, - zIndex: 99999, - disableSlide: false, handleSize: 30, disableMask: false, - disableMask: false, maxMaskOpacity: 0.5 }; @@ -47,16 +43,17 @@ }; TouchMenuLA.prototype.initElements = function () { - options.target.style.zIndex = options.zIndex; + options.target.classList.add('touch-menu-la'); options.target.style.width = options.width + 'px'; options.target.style.left = -options.width + 'px'; - handle = document.createElement('div'); - handle.className = "tmla-handle"; - handle.style.width = options.handleSize + 'px'; - handle.style.right = -options.handleSize + 'px'; - - options.target.appendChild(handle); + if (!options.disableEdgeSwipe) { + var handle = document.createElement('div'); + handle.className = "tmla-handle"; + handle.style.width = options.handleSize + 'px'; + handle.style.right = -options.handleSize + 'px'; + options.target.appendChild(handle); + } if (!options.disableMask) { mask = document.createElement('div'); @@ -81,15 +78,18 @@ velocity = Math.abs(ev.velocity); // Depending on the deltas, choose X or Y + var isOpen = self.visible; + // If it's already open, then treat any right-swipe as vertical pan - if (!draggingX && ev.deltaX > 0) { + if (isOpen && !draggingX && ev.deltaX > 0) { draggingY = true; } - if (!draggingX && !draggingY && Math.abs(ev.deltaX) >= 10) { + if (!draggingX && !draggingY && (!isOpen || Math.abs(ev.deltaX) >= 10)) { draggingX = true; scrollContainer.addEventListener('scroll', disableEvent); options.target.classList.add('draggingX'); + self.showMask(); } else if (!draggingY) { draggingY = true; @@ -104,36 +104,22 @@ TouchMenuLA.prototype.animateToPosition = function (pos) { - if (pos) { - options.target.style.transform = 'translate3d(' + pos + 'px, 0, 0)'; - options.target.style.WebkitTransform = 'translate3d(' + pos + 'px, 0, 0)'; - options.target.style.MozTransform = 'translate3d(' + pos + 'px, 0, 0)'; - } else { - options.target.style.transform = 'none'; - options.target.style.WebkitTransform = 'none'; - options.target.style.MozTransform = 'none'; - } + requestAnimationFrame(function() { + if (pos) { + options.target.style.transform = 'translate3d(' + pos + 'px, 0, 0)'; + options.target.style.WebkitTransform = 'translate3d(' + pos + 'px, 0, 0)'; + options.target.style.MozTransform = 'translate3d(' + pos + 'px, 0, 0)'; + } else { + options.target.style.transform = 'none'; + options.target.style.WebkitTransform = 'none'; + options.target.style.MozTransform = 'none'; + } + }); }; TouchMenuLA.prototype.changeMenuPos = function () { if (newPos <= options.width) { this.animateToPosition(newPos); - - if (!options.disableMask) { - this.setMaskOpacity(newPos); - } - } - }; - - TouchMenuLA.prototype.setMaskOpacity = function (newMenuPos) { - var opacity = parseFloat((newMenuPos / options.width) * options.maxMaskOpacity); - - mask.style.opacity = opacity; - - if (opacity === 0) { - mask.style.zIndex = -1; - } else { - mask.style.zIndex = options.zIndex - 1; } }; @@ -175,18 +161,20 @@ currentPos = options.width; this.isVisible = true; + options.target.classList.add('open'); self.showMask(); - self.invoke(options.onOpen); + self.invoke(options.onChange); }; TouchMenuLA.prototype.close = function () { this.animateToPosition(0); currentPos = 0; self.isVisible = false; + options.target.classList.remove('open'); self.hideMask(); - self.invoke(options.onClose); + self.invoke(options.onChange); }; TouchMenuLA.prototype.toggle = function () { @@ -224,13 +212,13 @@ }; TouchMenuLA.prototype.showMask = function () { - mask.style.opacity = options.maxMaskOpacity; - mask.style.zIndex = options.zIndex - 1; + + mask.classList.add('backdrop'); }; TouchMenuLA.prototype.hideMask = function () { - mask.style.opacity = 0; - mask.style.zIndex = -1; + + mask.classList.remove('backdrop'); }; TouchMenuLA.prototype.setMenuClassName = function () { @@ -251,12 +239,10 @@ self.setMenuClassName(); self.initElements(); - if (!options.disableSlide) { - self.touchStartMenu(); - self.touchEndMenu(); - self.eventStartMask(); - self.eventEndMask(); - } + self.touchStartMenu(); + self.touchEndMenu(); + self.eventStartMask(); + self.eventEndMask(); if (!options.disableMask) { self.clickMaskClose();