Theming: handle panning/swiping in offcanvas properly

Author: muratcakir

src/Presentation/SmartStore.Web/Themes/Alpha/Content/_shopbar.scss

@@ -91,7 +91,7 @@
         font-size: 10px;
         line-height: 1.3;
         vertical-align: middle;
-        white-space: normal;
+        white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }

src/Presentation/SmartStore.Web/Themes/Alpha/Content/shared/_offcanvas.scss

@@ -48,62 +48,16 @@ body.canvas-noscroll {
 }
 
 
-/* HAMBURGER
+/* TOGGLER
 --------------------------------------------*/
 
 .navbar-toggler {
     position: relative;
     background-color: transparent;
-    /*
-    width: 3.2rem;
-    height: 3.2rem;
-        */
     outline: none;
     &:focus { outline: none }
 }
 
-.navbar-toggler .hamburger {
-    display: block;
-    position: relative;
-    margin: 0 auto;
-
-    &, &:before, &:after {
-        background-color: #fff;
-        width: 1.6rem;
-        height: 3px;
-        border-radius: 1px;
-        transition: background-color $offcanvas-duration $offcanvas-easing,
-                    transform $offcanvas-duration $offcanvas-easing;
-    }
-
-    &:before, &:after {
-        display: block;
-        content: '';
-        position: absolute;
-        opacity: 1 !important;
-    }
-    &:before {
-        top: 8px;
-    }
-    &:after {
-        top: -8px;
-    }
-
-    .navbar-light &, .navbar-light &:before, .navbar-light &:after {
-        background-color: $body-color;
-    }
-
-    .canvas-sliding & {
-        background-color: transparent !important;
-        &:before {
-            transform: translate3d(0, -8px, 0) rotate(45deg);
-        }
-        &:after {
-            transform: translate3d(0, 8px, 0) rotate(-45deg);
-        }
-    }
-}
-
 
 /* PARENT CANVAS BLOCKER
 --------------------------------------------*/
@@ -165,12 +119,6 @@ body.canvas-blocking .canvas-blocker {
         width: 100%;
     }
 
-    &.on {
-        visibility: visible;
-        transition: transform $offcanvas-duration $offcanvas-easing;
-        transform: translate3d(0, 0, 0) !important;
-    }
-
     &.offcanvas-push,
     &.offcanvas-overlay {
         transform: translate3d(-100%, 0, 0);
@@ -195,6 +143,16 @@ body.canvas-blocking .canvas-blocker {
     @media (max-width: $offcanvas-width-lg) {
         &.offcanvas-lg { width: 100%; }
     }
+
+    &.offcanvas-push.on,
+    &.offcanvas-overlay.on,
+    &.offcanvas-right.on,
+    &.on {
+        // specificity: we want to prevent "!important" here
+        visibility: visible;
+        transition: transform $offcanvas-duration $offcanvas-easing;
+        transform: translate3d(0, 0, 0);
+    }
 }
 
 .offcanvas-content {
@@ -203,6 +161,11 @@ body.canvas-blocking .canvas-blocker {
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
+
+    * {
+        // Fixes Chrome 55+ pan/swipe bug
+        touch-action: pan-y;
+    }
 }
 
 

src/Presentation/SmartStore.Web/Themes/Alpha/Scripts/offcanvas.js

@@ -48,10 +48,30 @@
             this.toggle();
         }
 
-    	// Close on swipe
-        var swipeEvent = el.hasClass('offcanvas-right') ? 'swiperight' : 'swipeleft';
-        el.children().first().hammer({}).on(swipeEvent, function (e) {
-        	self.hide();
+    	// Close on pan[left|right]
+        var onRight = el.hasClass('offcanvas-right'),
+			canPan = el.hasClass('offcanvas-overlay');
+
+        el.children().first().hammer({}).on('panstart panend panleft panright', function (e) {
+        	var delta = onRight
+				? Math.max(0, e.gesture.deltaX)
+				: Math.min(0, e.gesture.deltaX);
+
+        	if (e.type.toLowerCase() === 'panstart') {
+        		el.css('transition', 'none');
+        	}
+        	else if (e.type.toLowerCase() === 'panend') {
+        		el.css('transform', '').css('transition', '');
+        		if (Math.abs(delta) >= 100) {
+        			self.hide();
+        		}
+        	}
+        	else {
+        		// panleft or panright
+        		if (canPan) {
+        			el.css('transform', 'translate3d(' + delta + 'px, 0, 0)');
+        		}
+        	}
         });
     }