| OLD | NEW |
| 1 (function() { | 1 (function() { |
| 2 'use strict'; | 2 'use strict'; |
| 3 | 3 |
| 4 // this would be the only `paper-drawer-panel` in | 4 // this would be the only `paper-drawer-panel` in |
| 5 // the whole app that can be in `dragging` state | 5 // the whole app that can be in `dragging` state |
| 6 var sharedPanel = null; | 6 var sharedPanel = null; |
| 7 | 7 |
| 8 function classNames(obj) { | 8 function classNames(obj) { |
| 9 var classes = []; | 9 var classes = []; |
| 10 for (var key in obj) { | 10 for (var key in obj) { |
| (...skipping 153 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 164 * If true, position the drawer to the right. | 164 * If true, position the drawer to the right. |
| 165 */ | 165 */ |
| 166 rightDrawer: { | 166 rightDrawer: { |
| 167 type: Boolean, | 167 type: Boolean, |
| 168 value: false | 168 value: false |
| 169 }, | 169 }, |
| 170 | 170 |
| 171 /** | 171 /** |
| 172 * The panel that is being selected. `drawer` for the drawer panel and | 172 * The panel that is being selected. `drawer` for the drawer panel and |
| 173 * `main` for the main panel. | 173 * `main` for the main panel. |
| 174 * |
| 175 * @type {string|null} |
| 174 */ | 176 */ |
| 175 selected: { | 177 selected: { |
| 176 reflectToAttribute: true, | 178 reflectToAttribute: true, |
| 177 notify: true, | 179 notify: true, |
| 178 type: String, | 180 type: String, |
| 179 value: null | 181 value: null |
| 180 }, | 182 }, |
| 181 | 183 |
| 182 /** | 184 /** |
| 183 * The attribute on elements that should toggle the drawer on tap, als
o elements will | 185 * The attribute on elements that should toggle the drawer on tap, als
o elements will |
| 184 * automatically be hidden in wide layout. | 186 * automatically be hidden in wide layout. |
| 185 */ | 187 */ |
| 186 drawerToggleAttribute: { | 188 drawerToggleAttribute: { |
| 187 type: String, | 189 type: String, |
| 188 value: 'paper-drawer-toggle' | 190 value: 'paper-drawer-toggle' |
| 189 }, | 191 }, |
| 190 | 192 |
| 191 /** | 193 /** |
| 192 * The CSS selector for the element that should receive focus when the
drawer is open. | 194 * The CSS selector for the element that should receive focus when the
drawer is open. |
| 193 * By default, when the drawer opens, it focuses the first tabbable el
ement. That is, | 195 * By default, when the drawer opens, it focuses the first tabbable el
ement. That is, |
| 194 * the first element that can receive focus. | 196 * the first element that can receive focus. |
| 197 * |
| 198 * To disable this behavior, you can set `drawerFocusSelector` to `nul
l` or an empty string. |
| 199 * |
| 195 */ | 200 */ |
| 196 drawerFocusSelector: { | 201 drawerFocusSelector: { |
| 197 type: String, | 202 type: String, |
| 198 value: | 203 value: |
| 199 'a[href]:not([tabindex="-1"]),'+ | 204 'a[href]:not([tabindex="-1"]),'+ |
| 200 'area[href]:not([tabindex="-1"]),'+ | 205 'area[href]:not([tabindex="-1"]),'+ |
| 201 'input:not([disabled]):not([tabindex="-1"]),'+ | 206 'input:not([disabled]):not([tabindex="-1"]),'+ |
| 202 'select:not([disabled]):not([tabindex="-1"]),'+ | 207 'select:not([disabled]):not([tabindex="-1"]),'+ |
| 203 'textarea:not([disabled]):not([tabindex="-1"]),'+ | 208 'textarea:not([disabled]):not([tabindex="-1"]),'+ |
| 204 'button:not([disabled]):not([tabindex="-1"]),'+ | 209 'button:not([disabled]):not([tabindex="-1"]),'+ |
| (...skipping 276 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 481 _moveDrawer: function(translateX) { | 486 _moveDrawer: function(translateX) { |
| 482 this.transform(this._transformForTranslateX(translateX), this.$.drawer
); | 487 this.transform(this._transformForTranslateX(translateX), this.$.drawer
); |
| 483 }, | 488 }, |
| 484 | 489 |
| 485 _getDrawerContent: function() { | 490 _getDrawerContent: function() { |
| 486 return Polymer.dom(this.$.drawerContent).getDistributedNodes()[0]; | 491 return Polymer.dom(this.$.drawerContent).getDistributedNodes()[0]; |
| 487 }, | 492 }, |
| 488 | 493 |
| 489 _getAutoFocusedNode: function() { | 494 _getAutoFocusedNode: function() { |
| 490 var drawerContent = this._getDrawerContent(); | 495 var drawerContent = this._getDrawerContent(); |
| 491 return Polymer.dom(drawerContent).querySelector(this.drawerFocusSelect
or) || drawerContent; | 496 |
| 497 return this.drawerFocusSelector ? |
| 498 Polymer.dom(drawerContent).querySelector(this.drawerFocusSelector)
|| drawerContent : null; |
| 492 }, | 499 }, |
| 493 | 500 |
| 494 _toggleFocusListener: function(selected) { | 501 _toggleFocusListener: function(selected) { |
| 495 if (selected === 'drawer') { | 502 if (selected === 'drawer') { |
| 496 document.addEventListener('focus', this._boundFocusListener, true); | 503 this.addEventListener('focus', this._boundFocusListener, true); |
| 497 } else { | 504 } else { |
| 498 document.removeEventListener('focus', this._boundFocusListener, true
); | 505 this.removeEventListener('focus', this._boundFocusListener, true); |
| 499 } | 506 } |
| 500 }, | 507 }, |
| 501 | 508 |
| 502 _didFocus: function(event) { | 509 _didFocus: function(event) { |
| 510 var autoFocusedNode = this._getAutoFocusedNode(); |
| 511 if (!autoFocusedNode) { |
| 512 return; |
| 513 } |
| 514 |
| 503 var path = Polymer.dom(event).path; | 515 var path = Polymer.dom(event).path; |
| 504 var focusedChild = path[0]; | 516 var focusedChild = path[0]; |
| 505 var drawerContent = this._getDrawerContent(); | 517 var drawerContent = this._getDrawerContent(); |
| 506 var focusedChildCameFromDrawer = false; | 518 var focusedChildCameFromDrawer = path.indexOf(drawerContent) !== -1; |
| 507 var autoFocusedNode = this._getAutoFocusedNode(); | |
| 508 | 519 |
| 509 while (!focusedChildCameFromDrawer && path[0] && path[0].hasAttribute)
{ | 520 if (!focusedChildCameFromDrawer) { |
| 510 focusedChildCameFromDrawer = path.shift() === drawerContent; | 521 event.stopPropagation(); |
| 511 } | |
| 512 if (!focusedChildCameFromDrawer && autoFocusedNode) { | |
| 513 autoFocusedNode.focus(); | 522 autoFocusedNode.focus(); |
| 514 } | 523 } |
| 515 }, | 524 }, |
| 516 | 525 |
| 517 _isDrawerClosed: function(narrow, selected) { | 526 _isDrawerClosed: function(narrow, selected) { |
| 518 return !narrow || selected !== 'drawer'; | 527 return !narrow || selected !== 'drawer'; |
| 519 } | 528 } |
| 520 }); | 529 }); |
| 521 | 530 |
| 522 }()); | 531 }()); |
| OLD | NEW |