- add swipe support (inspired by @netanelgilad

#6), fixes #4 - use 'rightDrawer' attribute instead of 'right-drawer' class to make the drawer position to the right.
googlearchive · Jul 17, 2014 · 8e71f37 · 8e71f37
1 parent 2602c05
commit 8e71f37
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 30 deletions.
diff --git a/core-drawer-panel.css b/core-drawer-panel.css
@@ -14,7 +14,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   left: 0;
   width: 100%;
   height: 100%;
-  overflow-x: hidden;
+  overflow: hidden;
 }
 
 #drawer {
@@ -36,12 +36,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 /*
 right-drawer: make drawer on the right side
 */
-:host(.right-drawer) #drawer {
+.right-drawer #drawer {
   left: auto;
   right: 0;
 }
 
-:host(.right-drawer) .transition #drawer {
+.right-drawer.transition #drawer {
   transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s;
   transition: transform ease-in-out 0.3s, width ease-in-out 0.3s;
 }
@@ -63,19 +63,18 @@ polyfill-next-selector { content: ':host [drawer]'; }
   right: 0;
   bottom: 0;
   left: 256px;
-  overflow: auto;
 }
 
 .transition #main {
   transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
 }
 
-:host(.right-drawer) #main {
+.right-drawer #main {
   left: 0;
   right: 256px;
 }
 
-:host(.right-drawer) .transition #main {
+.right-drawer.transition #main {
   transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
 }
 
@@ -96,22 +95,6 @@ polyfill-next-selector { content: '#main > [main]'; }
   transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
 }
 
-/*
-no-peek: helper class to make drawer panel 100% width in narrow layout
-*/
-:host(.no-peek) .narrow-layout > #drawer {
-  width: 100%;
-}
-
-:host(.no-peek) .narrow-layout > #drawer:not(.core-selected) {
-  left: -100%;
-}
-
-:host(.no-peek.right-drawer) .narrow-layout > #drawer:not(.core-selected) {
-  left: auto;
-  right: -100%;
-}
-
 /*
 narrow layout
 */
@@ -129,7 +112,7 @@ polyfill-next-selector { content: ':host .narrow-layout > #drawer > [drawer]'; }
   transform: translate3d(-100%, 0, 0);
 }
 
-:host(.right-drawer) .narrow-layout > #drawer:not(.core-selected) {
+.right-drawer.narrow-layout > #drawer:not(.core-selected) {
   left: auto;
   -webkit-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
@@ -140,13 +123,14 @@ polyfill-next-selector { content: ':host .narrow-layout > #drawer > [drawer]'; }
   padding: 0;
 }
 
-:host(.right-drawer) .narrow-layout > #main {
+.right-drawer.narrow-layout > #main {
   left: 0;
   right: 0;
   padding: 0;
 }
 
-.narrow-layout > #main:not(.core-selected) #scrim {
+.narrow-layout > #main:not(.core-selected) #scrim,
+.dragging #scrim {
   visibility: visible;
   opacity: 1;
 }

diff --git a/core-drawer-panel.html b/core-drawer-panel.html
@@ -25,9 +25,25 @@
       <div main> Main panel... </div>
     </core-drawer-panel>
     
-To position the drawer to the right, add `right-drawer` to the class list.
+The drawer and the main panels are not scrollable.  You can set CSS overflow
+property on the elements to make them scrollable or use `core-header-panel`.
 
-    <core-drawer-panel class="right-drawer">
+Example:
+
+    <core-drawer-panel>
+      <core-header-panel drawer>
+        <core-toolbar></core-toolbar>
+        <div> Drawer content... </div>
+      </core-header-panel>
+      <core-header-panel main>
+        <core-toolbar></core-toolbar>
+        <div> Main content... </div>
+      </core-header-panel>
+    </core-drawer-panel>
+    
+To position the drawer to the right, add `rightDrawer` attribute.
+
+    <core-drawer-panel rightDrawer>
       <div drawer> Drawer panel... </div>
       <div main> Main panel... </div>
     </core-drawer-panel>
@@ -47,7 +63,7 @@
 
   <core-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{queryMatches}}"></core-media-query>
 
-  <core-selector class="{{ {'narrow-layout' : queryMatches, transition : transition} | tokenList }}" valueattr="id" selected="{{selected}}">
+  <core-selector class="{{ {'narrow-layout' : queryMatches, transition : transition, dragging : dragging, 'right-drawer': rightDrawer} | tokenList }}" valueattr="id" selected="{{selected}}">
 
     <div id="main" >
       <content select="[main]"></content>
@@ -110,10 +126,38 @@
        * @type boolean
        * @default false
        */
-      narrow: {value: false, reflect: true}
+      narrow: {value: false, reflect: true},
+
+      /**
+       * If true, position the drawer to the right.
+       *
+       * @attribute rightDrawer
+       * @type boolean
+       * @default false
+       */
+      rightDrawer: false,
+
+      /**
+       * If true, swipe to open/close the drawer is disabled.
+       *
+       * @attribute disableSwipe
+       * @type boolean
+       * @default false
+       */
+      disableSwipe: false
+    },
+
+    eventDelegates: {
+      trackstart: 'trackStart',
+      track: 'track',
+      trackend: 'trackEnd'
     },
 
     transition: false,
+
+    edgeSwipeSensitivity : 15,
+
+    dragging : false,
 
     domReady: function() {
       // to avoid transition at the beginning e.g. page loads
@@ -141,7 +185,61 @@
         this.selected = this.defaultSelected;
       }
       this.narrow = this.queryMatches;
+      this.setAttribute('touch-action', 
+          this.narrow && !this.disableSwipe ? 'pan-y' : '');
       this.fire('core-responsive-change', {narrow: this.narrow});
+    },
+
+    // swipe support for the drawer, inspired by
+    // https://github.com/Polymer/core-drawer-panel/pull/6
+    trackStart : function(e) {
+      if (this.narrow && !this.disableSwipe) {
+        this.dragging = true;
+
+        if (this.selected === 'main') {
+          this.dragging = this.rightDrawer ?
+              e.pageX >= this.offsetWidth - this.edgeSwipeSensitivity :
+              e.pageX <= this.edgeSwipeSensitivity;
+        }
+
+        if (this.dragging) {
+          this.width = this.$.drawer.offsetWidth;
+          this.transition = false;
+          e.preventTap();
+        }
+      }
+    },
+
+    track : function(e) {
+      if (this.dragging) {
+        var x;
+        if (this.rightDrawer) {
+          x = Math.max(0, (this.selected === 'main') ? this.width + e.dx : e.dx);
+        } else {
+          x = Math.min(0, (this.selected === 'main') ? e.dx - this.width : e.dx);
+        }
+        this.moveDrawer(x);
+      }
+    },
+
+    trackEnd : function(e) {
+      if (this.dragging) {
+        this.dragging = false;
+        this.transition = true;
+        this.moveDrawer(null);
+
+        if (this.rightDrawer) {
+          this.selected = e.xDirection > 0 ? 'main' : 'drawer';
+        } else {
+          this.selected = e.xDirection > 0 ? 'drawer' : 'main';
+        }
+      }
+    },
+
+    moveDrawer: function(translateX) {
+      var s = this.$.drawer.style;
+      s.webkitTransform = s.transform = 
+          translateX === null ? '' : 'translate3d(' + translateX + 'px, 0, 0)';
     }
 
   });

diff --git a/demo.html b/demo.html
@@ -23,12 +23,12 @@
 
       html, body {
         height: 100%;
-        margin: 0;
       }
 
       body {
         font-family: sans-serif;
         color: #FFF;
+        margin: 0;
       }
 
       [drawer] {