| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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 | 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 | 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 | 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 | 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 | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --> | 8 --> |
| 9 | 9 |
| 10 <link rel="import" href="../polymer/polymer.html"> | 10 <link rel="import" href="../polymer/polymer.html"> |
| (...skipping 192 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 203 disableSwipe: { | 203 disableSwipe: { |
| 204 type: Boolean, | 204 type: Boolean, |
| 205 value: false | 205 value: false |
| 206 }, | 206 }, |
| 207 | 207 |
| 208 /** | 208 /** |
| 209 * Whether the user is dragging the drawer interactively. | 209 * Whether the user is dragging the drawer interactively. |
| 210 */ | 210 */ |
| 211 dragging: { | 211 dragging: { |
| 212 type: Boolean, | 212 type: Boolean, |
| 213 value: false | 213 value: false, |
| 214 readOnly: true, |
| 215 notify: true |
| 214 }, | 216 }, |
| 215 | 217 |
| 216 /** | 218 /** |
| 217 * Width of the drawer panel. | 219 * Width of the drawer panel. |
| 218 */ | 220 */ |
| 219 drawerWidth: { | 221 drawerWidth: { |
| 220 type: String, | 222 type: String, |
| 221 value: '256px' | 223 value: '256px' |
| 222 }, | 224 }, |
| 223 | 225 |
| (...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 259 }, | 261 }, |
| 260 | 262 |
| 261 /** | 263 /** |
| 262 * Returns true if the panel is in narrow layout. This is useful if you | 264 * Returns true if the panel is in narrow layout. This is useful if you |
| 263 * need to show/hide elements based on the layout. | 265 * need to show/hide elements based on the layout. |
| 264 */ | 266 */ |
| 265 narrow: { | 267 narrow: { |
| 266 reflectToAttribute: true, | 268 reflectToAttribute: true, |
| 267 type: Boolean, | 269 type: Boolean, |
| 268 value: false, | 270 value: false, |
| 271 readOnly: true, |
| 269 notify: true | 272 notify: true |
| 270 }, | 273 }, |
| 271 | 274 |
| 272 /** | 275 /** |
| 273 * Whether the drawer is peeking out from the edge. | 276 * Whether the drawer is peeking out from the edge. |
| 274 */ | 277 */ |
| 275 peeking: { | 278 peeking: { |
| 276 type: Boolean, | 279 type: Boolean, |
| 277 value: false | 280 value: false, |
| 281 readOnly: true, |
| 282 notify: true |
| 278 }, | 283 }, |
| 279 | 284 |
| 280 /** | 285 /** |
| 281 * Max-width when the panel changes to narrow layout. | 286 * Max-width when the panel changes to narrow layout. |
| 282 */ | 287 */ |
| 283 responsiveWidth: { | 288 responsiveWidth: { |
| 284 type: String, | 289 type: String, |
| 285 value: '640px' | 290 value: '640px' |
| 286 }, | 291 }, |
| 287 | 292 |
| 288 /** | 293 /** |
| 289 * If true, position the drawer to the right. | 294 * If true, position the drawer to the right. |
| 290 */ | 295 */ |
| 291 rightDrawer: { | 296 rightDrawer: { |
| 292 type: Boolean, | 297 type: Boolean, |
| 293 value: false | 298 value: false |
| 294 }, | 299 }, |
| 295 | 300 |
| 296 /** | 301 /** |
| 297 * The panel that is being selected. `drawer` for the drawer panel and | 302 * The panel that is being selected. `drawer` for the drawer panel and |
| 298 * `main` for the main panel. | 303 * `main` for the main panel. |
| 299 */ | 304 */ |
| 300 selected: { | 305 selected: { |
| 301 reflectToAttribute: true, | 306 reflectToAttribute: true, |
| 307 notify: true, |
| 302 type: String, | 308 type: String, |
| 303 value: null | 309 value: null |
| 304 }, | 310 }, |
| 305 | 311 |
| 306 /** | 312 /** |
| 307 * The attribute on elements that should toggle the drawer on tap, also
elements will | 313 * The attribute on elements that should toggle the drawer on tap, also
elements will |
| 308 * automatically be hidden in wide layout. | 314 * automatically be hidden in wide layout. |
| 309 */ | 315 */ |
| 310 drawerToggleAttribute: { | 316 drawerToggleAttribute: { |
| 311 type: String, | 317 type: String, |
| (...skipping 106 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 418 this._trackX(e); | 424 this._trackX(e); |
| 419 break; | 425 break; |
| 420 case 'end': | 426 case 'end': |
| 421 this._trackEnd(e); | 427 this._trackEnd(e); |
| 422 break; | 428 break; |
| 423 } | 429 } |
| 424 | 430 |
| 425 }, | 431 }, |
| 426 | 432 |
| 427 _responsiveChange: function(narrow) { | 433 _responsiveChange: function(narrow) { |
| 428 this.narrow = narrow; | 434 this._setNarrow(narrow); |
| 429 | 435 |
| 430 if (this.narrow) { | 436 if (this.narrow) { |
| 431 this.selected = this.defaultSelected; | 437 this.selected = this.defaultSelected; |
| 432 } | 438 } |
| 433 | 439 |
| 434 this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); | 440 this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); |
| 435 this.fire('paper-responsive-change', {narrow: this.narrow}); | 441 this.fire('paper-responsive-change', {narrow: this.narrow}); |
| 436 }, | 442 }, |
| 437 | 443 |
| 438 _onQueryMatchesChanged: function(e) { | 444 _onQueryMatchesChanged: function(e) { |
| (...skipping 10 matching lines...) Expand all Loading... |
| 449 }, | 455 }, |
| 450 | 456 |
| 451 _isMainSelected: function() { | 457 _isMainSelected: function() { |
| 452 return this.selected === 'main'; | 458 return this.selected === 'main'; |
| 453 }, | 459 }, |
| 454 | 460 |
| 455 _startEdgePeek: function() { | 461 _startEdgePeek: function() { |
| 456 this.width = this.$.drawer.offsetWidth; | 462 this.width = this.$.drawer.offsetWidth; |
| 457 this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ? | 463 this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ? |
| 458 -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity)); | 464 -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity)); |
| 459 this.peeking = true; | 465 this._setPeeking(true); |
| 460 }, | 466 }, |
| 461 | 467 |
| 462 _stopEdgePeek: function() { | 468 _stopEdgePeek: function() { |
| 463 if (this.peeking) { | 469 if (this.peeking) { |
| 464 this.peeking = false; | 470 this._setPeeking(false); |
| 465 this._moveDrawer(null); | 471 this._moveDrawer(null); |
| 466 } | 472 } |
| 467 }, | 473 }, |
| 468 | 474 |
| 469 _downHandler: function(e) { | 475 _downHandler: function(e) { |
| 470 if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) &&
!sharedPanel) { | 476 if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) &&
!sharedPanel) { |
| 471 this._startEdgePeek(); | 477 this._startEdgePeek(); |
| 472 // grab this panel | 478 // grab this panel |
| 473 sharedPanel = this; | 479 sharedPanel = this; |
| 474 } | 480 } |
| (...skipping 18 matching lines...) Expand all Loading... |
| 493 | 499 |
| 494 _isEdgeTouch: function(e) { | 500 _isEdgeTouch: function(e) { |
| 495 var x = e.detail.x; | 501 var x = e.detail.x; |
| 496 | 502 |
| 497 return !this.disableEdgeSwipe && this._swipeAllowed() && | 503 return !this.disableEdgeSwipe && this._swipeAllowed() && |
| 498 (this.rightDrawer ? | 504 (this.rightDrawer ? |
| 499 x >= this.offsetWidth - this.edgeSwipeSensitivity : | 505 x >= this.offsetWidth - this.edgeSwipeSensitivity : |
| 500 x <= this.edgeSwipeSensitivity); | 506 x <= this.edgeSwipeSensitivity); |
| 501 }, | 507 }, |
| 502 | 508 |
| 503 _trackStart: function() { | 509 _trackStart: function(event) { |
| 504 if (this._swipeAllowed()) { | 510 if (this._swipeAllowed()) { |
| 505 sharedPanel = this; | 511 sharedPanel = this; |
| 506 this.dragging = true; | 512 this._setDragging(true); |
| 507 | 513 |
| 508 if (this._isMainSelected()) { | 514 if (this._isMainSelected()) { |
| 509 this.dragging = this.peeking || this._isEdgeTouch(event); | 515 this._setDragging(this.peeking || this._isEdgeTouch(event)); |
| 510 } | 516 } |
| 511 | 517 |
| 512 if (this.dragging) { | 518 if (this.dragging) { |
| 513 this.width = this.$.drawer.offsetWidth; | 519 this.width = this.$.drawer.offsetWidth; |
| 514 this.transition = false; | 520 this.transition = false; |
| 515 } | 521 } |
| 516 } | 522 } |
| 517 }, | 523 }, |
| 518 | 524 |
| 519 _translateXForDeltaX: function(deltaX) { | 525 _translateXForDeltaX: function(deltaX) { |
| 520 var isMain = this._isMainSelected(); | 526 var isMain = this._isMainSelected(); |
| 521 | 527 |
| 522 if (this.rightDrawer) { | 528 if (this.rightDrawer) { |
| 523 return Math.max(0, isMain ? this.width + deltaX : deltaX); | 529 return Math.max(0, isMain ? this.width + deltaX : deltaX); |
| 524 } else { | 530 } else { |
| 525 return Math.min(0, isMain ? deltaX - this.width : deltaX); | 531 return Math.min(0, isMain ? deltaX - this.width : deltaX); |
| 526 } | 532 } |
| 527 }, | 533 }, |
| 528 | 534 |
| 529 _trackX: function(e) { | 535 _trackX: function(e) { |
| 530 if (this.dragging) { | 536 if (this.dragging) { |
| 531 var dx = e.detail.dx; | 537 var dx = e.detail.dx; |
| 532 | 538 |
| 533 if (this.peeking) { | 539 if (this.peeking) { |
| 534 if (Math.abs(dx) <= this.edgeSwipeSensitivity) { | 540 if (Math.abs(dx) <= this.edgeSwipeSensitivity) { |
| 535 // Ignore trackx until we move past the edge peek. | 541 // Ignore trackx until we move past the edge peek. |
| 536 return; | 542 return; |
| 537 } | 543 } |
| 538 this.peeking = false; | 544 this._setPeeking(false); |
| 539 } | 545 } |
| 540 | 546 |
| 541 this._moveDrawer(this._translateXForDeltaX(dx)); | 547 this._moveDrawer(this._translateXForDeltaX(dx)); |
| 542 } | 548 } |
| 543 }, | 549 }, |
| 544 | 550 |
| 545 _trackEnd: function(e) { | 551 _trackEnd: function(e) { |
| 546 if (this.dragging) { | 552 if (this.dragging) { |
| 547 var xDirection = e.detail.dx > 0; | 553 var xDirection = e.detail.dx > 0; |
| 548 | 554 |
| 549 this.dragging = false; | 555 this._setDragging(false); |
| 550 this.transition = true; | 556 this.transition = true; |
| 551 sharedPanel = null; | 557 sharedPanel = null; |
| 552 this._moveDrawer(null); | 558 this._moveDrawer(null); |
| 553 | 559 |
| 554 if (this.rightDrawer) { | 560 if (this.rightDrawer) { |
| 555 this[xDirection ? 'closeDrawer' : 'openDrawer'](); | 561 this[xDirection ? 'closeDrawer' : 'openDrawer'](); |
| 556 } else { | 562 } else { |
| 557 this[xDirection ? 'openDrawer' : 'closeDrawer'](); | 563 this[xDirection ? 'openDrawer' : 'closeDrawer'](); |
| 558 } | 564 } |
| 559 } | 565 } |
| (...skipping 16 matching lines...) Expand all Loading... |
| 576 } else { | 582 } else { |
| 577 s.webkitTransform = this._transformForTranslateX(translateX); | 583 s.webkitTransform = this._transformForTranslateX(translateX); |
| 578 } | 584 } |
| 579 } | 585 } |
| 580 | 586 |
| 581 }); | 587 }); |
| 582 | 588 |
| 583 }()); | 589 }()); |
| 584 | 590 |
| 585 </script> | 591 </script> |
| OLD | NEW |