PolymerElements · blasten · Aug 19, 2015 · Aug 15, 2015
@@ -0,0 +1 @@
+bower_components
@@ -17,5 +17,8 @@
     "paper-item": "polymerelements/paper-item#^1.0.0",
     "paper-menu": "polymerelements/paper-menu#^1.0.0",
     "paper-styles": "polymerelements/paper-styles#^1.0.0"
+  },
+  "devDependencies": {
+    "paper-progress": "polymerelements/paper-progress#~1.0.2"
   }
 }
@@ -38,6 +38,7 @@
     x-drawer {
       position: fixed;
       background-color: #fff;
+      z-index: 2;
     }
 
     #leftDrawer[opened] {
@@ -68,7 +69,7 @@
 
   <template is="dom-bind" id="app">
 
-    <x-drawer id="leftDrawer" on-tap="toggleLeft"></x-drawer>
+    <x-drawer id="leftDrawer" position="left" on-tap="toggleLeft"></x-drawer>
     <x-drawer id="rightDrawer" position="right" on-tap="toggleRight"></x-drawer>
 
     <x-header condenses>

@@ -18,12 +18,14 @@
 
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
+  <link rel="import" href="../../iron-flex-layout/classes/iron-flex-layout.html">
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="../x-header/x-header.html">
   <link rel="import" href="../x-toolbar/x-toolbar.html">
   <link rel="import" href="../x-drawer-layout/x-drawer-layout.html">
   <link rel="import" href="../x-header-layout/x-header-layout.html">
+  <link rel="import" href="../x-overlay/x-overlay.html">
   <link rel="import" href="../demo/sample-content.html">
 
   <style is="custom-style">
@@ -39,22 +41,35 @@
       color: #fff;
     }
 
+    x-overlay {
+      font-family: 'Roboto', 'Noto', sans-serif;
+      width: calc(100% - 100px);
+      max-height: 200px;
+      padding: 50px;
+      box-sizing: border-box;
+      overflow-y: auto;
+    }
+
   </style>
 
 </head>
-<body>
+<body unresolved>
 
+<template is="dom-bind">
   <x-drawer-layout>
 
     <div drawer>
       <x-toolbar>MY APP</x-toolbar>
+      <div style="height: 2000px; width: 10px;"></div>
     </div>
 
+
     <x-header-layout main>
-
       <x-header condenses>
         <x-toolbar>
           <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
+          <div class="flex"></div>
+          <paper-icon-button icon="icons:more-vert" on-tap="openOverlay"></paper-icon-button>
         </x-toolbar>
         <x-toolbar></x-toolbar>
         <x-toolbar>
@@ -63,10 +78,29 @@
       </x-header>
 
       <sample-content size="100"></sample-content>
-
     </x-header-layout>
-
   </x-drawer-layout>
 
+  <x-overlay id="helloWorld">
+    <p>Iisque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior.</p>
+    <p>Has at minim mucius aliquam, est id tempor laoreet. Ut labores minimum atomorum pro. Laudem tibique ut has. Usu eu novum principes, vel quodsi aliquip ea.</p>
+    <p>Iisque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior.</p>
+    <p>Has at minim mucius aliquam, est id tempor laoreet. Ut labores minimum atomorum pro. Laudem tibique ut has. Usu eu novum principes, vel quodsi aliquip ea.</p>
+    <p>Iisque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior.</p>
+    <p>Has at minim mucius aliquam, est id tempor laoreet. Ut labores minimum atomorum pro. Laudem tibique ut has. Usu eu novum principes, vel quodsi aliquip ea.</p>
+  </x-overlay>
+
+</template>
+
+<script>
+  (function(scope) {
+
+    scope.openOverlay = function() {
+      this.$.helloWorld.show();
+    };
+
+  })(document.querySelector('template[is=dom-bind]'));
+</script>
+
 </body>
 </html>
@@ -12,13 +12,19 @@
 <link rel="import" href="../../iron-media-query/iron-media-query.html">
 <link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="../x-drawer/x-drawer.html">
+<link rel="import" href="../x-overlay/x-scrim.html">
+
 
 <dom-module id="x-drawer-layout">
 
   <style>
 
     :host {
       display: block;
+      /* stacking context */
+      /* 1. isolation: isolate; */
+      /* 1. z-index:0 & position:relative or position:absolute; */
+      isolation: isolate;
 
       --drawer-layout-trbl: {
         top: 0;
@@ -35,6 +41,12 @@
 
     x-drawer {
       position: fixed;
+      overflow-y: auto;
+
+    }
+
+    :host([narrow]) x-drawer {
+      z-index: 2;
     }
 
     :host([narrow][opened]) x-drawer {
@@ -48,6 +60,7 @@
     #main {
       position: relative;
       height: 100%;
+      z-index: 1;
     }
 
     :host([fullbleed]) > #main > ::content > * {
@@ -59,34 +72,19 @@
       display: none;
     }
 
-    #scrim {
-      position: fixed;
-      @apply(--drawer-layout-trbl);
-      visibility: hidden;
-      opacity: 0;
-      background-color: rgba(0, 0, 0, 0.35);
-      transition: 200ms ease-in-out;
-      transition-property: opacity, visibility;
-    }
-
-    #scrim[visible] {
-      visibility: visible;
-      opacity: 1;
-    }
-
   </style>
 
   <template>
 
-    <x-drawer id="drawer" position="[[_drawerPosition(rightDrawer)]]"
+    <x-drawer id="drawerContainer" position="[[_drawerPosition(rightDrawer)]]"
         opened="[[_drawerOpened(narrow, opened)]]" style$="[[_computeDrawerStyle(drawerWidth)]]"
         on-iron-activate="_drawerActivate">
