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

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: Created 4 years, 6 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 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
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
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
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 })();
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698