| Index: third_party/polymer/v1_0/components/paper-ripple/paper-ripple.html
|
| diff --git a/third_party/polymer/v1_0/components/paper-ripple/paper-ripple.html b/third_party/polymer/v1_0/components/paper-ripple/paper-ripple.html
|
| deleted file mode 100644
|
| index 08d3da1ac003c4210f7143fa07f263aa007b10b3..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/v1_0/components/paper-ripple/paper-ripple.html
|
| +++ /dev/null
|
| @@ -1,716 +0,0 @@
|
| -<!--
|
| -Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
| -This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| -The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| -The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| -Code distributed by Google as part of the polymer project is also
|
| -subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| --->
|
| -
|
| -<link rel="import" href="../polymer/polymer.html">
|
| -<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
| -
|
| -<!--
|
| -`paper-ripple` provides a visual effect that other paper elements can
|
| -use to simulate a rippling effect emanating from the point of contact. The
|
| -effect can be visualized as a concentric circle with motion.
|
| -
|
| -Example:
|
| -
|
| - <paper-ripple></paper-ripple>
|
| -
|
| -`paper-ripple` listens to "mousedown" and "mouseup" events so it would display ripple
|
| -effect when touches on it. You can also defeat the default behavior and
|
| -manually route the down and up actions to the ripple element. Note that it is
|
| -important if you call downAction() you will have to make sure to call
|
| -upAction() so that `paper-ripple` would end the animation loop.
|
| -
|
| -Example:
|
| -
|
| - <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>
|
| - ...
|
| - downAction: function(e) {
|
| - this.$.ripple.downAction({x: e.x, y: e.y});
|
| - },
|
| - upAction: function(e) {
|
| - this.$.ripple.upAction();
|
| - }
|
| -
|
| -Styling ripple effect:
|
| -
|
| - Use CSS color property to style the ripple:
|
| -
|
| - paper-ripple {
|
| - color: #4285f4;
|
| - }
|
| -
|
| - Note that CSS color property is inherited so it is not required to set it on
|
| - the `paper-ripple` element directly.
|
| -
|
| -By default, the ripple is centered on the point of contact. Apply the `recenters`
|
| -attribute to have the ripple grow toward the center of its container.
|
| -
|
| - <paper-ripple recenters></paper-ripple>
|
| -
|
| -You can also center the ripple inside its container from the start.
|
| -
|
| - <paper-ripple center></paper-ripple>
|
| -
|
| -Apply `circle` class to make the rippling effect within a circle.
|
| -
|
| - <paper-ripple class="circle"></paper-ripple>
|
| -
|
| -@group Paper Elements
|
| -@element paper-ripple
|
| -@hero hero.svg
|
| -@demo demo/index.html
|
| --->
|
| -
|
| -<dom-module id="paper-ripple">
|
| -
|
| - <!--
|
| - Fired when the animation finishes. This is useful if you want to wait until the ripple
|
| - animation finishes to perform some action.
|
| -
|
| - @event transitionend
|
| - @param {Object} detail
|
| - @param {Object} detail.node The animated node
|
| - -->
|
| -
|
| - <style>
|
| - :host {
|
| - display: block;
|
| - position: absolute;
|
| - border-radius: inherit;
|
| - overflow: hidden;
|
| - top: 0;
|
| - left: 0;
|
| - right: 0;
|
| - bottom: 0;
|
| - }
|
| -
|
| - :host([animating]) {
|
| - /* This resolves a rendering issue in Chrome (as of 40) where the
|
| - ripple is not properly clipped by its parent (which may have
|
| - rounded corners). See: http://jsbin.com/temexa/4
|
| -
|
| - Note: We only apply this style conditionally. Otherwise, the browser
|
| - will create a new compositing layer for every ripple element on the
|
| - page, and that would be bad. */
|
| - -webkit-transform: translate(0, 0);
|
| - transform: translate3d(0, 0, 0);
|
| - }
|
| -
|
| - :host([noink]) {
|
| - pointer-events: none;
|
| - }
|
| -
|
| - #background,
|
| - #waves,
|
| - .wave-container,
|
| - .wave {
|
| - pointer-events: none;
|
| - position: absolute;
|
| - top: 0;
|
| - left: 0;
|
| - width: 100%;
|
| - height: 100%;
|
| - }
|
| -
|
| - #background,
|
| - .wave {
|
| - opacity: 0;
|
| - }
|
| -
|
| - #waves,
|
| - .wave {
|
| - overflow: hidden;
|
| - }
|
| -
|
| - .wave-container,
|
| - .wave {
|
| - border-radius: 50%;
|
| - }
|
| -
|
| - :host(.circle) #background,
|
| - :host(.circle) #waves {
|
| - border-radius: 50%;
|
| - }
|
| -
|
| - :host(.circle) .wave-container {
|
| - overflow: hidden;
|
| - }
|
| -
|
| - </style>
|
| - <template>
|
| - <div id="background"></div>
|
| - <div id="waves"></div>
|
| - </template>
|
| -</dom-module>
|
| -<script>
|
| - (function() {
|
| - var Utility = {
|
| - cssColorWithAlpha: function(cssColor, alpha) {
|
| - var parts = cssColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
| -
|
| - if (typeof alpha == 'undefined') {
|
| - alpha = 1;
|
| - }
|
| -
|
| - if (!parts) {
|
| - return 'rgba(255, 255, 255, ' + alpha + ')';
|
| - }
|
| -
|
| - return 'rgba(' + parts[1] + ', ' + parts[2] + ', ' + parts[3] + ', ' + alpha + ')';
|
| - },
|
| -
|
| - distance: function(x1, y1, x2, y2) {
|
| - var xDelta = (x1 - x2);
|
| - var yDelta = (y1 - y2);
|
| -
|
| - return Math.sqrt(xDelta * xDelta + yDelta * yDelta);
|
| - },
|
| -
|
| - now: (function() {
|
| - if (window.performance && window.performance.now) {
|
| - return window.performance.now.bind(window.performance);
|
| - }
|
| -
|
| - return Date.now;
|
| - })()
|
| - };
|
| -
|
| - /**
|
| - * @param {HTMLElement} element
|
| - * @constructor
|
| - */
|
| - function ElementMetrics(element) {
|
| - this.element = element;
|
| - this.width = this.boundingRect.width;
|
| - this.height = this.boundingRect.height;
|
| -
|
| - this.size = Math.max(this.width, this.height);
|
| - }
|
| -
|
| - ElementMetrics.prototype = {
|
| - get boundingRect () {
|
| - return this.element.getBoundingClientRect();
|
| - },
|
| -
|
| - furthestCornerDistanceFrom: function(x, y) {
|
| - var topLeft = Utility.distance(x, y, 0, 0);
|
| - var topRight = Utility.distance(x, y, this.width, 0);
|
| - var bottomLeft = Utility.distance(x, y, 0, this.height);
|
| - var bottomRight = Utility.distance(x, y, this.width, this.height);
|
| -
|
| - return Math.max(topLeft, topRight, bottomLeft, bottomRight);
|
| - }
|
| - };
|
| -
|
| - /**
|
| - * @param {HTMLElement} element
|
| - * @constructor
|
| - */
|
| - function Ripple(element) {
|
| - this.element = element;
|
| - this.color = window.getComputedStyle(element).color;
|
| -
|
| - this.wave = document.createElement('div');
|
| - this.waveContainer = document.createElement('div');
|
| - this.wave.style.backgroundColor = this.color;
|
| - this.wave.classList.add('wave');
|
| - this.waveContainer.classList.add('wave-container');
|
| - Polymer.dom(this.waveContainer).appendChild(this.wave);
|
| -
|
| - this.resetInteractionState();
|
| - }
|
| -
|
| - Ripple.MAX_RADIUS = 300;
|
| -
|
| - Ripple.prototype = {
|
| - get recenters() {
|
| - return this.element.recenters;
|
| - },
|
| -
|
| - get center() {
|
| - return this.element.center;
|
| - },
|
| -
|
| - get mouseDownElapsed() {
|
| - var elapsed;
|
| -
|
| - if (!this.mouseDownStart) {
|
| - return 0;
|
| - }
|
| -
|
| - elapsed = Utility.now() - this.mouseDownStart;
|
| -
|
| - if (this.mouseUpStart) {
|
| - elapsed -= this.mouseUpElapsed;
|
| - }
|
| -
|
| - return elapsed;
|
| - },
|
| -
|
| - get mouseUpElapsed() {
|
| - return this.mouseUpStart ?
|
| - Utility.now () - this.mouseUpStart : 0;
|
| - },
|
| -
|
| - get mouseDownElapsedSeconds() {
|
| - return this.mouseDownElapsed / 1000;
|
| - },
|
| -
|
| - get mouseUpElapsedSeconds() {
|
| - return this.mouseUpElapsed / 1000;
|
| - },
|
| -
|
| - get mouseInteractionSeconds() {
|
| - return this.mouseDownElapsedSeconds + this.mouseUpElapsedSeconds;
|
| - },
|
| -
|
| - get initialOpacity() {
|
| - return this.element.initialOpacity;
|
| - },
|
| -
|
| - get opacityDecayVelocity() {
|
| - return this.element.opacityDecayVelocity;
|
| - },
|
| -
|
| - get radius() {
|
| - var width2 = this.containerMetrics.width * this.containerMetrics.width;
|
| - var height2 = this.containerMetrics.height * this.containerMetrics.height;
|
| - var waveRadius = Math.min(
|
| - Math.sqrt(width2 + height2),
|
| - Ripple.MAX_RADIUS
|
| - ) * 1.1 + 5;
|
| -
|
| - var duration = 1.1 - 0.2 * (waveRadius / Ripple.MAX_RADIUS);
|
| - var timeNow = this.mouseInteractionSeconds / duration;
|
| - var size = waveRadius * (1 - Math.pow(80, -timeNow));
|
| -
|
| - return Math.abs(size);
|
| - },
|
| -
|
| - get opacity() {
|
| - if (!this.mouseUpStart) {
|
| - return this.initialOpacity;
|
| - }
|
| -
|
| - return Math.max(
|
| - 0,
|
| - this.initialOpacity - this.mouseUpElapsedSeconds * this.opacityDecayVelocity
|
| - );
|
| - },
|
| -
|
| - get outerOpacity() {
|
| - // Linear increase in background opacity, capped at the opacity
|
| - // of the wavefront (waveOpacity).
|
| - var outerOpacity = this.mouseUpElapsedSeconds * 0.3;
|
| - var waveOpacity = this.opacity;
|
| -
|
| - return Math.max(
|
| - 0,
|
| - Math.min(outerOpacity, waveOpacity)
|
| - );
|
| - },
|
| -
|
| - get isOpacityFullyDecayed() {
|
| - return this.opacity < 0.01 &&
|
| - this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
|
| - },
|
| -
|
| - get isRestingAtMaxRadius() {
|
| - return this.opacity >= this.initialOpacity &&
|
| - this.radius >= Math.min(this.maxRadius, Ripple.MAX_RADIUS);
|
| - },
|
| -
|
| - get isAnimationComplete() {
|
| - return this.mouseUpStart ?
|
| - this.isOpacityFullyDecayed : this.isRestingAtMaxRadius;
|
| - },
|
| -
|
| - get translationFraction() {
|
| - return Math.min(
|
| - 1,
|
| - this.radius / this.containerMetrics.size * 2 / Math.sqrt(2)
|
| - );
|
| - },
|
| -
|
| - get xNow() {
|
| - if (this.xEnd) {
|
| - return this.xStart + this.translationFraction * (this.xEnd - this.xStart);
|
| - }
|
| -
|
| - return this.xStart;
|
| - },
|
| -
|
| - get yNow() {
|
| - if (this.yEnd) {
|
| - return this.yStart + this.translationFraction * (this.yEnd - this.yStart);
|
| - }
|
| -
|
| - return this.yStart;
|
| - },
|
| -
|
| - get isMouseDown() {
|
| - return this.mouseDownStart && !this.mouseUpStart;
|
| - },
|
| -
|
| - resetInteractionState: function() {
|
| - this.maxRadius = 0;
|
| - this.mouseDownStart = 0;
|
| - this.mouseUpStart = 0;
|
| -
|
| - this.xStart = 0;
|
| - this.yStart = 0;
|
| - this.xEnd = 0;
|
| - this.yEnd = 0;
|
| - this.slideDistance = 0;
|
| -
|
| - this.containerMetrics = new ElementMetrics(this.element);
|
| - },
|
| -
|
| - draw: function() {
|
| - var scale;
|
| - var translateString;
|
| - var dx;
|
| - var dy;
|
| -
|
| - this.wave.style.opacity = this.opacity;
|
| -
|
| - scale = this.radius / (this.containerMetrics.size / 2);
|
| - dx = this.xNow - (this.containerMetrics.width / 2);
|
| - dy = this.yNow - (this.containerMetrics.height / 2);
|
| -
|
| -
|
| - // 2d transform for safari because of border-radius and overflow:hidden clipping bug.
|
| - // https://bugs.webkit.org/show_bug.cgi?id=98538
|
| - this.waveContainer.style.webkitTransform = 'translate(' + dx + 'px, ' + dy + 'px)';
|
| - this.waveContainer.style.transform = 'translate3d(' + dx + 'px, ' + dy + 'px, 0)';
|
| - this.wave.style.webkitTransform = 'scale(' + scale + ',' + scale + ')';
|
| - this.wave.style.transform = 'scale3d(' + scale + ',' + scale + ',1)';
|
| - },
|
| -
|
| - /** @param {Event=} event */
|
| - downAction: function(event) {
|
| - var xCenter = this.containerMetrics.width / 2;
|
| - var yCenter = this.containerMetrics.height / 2;
|
| -
|
| - this.resetInteractionState();
|
| - this.mouseDownStart = Utility.now();
|
| -
|
| - if (this.center) {
|
| - this.xStart = xCenter;
|
| - this.yStart = yCenter;
|
| - this.slideDistance = Utility.distance(
|
| - this.xStart, this.yStart, this.xEnd, this.yEnd
|
| - );
|
| - } else {
|
| - this.xStart = event ?
|
| - event.detail.x - this.containerMetrics.boundingRect.left :
|
| - this.containerMetrics.width / 2;
|
| - this.yStart = event ?
|
| - event.detail.y - this.containerMetrics.boundingRect.top :
|
| - this.containerMetrics.height / 2;
|
| - }
|
| -
|
| - if (this.recenters) {
|
| - this.xEnd = xCenter;
|
| - this.yEnd = yCenter;
|
| - this.slideDistance = Utility.distance(
|
| - this.xStart, this.yStart, this.xEnd, this.yEnd
|
| - );
|
| - }
|
| -
|
| - this.maxRadius = this.containerMetrics.furthestCornerDistanceFrom(
|
| - this.xStart,
|
| - this.yStart
|
| - );
|
| -
|
| - this.waveContainer.style.top =
|
| - (this.containerMetrics.height - this.containerMetrics.size) / 2 + 'px';
|
| - this.waveContainer.style.left =
|
| - (this.containerMetrics.width - this.containerMetrics.size) / 2 + 'px';
|
| -
|
| - this.waveContainer.style.width = this.containerMetrics.size + 'px';
|
| - this.waveContainer.style.height = this.containerMetrics.size + 'px';
|
| - },
|
| -
|
| - /** @param {Event=} event */
|
| - upAction: function(event) {
|
| - if (!this.isMouseDown) {
|
| - return;
|
| - }
|
| -
|
| - this.mouseUpStart = Utility.now();
|
| - },
|
| -
|
| - remove: function() {
|
| - Polymer.dom(this.waveContainer.parentNode).removeChild(
|
| - this.waveContainer
|
| - );
|
| - }
|
| - };
|
| -
|
| - Polymer({
|
| - is: 'paper-ripple',
|
| -
|
| - behaviors: [
|
| - Polymer.IronA11yKeysBehavior
|
| - ],
|
| -
|
| - properties: {
|
| - /**
|
| - * The initial opacity set on the wave.
|
| - *
|
| - * @attribute initialOpacity
|
| - * @type number
|
| - * @default 0.25
|
| - */
|
| - initialOpacity: {
|
| - type: Number,
|
| - value: 0.25
|
| - },
|
| -
|
| - /**
|
| - * How fast (opacity per second) the wave fades out.
|
| - *
|
| - * @attribute opacityDecayVelocity
|
| - * @type number
|
| - * @default 0.8
|
| - */
|
| - opacityDecayVelocity: {
|
| - type: Number,
|
| - value: 0.8
|
| - },
|
| -
|
| - /**
|
| - * If true, ripples will exhibit a gravitational pull towards
|
| - * the center of their container as they fade away.
|
| - *
|
| - * @attribute recenters
|
| - * @type boolean
|
| - * @default false
|
| - */
|
| - recenters: {
|
| - type: Boolean,
|
| - value: false
|
| - },
|
| -
|
| - /**
|
| - * If true, ripples will center inside its container
|
| - *
|
| - * @attribute recenters
|
| - * @type boolean
|
| - * @default false
|
| - */
|
| - center: {
|
| - type: Boolean,
|
| - value: false
|
| - },
|
| -
|
| - /**
|
| - * A list of the visual ripples.
|
| - *
|
| - * @attribute ripples
|
| - * @type Array
|
| - * @default []
|
| - */
|
| - ripples: {
|
| - type: Array,
|
| - value: function() {
|
| - return [];
|
| - }
|
| - },
|
| -
|
| - /**
|
| - * True when there are visible ripples animating within the
|
| - * element.
|
| - */
|
| - animating: {
|
| - type: Boolean,
|
| - readOnly: true,
|
| - reflectToAttribute: true,
|
| - value: false
|
| - },
|
| -
|
| - /**
|
| - * If true, the ripple will remain in the "down" state until `holdDown`
|
| - * is set to false again.
|
| - */
|
| - holdDown: {
|
| - type: Boolean,
|
| - value: false,
|
| - observer: '_holdDownChanged'
|
| - },
|
| -
|
| - _animating: {
|
| - type: Boolean
|
| - },
|
| -
|
| - _boundAnimate: {
|
| - type: Function,
|
| - value: function() {
|
| - return this.animate.bind(this);
|
| - }
|
| - }
|
| - },
|
| -
|
| - get target () {
|
| - var ownerRoot = Polymer.dom(this).getOwnerRoot();
|
| - var target;
|
| -
|
| - if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
|
| - target = ownerRoot.host;
|
| - } else {
|
| - target = this.parentNode;
|
| - }
|
| -
|
| - return target;
|
| - },
|
| -
|
| - keyBindings: {
|
| - 'enter:keydown': '_onEnterKeydown',
|
| - 'space:keydown': '_onSpaceKeydown',
|
| - 'space:keyup': '_onSpaceKeyup'
|
| - },
|
| -
|
| - attached: function() {
|
| - this.listen(this.target, 'up', 'upAction');
|
| - this.listen(this.target, 'down', 'downAction');
|
| -
|
| - if (!this.target.hasAttribute('noink')) {
|
| - this.keyEventTarget = this.target;
|
| - }
|
| - },
|
| -
|
| - get shouldKeepAnimating () {
|
| - for (var index = 0; index < this.ripples.length; ++index) {
|
| - if (!this.ripples[index].isAnimationComplete) {
|
| - return true;
|
| - }
|
| - }
|
| -
|
| - return false;
|
| - },
|
| -
|
| - simulatedRipple: function() {
|
| - this.downAction(null);
|
| -
|
| - // Please see polymer/polymer#1305
|
| - this.async(function() {
|
| - this.upAction();
|
| - }, 1);
|
| - },
|
| -
|
| - /** @param {Event=} event */
|
| - downAction: function(event) {
|
| - if (this.holdDown && this.ripples.length > 0) {
|
| - return;
|
| - }
|
| -
|
| - var ripple = this.addRipple();
|
| -
|
| - ripple.downAction(event);
|
| -
|
| - if (!this._animating) {
|
| - this.animate();
|
| - }
|
| - },
|
| -
|
| - /** @param {Event=} event */
|
| - upAction: function(event) {
|
| - if (this.holdDown) {
|
| - return;
|
| - }
|
| -
|
| - this.ripples.forEach(function(ripple) {
|
| - ripple.upAction(event);
|
| - });
|
| -
|
| - this.animate();
|
| - },
|
| -
|
| - onAnimationComplete: function() {
|
| - this._animating = false;
|
| - this.$.background.style.backgroundColor = null;
|
| - this.fire('transitionend');
|
| - },
|
| -
|
| - addRipple: function() {
|
| - var ripple = new Ripple(this);
|
| -
|
| - Polymer.dom(this.$.waves).appendChild(ripple.waveContainer);
|
| - this.$.background.style.backgroundColor = ripple.color;
|
| - this.ripples.push(ripple);
|
| -
|
| - this._setAnimating(true);
|
| -
|
| - return ripple;
|
| - },
|
| -
|
| - removeRipple: function(ripple) {
|
| - var rippleIndex = this.ripples.indexOf(ripple);
|
| -
|
| - if (rippleIndex < 0) {
|
| - return;
|
| - }
|
| -
|
| - this.ripples.splice(rippleIndex, 1);
|
| -
|
| - ripple.remove();
|
| -
|
| - if (!this.ripples.length) {
|
| - this._setAnimating(false);
|
| - }
|
| - },
|
| -
|
| - animate: function() {
|
| - var index;
|
| - var ripple;
|
| -
|
| - this._animating = true;
|
| -
|
| - for (index = 0; index < this.ripples.length; ++index) {
|
| - ripple = this.ripples[index];
|
| -
|
| - ripple.draw();
|
| -
|
| - this.$.background.style.opacity = ripple.outerOpacity;
|
| -
|
| - if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) {
|
| - this.removeRipple(ripple);
|
| - }
|
| - }
|
| -
|
| - if (!this.shouldKeepAnimating && this.ripples.length === 0) {
|
| - this.onAnimationComplete();
|
| - } else {
|
| - window.requestAnimationFrame(this._boundAnimate);
|
| - }
|
| - },
|
| -
|
| - _onEnterKeydown: function() {
|
| - this.downAction();
|
| - this.async(this.upAction, 1);
|
| - },
|
| -
|
| - _onSpaceKeydown: function() {
|
| - this.downAction();
|
| - },
|
| -
|
| - _onSpaceKeyup: function() {
|
| - this.upAction();
|
| - },
|
| -
|
| - _holdDownChanged: function(holdDown) {
|
| - if (holdDown) {
|
| - this.downAction();
|
| - } else {
|
| - this.upAction();
|
| - }
|
| - }
|
| - });
|
| - })();
|
| -</script>
|
|
|