-      <content select="[drawer]"></content>
+      <content id="drawer" select="[drawer]"></content>
     </x-drawer>
 
     <div id="main" style$="[[_computeMainStyle(narrow, drawerWidth)]]">
       <content></content>
-      <div id="scrim" visible$="[[_scrimVisible(narrow, opened)]]" on-tap="toggleDrawer"></div>
+      <x-scrim id="scrim" visible$="[[_scrimVisible(narrow, opened)]]" on-tap="toggleDrawer"></x-scrim>
     </div>
 
     <iron-media-query query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]"
@@ -149,13 +147,8 @@
           type: Boolean,
           value: false
         }
-
       },
 
-      observers: [
-        '_disableBodyScroll(narrow, opened)'
-      ],
-
       listeners: {
         tap: '_tapHandler'
       },
@@ -168,6 +161,10 @@
         this.opened = !this.opened;
       },
 
+      get drawer() {
+        return Polymer.dom(this.$.drawer).getDistributedNodes()[0];
+      },
+
       _tapHandler: function(e) {
         var target = Polymer.dom(e).localTarget;
         if (target && target.hasAttribute('drawer-toggle')) {
@@ -209,15 +206,12 @@
       },
 
       _computeDrawerStyle: function(drawerWidth) {
-        return 'width: ' + drawerWidth;
+        var css = 'width: ' + drawerWidth;
+        return css;
       },
 
       _computeMainStyle: function(narrow, drawerWidth) {
         return 'margin-left: ' + (narrow ? '' : drawerWidth);
-      },
-
-      _disableBodyScroll: function(narrow, opened) {
-        document.body.style.overflow = (narrow && opened) ? 'hidden' : '';
       }
 
     });

@@ -9,6 +9,7 @@
 -->
 
 <link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../x-overlay/overlay-behavior.html">
 
 <dom-module id="x-drawer">
 
@@ -21,13 +22,14 @@
       bottom: 0;
       left: 0;
       width: 256px;
-      z-index: 1;
       overflow: hidden;
       background-color: var(--x-drawer-background-color, #fff);
+
       -webkit-transform: translate3d(-100%, 0, 0);
       transform: translate3d(-100%, 0, 0);
-      transition: -webkit-transform 200ms ease-in;
-      transition: transform 200ms ease-in;
+
+      -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.42, 0, 0.33, 1.01);
+      transition: transform 0.4s cubic-bezier(0.42, 0, 0.33, 1.01);
     }
 
     :host([position=right]) {
@@ -79,13 +81,18 @@
 
       is: 'x-drawer',
 
+      behaviors: [
+        Polymer.OverlayBehavior
+      ],
+
       properties: {
 
         opened: {
           type: Boolean,
           value: false,
           notify: true,
-          reflectToAttribute: true
+          reflectToAttribute: true,
+          observer: '_hasOpenedChanged'
         },
 
         position: {
@@ -96,8 +103,11 @@
 
       toggle: function() {
         this.opened = !this.opened;
-      }
+      },
 
+      _hasOpenedChanged: function(opened) {
+        this.shouldEnableScroll(true);
+      }
     });
 
   </script>

@@ -37,6 +37,9 @@
     x-header {
       background-color: #4285f4;
       color: #fff;
+
+      --initial-title-size: 40px;
+      --final-title-size: 12px;
     }
 
   </style>
@@ -53,7 +56,9 @@
         <div class="flex"></div>
         <paper-icon-button icon="search"></paper-icon-button>
       </x-toolbar>
-      <x-toolbar></x-toolbar>
+      <x-toolbar>
+         <div spacer title>My Drive</div>
+      </x-toolbar>
       <x-toolbar>
         <div spacer title>My Drive</div>
       </x-toolbar>

@@ -0,0 +1,64 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+
+<script>
+Polymer.OverlayBehavior = (function() {
+
+  return {
+    layoutIfNeeded: function() {
+      return this.offsetWidth;
+    },
+
+    shouldEnableDocScroll: function(yes) {
+      if (yes) {
+        this.unlisten(window, 'wheel', '_preventScroll');
+        this.unlisten(window, 'mousewheel', '_preventScroll');
+        this.unlisten(this, 'touchmove', '_preventScroll');
+      } else {
+        this.listen(window, 'wheel', '_preventScroll');
+        this.listen(window, 'mousewheel', '_preventScroll');
+        this.listen(this, 'touchmove', '_preventScroll');
+      }
+    },
+
+    shouldEnableScroll: function(yes) {
+       if (!this._hasListeners) {
+        this.listen(this, 'wheel', '_handleScroll');
+        this.listen(this, 'mousewheel', '_handleScroll');
+        this.listen(this, 'touchmove', '_handleScroll');
+        this._hasListeners = true;
+      }
+      this._isScrollEnabled = yes;
+    },
+
+    _handleScroll: function(e) {
+      if (this._isScrollEnabled) {
+        if (e.wheelDeltaY > 0 && this.scrollTop <= 0) {
+          e.preventDefault();
+        } else if (e.wheelDeltaY < 0 && this.scrollTop === this.scrollHeight - this.offsetHeight) {
+          e.preventDefault();
+        } else {
+          e.stopPropagation();
+        }
+      } else {
+        e.preventDefault();
+      }
+    },
+
+    _preventScroll: function(e) {
+      e.preventDefault();
+    }
+
+  };
+
+})();
+</script>