Upgrade to 1.0 and switch clients to dom-repeat where needed.

third_party/polymer/v0_8/components/paper-drawer-panel/paper-drawer-panel.html

 <!--
 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">
@@ skipping 49 matching lines @@
       </paper-header-panel>
       <paper-header-panel main>
         <paper-toolbar>
           <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
           <div>Title</div>
         </paper-toolbar>
         <div> Main content... </div>
       </paper-header-panel>
     </paper-drawer-panel>
 
-To position the drawer to the right, add `rightDrawer` attribute.
+To position the drawer to the right, add `right-drawer` attribute.
 
-    <paper-drawer-panel rightDrawer>
+    <paper-drawer-panel right-drawer>
       <div drawer> Drawer panel... </div>
       <div main> Main panel... </div>
     </paper-drawer-panel>
 
-@group Polymer Elements
+Styling paper-drawer-panel:
+
+To change the main container:
+  paper-drawer-panel {
+    --paper-drawer-panel-main-container: {
+      background-color: gray;
+    };
+  }
+
+To change the drawer container when it's in the left side:
+  paper-drawer-panel {
+    --paper-drawer-panel-left-drawer-container: {
+      background-color: white;
+    };
+  }
+
+To change the drawer container when it's in the right side:
+
+  paper-drawer-panel {
+    --paper-drawer-panel-right-drawer-container: {
+      background-color: white;
+    };
+  }
+
+@group Paper elements
 @element paper-drawer-panel
-@homepage github.io
+@demo demo/index.html
+@hero hero.svg
 -->
 
 <dom-module id="paper-drawer-panel">
-
-  <style>
-    :host {
-      display: block;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      overflow: hidden;
-    }
-
-    iron-selector > #drawer {
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100%;
-      will-change: transform;
-      box-sizing: border-box;
-      -moz-box-sizing: border-box;
-    }
-
-    .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;
-    }
-
-    /*
-    right-drawer: make drawer on the right side
-    */
-    .right-drawer > #drawer {
-      left: auto;
-      right: 0;
-    }
-
-    paper-drawer-panel #drawer > * {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-      -moz-box-sizing: border-box;
-    }
-
-    iron-selector > #main {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-    }
-
-    .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 > [main] {
-      height: 100%;
-    }
-
-    #scrim {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      background-color: rgba(0, 0, 0, 0.3);
-      visibility: hidden;
-      opacity: 0;
-      transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
-    }
-
-    #edgeSwipeOverlay {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: 20px;
-    }
-
-    .right-drawer > #main > #edgeSwipeOverlay {
-      right: 0;
-      left: auto;
-    }
-
-    /*
-    narrow layout
-    */
-    .narrow-layout > #drawer.iron-selected {
-      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
-    }
-
-    .right-drawer.narrow-layout > #drawer.iron-selected {
-      box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
-    }
-
-    .narrow-layout > #drawer > ::content[select="[drawer]"] > * {
-      border: 0;
-    }
-
-    .narrow-layout > #drawer:not(.iron-selected) {
-      -webkit-transform: translateX(-100%);
-      transform: translateX(-100%);
-    }
-
-    .right-drawer.narrow-layout > #drawer:not(.iron-selected) {
-      left: auto;
-      -webkit-transform: translateX(100%);
-      transform: translateX(100%);
-    }
-
-    .narrow-layout > #main {
-      left: 0 !important;
-      padding: 0;
-    }
-
-    .right-drawer.narrow-layout > #main {
-      left: 0;
-      right: 0;
-      padding: 0;
-    }
-
-    .narrow-layout > #main:not(.iron-selected) > #scrim,
-    .dragging #scrim {
-      visibility: visible;
-      opacity: 1;
-    }
-
-    .narrow-layout > #main > * {
-      margin: 0;
-      min-height: 100%;
-      left: 0;
-      right: 0;
-      box-sizing: border-box;
-      -moz-box-sizing: border-box;
-    }
-
-    iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
-      display: none;
-    }
-  </style>
+  <link rel="import" type="css" href="paper-drawer-panel.css">
 
   <template>
     <iron-media-query
-        on-query-matches-changed="onQueryMatchesChanged"
+        id="mq"
+        on-query-matches-changed="_onQueryMatchesChanged"
         query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">
     </iron-media-query>
 
     <iron-selector
         attr-for-selected="id"
         class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer)]]"
         activate-event=""
         selected="[[selected]]">
 
       <div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]">
         <content select="[main]"></content>
         <div id="scrim" on-tap="closeDrawer"></div>
