Altering the nav drawer to response to touch and work for prefixed tr…

…ansforms

gulp-tasks/service-worker.js

@@ -38,7 +38,8 @@ gulp.task('service-worker', function(cb) {
     dynamicUrlToDependencies: {
       '/app-shell': ['server/views/layouts/app-shell.handlebars'],
       '/api/': [
-        'server/views/index.handlebars'
+        'server/views/index.handlebars',
+        GLOBAL.config.dest + '/styles/core.css'
       ],
       '/api/url-1': [
         'server/views/url-1.handlebars'
@@ -50,5 +51,9 @@ gulp.task('service-worker', function(cb) {
     stripPrefix: GLOBAL.config.dest,
     navigateFallback: '/app-shell',
     cacheId: packageName
-  }).then(cb);
+  })
+  .then(cb)
+  .catch(() => {
+    cb();
+  });
 });

gulp-tasks/styles.js

@@ -50,8 +50,7 @@ gulp.task('styles:clean', function(cb) {
 });
 
 gulp.task('styles:sass', function() {
-  var stream = gulp.src(GLOBAL.config.src + '/**/*.scss')
-
+  return gulp.src(GLOBAL.config.src + '/**/*.scss')
     // Only create sourcemaps for dev
     .pipe(gulpif(GLOBAL.config.env !== 'prod', sourcemaps.init()))
     .pipe(sass())
@@ -60,8 +59,6 @@ gulp.task('styles:sass', function() {
     .pipe(license(GLOBAL.config.license, GLOBAL.config.licenseOptions))
     .pipe(gulpif(GLOBAL.config.env !== 'prod', sourcemaps.write()))
     .pipe(gulp.dest(GLOBAL.config.dest));
-
-  return stream;
 });
 
 gulp.task('styles', function(cb) {

src/scripts/view/NavDrawerView.js

@@ -4,43 +4,55 @@ export default class NavDrawerView {
     this.rootElement = document.querySelector('.js-side-nav');
     this.sideNavContent = this.rootElement
       .querySelector('.js-side-nav-content');
+    this.sideNavBody = this.rootElement.querySelector('.side-nav__body');
 
-    var touchStartX;
-    var sideNavTransform;
+    this.rootElement.addEventListener('click', () => {
+      this.close();
+    });
+
+    this.sideNavContent.addEventListener('click', (e) => {
+      e.stopPropagation();
+    });
 
-    var onSideNavTouchStart = (e) => {
-      touchStartX = e.touches[0].pageX;
-    };
+    this.hasUnprefixedTransform = 'transform' in document.documentElement.style;
+    if (this.hasUnprefixedTransform) {
+      // Touch slop is a variable that is defined to suggest anything larger
+      // than this value was an intended gesture by the user.
+      // 8  is a value from Android platform.
+      // 3 was added as a factor made up from what felt right.
+      var TOUCH_SLOP = 8 * window.devicePixelRatio * 3;
 
-    var onSideNavTouchMove = (e) => {
-      var newTouchX = e.touches[0].pageX;
-      sideNavTransform = Math.min(0, newTouchX - touchStartX);
+      var touchStartX;
+      var sideNavTransform;
 
-      if (sideNavTransform < 0) {
+      var onSideNavTouchStart = (e) => {
         e.preventDefault();
-      }
+        touchStartX = e.touches[0].pageX;
+      };
 
-      this.sideNavContent.style.transform =
-        'translateX(' + sideNavTransform + 'px)';
-    };
+      var onSideNavTouchMove = (e) => {
+        e.preventDefault();
 
-    var onSideNavTouchEnd = (e) => {
-      if (sideNavTransform < -1) {
-        this.closeSideNav();
-      }
-    };
+        var newTouchX = e.touches[0].pageX;
+        sideNavTransform = Math.min(0, newTouchX - touchStartX);
 
-    this.rootElement.addEventListener('click', () => {
-      this.close();
-    });
+        this.sideNavContent.style.transform =
+          'translateX(' + sideNavTransform + 'px)';
+      };
 
-    this.sideNavContent.addEventListener('click', (e) => {
-      e.stopPropagation();
-    });
+      var onSideNavTouchEnd = (e) => {
+        if (sideNavTransform < -TOUCH_SLOP) {
+          this.close();
+          return;
+        }
+
+        this.open();
+      };
 
-    this.sideNavContent.addEventListener('touchstart', onSideNavTouchStart);
-    this.sideNavContent.addEventListener('touchmove', onSideNavTouchMove);
-    this.sideNavContent.addEventListener('touchend', onSideNavTouchEnd);
+      this.sideNavContent.addEventListener('touchstart', onSideNavTouchStart);
+      this.sideNavContent.addEventListener('touchmove', onSideNavTouchMove);
+      this.sideNavContent.addEventListener('touchend', onSideNavTouchEnd);
+    }
   }
 
   isOpen() {
@@ -58,30 +70,36 @@ export default class NavDrawerView {
   close() {
     this.rootElement.classList.remove('side-nav--visible');
     this.sideNavContent.classList.add('side-nav__content--animatable');
-    this.sideNavContent.style.transform = 'translateX(-102%)';
+
+    if (this.hasUnprefixedTransform) {
+      this.sideNavContent.style.transform = 'translateX(-102%)';
+    } else {
+      this.sideNavContent.classList.remove('side-nav--visible');
+    }
   }
 
   open() {
     this.rootElement.classList.add('side-nav--visible');
 
-    var onSideNavTransitionEnd = (e) => {
-      // Force the focus, otherwise touch doesn't always work.
-      this.sideNavContent.tabIndex = 0;
-      this.sideNavContent.focus();
-      this.sideNavContent.removeAttribute('tabIndex');
+    if (this.hasUnprefixedTransform) {
+      var onSideNavTransitionEnd = (e) => {
+        this.sideNavBody.focus();
 
-      this.sideNavContent.classList.remove('side-nav__content--animatable');
-      this.sideNavContent.removeEventListener('transitionend',
-          onSideNavTransitionEnd);
-    };
+        this.sideNavContent.classList.remove('side-nav__content--animatable');
+        this.sideNavContent.removeEventListener('transitionend',
+            onSideNavTransitionEnd);
+      };
 
-    this.sideNavContent.classList.add('side-nav__content--animatable');
-    this.sideNavContent.addEventListener('transitionend',
-          onSideNavTransitionEnd);
+      this.sideNavContent.classList.add('side-nav__content--animatable');
+      this.sideNavContent.addEventListener('transitionend',
+            onSideNavTransitionEnd);
 
-    requestAnimationFrame( () => {
-      this.sideNavContent.style.transform = 'translateX(0px)';
-    });
+      requestAnimationFrame( () => {
+        this.sideNavContent.style.transform = 'translateX(0px)';
+      });
+    } else {
+      this.sideNavContent.classList.add('side-nav--visible');
+    }
   }
 
 }

src/styles/core/_side-nav.scss

@@ -47,15 +47,21 @@
 
 .side-nav__content {
   background: #FAFAFA;
-  width: 304px;
+  width: 80%;
+  max-width: 304px;
   height: 100%;
   overflow: hidden;
+  position: relative;
 
   box-shadow: 0 0 4px rgba(0, 0, 0, .14),
       0 4px 8px rgba(0, 0, 0, .28);
 
   will-change: transform;
   transform: translateX(-102%);
+
+  &.side-nav--visible {
+    transform: translateX(0px);
+  }
 }
 
 
@@ -89,7 +95,7 @@
 .side-nav__version {
   position: absolute;
   bottom: 16px;
-  right: 16px;
+  left: 16px;
   font-size: 14px;
   opacity: 0.54;
 }