third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js

   1 (function() {
   2     var Utility = {
   3       distance: function(x1, y1, x2, y2) {
   4         var xDelta = (x1 - x2);
   5         var yDelta = (y1 - y2);
   6
   7         return Math.sqrt(xDelta * xDelta + yDelta * yDelta);
   8       },
   9
  10       now: window.performance && window.performance.now ?
  11           window.performance.now.bind(window.performance) : Date.now
  12     };
  13
  14     /**
  15      * @param {HTMLElement} element
  16      * @constructor
  17      */
  18     function ElementMetrics(element) {
  19       this.element = element;
  20       this.width = this.boundingRect.width;
  21       this.height = this.boundingRect.height;
  22
  23       this.size = Math.max(this.width, this.height);
  24     }
  25
  26     ElementMetrics.prototype = {
  27       get boundingRect () {
  28         return this.element.getBoundingClientRect();
  29       },
  30
  31       furthestCornerDistanceFrom: function(x, y) {
  32         var topLeft = Utility.distance(x, y, 0, 0);
  33         var topRight = Utility.distance(x, y, this.width, 0);
  34         var bottomLeft = Utility.distance(x, y, 0, this.height);
  35         var bottomRight = Utility.distance(x, y, this.width, this.height);
  36
  37         return Math.max(topLeft, topRight, bottomLeft, bottomRight);
  38       }
  39     };
  40
  41     /**
  42      * @param {HTMLElement} element
  43      * @constructor
  44      */
  45     function Ripple(element) {
  46       this.element = element;
  47       this.color = window.getComputedStyle(element).color;
  48
  49       this.wave = document.createElement('div');
  50       this.waveContainer = document.createElement('div');
  51       this.wave.style.backgroundColor = this.color;
  52       this.wave.classList.add('wave');
  53       this.waveContainer.classList.add('wave-container');
  54       Polymer.dom(this.waveContainer).appendChild(this.wave);
  55
  56       this.resetInteractionState();
  57     }
  58
  59     Ripple.MAX_RADIUS = 300;
  60
  61     Ripple.prototype = {
  62       get recenters() {
  63         return this.element.recenters;
  64       },
  65
  66       get center() {
  67         return this.element.center;
  68       },
  69
  70       get mouseDownElapsed() {
  71         var elapsed;
  72
  73         if (!this.mouseDownStart) {
  74           return 0;
  75         }
  76
  77         elapsed = Utility.now() - this.mouseDownStart;
  78
  79         if (this.mouseUpStart) {
  80           elapsed -= this.mouseUpElapsed;
  81         }
  82
  83         return elapsed;
  84       },
  85
  86       get mouseUpElapsed() {
  87         return this.mouseUpStart ?
  88           Utility.now () - this.mouseUpStart : 0;
  89       },
  90
  91       get mouseDownElapsedSeconds() {
  92         return this.mouseDownElapsed / 1000;
  93       },
  94
  95       get mouseUpElapsedSeconds() {
  96         return this.mouseUpElapsed / 1000;
  97       },
  98
  99       get mouseInteractionSeconds() {
 100         return this.mouseDownElapsedSeconds + this.mouseUpElapsedSeconds;
 101       },
 102
 103       get initialOpacity() {
 104         return this.element.initialOpacity;
 105       },
 106
 107       get opacityDecayVelocity() {
 108         return this.element.opacityDecayVelocity;
 109       },
 110
 111       get radius() {
 112         var width2 = this.containerMetrics.width * this.containerMetrics.width;
 113         var height2 = this.containerMetrics.height * this.containerMetrics.height;
 114         var waveRadius = Math.min(
 115           Math.sqrt(width2 + height2),
 116           Ripple.MAX_RADIUS
 117         ) * 1.1 + 5;
 118
 119         var duration = 1.1 - 0.2 * (waveRadius / Ripple.MAX_RADIUS);
 120         var timeNow = this.mouseInteractionSeconds / duration;
 121         var size = waveRadius * (1 - Math.pow(80, -timeNow));
 122
 123         return Math.abs(size);
 124       },
 125
 126       get opacity() {
 127         if (!this.mouseUpStart) {
 128           return this.initialOpacity;
 129         }
 130
 131         return Math.max(
 132           0,
 133           this.initialOpacity - this.mouseUpElapsedSeconds * this.opacityDecayVelocity
 134         );
 135       },
 136
 137       get outerOpacity() {
 138         // Linear increase in background opacity, capped at the opacity
 139         // of the wavefront (waveOpacity).
 140         var outerOpacity = this.mouseUpElapsedSeconds * 0.3;
 141         var waveOpacity = this.opacity;
 142
 143         return Math.max(
 144           0,
 145           Math.min(outerOpacity, waveOpacity)
 146         );
 147       },
 148
 149       get isOpacityFullyDecayed() {
 150         return this.opacity < 0.01 &&
 151           this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
 152       },
 153
 154       get isRestingAtMaxRadius() {
 155         return this.opacity >= this.initialOpacity &&
 156           this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
 157       },
 158
 159       get isAnimationComplete() {
 160         return this.mouseUpStart ?
 161           this.isOpacityFullyDecayed : this.isRestingAtMaxRadius;
 162       },
 163
 164       get translationFraction() {
 165         return Math.min(
 166           1,
 167           this.radius / this.containerMetrics.size * 2 / Math.sqrt(2)
 168         );
 169       },
 170
 171       get xNow() {
 172         if (this.xEnd) {
 173           return this.xStart + this.translationFraction * (this.xEnd - this.xStart);
 174         }
 175
 176         return this.xStart;
 177       },
 178
 179       get yNow() {
 180         if (this.yEnd) {
 181           return this.yStart + this.translationFraction * (this.yEnd - this.yStart);
 182         }
 183
 184         return this.yStart;
 185       },
 186
 187       get isMouseDown() {
 188         return this.mouseDownStart && !this.mouseUpStart;
 189       },
 190
 191       resetInteractionState: function() {
 192         this.maxRadius = 0;
 193         this.mouseDownStart = 0;
 194         this.mouseUpStart = 0;
 195
 196         this.xStart = 0;
 197         this.yStart = 0;
 198         this.xEnd = 0;
 199         this.yEnd = 0;
 200         this.slideDistance = 0;
 201
 202         this.containerMetrics = new ElementMetrics(this.element);
 203       },
 204
 205       draw: function() {
 206         var scale;
 207         var translateString;
 208         var dx;
 209         var dy;
 210
 211         this.wave.style.opacity = this.opacity;
 212
 213         scale = this.radius / (this.containerMetrics.size / 2);
 214         dx = this.xNow - (this.containerMetrics.width / 2);
 215         dy = this.yNow - (this.containerMetrics.height / 2);
 216
 217
 218         // 2d transform for safari because of border-radius and overflow:hidden clipping bug.
 219         // https://bugs.webkit.org/show_bug.cgi?id=98538
 220         this.waveContainer.style.webkitTransform = 'translate(' + dx + 'px, ' + dy + 'px)';
 221         this.waveContainer.style.transform = 'translate3d(' + dx + 'px, ' + dy + 'px, 0)';
 222         this.wave.style.webkitTransform = 'scale(' + scale + ',' + scale + ')';
 223         this.wave.style.transform = 'scale3d(' + scale + ',' + scale + ',1)';
 224       },
 225
 226       /** @param {Event=} event */
 227       downAction: function(event) {
 228         var xCenter = this.containerMetrics.width / 2;
 229         var yCenter = this.containerMetrics.height / 2;
 230
 231         this.resetInteractionState();
 232         this.mouseDownStart = Utility.now();
 233
 234         if (this.center) {
 235           this.xStart = xCenter;
 236           this.yStart = yCenter;
 237           this.slideDistance = Utility.distance(
 238             this.xStart, this.yStart, this.xEnd, this.yEnd
 239           );
 240         } else {
 241           this.xStart = event ?
 242               event.detail.x - this.containerMetrics.boundingRect.left :
 243               this.containerMetrics.width / 2;
 244           this.yStart = event ?
 245               event.detail.y - this.containerMetrics.boundingRect.top :
 246               this.containerMetrics.height / 2;
 247         }
 248
 249         if (this.recenters) {
 250           this.xEnd = xCenter;
 251           this.yEnd = yCenter;
 252           this.slideDistance = Utility.distance(
 253             this.xStart, this.yStart, this.xEnd, this.yEnd
 254           );
 255         }
 256
 257         this.maxRadius = this.containerMetrics.furthestCornerDistanceFrom(
 258           this.xStart,
 259           this.yStart
 260         );
 261
 262         this.waveContainer.style.top =
 263           (this.containerMetrics.height - this.containerMetrics.size) / 2 + 'px';
 264         this.waveContainer.style.left =
 265           (this.containerMetrics.width - this.containerMetrics.size) / 2 + 'px';
 266
 267         this.waveContainer.style.width = this.containerMetrics.size + 'px';
 268         this.waveContainer.style.height = this.containerMetrics.size + 'px';
 269       },
 270
 271       /** @param {Event=} event */
 272       upAction: function(event) {
 273         if (!this.isMouseDown) {
 274           return;
 275         }
 276
 277         this.mouseUpStart = Utility.now();
 278       },
 279
 280       remove: function() {
 281         Polymer.dom(this.waveContainer.parentNode).removeChild(
 282           this.waveContainer
 283         );
 284       }
 285     };
 286
 287     Polymer({
 288       is: 'paper-ripple',
 289
 290       behaviors: [
 291         Polymer.IronA11yKeysBehavior
 292       ],
 293
 294       properties: {
 295         /**
 296          * The initial opacity set on the wave.
 297          *
 298          * @attribute initialOpacity
 299          * @type number
 300          * @default 0.25
 301          */
 302         initialOpacity: {
 303           type: Number,
 304           value: 0.25
 305         },
 306
 307         /**
 308          * How fast (opacity per second) the wave fades out.
 309          *
 310          * @attribute opacityDecayVelocity
 311          * @type number
 312          * @default 0.8
 313          */
 314         opacityDecayVelocity: {
 315           type: Number,
 316           value: 0.8
 317         },
 318
 319         /**
 320          * If true, ripples will exhibit a gravitational pull towards
 321          * the center of their container as they fade away.
 322          *
 323          * @attribute recenters
 324          * @type boolean
 325          * @default false
 326          */
 327         recenters: {
 328           type: Boolean,
 329           value: false
 330         },
 331
 332         /**
 333          * If true, ripples will center inside its container
 334          *
 335          * @attribute recenters
 336          * @type boolean
 337          * @default false
 338          */
 339         center: {
 340           type: Boolean,
 341           value: false
 342         },
 343
 344         /**
 345          * A list of the visual ripples.
 346          *
 347          * @attribute ripples
 348          * @type Array
 349          * @default []
 350          */
 351         ripples: {
 352           type: Array,
 353           value: function() {
 354             return [];
 355           }
 356         },
 357
 358         /**
 359          * True when there are visible ripples animating within the
 360          * element.
 361          */
 362         animating: {
 363           type: Boolean,
 364           readOnly: true,
 365           reflectToAttribute: true,
 366           value: false
 367         },
 368
 369         /**
 370          * If true, the ripple will remain in the "down" state until `holdDown`
 371          * is set to false again.
 372          */
 373         holdDown: {
 374           type: Boolean,
 375           value: false,
 376           observer: '_holdDownChanged'
 377         },
 378
 379         _animating: {
 380           type: Boolean
 381         },
 382
 383         _boundAnimate: {
 384           type: Function,
 385           value: function() {
 386             return this.animate.bind(this);
 387           }
 388         }
 389       },
 390
 391       get target () {
 392         var ownerRoot = Polymer.dom(this).getOwnerRoot();
 393         var target;
 394
 395         if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
 396           target = ownerRoot.host;
 397         } else {
 398           target = this.parentNode;
 399         }
 400
 401         return target;
 402       },
 403
 404       keyBindings: {
 405         'enter:keydown': '_onEnterKeydown',
 406         'space:keydown': '_onSpaceKeydown',
 407         'space:keyup': '_onSpaceKeyup'
 408       },
 409
 410       attached: function() {
 411         this.listen(this.target, 'up', 'upAction');
 412         this.listen(this.target, 'down', 'downAction');
 413
 414         if (!this.target.hasAttribute('noink')) {
 415           this.keyEventTarget = this.target;
 416         }
 417       },
 418
 419       get shouldKeepAnimating () {
 420         for (var index = 0; index < this.ripples.length; ++index) {
 421           if (!this.ripples[index].isAnimationComplete) {
 422             return true;
 423           }
 424         }
 425
 426         return false;
 427       },
 428
 429       simulatedRipple: function() {
 430         this.downAction(null);
 431
 432         // Please see polymer/polymer#1305
 433         this.async(function() {
 434           this.upAction();
 435         }, 1);
 436       },
 437
 438       /** @param {Event=} event */
 439       downAction: function(event) {
 440         if (this.holdDown && this.ripples.length > 0) {
 441           return;
 442         }
 443
 444         var ripple = this.addRipple();
 445
 446         ripple.downAction(event);
 447
 448         if (!this._animating) {
 449           this.animate();
 450         }
 451       },
 452
 453       /** @param {Event=} event */
 454       upAction: function(event) {
 455         if (this.holdDown) {
 456           return;
 457         }
 458
 459         this.ripples.forEach(function(ripple) {
 460           ripple.upAction(event);
 461         });
 462
 463         this.animate();
 464       },
 465
 466       onAnimationComplete: function() {
 467         this._animating = false;
 468         this.$.background.style.backgroundColor = null;
 469         this.fire('transitionend');
 470       },
 471
 472       addRipple: function() {
 473         var ripple = new Ripple(this);
 474
 475         Polymer.dom(this.$.waves).appendChild(ripple.waveContainer);
 476         this.$.background.style.backgroundColor = ripple.color;
 477         this.ripples.push(ripple);
 478
 479         this._setAnimating(true);
 480
 481         return ripple;
 482       },
 483
 484       removeRipple: function(ripple) {
 485         var rippleIndex = this.ripples.indexOf(ripple);
 486
 487         if (rippleIndex < 0) {
 488           return;
 489         }
 490
 491         this.ripples.splice(rippleIndex, 1);
 492
 493         ripple.remove();
 494
 495         if (!this.ripples.length) {
 496           this._setAnimating(false);
 497         }
 498       },
 499
 500       animate: function() {
 501         var index;
 502         var ripple;
 503
 504         this._animating = true;
 505
 506         for (index = 0; index < this.ripples.length; ++index) {
 507           ripple = this.ripples[index];
 508
 509           ripple.draw();
 510
 511           this.$.background.style.opacity = ripple.outerOpacity;
 512
 513           if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) {
 514             this.removeRipple(ripple);
 515           }
 516         }
 517
 518         if (!this.shouldKeepAnimating && this.ripples.length === 0) {
 519           this.onAnimationComplete();
 520         } else {
 521           window.requestAnimationFrame(this._boundAnimate);
 522         }
 523       },
 524
 525       _onEnterKeydown: function() {
 526         this.downAction();
 527         this.async(this.upAction, 1);
 528       },
 529
 530       _onSpaceKeydown: function() {
 531         this.downAction();
 532       },
 533
 534       _onSpaceKeyup: function() {
 535         this.upAction();
 536       },
 537
 538       _holdDownChanged: function(holdDown) {
 539         if (holdDown) {
 540           this.downAction();
 541         } else {
 542           this.upAction();
 543         }
 544       }
 545     });
 546   })();