| OLD | NEW |
| 1 (function() { | 1 (function() { |
| 2 var Utility = { | 2 var Utility = { |
| 3 distance: function(x1, y1, x2, y2) { | 3 distance: function(x1, y1, x2, y2) { |
| 4 var xDelta = (x1 - x2); | 4 var xDelta = (x1 - x2); |
| 5 var yDelta = (y1 - y2); | 5 var yDelta = (y1 - y2); |
| 6 | 6 |
| 7 return Math.sqrt(xDelta * xDelta + yDelta * yDelta); | 7 return Math.sqrt(xDelta * xDelta + yDelta * yDelta); |
| 8 }, | 8 }, |
| 9 | 9 |
| 10 now: window.performance && window.performance.now ? | 10 now: window.performance && window.performance.now ? |
| (...skipping 382 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 393 | 393 |
| 394 _boundAnimate: { | 394 _boundAnimate: { |
| 395 type: Function, | 395 type: Function, |
| 396 value: function() { | 396 value: function() { |
| 397 return this.animate.bind(this); | 397 return this.animate.bind(this); |
| 398 } | 398 } |
| 399 } | 399 } |
| 400 }, | 400 }, |
| 401 | 401 |
| 402 get target () { | 402 get target () { |
| 403 return this.keyEventTarget; | 403 var ownerRoot = Polymer.dom(this).getOwnerRoot(); |
| 404 var target; |
| 405 |
| 406 if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE |
| 407 target = ownerRoot.host; |
| 408 } else { |
| 409 target = this.parentNode; |
| 410 } |
| 411 |
| 412 return target; |
| 404 }, | 413 }, |
| 405 | 414 |
| 406 keyBindings: { | 415 keyBindings: { |
| 407 'enter:keydown': '_onEnterKeydown', | 416 'enter:keydown': '_onEnterKeydown', |
| 408 'space:keydown': '_onSpaceKeydown', | 417 'space:keydown': '_onSpaceKeydown', |
| 409 'space:keyup': '_onSpaceKeyup' | 418 'space:keyup': '_onSpaceKeyup' |
| 410 }, | 419 }, |
| 411 | 420 |
| 412 attached: function() { | 421 attached: function() { |
| 413 // Set up a11yKeysBehavior to listen to key events on the target, | 422 // Set up a11yKeysBehavior to listen to key events on the target, |
| 414 // so that space and enter activate the ripple even if the target doesn'
t | 423 // so that space and enter activate the ripple even if the target doesn'
t |
| 415 // handle key events. The key handlers deal with `noink` themselves. | 424 // handle key events. The key handlers deal with `noink` themselves. |
| 416 if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE | 425 this.keyEventTarget = this.target; |
| 417 this.keyEventTarget = Polymer.dom(this).getOwnerRoot().host; | 426 this.listen(this.target, 'up', 'uiUpAction'); |
| 418 } else { | 427 this.listen(this.target, 'down', 'uiDownAction'); |
| 419 this.keyEventTarget = this.parentNode; | |
| 420 } | |
| 421 var keyEventTarget = /** @type {!EventTarget} */ (this.keyEventTarget); | |
| 422 this.listen(keyEventTarget, 'up', 'uiUpAction'); | |
| 423 this.listen(keyEventTarget, 'down', 'uiDownAction'); | |
| 424 }, | 428 }, |
| 425 | 429 |
| 426 detached: function() { | 430 detached: function() { |
| 427 this.unlisten(this.keyEventTarget, 'up', 'uiUpAction'); | 431 this.unlisten(this.target, 'up', 'uiUpAction'); |
| 428 this.unlisten(this.keyEventTarget, 'down', 'uiDownAction'); | 432 this.unlisten(this.target, 'down', 'uiDownAction'); |
| 429 this.keyEventTarget = null; | |
| 430 }, | 433 }, |
| 431 | 434 |
| 432 get shouldKeepAnimating () { | 435 get shouldKeepAnimating () { |
| 433 for (var index = 0; index < this.ripples.length; ++index) { | 436 for (var index = 0; index < this.ripples.length; ++index) { |
| 434 if (!this.ripples[index].isAnimationComplete) { | 437 if (!this.ripples[index].isAnimationComplete) { |
| 435 return true; | 438 return true; |
| 436 } | 439 } |
| 437 } | 440 } |
| 438 | 441 |
| 439 return false; | 442 return false; |
| (...skipping 27 matching lines...) Expand all Loading... |
| 467 downAction: function(event) { | 470 downAction: function(event) { |
| 468 if (this.holdDown && this.ripples.length > 0) { | 471 if (this.holdDown && this.ripples.length > 0) { |
| 469 return; | 472 return; |
| 470 } | 473 } |
| 471 | 474 |
| 472 var ripple = this.addRipple(); | 475 var ripple = this.addRipple(); |
| 473 | 476 |
| 474 ripple.downAction(event); | 477 ripple.downAction(event); |
| 475 | 478 |
| 476 if (!this._animating) { | 479 if (!this._animating) { |
| 477 this._animating = true; | |
| 478 this.animate(); | 480 this.animate(); |
| 479 } | 481 } |
| 480 }, | 482 }, |
| 481 | 483 |
| 482 /** | 484 /** |
| 483 * Provokes a ripple up effect via a UI event, | 485 * Provokes a ripple up effect via a UI event, |
| 484 * respecting the `noink` property. | 486 * respecting the `noink` property. |
| 485 * @param {Event=} event | 487 * @param {Event=} event |
| 486 */ | 488 */ |
| 487 uiUpAction: function(event) { | 489 uiUpAction: function(event) { |
| 488 if (!this.noink) { | 490 if (!this.noink) { |
| 489 this.upAction(event); | 491 this.upAction(event); |
| 490 } | 492 } |
| 491 }, | 493 }, |
| 492 | 494 |
| 493 /** | 495 /** |
| 494 * Provokes a ripple up effect via a UI event, | 496 * Provokes a ripple up effect via a UI event, |
| 495 * *not* respecting the `noink` property. | 497 * *not* respecting the `noink` property. |
| 496 * @param {Event=} event | 498 * @param {Event=} event |
| 497 */ | 499 */ |
| 498 upAction: function(event) { | 500 upAction: function(event) { |
| 499 if (this.holdDown) { | 501 if (this.holdDown) { |
| 500 return; | 502 return; |
| 501 } | 503 } |
| 502 | 504 |
| 503 this.ripples.forEach(function(ripple) { | 505 this.ripples.forEach(function(ripple) { |
| 504 ripple.upAction(event); | 506 ripple.upAction(event); |
| 505 }); | 507 }); |
| 506 | 508 |
| 507 this._animating = true; | |
| 508 this.animate(); | 509 this.animate(); |
| 509 }, | 510 }, |
| 510 | 511 |
| 511 onAnimationComplete: function() { | 512 onAnimationComplete: function() { |
| 512 this._animating = false; | 513 this._animating = false; |
| 513 this.$.background.style.backgroundColor = null; | 514 this.$.background.style.backgroundColor = null; |
| 514 this.fire('transitionend'); | 515 this.fire('transitionend'); |
| 515 }, | 516 }, |
| 516 | 517 |
| 517 addRipple: function() { | 518 addRipple: function() { |
| (...skipping 18 matching lines...) Expand all Loading... |
| 536 this.ripples.splice(rippleIndex, 1); | 537 this.ripples.splice(rippleIndex, 1); |
| 537 | 538 |
| 538 ripple.remove(); | 539 ripple.remove(); |
| 539 | 540 |
| 540 if (!this.ripples.length) { | 541 if (!this.ripples.length) { |
| 541 this._setAnimating(false); | 542 this._setAnimating(false); |
| 542 } | 543 } |
| 543 }, | 544 }, |
| 544 | 545 |
| 545 animate: function() { | 546 animate: function() { |
| 546 if (!this._animating) { | |
| 547 return; | |
| 548 } | |
| 549 var index; | 547 var index; |
| 550 var ripple; | 548 var ripple; |
| 551 | 549 |
| 550 this._animating = true; |
| 551 |
| 552 for (index = 0; index < this.ripples.length; ++index) { | 552 for (index = 0; index < this.ripples.length; ++index) { |
| 553 ripple = this.ripples[index]; | 553 ripple = this.ripples[index]; |
| 554 | 554 |
| 555 ripple.draw(); | 555 ripple.draw(); |
| 556 | 556 |
| 557 this.$.background.style.opacity = ripple.outerOpacity; | 557 this.$.background.style.opacity = ripple.outerOpacity; |
| 558 | 558 |
| 559 if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) { | 559 if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) { |
| 560 this.removeRipple(ripple); | 560 this.removeRipple(ripple); |
| 561 } | 561 } |
| (...skipping 24 matching lines...) Expand all Loading... |
| 586 _holdDownChanged: function(newVal, oldVal) { | 586 _holdDownChanged: function(newVal, oldVal) { |
| 587 if (oldVal === undefined) { | 587 if (oldVal === undefined) { |
| 588 return; | 588 return; |
| 589 } | 589 } |
| 590 if (newVal) { | 590 if (newVal) { |
| 591 this.downAction(); | 591 this.downAction(); |
| 592 } else { | 592 } else { |
| 593 this.upAction(); | 593 this.upAction(); |
| 594 } | 594 } |
| 595 } | 595 } |
| 596 | |
| 597 /** | |
| 598 Fired when the animation finishes. | |
| 599 This is useful if you want to wait until | |
| 600 the ripple animation finishes to perform some action. | |
| 601 | |
| 602 @event transitionend | |
| 603 @param {{node: Object}} detail Contains the animated node. | |
| 604 */ | |
| 605 }); | 596 }); |
| 606 })(); | 597 })(); |
| OLD | NEW |