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