| OLD | NEW |
| (Empty) |
| 1 <!-- | |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. | |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt | |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt | |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt | |
| 6 Code distributed by Google as part of the polymer project is also | |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt | |
| 8 --> | |
| 9 | |
| 10 <!-- | |
| 11 `core-drawer-panel` contains a drawer panel and a main panel. The drawer | |
| 12 and the main panel are side-by-side with drawer on the left. When browser | |
| 13 window size is smaller than the `responsiveWidth`, `core-drawer-panel` | |
| 14 changes to narrow layout. In narrow layout, the drawer will be stacked on top | |
| 15 of the main panel. The drawer will be slided in/out to hide/reveal the main | |
| 16 panel. | |
| 17 | |
| 18 Use the attribute `drawer` to indicate the element is a drawer panel and | |
| 19 `main` to indicate is a main panel. | |
| 20 | |
| 21 Example: | |
| 22 | |
| 23 <core-drawer-panel> | |
| 24 <div drawer> Drawer panel... </div> | |
| 25 <div main> Main panel... </div> | |
| 26 </core-drawer-panel> | |
| 27 | |
| 28 The drawer and the main panels are not scrollable. You can set CSS overflow | |
| 29 property on the elements to make them scrollable or use `core-header-panel`. | |
| 30 | |
| 31 Example: | |
| 32 | |
| 33 <core-drawer-panel> | |
| 34 <core-header-panel drawer> | |
| 35 <core-toolbar></core-toolbar> | |
| 36 <div> Drawer content... </div> | |
| 37 </core-header-panel> | |
| 38 <core-header-panel main> | |
| 39 <core-toolbar></core-toolbar> | |
| 40 <div> Main content... </div> | |
| 41 </core-header-panel> | |
| 42 </core-drawer-panel> | |
| 43 | |
| 44 To position the drawer to the right, add `rightDrawer` attribute. | |
| 45 | |
| 46 <core-drawer-panel rightDrawer> | |
| 47 <div drawer> Drawer panel... </div> | |
| 48 <div main> Main panel... </div> | |
| 49 </core-drawer-panel> | |
| 50 | |
| 51 @group Polymer Core Elements | |
| 52 @element core-drawer-panel | |
| 53 @homepage github.io | |
| 54 --> | |
| 55 | |
| 56 <link rel="import" href="../core-media-query/core-media-query.html"> | |
| 57 <link rel="import" href="../core-selector/core-selector.html"> | |
| 58 | |
| 59 <polymer-element name="core-drawer-panel" touch-action="auto"> | |
| 60 <template> | |
| 61 | |
| 62 <link rel="stylesheet" href="core-drawer-panel.css"> | |
| 63 | |
| 64 <core-media-query query="max-width: {{responsiveWidth}}" queryMatches="{{query
Matches}}"></core-media-query> | |
| 65 | |
| 66 <core-selector class="{{ {'narrow-layout' : queryMatches, transition : transit
ion, dragging : dragging, 'right-drawer': rightDrawer} | tokenList }}" valueattr
="id" selected="{{selected}}"> | |
| 67 | |
| 68 <div id="main" _style="left: {{ narrow || rightDrawer ? '0' : drawerWidth }}
; right: {{ rightDrawer ? (narrow ? '' : drawerWidth) : '' }};"> | |
| 69 <content select="[main]"></content> | |
| 70 <div id="scrim" on-tap="{{togglePanel}}"></div> | |
| 71 </div> | |
| 72 | |
| 73 <div id="drawer" _style="width: {{ drawerWidth }}"> | |
| 74 <content select="[drawer]"></content> | |
| 75 </div> | |
| 76 | |
| 77 </core-selector> | |
| 78 | |
| 79 </template> | |
| 80 <script> | |
| 81 | |
| 82 Polymer('core-drawer-panel', { | |
| 83 /** | |
| 84 * Fired when the narrow layout changes. | |
| 85 * | |
| 86 * @event core-responsive-change | |
| 87 * @param {Object} detail | |
| 88 * @param {boolean} detail.narrow true if the panel is in narrow layout. | |
| 89 */ | |
| 90 | |
| 91 publish: { | |
| 92 | |
| 93 /** | |
| 94 * Width of the drawer panel. | |
| 95 * | |
| 96 * @attribute drawerWidth | |
| 97 * @type string | |
| 98 * @default '256px' | |
| 99 */ | |
| 100 drawerWidth: '256px', | |
| 101 | |
| 102 /** | |
| 103 * Max-width when the panel changes to narrow layout. | |
| 104 * | |
| 105 * @attribute responsiveWidth | |
| 106 * @type string | |
| 107 * @default '640px' | |
| 108 */ | |
| 109 responsiveWidth: '640px', | |
| 110 | |
| 111 /** | |
| 112 * The panel that is being selected. `drawer` for the drawer panel and | |
| 113 * `main` for the main panel. | |
| 114 * | |
| 115 * @attribute selected | |
| 116 * @type string | |
| 117 * @default null | |
| 118 */ | |
| 119 selected: {value: null, reflect: true}, | |
| 120 | |
| 121 /** | |
| 122 * The panel to be selected when `core-drawer-panel` changes to narrow | |
| 123 * layout. | |
| 124 * | |
| 125 * @attribute defaultSelected | |
| 126 * @type string | |
| 127 * @default 'main' | |
| 128 */ | |
| 129 defaultSelected: 'main', | |
| 130 | |
| 131 /** | |
| 132 * Returns true if the panel is in narrow layout. This is useful if you | |
| 133 * need to show/hide elements based on the layout. | |
| 134 * | |
| 135 * @attribute narrow | |
| 136 * @type boolean | |
| 137 * @default false | |
| 138 */ | |
| 139 narrow: {value: false, reflect: true}, | |
| 140 | |
| 141 /** | |
| 142 * If true, position the drawer to the right. | |
| 143 * | |
| 144 * @attribute rightDrawer | |
| 145 * @type boolean | |
| 146 * @default false | |
| 147 */ | |
| 148 rightDrawer: false, | |
| 149 | |
| 150 /** | |
| 151 * If true, swipe to open/close the drawer is disabled. | |
| 152 * | |
| 153 * @attribute disableSwipe | |
| 154 * @type boolean | |
| 155 * @default false | |
| 156 */ | |
| 157 disableSwipe: false | |
| 158 }, | |
| 159 | |
| 160 eventDelegates: { | |
| 161 trackstart: 'trackStart', | |
| 162 trackx: 'trackx', | |
| 163 trackend: 'trackEnd' | |
| 164 }, | |
| 165 | |
| 166 transition: false, | |
| 167 | |
| 168 edgeSwipeSensitivity : 15, | |
| 169 | |
| 170 dragging : false, | |
| 171 | |
| 172 domReady: function() { | |
| 173 // to avoid transition at the beginning e.g. page loads | |
| 174 // NOTE: domReady is already raf delayed and delaying another frame | |
| 175 // ensures a layout has occurred. | |
| 176 this.async(function() { | |
| 177 this.transition = true; | |
| 178 }); | |
| 179 }, | |
| 180 | |
| 181 /** | |
| 182 * Toggles the panel open and closed. | |
| 183 * | |
| 184 * @method togglePanel | |
| 185 */ | |
| 186 togglePanel: function() { | |
| 187 this.selected = this.selected === 'main' ? 'drawer' : 'main'; | |
| 188 }, | |
| 189 | |
| 190 /** | |
| 191 * Opens the drawer. | |
| 192 * | |
| 193 * @method openDrawer | |
| 194 */ | |
| 195 openDrawer: function() { | |
| 196 this.selected = 'drawer'; | |
| 197 }, | |
| 198 | |
| 199 /** | |
| 200 * Closes the drawer. | |
| 201 * | |
| 202 * @method closeDrawer | |
| 203 */ | |
| 204 closeDrawer: function() { | |
| 205 this.selected = 'main'; | |
| 206 }, | |
| 207 | |
| 208 queryMatchesChanged: function() { | |
| 209 if (this.queryMatches) { | |
| 210 this.selected = this.defaultSelected; | |
| 211 } | |
| 212 this.narrow = this.queryMatches; | |
| 213 this.setAttribute('touch-action', | |
| 214 this.narrow && !this.disableSwipe ? 'pan-y' : ''); | |
| 215 this.fire('core-responsive-change', {narrow: this.narrow}); | |
| 216 }, | |
| 217 | |
| 218 // swipe support for the drawer, inspired by | |
| 219 // https://github.com/Polymer/core-drawer-panel/pull/6 | |
| 220 trackStart : function(e) { | |
| 221 if (this.narrow && !this.disableSwipe) { | |
| 222 this.dragging = true; | |
| 223 | |
| 224 if (this.selected === 'main') { | |
| 225 this.dragging = this.rightDrawer ? | |
| 226 e.pageX >= this.offsetWidth - this.edgeSwipeSensitivity : | |
| 227 e.pageX <= this.edgeSwipeSensitivity; | |
| 228 } | |
| 229 | |
| 230 if (this.dragging) { | |
| 231 this.width = this.$.drawer.offsetWidth; | |
| 232 this.transition = false; | |
| 233 e.preventTap(); | |
| 234 } | |
| 235 } | |
| 236 }, | |
| 237 | |
| 238 trackx : function(e) { | |
| 239 if (this.dragging) { | |
| 240 var x; | |
| 241 if (this.rightDrawer) { | |
| 242 x = Math.max(0, (this.selected === 'main') ? this.width + e.dx : e.dx)
; | |
| 243 } else { | |
| 244 x = Math.min(0, (this.selected === 'main') ? e.dx - this.width : e.dx)
; | |
| 245 } | |
| 246 this.moveDrawer(x); | |
| 247 } | |
| 248 }, | |
| 249 | |
| 250 trackEnd : function(e) { | |
| 251 if (this.dragging) { | |
| 252 this.dragging = false; | |
| 253 this.transition = true; | |
| 254 this.moveDrawer(null); | |
| 255 | |
| 256 if (this.rightDrawer) { | |
| 257 this.selected = e.xDirection > 0 ? 'main' : 'drawer'; | |
| 258 } else { | |
| 259 this.selected = e.xDirection > 0 ? 'drawer' : 'main'; | |
| 260 } | |
| 261 } | |
| 262 }, | |
| 263 | |
| 264 moveDrawer: function(translateX) { | |
| 265 var s = this.$.drawer.style; | |
| 266 s.webkitTransform = s.transform = | |
| 267 translateX === null ? '' : 'translate3d(' + translateX + 'px, 0, 0)'; | |
| 268 } | |
| 269 | |
| 270 }); | |
| 271 | |
| 272 </script> | |
| 273 </polymer-element> | |
| OLD | NEW |