| OLD | NEW |
| 1 | 1 |
| 2 | 2 |
| 3 (function() { | 3 (function() { |
| 4 | 4 |
| 5 'use strict'; | 5 'use strict'; |
| 6 | 6 |
| 7 // this would be the only `paper-drawer-panel` in | 7 // this would be the only `paper-drawer-panel` in |
| 8 // the whole app that can be in `dragging` state | 8 // the whole app that can be in `dragging` state |
| 9 var sharedPanel = null; | 9 var sharedPanel = null; |
| 10 | 10 |
| (...skipping 13 matching lines...) Expand all Loading... |
| 24 is: 'paper-drawer-panel', | 24 is: 'paper-drawer-panel', |
| 25 | 25 |
| 26 /** | 26 /** |
| 27 * Fired when the narrow layout changes. | 27 * Fired when the narrow layout changes. |
| 28 * | 28 * |
| 29 * @event paper-responsive-change {{narrow: boolean}} detail - | 29 * @event paper-responsive-change {{narrow: boolean}} detail - |
| 30 * narrow: true if the panel is in narrow layout. | 30 * narrow: true if the panel is in narrow layout. |
| 31 */ | 31 */ |
| 32 | 32 |
| 33 /** | 33 /** |
| 34 * Fired when the selected panel changes. | 34 * Fired when the a panel is selected. |
| 35 * | 35 * |
| 36 * Listening for this event is an alternative to observing changes in the
`selected` attribute. | 36 * Listening for this event is an alternative to observing changes in the
`selected` attribute. |
| 37 * This event is fired both when a panel is selected and deselected. | 37 * This event is fired both when a panel is selected. |
| 38 * The `isSelected` detail property contains the selection state. | |
| 39 * | 38 * |
| 40 * @event paper-select {{isSelected: boolean, item: Object}} detail - | 39 * @event iron-select {{item: Object}} detail - |
| 41 * isSelected: True for selection and false for deselection. | |
| 42 * item: The panel that the event refers to. | 40 * item: The panel that the event refers to. |
| 43 */ | 41 */ |
| 44 | 42 |
| 43 /** |
| 44 * Fired when a panel is deselected. |
| 45 * |
| 46 * Listening for this event is an alternative to observing changes in the
`selected` attribute. |
| 47 * This event is fired both when a panel is deselected. |
| 48 * |
| 49 * @event iron-deselect {{item: Object}} detail - |
| 50 * item: The panel that the event refers to. |
| 51 */ |
| 45 properties: { | 52 properties: { |
| 46 | 53 |
| 47 /** | 54 /** |
| 48 * The panel to be selected when `paper-drawer-panel` changes to narrow | 55 * The panel to be selected when `paper-drawer-panel` changes to narrow |
| 49 * layout. | 56 * layout. |
| 50 */ | 57 */ |
| 51 defaultSelected: { | 58 defaultSelected: { |
| 52 type: String, | 59 type: String, |
| 53 value: 'main' | 60 value: 'main' |
| 54 }, | 61 }, |
| (...skipping 178 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 233 closeDrawer: function() { | 240 closeDrawer: function() { |
| 234 this.selected = 'main'; | 241 this.selected = 'main'; |
| 235 }, | 242 }, |
| 236 | 243 |
| 237 ready: function() { | 244 ready: function() { |
| 238 // Avoid transition at the beginning e.g. page loads and enable | 245 // Avoid transition at the beginning e.g. page loads and enable |
| 239 // transitions only after the element is rendered and ready. | 246 // transitions only after the element is rendered and ready. |
| 240 this.transition = true; | 247 this.transition = true; |
| 241 }, | 248 }, |
| 242 | 249 |
| 243 _computeIronSelectorClass: function(narrow, transition, dragging, rightDra
wer) { | 250 _computeIronSelectorClass: function(narrow, transition, dragging, rightDra
wer, peeking) { |
| 244 return classNames({ | 251 return classNames({ |
| 245 dragging: dragging, | 252 dragging: dragging, |
| 246 'narrow-layout': narrow, | 253 'narrow-layout': narrow, |
| 247 'right-drawer': rightDrawer, | 254 'right-drawer': rightDrawer, |
| 248 'left-drawer': !rightDrawer, | 255 'left-drawer': !rightDrawer, |
| 249 transition: transition | 256 transition: transition, |
| 257 peeking: peeking |
| 250 }); | 258 }); |
| 251 }, | 259 }, |
| 252 | 260 |
| 253 _computeDrawerStyle: function(drawerWidth) { | 261 _computeDrawerStyle: function(drawerWidth) { |
| 254 return 'width:' + drawerWidth + ';'; | 262 return 'width:' + drawerWidth + ';'; |
| 255 }, | 263 }, |
| 256 | 264 |
| 257 _computeMainStyle: function(narrow, rightDrawer, drawerWidth) { | 265 _computeMainStyle: function(narrow, rightDrawer, drawerWidth) { |
| 258 var style = ''; | 266 var style = ''; |
| 259 | 267 |
| 260 style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';'; | 268 style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';'; |
| 261 | 269 |
| 262 if (rightDrawer) { | 270 if (rightDrawer) { |
| 263 style += 'right:' + (narrow ? '' : drawerWidth) + ';'; | 271 style += 'right:' + (narrow ? '' : drawerWidth) + ';'; |
| 264 } else { | |
| 265 style += 'right:;'; | |
| 266 } | 272 } |
| 267 | 273 |
| 268 return style; | 274 return style; |
| 269 }, | 275 }, |
| 270 | 276 |
| 271 _computeMediaQuery: function(forceNarrow, responsiveWidth) { | 277 _computeMediaQuery: function(forceNarrow, responsiveWidth) { |
| 272 return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')'; | 278 return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')'; |
| 273 }, | 279 }, |
| 274 | 280 |
| 275 _computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) { | 281 _computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) { |
| 276 return !narrow || disableEdgeSwipe; | 282 return !narrow || disableEdgeSwipe; |
| 277 }, | 283 }, |
| 278 | 284 |
| 279 _onTrack: function(e) { | 285 _onTrack: function(event) { |
| 280 if (sharedPanel && this !== sharedPanel) { | 286 if (sharedPanel && this !== sharedPanel) { |
| 281 return; | 287 return; |
| 282 } | 288 } |
| 283 switch (e.detail.state) { | 289 switch (event.detail.state) { |
| 284 case 'start': | 290 case 'start': |
| 285 this._trackStart(e); | 291 this._trackStart(event); |
| 286 break; | 292 break; |
| 287 case 'track': | 293 case 'track': |
| 288 this._trackX(e); | 294 this._trackX(event); |
| 289 break; | 295 break; |
| 290 case 'end': | 296 case 'end': |
| 291 this._trackEnd(e); | 297 this._trackEnd(event); |
| 292 break; | 298 break; |
| 293 } | 299 } |
| 294 | 300 |
| 295 }, | 301 }, |
| 296 | 302 |
| 297 _responsiveChange: function(narrow) { | 303 _responsiveChange: function(narrow) { |
| 298 this._setNarrow(narrow); | 304 this._setNarrow(narrow); |
| 299 | 305 |
| 300 if (this.narrow) { | 306 if (this.narrow) { |
| 301 this.selected = this.defaultSelected; | 307 this.selected = this.defaultSelected; |
| 302 } | 308 } |
| 303 | 309 |
| 304 this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); | 310 this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); |
| 305 this.fire('paper-responsive-change', {narrow: this.narrow}); | 311 this.fire('paper-responsive-change', {narrow: this.narrow}); |
| 306 }, | 312 }, |
| 307 | 313 |
| 308 _onQueryMatchesChanged: function(e) { | 314 _onQueryMatchesChanged: function(event) { |
| 309 this._responsiveChange(e.detail.value); | 315 this._responsiveChange(event.detail.value); |
| 310 }, | 316 }, |
| 311 | 317 |
| 312 _forceNarrowChanged: function() { | 318 _forceNarrowChanged: function() { |
| 313 // set the narrow mode only if we reached the `responsiveWidth` | 319 // set the narrow mode only if we reached the `responsiveWidth` |
| 314 this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches); | 320 this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches); |
| 315 }, | 321 }, |
| 316 | 322 |
| 317 _swipeAllowed: function() { | 323 _swipeAllowed: function() { |
| 318 return this.narrow && !this.disableSwipe; | 324 return this.narrow && !this.disableSwipe; |
| 319 }, | 325 }, |
| 320 | 326 |
| 321 _isMainSelected: function() { | 327 _isMainSelected: function() { |
| 322 return this.selected === 'main'; | 328 return this.selected === 'main'; |
| 323 }, | 329 }, |
| 324 | 330 |
| 325 _startEdgePeek: function() { | 331 _startEdgePeek: function() { |
| 326 this.width = this.$.drawer.offsetWidth; | 332 this.width = this.$.drawer.offsetWidth; |
| 327 this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ? | 333 this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ? |
| 328 -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity)); | 334 -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity)); |
| 329 this._setPeeking(true); | 335 this._setPeeking(true); |
| 330 }, | 336 }, |
| 331 | 337 |
| 332 _stopEdgePeek: function() { | 338 _stopEdgePeek: function() { |
| 333 if (this.peeking) { | 339 if (this.peeking) { |
| 334 this._setPeeking(false); | 340 this._setPeeking(false); |
| 335 this._moveDrawer(null); | 341 this._moveDrawer(null); |
| 336 } | 342 } |
| 337 }, | 343 }, |
| 338 | 344 |
| 339 _downHandler: function(e) { | 345 _downHandler: function(event) { |
| 340 if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) &&
!sharedPanel) { | 346 if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event)
&& !sharedPanel) { |
| 341 this._startEdgePeek(); | 347 this._startEdgePeek(); |
| 348 // cancel selection |
| 349 event.preventDefault(); |
| 342 // grab this panel | 350 // grab this panel |
| 343 sharedPanel = this; | 351 sharedPanel = this; |
| 344 } | 352 } |
| 345 }, | 353 }, |
| 346 | 354 |
| 347 _upHandler: function() { | 355 _upHandler: function() { |
| 348 this._stopEdgePeek(); | 356 this._stopEdgePeek(); |
| 349 // release the panel | 357 // release the panel |
| 350 sharedPanel = null; | 358 sharedPanel = null; |
| 351 }, | 359 }, |
| 352 | 360 |
| 353 _onTap: function(e) { | 361 _onTap: function(event) { |
| 354 var targetElement = Polymer.dom(e).localTarget; | 362 var targetElement = Polymer.dom(event).localTarget; |
| 355 var isTargetToggleElement = targetElement && | 363 var isTargetToggleElement = targetElement && |
| 356 this.drawerToggleAttribute && | 364 this.drawerToggleAttribute && |
| 357 targetElement.hasAttribute(this.drawerToggleAttribute); | 365 targetElement.hasAttribute(this.drawerToggleAttribute); |
| 358 | 366 |
| 359 if (isTargetToggleElement) { | 367 if (isTargetToggleElement) { |
| 360 this.togglePanel(); | 368 this.togglePanel(); |
| 361 } | 369 } |
| 362 }, | 370 }, |
| 363 | 371 |
| 364 _isEdgeTouch: function(e) { | 372 _isEdgeTouch: function(event) { |
| 365 var x = e.detail.x; | 373 var x = event.detail.x; |
| 366 | 374 |
| 367 return !this.disableEdgeSwipe && this._swipeAllowed() && | 375 return !this.disableEdgeSwipe && this._swipeAllowed() && |
| 368 (this.rightDrawer ? | 376 (this.rightDrawer ? |
| 369 x >= this.offsetWidth - this.edgeSwipeSensitivity : | 377 x >= this.offsetWidth - this.edgeSwipeSensitivity : |
| 370 x <= this.edgeSwipeSensitivity); | 378 x <= this.edgeSwipeSensitivity); |
| 371 }, | 379 }, |
| 372 | 380 |
| 373 _trackStart: function(event) { | 381 _trackStart: function(event) { |
| 374 if (this._swipeAllowed()) { | 382 if (this._swipeAllowed()) { |
| 375 sharedPanel = this; | 383 sharedPanel = this; |
| (...skipping 13 matching lines...) Expand all Loading... |
| 389 _translateXForDeltaX: function(deltaX) { | 397 _translateXForDeltaX: function(deltaX) { |
| 390 var isMain = this._isMainSelected(); | 398 var isMain = this._isMainSelected(); |
| 391 | 399 |
| 392 if (this.rightDrawer) { | 400 if (this.rightDrawer) { |
| 393 return Math.max(0, isMain ? this.width + deltaX : deltaX); | 401 return Math.max(0, isMain ? this.width + deltaX : deltaX); |
| 394 } else { | 402 } else { |
| 395 return Math.min(0, isMain ? deltaX - this.width : deltaX); | 403 return Math.min(0, isMain ? deltaX - this.width : deltaX); |
| 396 } | 404 } |
| 397 }, | 405 }, |
| 398 | 406 |
| 399 _trackX: function(e) { | 407 _trackX: function(event) { |
| 400 if (this.dragging) { | 408 if (this.dragging) { |
| 401 var dx = e.detail.dx; | 409 var dx = event.detail.dx; |
| 402 | 410 |
| 403 if (this.peeking) { | 411 if (this.peeking) { |
| 404 if (Math.abs(dx) <= this.edgeSwipeSensitivity) { | 412 if (Math.abs(dx) <= this.edgeSwipeSensitivity) { |
| 405 // Ignore trackx until we move past the edge peek. | 413 // Ignore trackx until we move past the edge peek. |
| 406 return; | 414 return; |
| 407 } | 415 } |
| 408 this._setPeeking(false); | 416 this._setPeeking(false); |
| 409 } | 417 } |
| 410 | 418 |
| 411 this._moveDrawer(this._translateXForDeltaX(dx)); | 419 this._moveDrawer(this._translateXForDeltaX(dx)); |
| 412 } | 420 } |
| 413 }, | 421 }, |
| 414 | 422 |
| 415 _trackEnd: function(e) { | 423 _trackEnd: function(event) { |
| 416 if (this.dragging) { | 424 if (this.dragging) { |
| 417 var xDirection = e.detail.dx > 0; | 425 var xDirection = event.detail.dx > 0; |
| 418 | 426 |
| 419 this._setDragging(false); | 427 this._setDragging(false); |
| 420 this.transition = true; | 428 this.transition = true; |
| 421 sharedPanel = null; | 429 sharedPanel = null; |
| 422 this._moveDrawer(null); | 430 this._moveDrawer(null); |
| 423 | 431 |
| 424 if (this.rightDrawer) { | 432 if (this.rightDrawer) { |
| 425 this[xDirection ? 'closeDrawer' : 'openDrawer'](); | 433 this[xDirection ? 'closeDrawer' : 'openDrawer'](); |
| 426 } else { | 434 } else { |
| 427 this[xDirection ? 'openDrawer' : 'closeDrawer'](); | 435 this[xDirection ? 'openDrawer' : 'closeDrawer'](); |
| 428 } | 436 } |
| 429 } | 437 } |
| 430 }, | 438 }, |
| 431 | 439 |
| 432 _transformForTranslateX: function(translateX) { | 440 _transformForTranslateX: function(translateX) { |
| 433 if (translateX === null) { | 441 if (translateX === null) { |
| 434 return ''; | 442 return ''; |
| 435 } | 443 } |
| 436 | 444 |
| 437 return this.hasWillChange ? 'translateX(' + translateX + 'px)' : | 445 return this.hasWillChange ? 'translateX(' + translateX + 'px)' : |
| 438 'translate3d(' + translateX + 'px, 0, 0)'; | 446 'translate3d(' + translateX + 'px, 0, 0)'; |
| 439 }, | 447 }, |
| 440 | 448 |
| 441 _moveDrawer: function(translateX) { | 449 _moveDrawer: function(translateX) { |
| 442 var s = this.$.drawer.style; | 450 this.transform(this._transformForTranslateX(translateX), this.$.drawer); |
| 443 | |
| 444 if (this.hasTransform) { | |
| 445 s.transform = this._transformForTranslateX(translateX); | |
| 446 } else { | |
| 447 s.webkitTransform = this._transformForTranslateX(translateX); | |
| 448 } | |
| 449 } | 451 } |
| 450 | 452 |
| 451 }); | 453 }); |
| 452 | 454 |
| 453 }()); | 455 }()); |
| 454 | 456 |
| OLD | NEW |