add desktop toggle drawer feature

Zecat · Jan 3, 2016 · b8ab93d · b8ab93d
1 parent 9dd19ef
commit b8ab93d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 45 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -48,7 +48,9 @@
   <body unresolved>
 
     <paper-drawer-panel id="paperDrawerPanel">
-      <div drawer></div>
+      <div drawer>
+        <paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
+      </div>
       <div main>
         <div>
           <paper-button onclick="flipDrawer()" raised>flip drawer</paper-button>

diff --git a/paper-drawer-panel.html b/paper-drawer-panel.html
@@ -174,27 +174,21 @@
         position: absolute;
         top: 0;
         right: 0;
+        left: 0;
         bottom: 0;
 
         @apply(--paper-drawer-panel-main-container);
       }
 
-      .transition > #main {
+      .left-drawer.transition > #main {
         transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
       }
 
-      .right-drawer > #main {
-        left: 0;
-      }
-
       .right-drawer.transition > #main {
         transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
       }
 
-      #main > ::content > [main] {
-        height: 100%;
-      }
-
+      #main > ::content > [main],
       #drawer > ::content > [drawer] {
         height: 100%;
       }
@@ -213,8 +207,9 @@
         @apply(--paper-drawer-panel-scrim);
       }
 
-      .narrow-layout > #drawer {
+      #drawer {
         will-change: transform;
+        width: var(--paper-drawer-panel-drawer-container-width, 256px);
       }
 
       .narrow-layout > #drawer.iron-selected {
@@ -229,33 +224,36 @@
         border: 0;
       }
 
-      .left-drawer.narrow-layout > #drawer:not(.iron-selected) {
+      .left-drawer > #drawer:not(.iron-selected) {
         -webkit-transform: translateX(-100%);
         transform: translateX(-100%);
       }
 
-      .right-drawer.narrow-layout > #drawer:not(.iron-selected) {
+      .transition.left-drawer:not(.narrow-layout) > #main:not(.iron-selected) {
+        left: var(--paper-drawer-panel-drawer-container-width, 256px);
+      }
+
+      .transition.right-drawer:not(.narrow-layout) > #main:not(.iron-selected) {
+        right: var(--paper-drawer-panel-drawer-container-width, 256px);
+      }
+
+      .right-drawer > #drawer:not(.iron-selected) {
         left: auto;
         visibility: hidden;
 
         -webkit-transform: translateX(100%);
         transform: translateX(100%);
       }
 
-      .right-drawer.narrow-layout.dragging > #drawer:not(.iron-selected),
-      .right-drawer.narrow-layout.peeking > #drawer:not(.iron-selected) {
+      .right-drawer.dragging > #drawer:not(.iron-selected),
+      .right-drawer.peeking > #drawer:not(.iron-selected) {
         visibility: visible;
       }
 
       .narrow-layout > #main {
         padding: 0;
       }
 
-      .right-drawer.narrow-layout > #main {
-        left: 0;
-        right: 0;
-      }
-
       .narrow-layout > #main:not(.iron-selected) > #scrim,
       .dragging > #main > #scrim {
         visibility: visible;
@@ -272,9 +270,10 @@
         box-sizing: border-box;
       }
 
-      iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
+      iron-selector:not(.narrow-layout) #main:not(.iron-selected) ::content [paper-drawer-toggle] {
         display: none;
       }
+
     </style>
 
     <iron-media-query
@@ -289,12 +288,12 @@
         activate-event=""
         selected="[[selected]]">
 
-      <div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]" on-transitionend="_onMainTransitionEnd">
+      <div id="main" on-transitionend="_onMainTransitionEnd">
         <content select="[main]"></content>
         <div id="scrim" on-tap="closeDrawer"></div>
       </div>
 
-      <div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]">
+      <div id="drawer">
         <content select="[drawer]"></content>
       </div>
 
@@ -544,9 +543,9 @@
           this.selected = 'main';
         },
 
-        ready: function() {
+        attached: function() {
           // Avoid transition at the beginning e.g. page loads and enable
-          // transitions only after the element is rendered and ready.
+          // transitions only after the element is rendered and attached.
           this._transition = true;
         },
 
@@ -567,22 +566,6 @@
           });
         },
 
-        _computeDrawerStyle: function(drawerWidth) {
-          return 'width:' + drawerWidth + ';';
-        },
-
-        _computeMainStyle: function(narrow, rightDrawer, drawerWidth) {
-          var style = '';
-
-          style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
-
-          if (rightDrawer) {
-            style += 'right:' + (narrow ? '' : drawerWidth) + ';';
-          }
-
-          return style;
-        },
-
         _computeMediaQuery: function(forceNarrow, responsiveWidth) {
           return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
         },
@@ -611,10 +594,8 @@
 
         _responsiveChange: function(narrow) {
           this._setNarrow(narrow);
-
-          if (this.narrow) {
-            this.selected = this.defaultSelected;
-          }
+
+          this.selected = this.defaultSelected;
 
           this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
           this.fire('paper-responsive-change', {narrow: this.narrow});