OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright (c) 2015 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 <link rel="import" href="../polymer/polymer.html"> |
| 11 <link rel="import" href="../iron-media-query/iron-media-query.html"> |
| 12 <link rel="import" href="../iron-selector/iron-selector.html"> |
| 13 <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html
"> |
| 14 |
| 15 <!-- |
| 16 Material design: [Navigation drawer](https://www.google.com/design/spec/patterns
/navigation-drawer.html) |
| 17 |
| 18 `paper-drawer-panel` contains a drawer panel and a main panel. The drawer |
| 19 and the main panel are side-by-side with drawer on the left. When the browser |
| 20 window size is smaller than the `responsiveWidth`, `paper-drawer-panel` |
| 21 changes to narrow layout. In narrow layout, the drawer will be stacked on top |
| 22 of the main panel. The drawer will slide in/out to hide/reveal the main |
| 23 panel. |
| 24 |
| 25 Use the attribute `drawer` to indicate that the element is the drawer panel and |
| 26 `main` to indicate that the element is the main panel. |
| 27 |
| 28 Example: |
| 29 |
| 30 <paper-drawer-panel> |
| 31 <div drawer> Drawer panel... </div> |
| 32 <div main> Main panel... </div> |
| 33 </paper-drawer-panel> |
| 34 |
| 35 The drawer and the main panels are not scrollable. You can set CSS overflow |
| 36 property on the elements to make them scrollable or use `paper-header-panel`. |
| 37 |
| 38 Example: |
| 39 |
| 40 <paper-drawer-panel> |
| 41 <paper-header-panel drawer> |
| 42 <paper-toolbar></paper-toolbar> |
| 43 <div> Drawer content... </div> |
| 44 </paper-header-panel> |
| 45 <paper-header-panel main> |
| 46 <paper-toolbar></paper-toolbar> |
| 47 <div> Main content... </div> |
| 48 </paper-header-panel> |
| 49 </paper-drawer-panel> |
| 50 |
| 51 An element that should toggle the drawer will automatically do so if it's |
| 52 given the `paper-drawer-toggle` attribute. Also this element will automatically |
| 53 be hidden in wide layout. |
| 54 |
| 55 Example: |
| 56 |
| 57 <paper-drawer-panel> |
| 58 <paper-header-panel drawer> |
| 59 <paper-toolbar> |
| 60 <div>Application</div> |
| 61 </paper-toolbar> |
| 62 <div> Drawer content... </div> |
| 63 </paper-header-panel> |
| 64 <paper-header-panel main> |
| 65 <paper-toolbar> |
| 66 <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button
> |
| 67 <div>Title</div> |
| 68 </paper-toolbar> |
| 69 <div> Main content... </div> |
| 70 </paper-header-panel> |
| 71 </paper-drawer-panel> |
| 72 |
| 73 To position the drawer to the right, add `right-drawer` attribute. |
| 74 |
| 75 <paper-drawer-panel right-drawer> |
| 76 <div drawer> Drawer panel... </div> |
| 77 <div main> Main panel... </div> |
| 78 </paper-drawer-panel> |
| 79 |
| 80 ### Styling |
| 81 |
| 82 To change the main container: |
| 83 |
| 84 paper-drawer-panel { |
| 85 --paper-drawer-panel-main-container: { |
| 86 background-color: gray; |
| 87 }; |
| 88 } |
| 89 |
| 90 To change the drawer container when it's in the left side: |
| 91 |
| 92 paper-drawer-panel { |
| 93 --paper-drawer-panel-left-drawer-container: { |
| 94 background-color: white; |
| 95 }; |
| 96 } |
| 97 |
| 98 To change the drawer container when it's in the right side: |
| 99 |
| 100 paper-drawer-panel { |
| 101 --paper-drawer-panel-right-drawer-container: { |
| 102 background-color: white; |
| 103 }; |
| 104 } |
| 105 |
| 106 To customize the scrim: |
| 107 |
| 108 paper-drawer-panel { |
| 109 --paper-drawer-panel-scrim: { |
| 110 background-color: red; |
| 111 }; |
| 112 } |
| 113 |
| 114 The following custom properties and mixins are available for styling: |
| 115 |
| 116 Custom property | Description | Default |
| 117 ----------------|-------------|---------- |
| 118 `--paper-drawer-panel-scrim-opacity` | Scrim opacity | 1 |
| 119 `--paper-drawer-panel-drawer-container` | Mixin applied to drawer container | {} |
| 120 `--paper-drawer-panel-left-drawer-container` | Mixin applied to container when i
t's in the left side | {} |
| 121 `--paper-drawer-panel-main-container` | Mixin applied to main container | {} |
| 122 `--paper-drawer-panel-right-drawer-container` | Mixin applied to container when
it's in the right side | {} |
| 123 `--paper-drawer-panel-scrim` | Mixin applied to scrim | {} |
| 124 |
| 125 @group Paper elements |
| 126 @element paper-drawer-panel |
| 127 @demo demo/index.html |
| 128 @hero hero.svg |
| 129 --> |
| 130 |
| 131 <dom-module id="paper-drawer-panel"> |
| 132 <template> |
| 133 <style> |
| 134 :host { |
| 135 display: block; |
| 136 position: absolute; |
| 137 top: 0; |
| 138 left: 0; |
| 139 width: 100%; |
| 140 height: 100%; |
| 141 overflow: hidden; |
| 142 } |
| 143 |
| 144 iron-selector > #drawer { |
| 145 position: absolute; |
| 146 top: 0; |
| 147 left: 0; |
| 148 height: 100%; |
| 149 background-color: white; |
| 150 |
| 151 -moz-box-sizing: border-box; |
| 152 box-sizing: border-box; |
| 153 |
| 154 @apply(--paper-drawer-panel-drawer-container); |
| 155 } |
| 156 |
| 157 .transition > #drawer { |
| 158 transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s,
visibility 0.3s; |
| 159 transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibili
ty 0.3s; |
| 160 } |
| 161 |
| 162 .left-drawer > #drawer { |
| 163 @apply(--paper-drawer-panel-left-drawer-container); |
| 164 } |
| 165 |
| 166 .right-drawer > #drawer { |
| 167 left: auto; |
| 168 right: 0; |
| 169 |
| 170 @apply(--paper-drawer-panel-right-drawer-container); |
| 171 } |
| 172 |
| 173 iron-selector > #main { |
| 174 position: absolute; |
| 175 top: 0; |
| 176 right: 0; |
| 177 bottom: 0; |
| 178 |
| 179 @apply(--paper-drawer-panel-main-container); |
| 180 } |
| 181 |
| 182 .transition > #main { |
| 183 transition: left ease-in-out 0.3s, padding ease-in-out 0.3s; |
| 184 } |
| 185 |
| 186 .right-drawer > #main { |
| 187 left: 0; |
| 188 } |
| 189 |
| 190 .right-drawer.transition > #main { |
| 191 transition: right ease-in-out 0.3s, padding ease-in-out 0.3s; |
| 192 } |
| 193 |
| 194 #main > ::content > [main] { |
| 195 height: 100%; |
| 196 } |
| 197 |
| 198 #drawer > ::content > [drawer] { |
| 199 height: 100%; |
| 200 } |
| 201 |
| 202 #scrim { |
| 203 position: absolute; |
| 204 top: 0; |
| 205 right: 0; |
| 206 bottom: 0; |
| 207 left: 0; |
| 208 visibility: hidden; |
| 209 opacity: 0; |
| 210 transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s; |
| 211 background-color: rgba(0, 0, 0, 0.3); |
| 212 |
| 213 @apply(--paper-drawer-panel-scrim); |
| 214 } |
| 215 |
| 216 .narrow-layout > #drawer { |
| 217 will-change: transform; |
| 218 } |
| 219 |
| 220 .narrow-layout > #drawer.iron-selected { |
| 221 box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); |
| 222 } |
| 223 |
| 224 .right-drawer.narrow-layout > #drawer.iron-selected { |
| 225 box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15); |
| 226 } |
| 227 |
| 228 .narrow-layout > #drawer > ::content > [drawer] { |
| 229 border: 0; |
| 230 } |
| 231 |
| 232 .left-drawer.narrow-layout > #drawer:not(.iron-selected) { |
| 233 -webkit-transform: translateX(-100%); |
| 234 transform: translateX(-100%); |
| 235 } |
| 236 |
| 237 .right-drawer.narrow-layout > #drawer:not(.iron-selected) { |
| 238 left: auto; |
| 239 visibility: hidden; |
| 240 |
| 241 -webkit-transform: translateX(100%); |
| 242 transform: translateX(100%); |
| 243 } |
| 244 |
| 245 .right-drawer.narrow-layout.dragging > #drawer:not(.iron-selected), |
| 246 .right-drawer.narrow-layout.peeking > #drawer:not(.iron-selected) { |
| 247 visibility: visible; |
| 248 } |
| 249 |
| 250 .narrow-layout > #main { |
| 251 padding: 0; |
| 252 } |
| 253 |
| 254 .right-drawer.narrow-layout > #main { |
| 255 left: 0; |
| 256 right: 0; |
| 257 } |
| 258 |
| 259 .narrow-layout > #main:not(.iron-selected) > #scrim, |
| 260 .dragging > #main > #scrim { |
| 261 visibility: visible; |
| 262 opacity: var(--paper-drawer-panel-scrim-opacity, 1); |
| 263 } |
| 264 |
| 265 .narrow-layout > #main > * { |
| 266 margin: 0; |
| 267 min-height: 100%; |
| 268 left: 0; |
| 269 right: 0; |
| 270 |
| 271 -moz-box-sizing: border-box; |
| 272 box-sizing: border-box; |
| 273 } |
| 274 |
| 275 iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] { |
| 276 display: none; |
| 277 } |
| 278 </style> |
| 279 |
| 280 <iron-media-query |
| 281 id="mq" |
| 282 on-query-matches-changed="_onQueryMatchesChanged" |
| 283 query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]"> |
| 284 </iron-media-query> |
| 285 |
| 286 <iron-selector |
| 287 attr-for-selected="id" |
| 288 class$="[[_computeIronSelectorClass(narrow, _transition, dragging, right
Drawer, peeking)]]" |
| 289 activate-event="" |
| 290 selected="[[selected]]"> |
| 291 |
| 292 <div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidt
h)]]" on-transitionend="_onMainTransitionEnd"> |
| 293 <content select="[main]"></content> |
| 294 <div id="scrim" on-tap="closeDrawer"></div> |
| 295 </div> |
| 296 |
| 297 <div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]"> |
| 298 <content select="[drawer]"></content> |
| 299 </div> |
| 300 |
| 301 </iron-selector> |
| 302 </template> |
| 303 |
| 304 <script> |
| 305 (function() { |
| 306 'use strict'; |
| 307 |
| 308 // this would be the only `paper-drawer-panel` in |
| 309 // the whole app that can be in `dragging` state |
| 310 var sharedPanel = null; |
| 311 |
| 312 function classNames(obj) { |
| 313 var classes = []; |
| 314 for (var key in obj) { |
| 315 if (obj.hasOwnProperty(key) && obj[key]) { |
| 316 classes.push(key); |
| 317 } |
| 318 } |
| 319 |
| 320 return classes.join(' '); |
| 321 } |
| 322 |
| 323 Polymer({ |
| 324 |
| 325 is: 'paper-drawer-panel', |
| 326 |
| 327 behaviors: [Polymer.IronResizableBehavior], |
| 328 |
| 329 /** |
| 330 * Fired when the narrow layout changes. |
| 331 * |
| 332 * @event paper-responsive-change {{narrow: boolean}} detail - |
| 333 * narrow: true if the panel is in narrow layout. |
| 334 */ |
| 335 |
| 336 /** |
| 337 * Fired when the a panel is selected. |
| 338 * |
| 339 * Listening for this event is an alternative to observing changes in th
e `selected` attribute. |
| 340 * This event is fired both when a panel is selected. |
| 341 * |
| 342 * @event iron-select {{item: Object}} detail - |
| 343 * item: The panel that the event refers to. |
| 344 */ |
| 345 |
| 346 /** |
| 347 * Fired when a panel is deselected. |
| 348 * |
| 349 * Listening for this event is an alternative to observing changes in th
e `selected` attribute. |
| 350 * This event is fired both when a panel is deselected. |
| 351 * |
| 352 * @event iron-deselect {{item: Object}} detail - |
| 353 * item: The panel that the event refers to. |
| 354 */ |
| 355 properties: { |
| 356 |
| 357 /** |
| 358 * The panel to be selected when `paper-drawer-panel` changes to narro
w |
| 359 * layout. |
| 360 */ |
| 361 defaultSelected: { |
| 362 type: String, |
| 363 value: 'main' |
| 364 }, |
| 365 |
| 366 /** |
| 367 * If true, swipe from the edge is disabled. |
| 368 */ |
| 369 disableEdgeSwipe: { |
| 370 type: Boolean, |
| 371 value: false |
| 372 }, |
| 373 |
| 374 /** |
| 375 * If true, swipe to open/close the drawer is disabled. |
| 376 */ |
| 377 disableSwipe: { |
| 378 type: Boolean, |
| 379 value: false |
| 380 }, |
| 381 |
| 382 /** |
| 383 * Whether the user is dragging the drawer interactively. |
| 384 */ |
| 385 dragging: { |
| 386 type: Boolean, |
| 387 value: false, |
| 388 readOnly: true, |
| 389 notify: true |
| 390 }, |
| 391 |
| 392 /** |
| 393 * Width of the drawer panel. |
| 394 */ |
| 395 drawerWidth: { |
| 396 type: String, |
| 397 value: '256px' |
| 398 }, |
| 399 |
| 400 /** |
| 401 * How many pixels on the side of the screen are sensitive to edge |
| 402 * swipes and peek. |
| 403 */ |
| 404 edgeSwipeSensitivity: { |
| 405 type: Number, |
| 406 value: 30 |
| 407 }, |
| 408 |
| 409 /** |
| 410 * If true, ignore `responsiveWidth` setting and force the narrow layo
ut. |
| 411 */ |
| 412 forceNarrow: { |
| 413 type: Boolean, |
| 414 value: false |
| 415 }, |
| 416 |
| 417 /** |
| 418 * Whether the browser has support for the transform CSS property. |
| 419 */ |
| 420 hasTransform: { |
| 421 type: Boolean, |
| 422 value: function() { |
| 423 return 'transform' in this.style; |
| 424 } |
| 425 }, |
| 426 |
| 427 /** |
| 428 * Whether the browser has support for the will-change CSS property. |
| 429 */ |
| 430 hasWillChange: { |
| 431 type: Boolean, |
| 432 value: function() { |
| 433 return 'willChange' in this.style; |
| 434 } |
| 435 }, |
| 436 |
| 437 /** |
| 438 * Returns true if the panel is in narrow layout. This is useful if y
ou |
| 439 * need to show/hide elements based on the layout. |
| 440 */ |
| 441 narrow: { |
| 442 reflectToAttribute: true, |
| 443 type: Boolean, |
| 444 value: false, |
| 445 readOnly: true, |
| 446 notify: true |
| 447 }, |
| 448 |
| 449 /** |
| 450 * Whether the drawer is peeking out from the edge. |
| 451 */ |
| 452 peeking: { |
| 453 type: Boolean, |
| 454 value: false, |
| 455 readOnly: true, |
| 456 notify: true |
| 457 }, |
| 458 |
| 459 /** |
| 460 * Max-width when the panel changes to narrow layout. |
| 461 */ |
| 462 responsiveWidth: { |
| 463 type: String, |
| 464 value: '600px' |
| 465 }, |
| 466 |
| 467 /** |
| 468 * If true, position the drawer to the right. |
| 469 */ |
| 470 rightDrawer: { |
| 471 type: Boolean, |
| 472 value: false |
| 473 }, |
| 474 |
| 475 /** |
| 476 * The panel that is being selected. `drawer` for the drawer panel and |
| 477 * `main` for the main panel. |
| 478 */ |
| 479 selected: { |
| 480 reflectToAttribute: true, |
| 481 notify: true, |
| 482 type: String, |
| 483 value: null |
| 484 }, |
| 485 |
| 486 /** |
| 487 * The attribute on elements that should toggle the drawer on tap, als
o elements will |
| 488 * automatically be hidden in wide layout. |
| 489 */ |
| 490 drawerToggleAttribute: { |
| 491 type: String, |
| 492 value: 'paper-drawer-toggle' |
| 493 }, |
| 494 |
| 495 /** |
| 496 * Whether the transition is enabled. |
| 497 */ |
| 498 _transition: { |
| 499 type: Boolean, |
| 500 value: false |
| 501 }, |
| 502 |
| 503 }, |
| 504 |
| 505 listeners: { |
| 506 tap: '_onTap', |
| 507 track: '_onTrack', |
| 508 down: '_downHandler', |
| 509 up: '_upHandler' |
| 510 }, |
| 511 |
| 512 observers: [ |
| 513 '_forceNarrowChanged(forceNarrow, defaultSelected)' |
| 514 ], |
| 515 |
| 516 /** |
| 517 * Toggles the panel open and closed. |
| 518 * |
| 519 * @method togglePanel |
| 520 */ |
| 521 togglePanel: function() { |
| 522 if (this._isMainSelected()) { |
| 523 this.openDrawer(); |
| 524 } else { |
| 525 this.closeDrawer(); |
| 526 } |
| 527 }, |
| 528 |
| 529 /** |
| 530 * Opens the drawer. |
| 531 * |
| 532 * @method openDrawer |
| 533 */ |
| 534 openDrawer: function() { |
| 535 this.selected = 'drawer'; |
| 536 }, |
| 537 |
| 538 /** |
| 539 * Closes the drawer. |
| 540 * |
| 541 * @method closeDrawer |
| 542 */ |
| 543 closeDrawer: function() { |
| 544 this.selected = 'main'; |
| 545 }, |
| 546 |
| 547 ready: function() { |
| 548 // Avoid transition at the beginning e.g. page loads and enable |
| 549 // transitions only after the element is rendered and ready. |
| 550 this._transition = true; |
| 551 }, |
| 552 |
| 553 _onMainTransitionEnd: function (e) { |
| 554 if (e.currentTarget === this.$.main && (e.propertyName === 'left' || e
.propertyName === 'right')) { |
| 555 this.notifyResize(); |
| 556 } |
| 557 }, |
| 558 |
| 559 _computeIronSelectorClass: function(narrow, transition, dragging, rightD
rawer, peeking) { |
| 560 return classNames({ |
| 561 dragging: dragging, |
| 562 'narrow-layout': narrow, |
| 563 'right-drawer': rightDrawer, |
| 564 'left-drawer': !rightDrawer, |
| 565 transition: transition, |
| 566 peeking: peeking |
| 567 }); |
| 568 }, |
| 569 |
| 570 _computeDrawerStyle: function(drawerWidth) { |
| 571 return 'width:' + drawerWidth + ';'; |
| 572 }, |
| 573 |
| 574 _computeMainStyle: function(narrow, rightDrawer, drawerWidth) { |
| 575 var style = ''; |
| 576 |
| 577 style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';'
; |
| 578 |
| 579 if (rightDrawer) { |
| 580 style += 'right:' + (narrow ? '' : drawerWidth) + ';'; |
| 581 } |
| 582 |
| 583 return style; |
| 584 }, |
| 585 |
| 586 _computeMediaQuery: function(forceNarrow, responsiveWidth) { |
| 587 return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')'; |
| 588 }, |
| 589 |
| 590 _computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) { |
| 591 return !narrow || disableEdgeSwipe; |
| 592 }, |
| 593 |
| 594 _onTrack: function(event) { |
| 595 if (sharedPanel && this !== sharedPanel) { |
| 596 return; |
| 597 } |
| 598 switch (event.detail.state) { |
| 599 case 'start': |
| 600 this._trackStart(event); |
| 601 break; |
| 602 case 'track': |
| 603 this._trackX(event); |
| 604 break; |
| 605 case 'end': |
| 606 this._trackEnd(event); |
| 607 break; |
| 608 } |
| 609 |
| 610 }, |
| 611 |
| 612 _responsiveChange: function(narrow) { |
| 613 this._setNarrow(narrow); |
| 614 |
| 615 if (this.narrow) { |
| 616 this.selected = this.defaultSelected; |
| 617 } |
| 618 |
| 619 this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); |
| 620 this.fire('paper-responsive-change', {narrow: this.narrow}); |
| 621 }, |
| 622 |
| 623 _onQueryMatchesChanged: function(event) { |
| 624 this._responsiveChange(event.detail.value); |
| 625 }, |
| 626 |
| 627 _forceNarrowChanged: function() { |
| 628 // set the narrow mode only if we reached the `responsiveWidth` |
| 629 this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches); |
| 630 }, |
| 631 |
| 632 _swipeAllowed: function() { |
| 633 return this.narrow && !this.disableSwipe; |
| 634 }, |
| 635 |
| 636 _isMainSelected: function() { |
| 637 return this.selected === 'main'; |
| 638 }, |
| 639 |
| 640 _startEdgePeek: function() { |
| 641 this.width = this.$.drawer.offsetWidth; |
| 642 this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ? |
| 643 -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity)); |
| 644 this._setPeeking(true); |
| 645 }, |
| 646 |
| 647 _stopEdgePeek: function() { |
| 648 if (this.peeking) { |
| 649 this._setPeeking(false); |
| 650 this._moveDrawer(null); |
| 651 } |
| 652 }, |
| 653 |
| 654 _downHandler: function(event) { |
| 655 if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(even
t) && !sharedPanel) { |
| 656 this._startEdgePeek(); |
| 657 // cancel selection |
| 658 event.preventDefault(); |
| 659 // grab this panel |
| 660 sharedPanel = this; |
| 661 } |
| 662 }, |
| 663 |
| 664 _upHandler: function() { |
| 665 this._stopEdgePeek(); |
| 666 // release the panel |
| 667 sharedPanel = null; |
| 668 }, |
| 669 |
| 670 _onTap: function(event) { |
| 671 var targetElement = Polymer.dom(event).localTarget; |
| 672 var isTargetToggleElement = targetElement && |
| 673 this.drawerToggleAttribute && |
| 674 targetElement.hasAttribute(this.drawerToggleAttribute); |
| 675 |
| 676 if (isTargetToggleElement) { |
| 677 this.togglePanel(); |
| 678 } |
| 679 }, |
| 680 |
| 681 _isEdgeTouch: function(event) { |
| 682 var x = event.detail.x; |
| 683 |
| 684 return !this.disableEdgeSwipe && this._swipeAllowed() && |
| 685 (this.rightDrawer ? |
| 686 x >= this.offsetWidth - this.edgeSwipeSensitivity : |
| 687 x <= this.edgeSwipeSensitivity); |
| 688 }, |
| 689 |
| 690 _trackStart: function(event) { |
| 691 if (this._swipeAllowed()) { |
| 692 sharedPanel = this; |
| 693 this._setDragging(true); |
| 694 |
| 695 if (this._isMainSelected()) { |
| 696 this._setDragging(this.peeking || this._isEdgeTouch(event)); |
| 697 } |
| 698 |
| 699 if (this.dragging) { |
| 700 this.width = this.$.drawer.offsetWidth; |
| 701 this._transition = false; |
| 702 } |
| 703 } |
| 704 }, |
| 705 |
| 706 _translateXForDeltaX: function(deltaX) { |
| 707 var isMain = this._isMainSelected(); |
| 708 |
| 709 if (this.rightDrawer) { |
| 710 return Math.max(0, isMain ? this.width + deltaX : deltaX); |
| 711 } else { |
| 712 return Math.min(0, isMain ? deltaX - this.width : deltaX); |
| 713 } |
| 714 }, |
| 715 |
| 716 _trackX: function(event) { |
| 717 if (this.dragging) { |
| 718 var dx = event.detail.dx; |
| 719 |
| 720 if (this.peeking) { |
| 721 if (Math.abs(dx) <= this.edgeSwipeSensitivity) { |
| 722 // Ignore trackx until we move past the edge peek. |
| 723 return; |
| 724 } |
| 725 this._setPeeking(false); |
| 726 } |
| 727 |
| 728 this._moveDrawer(this._translateXForDeltaX(dx)); |
| 729 } |
| 730 }, |
| 731 |
| 732 _trackEnd: function(event) { |
| 733 if (this.dragging) { |
| 734 var xDirection = event.detail.dx > 0; |
| 735 |
| 736 this._setDragging(false); |
| 737 this._transition = true; |
| 738 sharedPanel = null; |
| 739 this._moveDrawer(null); |
| 740 |
| 741 if (this.rightDrawer) { |
| 742 this[xDirection ? 'closeDrawer' : 'openDrawer'](); |
| 743 } else { |
| 744 this[xDirection ? 'openDrawer' : 'closeDrawer'](); |
| 745 } |
| 746 } |
| 747 }, |
| 748 |
| 749 _transformForTranslateX: function(translateX) { |
| 750 if (translateX === null) { |
| 751 return ''; |
| 752 } |
| 753 |
| 754 return this.hasWillChange ? 'translateX(' + translateX + 'px)' : |
| 755 'translate3d(' + translateX + 'px, 0, 0)'; |
| 756 }, |
| 757 |
| 758 _moveDrawer: function(translateX) { |
| 759 this.transform(this._transformForTranslateX(translateX), this.$.drawer
); |
| 760 } |
| 761 |
| 762 }); |
| 763 }()); |
| 764 </script> |
| 765 </dom-module> |
OLD | NEW |