| OLD | NEW |
| (Empty) |
| 1 | |
| 2 | |
| 3 Polymer('core-scaffold', { | |
| 4 | |
| 5 /** | |
| 6 * Fired when the main content has been scrolled. `event.detail.target` ret
urns | |
| 7 * the scrollable element which you can use to access scroll info such as | |
| 8 * `scrollTop`. | |
| 9 * | |
| 10 * <core-scaffold on-scroll="{{scrollHandler}}"> | |
| 11 * ... | |
| 12 * </core-scaffold> | |
| 13 * | |
| 14 * | |
| 15 * scrollHandler: function(event) { | |
| 16 * var scroller = event.detail.target; | |
| 17 * console.log(scroller.scrollTop); | |
| 18 * } | |
| 19 * | |
| 20 * @event scroll | |
| 21 */ | |
| 22 | |
| 23 publish: { | |
| 24 | |
| 25 /** | |
| 26 * Width of the drawer panel. | |
| 27 * | |
| 28 * @attribute drawerWidth | |
| 29 * @type string | |
| 30 * @default '256px' | |
| 31 */ | |
| 32 drawerWidth: '256px', | |
| 33 | |
| 34 /** | |
| 35 * When the browser window size is smaller than the `responsiveWidth`, | |
| 36 * `core-drawer-panel` changes to a narrow layout. In narrow layout, | |
| 37 * the drawer will be stacked on top of the main panel. | |
| 38 * | |
| 39 * @attribute responsiveWidth | |
| 40 * @type string | |
| 41 * @default '600px' | |
| 42 */ | |
| 43 responsiveWidth: '600px', | |
| 44 | |
| 45 /** | |
| 46 * If true, position the drawer to the right. Also place menu icon to | |
| 47 * the right of the content instead of left. | |
| 48 * | |
| 49 * @attribute rightDrawer | |
| 50 * @type boolean | |
| 51 * @default false | |
| 52 */ | |
| 53 rightDrawer: false, | |
| 54 | |
| 55 /** | |
| 56 * If true, swipe to open/close the drawer is disabled. | |
| 57 * | |
| 58 * @attribute disableSwipe | |
| 59 * @type boolean | |
| 60 * @default false | |
| 61 */ | |
| 62 disableSwipe: false, | |
| 63 | |
| 64 /** | |
| 65 * Used to control the header and scrolling behaviour of `core-header-pane
l` | |
| 66 * | |
| 67 * @attribute mode | |
| 68 * @type string | |
| 69 * @default 'seamed' | |
| 70 */ | |
| 71 mode: {value: 'seamed', reflect: true} | |
| 72 }, | |
| 73 | |
| 74 ready: function() { | |
| 75 this._scrollHandler = this.scroll.bind(this); | |
| 76 this.$.headerPanel.addEventListener('scroll', this._scrollHandler); | |
| 77 }, | |
| 78 | |
| 79 detached: function() { | |
| 80 this.$.headerPanel.removeEventListener('scroll', this._scrollHandler); | |
| 81 }, | |
| 82 | |
| 83 /** | |
| 84 * Toggle the drawer panel | |
| 85 * @method togglePanel | |
| 86 */ | |
| 87 togglePanel: function() { | |
| 88 this.$.drawerPanel.togglePanel(); | |
| 89 }, | |
| 90 | |
| 91 /** | |
| 92 * Open the drawer panel | |
| 93 * @method openDrawer | |
| 94 */ | |
| 95 openDrawer: function() { | |
| 96 this.$.drawerPanel.openDrawer(); | |
| 97 }, | |
| 98 | |
| 99 /** | |
| 100 * Close the drawer panel | |
| 101 * @method closeDrawer | |
| 102 */ | |
| 103 closeDrawer: function() { | |
| 104 this.$.drawerPanel.closeDrawer(); | |
| 105 }, | |
| 106 | |
| 107 /** | |
| 108 * Returns the scrollable element on the main area. | |
| 109 * | |
| 110 * @property scroller | |
| 111 * @type Object | |
| 112 */ | |
| 113 get scroller() { | |
| 114 return this.$.headerPanel.scroller; | |
| 115 }, | |
| 116 | |
| 117 scroll: function(e) { | |
| 118 this.fire('scroll', {target: e.detail.target}, this, false); | |
| 119 } | |
| 120 | |
| 121 }); | |
| 122 | |
| OLD | NEW |