diff --git a/src/components/sidenav/sidenav.js b/src/components/sidenav/sidenav.js index c0a1e5e70e9..52ec075f76a 100644 --- a/src/components/sidenav/sidenav.js +++ b/src/components/sidenav/sidenav.js @@ -328,17 +328,22 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate, function enableDragging() { $mdGesture.register(element, 'drag', { horizontal: true }); - element.on('$md.dragstart', onDragStart) + + element + .on('$md.dragstart', onDragStart) .on('$md.drag', onDrag) .on('$md.dragend', onDragEnd); var style = getComputedStyle(element[0]); var sidenavWidth = parseInt(style.width); var isRightSidenav = element.hasClass('md-sidenav-right'); + var accelerationBound = 10; var dragCancelled = false; var dragPercentage; var lastOpenState; + var lastDistance = 0; + var isQuickDrag = false; function onDragStart() { if (element.hasClass('md-locked-open')) { @@ -352,15 +357,22 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate, function onDrag(ev) { if (dragCancelled) return; - // If the sidenav is aligned left, the sidenav is opened at zero x-axis - var startOffset = isRightSidenav ? 100 : 0; + if (!isQuickDrag) { + if (isRightSidenav) { + isQuickDrag = lastDistance - ev.pointer.distanceX <= -accelerationBound; + console.log(lastDistance - ev.pointer.distanceX); + } + else isQuickDrag = lastDistance - ev.pointer.distanceX >= accelerationBound; + } - dragPercentage = startOffset - Math.round((ev.pointer.distanceX / sidenavWidth) * 100); + dragPercentage = Math.round((ev.pointer.distanceX / sidenavWidth) * 100); + if (!isRightSidenav) dragPercentage = 0 - dragPercentage; if (dragPercentage > 100) dragPercentage = 100; else if (dragPercentage < 0) dragPercentage = 0; - element.css($mdConstant.CSS.TRANSFORM, 'translate3d(-' + dragPercentage + '%,0,0)'); + element.css($mdConstant.CSS.TRANSFORM, 'translate3d(-' + (isRightSidenav ? 100 - dragPercentage : dragPercentage) + '%,0,0)'); + lastDistance = ev.pointer.distanceX; } function onDragEnd() { @@ -369,9 +381,10 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate, return; } - var remainingPercentage = dragPercentage > 50 ? 100 - dragPercentage : dragPercentage; + var remainingPercentage = 100 - dragPercentage; var animationTime = 4 * remainingPercentage; - var isOpen = dragPercentage > 50; + var isOpen = dragPercentage > 50 || isQuickDrag; + if (isRightSidenav) isOpen = !isOpen; element.css($mdConstant.CSS.TRANSITION_DURATION, animationTime + "ms"); @@ -381,6 +394,9 @@ function SidenavDirective($mdMedia, $mdUtil, $mdConstant, $mdTheming, $animate, element.css($mdConstant.CSS.TRANSFORM, 'translate3d(-0%,0,0)'); } + // Reset drag + lastDistance = 0; + isQuickDrag = false; $timeout(onAnimationDone, animationTime, true, (isRightSidenav ? isOpen : !isOpen)); }