Roll Polymer to 1.3.1

third_party/polymer/v1_0/components-chromium/paper-drawer-panel/paper-drawer-panel-extracted.js

 (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 classes = [];
         for (var key in obj) {
@@ skipping 171 matching lines @@
           /**
            * 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'
           },
 
           /**
+           * The CSS selector for the element that should receive focus when the drawer is open.
+           * By default, when the drawer opens, it focuses the first tabbable element. That is,
+           * the first element that can receive focus.
+           */
+          drawerFocusSelector: {
+            type: String,
+            value:
+                'a[href]:not([tabindex="-1"]),'+
+                'area[href]:not([tabindex="-1"]),'+
+                'input:not([disabled]):not([tabindex="-1"]),'+
+                'select:not([disabled]):not([tabindex="-1"]),'+
+                'textarea:not([disabled]):not([tabindex="-1"]),'+
+                'button:not([disabled]):not([tabindex="-1"]),'+
+                'iframe:not([tabindex="-1"]),'+
+                '[tabindex]:not([tabindex="-1"]),'+
+                '[contentEditable=true]:not([tabindex="-1"])'
+          },
+
+          /**
            * Whether the transition is enabled.
            */
           _transition: {
             type: Boolean,
             value: false
           },
 
         },
 
         listeners: {
           tap: '_onTap',
           track: '_onTrack',
           down: '_downHandler',
-          up: '_upHandler'
+          up: '_upHandler',
+          transitionend: '_onTransitionEnd'
         },
 
         observers: [
-          '_forceNarrowChanged(forceNarrow, defaultSelected)'
+          '_forceNarrowChanged(forceNarrow, defaultSelected)',
+          '_toggleFocusListener(selected)'
         ],
 
+        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;
+          this._boundFocusListener = this._didFocus.bind(this);
+        },
+
         /**
          * Toggles the panel open and closed.
          *
          * @method togglePanel
          */
         togglePanel: function() {
           if (this._isMainSelected()) {
             this.openDrawer();
           } else {
             this.closeDrawer();
@@ skipping 11 matching lines @@
 
         /**
          * 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;
-        },
-
-        _onMainTransitionEnd: function (e) {
-          if (e.currentTarget === this.$.main && (e.propertyName === 'left' || e.propertyName === 'right')) {
+        _onTransitionEnd: function (e) {
+          var target = Polymer.dom(e).localTarget;
+          if (target !== this) {
+            // ignore events coming from the light dom
+            return;
+          }
+          if (e.propertyName === 'left' || e.propertyName === 'right') {
             this.notifyResize();
           }
+          if (e.propertyName === 'transform' && this.selected === 'drawer') {
+            var focusedChild = this._getAutoFocusedNode();
+            focusedChild && focusedChild.focus();
+          }
         },
 
         _computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer, peeking) {
           return classNames({
             dragging: dragging,
             'narrow-layout': narrow,
             'right-drawer': rightDrawer,
             'left-drawer': !rightDrawer,
             transition: transition,
             peeking: peeking
@@ skipping 32 matching lines @@
             case 'start':
               this._trackStart(event);
               break;
             case 'track':
               this._trackX(event);
               break;
             case 'end':
               this._trackEnd(event);
               break;
           }
-
         },
 
         _responsiveChange: function(narrow) {
           this._setNarrow(narrow);
 
-          if (this.narrow) {
-            this.selected = this.defaultSelected;
-          }
+          this.selected = this.narrow ? this.defaultSelected : null;
 
           this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
           this.fire('paper-responsive-change', {narrow: this.narrow});
         },
 
         _onQueryMatchesChanged: function(event) {
           this._responsiveChange(event.detail.value);
         },
 
         _forceNarrowChanged: function() {
@@ skipping 115 matching lines @@
             } else {
               this[xDirection ? 'openDrawer' : 'closeDrawer']();
             }
           }
         },
 
         _transformForTranslateX: function(translateX) {
           if (translateX === null) {
             return '';
           }
-
           return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
               'translate3d(' + translateX + 'px, 0, 0)';
         },
 
         _moveDrawer: function(translateX) {
           this.transform(this._transformForTranslateX(translateX), this.$.drawer);
+        },
+
+        _getDrawerContent: function() {
+          return Polymer.dom(this.$.drawerContent).getDistributedNodes()[0];
+        },
+
+        _getAutoFocusedNode: function() {
+          var drawerContent = this._getDrawerContent();
+          return Polymer.dom(drawerContent).querySelector(this.drawerFocusSelector) || drawerContent;
+        },
+
+        _toggleFocusListener: function(selected) {
+          if (selected === 'drawer') {
+            document.addEventListener('focus', this._boundFocusListener, true);
+          } else {
+            document.removeEventListener('focus', this._boundFocusListener, true);
+          }
+        },
+
+        _didFocus: function(event) {
+          var path = Polymer.dom(event).path;
+          var focusedChild = path[0];
+          var drawerContent = this._getDrawerContent();
+          var focusedChildCameFromDrawer = false;
+          var autoFocusedNode = this._getAutoFocusedNode();
+
+          while (!focusedChildCameFromDrawer && path[0] && path[0].hasAttribute) {
+            focusedChildCameFromDrawer = path.shift() === drawerContent;
+          }
+          if (!focusedChildCameFromDrawer && autoFocusedNode) {
+            autoFocusedNode.focus();
+          }
+        },
+
+        _isDrawerClosed: function(narrow, selected) {
+          return !narrow || selected !== 'drawer';
         }
+      });
 
-      });
     }());