-        <div id="edgeSwipeOverlay"
-            hidden$="[[_computeSwipeOverlayHidden(narrow, disableEdgeSwipe)]]">
-        </div>
       </div>
 
       <div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]">
         <content select="[drawer]"></content>
       </div>
 
     </iron-selector>
   </template>
 
 </dom-module>
 
 <script>
 
   (function() {
 
     'use strict';
 
+   // this would be the only `paper-drawer-panel` in
+   // the whole app that can be in `dragging` state
+    var sharedPanel = null;
+
     function classNames(obj) {
-      var classNames = [];
+      var classes = [];
       for (var key in obj) {
         if (obj.hasOwnProperty(key) && obj[key]) {
-          classNames.push(key);
+          classes.push(key);
         }
       }
 
-      return classNames.join(' ');
+      return classes.join(' ');
     }
 
     Polymer({
 
       is: 'paper-drawer-panel',
 
       /**
        * Fired when the narrow layout changes.
        *
        * @event paper-responsive-change {{narrow: boolean}} detail -
@@ skipping 10 matching lines @@
        * @event paper-select {{isSelected: boolean, item: Object}} detail -
        *     isSelected: True for selection and false for deselection.
        *     item: The panel that the event refers to.
        */
 
       properties: {
 
         /**
          * The panel to be selected when `paper-drawer-panel` changes to narrow
          * layout.
-         *
-         * @attribute defaultSelected
-         * @type string
-         * @default 'main'
          */
         defaultSelected: {
           type: String,
           value: 'main'
         },
 
         /**
          * If true, swipe from the edge is disable.
-         *
-         * @attribute disableEdgeSwipe
-         * @type boolean
-         * @default false
          */
-        disableEdgeSwipe: Boolean,
+        disableEdgeSwipe: {
+          type: Boolean,
+          value: false
+        },
 
         /**
          * If true, swipe to open/close the drawer is disabled.
-         *
-         * @attribute disableSwipe
-         * @type boolean
-         * @default false
          */
-        disableSwipe: Boolean,
+        disableSwipe: {
+          type: Boolean,
+          value: false
+        },
 
-        // Whether the user is dragging the drawer interactively.
+        /**
+         * Whether the user is dragging the drawer interactively.
+         */
         dragging: {
           type: Boolean,
           value: false
         },
 
         /**
          * Width of the drawer panel.
-         *
-         * @attribute drawerWidth
-         * @type string
-         * @default '256px'
          */
         drawerWidth: {
           type: String,
           value: '256px'
         },
 
-        // How many pixels on the side of the screen are sensitive to edge
-        // swipes and peek.
+        /**
+         * How many pixels on the side of the screen are sensitive to edge
+         * swipes and peek.
+         */
         edgeSwipeSensitivity: {
           type: Number,
           value: 30
         },
 
         /**
          * If true, ignore `responsiveWidth` setting and force the narrow layout.
-         *
-         * @attribute forceNarrow
-         * @type boolean
-         * @default false
          */
         forceNarrow: {
-          observer: 'forceNarrowChanged',
           type: Boolean,
           value: false
         },
 
-        // Whether the browser has support for the transform CSS property.
+        /**
+         * Whether the browser has support for the transform CSS property.
+         */
         hasTransform: {
           type: Boolean,
           value: function() {
             return 'transform' in this.style;
           }
         },
 
-        // Whether the browser has support for the will-change CSS property.
+        /**
+         * Whether the browser has support for the will-change CSS property.
+         */
         hasWillChange: {
           type: Boolean,
           value: function() {
             return 'willChange' in this.style;
           }
         },
 
         /**
          * Returns true if the panel is in narrow layout.  This is useful if you
          * need to show/hide elements based on the layout.
-         *
-         * @attribute narrow
-         * @type boolean
-         * @default false
          */
         narrow: {
           reflectToAttribute: true,
           type: Boolean,
           value: false,
           notify: true
         },
 
-        // Whether the drawer is peeking out from the edge.
+        /**
+         * Whether the drawer is peeking out from the edge.
+         */
         peeking: {
           type: Boolean,
           value: false
         },
 
         /**
          * Max-width when the panel changes to narrow layout.
-         *
-         * @attribute responsiveWidth
-         * @type string
-         * @default '640px'
          */
         responsiveWidth: {
           type: String,
           value: '640px'
         },
 
         /**
          * If true, position the drawer to the right.
-         *
-         * @attribute rightDrawer
-         * @type boolean
-         * @default false
          */
         rightDrawer: {
           type: Boolean,
           value: false
         },
 
         /**
          * The panel that is being selected. `drawer` for the drawer panel and
          * `main` for the main panel.
-         *
-         * @attribute selected
-         * @type string
-         * @default null
          */
         selected: {
           reflectToAttribute: true,
           type: String,
           value: null
         },
 
         /**
          * The attribute on elements that should toggle the drawer on tap, also elements will
          * automatically be hidden in wide layout.
          */
         drawerToggleAttribute: {
           type: String,
           value: 'paper-drawer-toggle'
         },
 
         /**
          * Whether the transition is enabled.
          */
         transition: {
           type: Boolean,
           value: false
         },
 
-        /**
-         * Starting X coordinate of a tracking gesture. It is non-null only between trackStart and
-         * trackEnd events.
-         * @type {?number}
-         */
-        _startX: {
-          type: Number,
-          value: null
-        }
-
       },
 
       listeners: {
         tap: '_onTap',
-        track: '_onTrack'
+        track: '_onTrack',
+        down: '_downHandler',
+        up: '_upHandler'
+      },
 
-        // TODO: Implement tap handlers when taps are supported.
-        //
-        // down: 'downHandler',
-        // up: 'upHandler'
+      observers: [
+        '_forceNarrowChanged(forceNarrow, defaultSelected)'
+      ],
+
+      /**
+       * Toggles the panel open and closed.
+       *
+       * @method togglePanel
+       */
+      togglePanel: function() {
+        if (this._isMainSelected()) {
+          this.openDrawer();
+        } else {
+          this.closeDrawer();
+        }
+      },
+
+      /**
+       * Opens the drawer.
+       *
+       * @method openDrawer
+       */
+      openDrawer: function() {
+        this.selected = 'drawer';
+      },
+
+      /**
+       * Closes the drawer.
+       *
+       * @method closeDrawer
+       */
+      closeDrawer: function() {
+        this.selected = 'main';
+      },
+
+      ready: function() {
+        // Avoid transition at the beginning e.g. page loads and enable
+        // transitions only after the element is rendered and ready.
+        this.transition = true;
       },
 
       _computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer) {
         return classNames({
           dragging: dragging,
           'narrow-layout': narrow,
           'right-drawer': rightDrawer,
+          'left-drawer': !rightDrawer,
           transition: transition
         });
       },
 
       _computeDrawerStyle: function(drawerWidth) {
         return 'width:' + drawerWidth + ';';
       },
 
       _computeMainStyle: function(narrow, rightDrawer, drawerWidth) {
         var style = '';
 
-        style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';'
+        style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
 
         if (rightDrawer) {
           style += 'right:' + (narrow ? '' : drawerWidth) + ';';
         } else {
-          style += 'right:;'
+          style += 'right:;';
         }
 
         return style;
       },
 
       _computeMediaQuery: function(forceNarrow, responsiveWidth) {
         return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
       },
 
       _computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) {
         return !narrow || disableEdgeSwipe;
       },
 
-      _onTrack: function(event) {
-        switch (event.detail.state) {
+      _onTrack: function(e) {
+        if (sharedPanel && this !== sharedPanel) {
+          return;
+        }
+        switch (e.detail.state) {
+          case 'start':
+            this._trackStart(e);
+            break;
+          case 'track':
+            this._trackX(e);
+            break;
           case 'end':
-            this.trackEnd(event);
-            break;
-          case 'move':
-            this.trackX(event);
-            break;
-          case 'start':
-            this.trackStart(event);
+            this._trackEnd(e);
             break;
         }
-      },
 
-      ready: function() {
-        // Avoid transition at the beginning e.g. page loads and enable
-        // transitions only after the element is rendered and ready.
-        this.transition = true;
-      },
-
-      /**
-       * Toggles the panel open and closed.
-       *
-       * @method togglePanel
-       */
-      togglePanel: function() {
-        if (this.isMainSelected()) {
-          this.openDrawer();
-        } else {
-          this.closeDrawer();
-        }
-      },
-
-      /**
-       * Opens the drawer.
-       *
-       * @method openDrawer
-       */
-      openDrawer: function() {
-        this.selected = 'drawer';
-      },
-
-      /**
-       * Closes the drawer.
-       *
-       * @method closeDrawer
-       */
-      closeDrawer: function() {
-        this.selected = 'main';
       },
 
       _responsiveChange: function(narrow) {
         this.narrow = narrow;
 
         if (this.narrow) {
           this.selected = this.defaultSelected;
         }
 
-        this.setAttribute('touch-action', this.swipeAllowed() ? 'pan-y' : '');
+        this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
         this.fire('paper-responsive-change', {narrow: this.narrow});
       },
 
-      onQueryMatchesChanged: function(e) {
+      _onQueryMatchesChanged: function(e) {
         this._responsiveChange(e.detail.value);
       },
 
-      forceNarrowChanged: function() {
-        this._responsiveChange(this.forceNarrow);
+      _forceNarrowChanged: function() {
+        // set the narrow mode only if we reached the `responsiveWidth`
+        this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches);
       },
 
-      swipeAllowed: function() {
+      _swipeAllowed: function() {
         return this.narrow && !this.disableSwipe;
       },
 
-      isMainSelected: function() {
+      _isMainSelected: function() {
         return this.selected === 'main';
       },
 
-      startEdgePeek: function() {
+      _startEdgePeek: function() {
         this.width = this.$.drawer.offsetWidth;
-        this.moveDrawer(this.translateXForDeltaX(this.rightDrawer ?
+        this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ?
             -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
         this.peeking = true;
       },
 
-      stopEdgePeek: function() {
+      _stopEdgePeek: function() {
         if (this.peeking) {
           this.peeking = false;
-          this.moveDrawer(null);
+          this._moveDrawer(null);
         }
       },
 
       _downHandler: function(e) {
-        if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e)) {
+        if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) && !sharedPanel) {
           this._startEdgePeek();
+          // grab this panel
+          sharedPanel = this;
         }
       },
 
-      _upHandler: function(e) {
+      _upHandler: function() {
         this._stopEdgePeek();
+        // release the panel
+        sharedPanel = null;
       },
 
       _onTap: function(e) {
         var targetElement = Polymer.dom(e).localTarget;
         var isTargetToggleElement = targetElement &&
           this.drawerToggleAttribute &&
           targetElement.hasAttribute(this.drawerToggleAttribute);
 
         if (isTargetToggleElement) {
           this.togglePanel();
         }
       },
 
-      isEdgeTouch: function(event) {
-        var x = event.detail.x;
+      _isEdgeTouch: function(e) {
+        var x = e.detail.x;
 
-        return !this.disableEdgeSwipe && this.swipeAllowed() &&
+        return !this.disableEdgeSwipe && this._swipeAllowed() &&
           (this.rightDrawer ?
             x >= this.offsetWidth - this.edgeSwipeSensitivity :
             x <= this.edgeSwipeSensitivity);
       },
 
-      trackStart: function(event) {
-        if (this.swipeAllowed()) {
+      _trackStart: function() {
+        if (this._swipeAllowed()) {
+          sharedPanel = this;
           this.dragging = true;
-          this._startX = event.detail.x;
 
-          if (this.isMainSelected()) {
-            this.dragging = this.peeking || this.isEdgeTouch(event);
+          if (this._isMainSelected()) {
+            this.dragging = this.peeking || this._isEdgeTouch(event);
           }
 
           if (this.dragging) {
             this.width = this.$.drawer.offsetWidth;
             this.transition = false;
-
-            // TODO: Re-enable when tap gestures are implemented.
-            //
-            // e.preventTap();
           }
         }
       },
 
-      translateXForDeltaX: function(deltaX) {
-        var isMain = this.isMainSelected();
+      _translateXForDeltaX: function(deltaX) {
+        var isMain = this._isMainSelected();
 
         if (this.rightDrawer) {
           return Math.max(0, isMain ? this.width + deltaX : deltaX);
         } else {
           return Math.min(0, isMain ? deltaX - this.width : deltaX);
         }
       },
 
-      trackX: function(event) {
-        var dx = event.detail.x - this._startX;
+      _trackX: function(e) {
+        if (this.dragging) {
+          var dx = e.detail.dx;
 
-        if (this.dragging) {
           if (this.peeking) {
             if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
               // Ignore trackx until we move past the edge peek.
               return;
             }
-
             this.peeking = false;
           }
 
-          this.moveDrawer(this.translateXForDeltaX(dx));
+          this._moveDrawer(this._translateXForDeltaX(dx));
         }
       },
 
-      trackEnd: function(event) {
+      _trackEnd: function(e) {
         if (this.dragging) {
-          var xDirection = (event.detail.x - this._startX) > 0;
+          var xDirection = e.detail.dx > 0;
 
           this.dragging = false;
-          this._startX = null;
           this.transition = true;
-          this.moveDrawer(null);
+          sharedPanel = null;
+          this._moveDrawer(null);
 
           if (this.rightDrawer) {
-            this[(xDirection > 0) ? 'closeDrawer' : 'openDrawer']();
+            this[xDirection ? 'closeDrawer' : 'openDrawer']();
           } else {
-            this[(xDirection > 0) ? 'openDrawer' : 'closeDrawer']();
+            this[xDirection ? 'openDrawer' : 'closeDrawer']();
           }
         }
       },
 
-      transformForTranslateX: function(translateX) {
+      _transformForTranslateX: function(translateX) {
         if (translateX === null) {
           return '';
         }
 
         return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
             'translate3d(' + translateX + 'px, 0, 0)';
       },
 
-      moveDrawer: function(translateX) {
+      _moveDrawer: function(translateX) {
         var s = this.$.drawer.style;
 
         if (this.hasTransform) {
-          s.transform = this.transformForTranslateX(translateX);
+          s.transform = this._transformForTranslateX(translateX);
         } else {
-          s.webkitTransform = this.transformForTranslateX(translateX);
+          s.webkitTransform = this._transformForTranslateX(translateX);
         }
       }
 
     });
 
   }());
 
 </script>