| OLD | NEW |
| (Empty) |
| 1 Polymer({ | |
| 2 is: 'app-drawer-layout', | |
| 3 | |
| 4 behaviors: [ | |
| 5 Polymer.IronResizableBehavior | |
| 6 ], | |
| 7 | |
| 8 properties: { | |
| 9 /** | |
| 10 * If true, ignore `responsiveWidth` setting and force the narrow layout
. | |
| 11 */ | |
| 12 forceNarrow: { | |
| 13 type: Boolean, | |
| 14 value: false | |
| 15 }, | |
| 16 | |
| 17 /** | |
| 18 * If the viewport's width is smaller than this value, the panel will ch
ange to narrow | |
| 19 * layout. In the mode the drawer will be closed. | |
| 20 */ | |
| 21 responsiveWidth: { | |
| 22 type: String, | |
| 23 value: '640px' | |
| 24 }, | |
| 25 | |
| 26 /** | |
| 27 * Returns true if it is in narrow layout. This is useful if you need to
show/hide | |
| 28 * elements based on the layout. | |
| 29 */ | |
| 30 narrow: { | |
| 31 type: Boolean, | |
| 32 readOnly: true, | |
| 33 notify: true | |
| 34 } | |
| 35 }, | |
| 36 | |
| 37 listeners: { | |
| 38 'tap': '_tapHandler', | |
| 39 'app-drawer-reset-layout': 'resetLayout' | |
| 40 }, | |
| 41 | |
| 42 observers: [ | |
| 43 'resetLayout(narrow, isAttached)' | |
| 44 ], | |
| 45 | |
| 46 /** | |
| 47 * A reference to the app-drawer element. | |
| 48 * | |
| 49 * @property drawer | |
| 50 */ | |
| 51 get drawer() { | |
| 52 return Polymer.dom(this.$.drawerContent).getDistributedNodes()[0]; | |
| 53 }, | |
| 54 | |
| 55 _tapHandler: function(e) { | |
| 56 var target = Polymer.dom(e).localTarget; | |
| 57 if (target && target.hasAttribute('drawer-toggle')) { | |
| 58 this.drawer.toggle(); | |
| 59 } | |
| 60 }, | |
| 61 | |
| 62 resetLayout: function() { | |
| 63 this.debounce('_resetLayout', function() { | |
| 64 if (!this.isAttached) { | |
| 65 return; | |
| 66 } | |
| 67 | |
| 68 var drawer = this.drawer; | |
| 69 var drawerWidth = this.drawer.getWidth(); | |
| 70 var contentContainer = this.$.contentContainer; | |
| 71 | |
| 72 if (this.narrow) { | |
| 73 drawer.opened = drawer.persistent = false; | |
| 74 contentContainer.classList.add('narrow'); | |
| 75 | |
| 76 contentContainer.style.marginLeft = ''; | |
| 77 contentContainer.style.marginRight = ''; | |
| 78 } else { | |
| 79 drawer.opened = drawer.persistent = true; | |
| 80 contentContainer.classList.remove('narrow'); | |
| 81 | |
| 82 if (drawer.position == 'right') { | |
| 83 contentContainer.style.marginLeft = ''; | |
| 84 contentContainer.style.marginRight = drawerWidth + 'px'; | |
| 85 } else { | |
| 86 contentContainer.style.marginLeft = drawerWidth + 'px'; | |
| 87 contentContainer.style.marginRight = ''; | |
| 88 } | |
| 89 } | |
| 90 | |
| 91 this.notifyResize(); | |
| 92 }); | |
| 93 }, | |
| 94 | |
| 95 _onQueryMatchesChanged: function(event) { | |
| 96 this._setNarrow(event.detail.value); | |
| 97 }, | |
| 98 | |
| 99 _computeMediaQuery: function(forceNarrow, responsiveWidth) { | |
| 100 return forceNarrow ? '(min-width: 0px)' : '(max-width: ' + responsiveWid
th + ')'; | |
| 101 } | |
| 102 }); | |
| OLD | NEW |