npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

polymer_0.5.0/bower_components/core-drawer-panel/core-drawer-panel.html

Index: polymer_0.5.0/bower_components/core-drawer-panel/core-drawer-panel.html
diff --git a/bower_components/core-drawer-panel/core-drawer-panel.html b/polymer_0.5.0/bower_components/core-drawer-panel/core-drawer-panel.html
similarity index 70%
rename from bower_components/core-drawer-panel/core-drawer-panel.html
rename to polymer_0.5.0/bower_components/core-drawer-panel/core-drawer-panel.html
index 4927c8a5cd1c3293bad923214d640363773963ba..2133687931ec1dab5f6ab6e65b9bfafd32576129 100644
--- a/bower_components/core-drawer-panel/core-drawer-panel.html
+++ b/polymer_0.5.0/bower_components/core-drawer-panel/core-drawer-panel.html
@@ -9,14 +9,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 <!--
 `core-drawer-panel` contains a drawer panel and a main panel.  The drawer
-and the main panel are side-by-side with drawer on the left.  When browser
+and the main panel are side-by-side with drawer on the left.  When the browser
 window size is smaller than the `responsiveWidth`, `core-drawer-panel`
 changes to narrow layout.  In narrow layout, the drawer will be stacked on top
-of the main panel.  The drawer will be slided in/out to hide/reveal the main
+of the main panel.  The drawer will slide in/out to hide/reveal the main
 panel.
 
-Use the attribute `drawer` to indicate the element is a drawer panel and
-`main` to indicate is a main panel.
+Use the attribute `drawer` to indicate that the element is the drawer panel and
+`main` to indicate that the element is the main panel.
 
 Example:
 
@@ -41,6 +41,28 @@ Example:
       </core-header-panel>
     </core-drawer-panel>
 
+An element that should toggle the drawer will automatically do so if it's 
+given the `core-drawer-toggle` attribute.  Also this element will automatically
+be hidden in wide layout.
+
+Example:
+
+    <core-drawer-panel>
+      <core-header-panel drawer>
+        <core-toolbar>
+          <div>Application</div>
+        </core-toolbar>
+        <div> Drawer content... </div>
+      </core-header-panel>
+      <core-header-panel main>
+        <core-toolbar>
+          <core-icon-button icon="menu" core-drawer-toggle></core-icon-button>
+          <div>Title</div>
+        </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>
@@ -61,9 +83,9 @@ To position the drawer to the right, add `rightDrawer` attribute.
 
   <link rel="stylesheet" href="core-drawer-panel.css">
 
-  <core-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{queryMatches}}"></core-media-query>
+  <core-media-query query="max-width: {{forceNarrow ? '' : responsiveWidth}}" queryMatches="{{queryMatches}}"></core-media-query>
 
-  <core-selector class="{{ {'narrow-layout' : queryMatches, transition : transition, dragging : dragging, 'right-drawer': rightDrawer} | tokenList }}" valueattr="id" selected="{{selected}}">
+  <core-selector class="{{ {'narrow-layout' : narrow, transition : transition, dragging : dragging, 'right-drawer': rightDrawer} | tokenList }}" valueattr="id" selected="{{selected}}">
 
     <div id="main" _style="left: {{ narrow || rightDrawer ? '0' : drawerWidth }}; right: {{ rightDrawer ? (narrow ? '' : drawerWidth) : '' }};">
       <content select="[main]"></content>
@@ -88,6 +110,19 @@ To position the drawer to the right, add `rightDrawer` attribute.
      * @param {Object} detail
      * @param {boolean} detail.narrow true if the panel is in narrow layout.
      */
+     
+    /**
+     * Fired when the selected panel changes.
+     * 
+     * Listening for this event is an alternative to observing changes in the `selected` attribute.
+     * This event is fired both when a panel is selected and deselected.
+     * The `isSelected` detail property contains the selection state.
+     * 
+     * @event core-select
+     * @param {Object} detail
+     * @param {boolean} detail.isSelected true for selection and false for deselection
+     * @param {Object} detail.item the panel that the event refers to
+     */
 
     publish: {
 
@@ -155,15 +190,25 @@ To position the drawer to the right, add `rightDrawer` attribute.
        * @type boolean
        * @default false
        */
-      disableSwipe: false
+      disableSwipe: false,
+      
+      /**
+       * If true, ignore `responsiveWidth` setting and force the narrow layout.
+       *
+       * @attribute forceNarrow
+       * @type boolean
+       * @default false
+       */
+      forceNarrow: false
     },
 
     eventDelegates: {
       trackstart: 'trackStart',
       trackx: 'trackx',
       trackend: 'trackEnd',
-      down: 'touchStart',
-      up: 'touchEnd'
+      down: 'downHandler',
+      up: 'upHandler',
+      tap: 'tapHandler'
     },
 
     // Whether the transition is enabled.
