Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1080)

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js

Issue 2089563002: [Polymer] update polymer (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: polymer update Created 4 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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 var keyEventTarget = /** @type {!EventTarget} */ (this.keyEventTarget);
422 this.listen(keyEventTarget, 'up', 'uiUpAction');
423 this.listen(keyEventTarget, 'down', 'uiDownAction');
428 }, 424 },
429 425
430 detached: function() { 426 detached: function() {
431 this.unlisten(this.target, 'up', 'uiUpAction'); 427 this.unlisten(this.keyEventTarget, 'up', 'uiUpAction');
432 this.unlisten(this.target, 'down', 'uiDownAction'); 428 this.unlisten(this.keyEventTarget, 'down', 'uiDownAction');
429 this.keyEventTarget = null;
433 }, 430 },
434 431
435 get shouldKeepAnimating () { 432 get shouldKeepAnimating () {
436 for (var index = 0; index < this.ripples.length; ++index) { 433 for (var index = 0; index < this.ripples.length; ++index) {
437 if (!this.ripples[index].isAnimationComplete) { 434 if (!this.ripples[index].isAnimationComplete) {
438 return true; 435 return true;
439 } 436 }
440 } 437 }
441 438
442 return false; 439 return false;
(...skipping 27 matching lines...) Expand all
470 downAction: function(event) { 467 downAction: function(event) {
471 if (this.holdDown && this.ripples.length > 0) { 468 if (this.holdDown && this.ripples.length > 0) {
472 return; 469 return;
473 } 470 }
474 471
475 var ripple = this.addRipple(); 472 var ripple = this.addRipple();
476 473
477 ripple.downAction(event); 474 ripple.downAction(event);
478 475
479 if (!this._animating) { 476 if (!this._animating) {
477 this._animating = true;
480 this.animate(); 478 this.animate();
481 } 479 }
482 }, 480 },
483 481
484 /** 482 /**
485 * Provokes a ripple up effect via a UI event, 483 * Provokes a ripple up effect via a UI event,
486 * respecting the `noink` property. 484 * respecting the `noink` property.
487 * @param {Event=} event 485 * @param {Event=} event
488 */ 486 */
489 uiUpAction: function(event) { 487 uiUpAction: function(event) {
490 if (!this.noink) { 488 if (!this.noink) {
491 this.upAction(event); 489 this.upAction(event);
492 } 490 }
493 }, 491 },
494 492
495 /** 493 /**
496 * Provokes a ripple up effect via a UI event, 494 * Provokes a ripple up effect via a UI event,
497 * *not* respecting the `noink` property. 495 * *not* respecting the `noink` property.
498 * @param {Event=} event 496 * @param {Event=} event
499 */ 497 */
500 upAction: function(event) { 498 upAction: function(event) {
501 if (this.holdDown) { 499 if (this.holdDown) {
502 return; 500 return;
503 } 501 }
504 502
505 this.ripples.forEach(function(ripple) { 503 this.ripples.forEach(function(ripple) {
506 ripple.upAction(event); 504 ripple.upAction(event);
507 }); 505 });
508 506
507 this._animating = true;
509 this.animate(); 508 this.animate();
510 }, 509 },
511 510
512 onAnimationComplete: function() { 511 onAnimationComplete: function() {
513 this._animating = false; 512 this._animating = false;
514 this.$.background.style.backgroundColor = null; 513 this.$.background.style.backgroundColor = null;
515 this.fire('transitionend'); 514 this.fire('transitionend');
516 }, 515 },
517 516
518 addRipple: function() { 517 addRipple: function() {
(...skipping 18 matching lines...) Expand all
537 this.ripples.splice(rippleIndex, 1); 536 this.ripples.splice(rippleIndex, 1);
538 537
539 ripple.remove(); 538 ripple.remove();
540 539
541 if (!this.ripples.length) { 540 if (!this.ripples.length) {
542 this._setAnimating(false); 541 this._setAnimating(false);
543 } 542 }
544 }, 543 },
545 544
546 animate: function() { 545 animate: function() {
546 if (!this._animating) {
547 return;
548 }
547 var index; 549 var index;
548 var ripple; 550 var ripple;
549 551
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
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 */
596 }); 605 });
597 })(); 606 })();
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698