| OLD | NEW |
| 1 | 1 |
| 2 (function() { | 2 (function() { |
| 3 var Utility = { | 3 var Utility = { |
| 4 cssColorWithAlpha: function(cssColor, alpha) { | 4 cssColorWithAlpha: function(cssColor, alpha) { |
| 5 var parts = cssColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); | 5 var parts = cssColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); |
| 6 | 6 |
| 7 if (typeof alpha == 'undefined') { | 7 if (typeof alpha == 'undefined') { |
| 8 alpha = 1; | 8 alpha = 1; |
| 9 } | 9 } |
| 10 | 10 |
| (...skipping 225 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 236 | 236 |
| 237 | 237 |
| 238 // 2d transform for safari because of border-radius and overflow:hidden
clipping bug. | 238 // 2d transform for safari because of border-radius and overflow:hidden
clipping bug. |
| 239 // https://bugs.webkit.org/show_bug.cgi?id=98538 | 239 // https://bugs.webkit.org/show_bug.cgi?id=98538 |
| 240 this.waveContainer.style.webkitTransform = 'translate(' + dx + 'px, ' +
dy + 'px)'; | 240 this.waveContainer.style.webkitTransform = 'translate(' + dx + 'px, ' +
dy + 'px)'; |
| 241 this.waveContainer.style.transform = 'translate3d(' + dx + 'px, ' + dy +
'px, 0)'; | 241 this.waveContainer.style.transform = 'translate3d(' + dx + 'px, ' + dy +
'px, 0)'; |
| 242 this.wave.style.webkitTransform = 'scale(' + scale + ',' + scale + ')'; | 242 this.wave.style.webkitTransform = 'scale(' + scale + ',' + scale + ')'; |
| 243 this.wave.style.transform = 'scale3d(' + scale + ',' + scale + ',1)'; | 243 this.wave.style.transform = 'scale3d(' + scale + ',' + scale + ',1)'; |
| 244 }, | 244 }, |
| 245 | 245 |
| 246 /** @param {Event=} event */ |
| 246 downAction: function(event) { | 247 downAction: function(event) { |
| 247 var xCenter = this.containerMetrics.width / 2; | 248 var xCenter = this.containerMetrics.width / 2; |
| 248 var yCenter = this.containerMetrics.height / 2; | 249 var yCenter = this.containerMetrics.height / 2; |
| 249 | 250 |
| 250 this.resetInteractionState(); | 251 this.resetInteractionState(); |
| 251 this.mouseDownStart = Utility.now(); | 252 this.mouseDownStart = Utility.now(); |
| 252 | 253 |
| 253 if (this.center) { | 254 if (this.center) { |
| 254 this.xStart = xCenter; | 255 this.xStart = xCenter; |
| 255 this.yStart = yCenter; | 256 this.yStart = yCenter; |
| (...skipping 24 matching lines...) Expand all Loading... |
| 280 | 281 |
| 281 this.waveContainer.style.top = | 282 this.waveContainer.style.top = |
| 282 (this.containerMetrics.height - this.containerMetrics.size) / 2 + 'px'
; | 283 (this.containerMetrics.height - this.containerMetrics.size) / 2 + 'px'
; |
| 283 this.waveContainer.style.left = | 284 this.waveContainer.style.left = |
| 284 (this.containerMetrics.width - this.containerMetrics.size) / 2 + 'px'; | 285 (this.containerMetrics.width - this.containerMetrics.size) / 2 + 'px'; |
| 285 | 286 |
| 286 this.waveContainer.style.width = this.containerMetrics.size + 'px'; | 287 this.waveContainer.style.width = this.containerMetrics.size + 'px'; |
| 287 this.waveContainer.style.height = this.containerMetrics.size + 'px'; | 288 this.waveContainer.style.height = this.containerMetrics.size + 'px'; |
| 288 }, | 289 }, |
| 289 | 290 |
| 291 /** @param {Event=} event */ |
| 290 upAction: function(event) { | 292 upAction: function(event) { |
| 291 if (!this.isMouseDown) { | 293 if (!this.isMouseDown) { |
| 292 return; | 294 return; |
| 293 } | 295 } |
| 294 | 296 |
| 295 this.mouseUpStart = Utility.now(); | 297 this.mouseUpStart = Utility.now(); |
| 296 }, | 298 }, |
| 297 | 299 |
| 298 remove: function() { | 300 remove: function() { |
| 299 Polymer.dom(this.waveContainer.parentNode).removeChild( | 301 Polymer.dom(this.waveContainer.parentNode).removeChild( |
| (...skipping 103 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 403 value: function() { | 405 value: function() { |
| 404 return this.animate.bind(this); | 406 return this.animate.bind(this); |
| 405 } | 407 } |
| 406 } | 408 } |
| 407 }, | 409 }, |
| 408 | 410 |
| 409 get target () { | 411 get target () { |
| 410 var ownerRoot = Polymer.dom(this).getOwnerRoot(); | 412 var ownerRoot = Polymer.dom(this).getOwnerRoot(); |
| 411 var target; | 413 var target; |
| 412 | 414 |
| 413 if (ownerRoot) { | 415 if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE |
| 414 target = ownerRoot.host; | 416 target = ownerRoot.host; |
| 415 } | 417 } else { |
| 416 | |
| 417 if (!target) { | |
| 418 target = this.parentNode; | 418 target = this.parentNode; |
| 419 } | 419 } |
| 420 | 420 |
| 421 return target; | 421 return target; |
| 422 }, | 422 }, |
| 423 | 423 |
| 424 keyBindings: { | 424 keyBindings: { |
| 425 'enter:keydown': '_onEnterKeydown', | 425 'enter:keydown': '_onEnterKeydown', |
| 426 'space:keydown': '_onSpaceKeydown', | 426 'space:keydown': '_onSpaceKeydown', |
| 427 'space:keyup': '_onSpaceKeyup' | 427 'space:keyup': '_onSpaceKeyup' |
| 428 }, | 428 }, |
| 429 | 429 |
| 430 attached: function() { | 430 attached: function() { |
| 431 this._listen(this.target, 'up', this.upAction.bind(this)); | 431 this.listen(this.target, 'up', 'upAction'); |
| 432 this._listen(this.target, 'down', this.downAction.bind(this)); | 432 this.listen(this.target, 'down', 'downAction'); |
| 433 | 433 |
| 434 if (!this.target.hasAttribute('noink')) { | 434 if (!this.target.hasAttribute('noink')) { |
| 435 this.keyEventTarget = this.target; | 435 this.keyEventTarget = this.target; |
| 436 } | 436 } |
| 437 }, | 437 }, |
| 438 | 438 |
| 439 get shouldKeepAnimating () { | 439 get shouldKeepAnimating () { |
| 440 for (var index = 0; index < this.ripples.length; ++index) { | 440 for (var index = 0; index < this.ripples.length; ++index) { |
| 441 if (!this.ripples[index].isAnimationComplete) { | 441 if (!this.ripples[index].isAnimationComplete) { |
| 442 return true; | 442 return true; |
| 443 } | 443 } |
| 444 } | 444 } |
| 445 | 445 |
| 446 return false; | 446 return false; |
| 447 }, | 447 }, |
| 448 | 448 |
| 449 simulatedRipple: function() { | 449 simulatedRipple: function() { |
| 450 this.downAction(null); | 450 this.downAction(null); |
| 451 | 451 |
| 452 // Please see polymer/polymer#1305 | 452 // Please see polymer/polymer#1305 |
| 453 this.async(function() { | 453 this.async(function() { |
| 454 this.upAction(); | 454 this.upAction(); |
| 455 }, 1); | 455 }, 1); |
| 456 }, | 456 }, |
| 457 | 457 |
| 458 /** @param {Event=} event */ |
| 458 downAction: function(event) { | 459 downAction: function(event) { |
| 459 if (this.holdDown && this.ripples.length > 0) { | 460 if (this.holdDown && this.ripples.length > 0) { |
| 460 return; | 461 return; |
| 461 } | 462 } |
| 462 | 463 |
| 463 var ripple = this.addRipple(); | 464 var ripple = this.addRipple(); |
| 464 | 465 |
| 465 ripple.downAction(event); | 466 ripple.downAction(event); |
| 466 | 467 |
| 467 if (!this._animating) { | 468 if (!this._animating) { |
| 468 this.animate(); | 469 this.animate(); |
| 469 } | 470 } |
| 470 }, | 471 }, |
| 471 | 472 |
| 473 /** @param {Event=} event */ |
| 472 upAction: function(event) { | 474 upAction: function(event) { |
| 473 if (this.holdDown) { | 475 if (this.holdDown) { |
| 474 return; | 476 return; |
| 475 } | 477 } |
| 476 | 478 |
| 477 this.ripples.forEach(function(ripple) { | 479 this.ripples.forEach(function(ripple) { |
| 478 ripple.upAction(event); | 480 ripple.upAction(event); |
| 479 }); | 481 }); |
| 480 | 482 |
| 481 this.animate(); | 483 this.animate(); |
| (...skipping 73 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 555 | 557 |
| 556 _holdDownChanged: function(holdDown) { | 558 _holdDownChanged: function(holdDown) { |
| 557 if (holdDown) { | 559 if (holdDown) { |
| 558 this.downAction(); | 560 this.downAction(); |
| 559 } else { | 561 } else { |
| 560 this.upAction(); | 562 this.upAction(); |
| 561 } | 563 } |
| 562 } | 564 } |
| 563 }); | 565 }); |
| 564 })(); | 566 })(); |
| OLD | NEW |