@@ -183,6 +228,10 @@ To position the drawer to the right, add `rightDrawer` attribute.
 
     // Whether the browser has support for the will-change CSS property.
     hasWillChange: true,
+    
+    // The attribute on elements that should toggle the drawer on tap, also 
+    // elements will automatically be hidden in wide layout.
+    toggleAttribute: 'core-drawer-toggle',
 
     created: function() {
       this.hasTransform = 'transform' in this.style;
@@ -204,7 +253,7 @@ To position the drawer to the right, add `rightDrawer` attribute.
      * @method togglePanel
      */
     togglePanel: function() {
-      this.selected = this.selected === 'main' ? 'drawer' : 'main';
+      this.selected = this.isMainSelected() ? 'drawer' : 'main';
     },
 
     /**
@@ -226,17 +275,25 @@ To position the drawer to the right, add `rightDrawer` attribute.
     },
 
     queryMatchesChanged: function() {
-      if (this.queryMatches) {
+      this.narrow = this.queryMatches || this.forceNarrow;
+      if (this.narrow) {
         this.selected = this.defaultSelected;
       }
-      this.narrow = this.queryMatches;
       this.setAttribute('touch-action', this.swipeAllowed() ? 'pan-y' : '');
       this.fire('core-responsive-change', {narrow: this.narrow});
     },
+    
+    forceNarrowChanged: function() {
+      this.queryMatchesChanged();
+    },
 
     swipeAllowed: function() {
       return this.narrow && !this.disableSwipe;
     },
+    
+    isMainSelected: function() {
+      return this.selected === 'main';
+    },
 
     startEdgePeek: function() {
       this.width = this.$.drawer.offsetWidth;
@@ -252,14 +309,22 @@ To position the drawer to the right, add `rightDrawer` attribute.
       }
     },
 
-    touchStart: function(e) {
-      if (!this.dragging && this.selected === 'main' && this.isEdgeTouch(e))
+    downHandler: function(e) {
+      if (!this.dragging && this.isMainSelected() && this.isEdgeTouch(e)) {
         this.startEdgePeek();
+      }
     },
 
-    touchEnd: function(e) {
+    upHandler: function(e) {
       this.stopEdgePeak();
     },
+    
+    tapHandler: function(e) {
+      if (e.target && this.toggleAttribute && 
+          e.target.hasAttribute(this.toggleAttribute)) {
+        this.togglePanel();
+      }
+    },
 
     isEdgeTouch: function(e) {
       return this.swipeAllowed() && (this.rightDrawer ?
@@ -267,14 +332,13 @@ To position the drawer to the right, add `rightDrawer` attribute.
         e.pageX <= this.edgeSwipeSensitivity);
     },
 
-    // swipe support for the drawer, inspired by
-    // https://github.com/Polymer/core-drawer-panel/pull/6
     trackStart : function(e) {
       if (this.swipeAllowed()) {
         this.dragging = true;
 
-        if (this.selected === 'main')
+        if (this.isMainSelected()) {
           this.dragging = this.peeking || this.isEdgeTouch(e);
+        }
 
         if (this.dragging) {
           this.width = this.$.drawer.offsetWidth;
@@ -285,18 +349,20 @@ To position the drawer to the right, add `rightDrawer` attribute.
     },
 
     translateXForDeltaX: function(deltaX) {
+      var isMain = this.isMainSelected();
       if (this.rightDrawer) {
-        return Math.max(0, (this.selected === 'main') ? this.width + deltaX : deltaX);
+        return Math.max(0, isMain ? this.width + deltaX : deltaX);
       } else {
-        return Math.min(0, (this.selected === 'main') ? deltaX - this.width : deltaX);
+        return Math.min(0, isMain ? deltaX - this.width : deltaX);
       }
     },
 
     trackx : function(e) {
       if (this.dragging) {
         if (this.peeking) {
-          if (Math.abs(e.dx) <= this.edgeSwipeSensitivity)
+          if (Math.abs(e.dx) <= this.edgeSwipeSensitivity) {
             return; // Ignore trackx until we move past the edge peek.
+          }
           this.peeking = false;
         }
         this.moveDrawer(this.translateXForDeltaX(e.dx));
@@ -317,10 +383,12 @@ To position the drawer to the right, add `rightDrawer` attribute.
       }
     },
 
-    transformForTranslateX: function (translateX) {
-      if (translateX === null)
+    transformForTranslateX: function(translateX) {
+      if (translateX === null) {
         return '';
-      return this.hasWillChange ? 'translateX(' + translateX + 'px)' : 'translate3d(' + translateX + 'px, 0, 0)';
+      }
+      return this.hasWillChange ? 'translateX(' + translateX + 'px)' : 
+          'translate3d(' + translateX + 'px, 0, 0)';
     },
 
     moveDrawer: function(translateX) {
@@ -331,7 +399,7 @@ To position the drawer to the right, add `rightDrawer` attribute.
       } else {
         s.webkitTransform = this.transformForTranslateX(translateX);
       }
-    },
+    }
 
   });