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

Unified Diff: third_party/polymer/components/paper-ripple/paper-ripple.html

Issue 592603004: Revert "Polymer elements added to third_party/polymer." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 6 years, 3 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 side-by-side diff with in-line comments
Download patch
Index: third_party/polymer/components/paper-ripple/paper-ripple.html
diff --git a/third_party/polymer/components/paper-ripple/paper-ripple.html b/third_party/polymer/components/paper-ripple/paper-ripple.html
deleted file mode 100644
index 96026d488174f17b9b0b9c13bf5851fde832756b..0000000000000000000000000000000000000000
--- a/third_party/polymer/components/paper-ripple/paper-ripple.html
+++ /dev/null
@@ -1,427 +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
--->
-
-<!--
-`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 "down" and "up" 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.
-
-Apply `recenteringTouch` class to make the recentering rippling effect.
-
- <paper-ripple class="recenteringTouch"></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
-@homepage github.io
--->
-
-<link rel="import" href="../polymer/polymer.html" >
-
-<polymer-element name="paper-ripple" attributes="initialOpacity opacityDecayVelocity">
-<template>
-
- <style>
-
- :host {
- display: block;
- position: relative;
- }
-
- #canvas {
- pointer-events: none;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
-
- :host(.circle) #canvas {
- border-radius: 50%;
- }
-
- </style>
-
-</template>
-<script>
-
- (function() {
-
- var waveMaxRadius = 150;
- //
- // INK EQUATIONS
- //
- function waveRadiusFn(touchDownMs, touchUpMs, anim) {
- // Convert from ms to s.
- var touchDown = touchDownMs / 1000;
- var touchUp = touchUpMs / 1000;
- var totalElapsed = touchDown + touchUp;
- var ww = anim.width, hh = anim.height;
- // use diagonal size of container to avoid floating point math sadness
- var waveRadius = Math.min(Math.sqrt(ww * ww + hh * hh), waveMaxRadius) * 1.1 + 5;
- var duration = 1.1 - .2 * (waveRadius / waveMaxRadius);
- var tt = (totalElapsed / duration);
-
- var size = waveRadius * (1 - Math.pow(80, -tt));
- return Math.abs(size);
- }
-
- function waveOpacityFn(td, tu, anim) {
- // Convert from ms to s.
- var touchDown = td / 1000;
- var touchUp = tu / 1000;
- var totalElapsed = touchDown + touchUp;
-
- if (tu <= 0) { // before touch up
- return anim.initialOpacity;
- }
- return Math.max(0, anim.initialOpacity - touchUp * anim.opacityDecayVelocity);
- }
-
- function waveOuterOpacityFn(td, tu, anim) {
- // Convert from ms to s.
- var touchDown = td / 1000;
- var touchUp = tu / 1000;
-
- // Linear increase in background opacity, capped at the opacity
- // of the wavefront (waveOpacity).
- var outerOpacity = touchDown * 0.3;
- var waveOpacity = waveOpacityFn(td, tu, anim);
- return Math.max(0, Math.min(outerOpacity, waveOpacity));
- }
-
- // Determines whether the wave should be completely removed.
- function waveDidFinish(wave, radius, anim) {
- var waveOpacity = waveOpacityFn(wave.tDown, wave.tUp, anim);
- // If the wave opacity is 0 and the radius exceeds the bounds
- // of the element, then this is finished.
- if (waveOpacity < 0.01 && radius >= Math.min(wave.maxRadius, waveMaxRadius)) {
- return true;
- }
- return false;
- };
-
- function waveAtMaximum(wave, radius, anim) {
- var waveOpacity = waveOpacityFn(wave.tDown, wave.tUp, anim);
- if (waveOpacity >= anim.initialOpacity && radius >= Math.min(wave.maxRadius, waveMaxRadius)) {
- return true;
- }
- return false;
- }
-
- //
- // DRAWING
- //
- function drawRipple(ctx, x, y, radius, innerColor, outerColor) {
- if (outerColor) {
- ctx.fillStyle = outerColor;
- ctx.fillRect(0,0,ctx.canvas.width, ctx.canvas.height);
- }
- ctx.beginPath();
- ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
- ctx.fillStyle = innerColor;
- ctx.fill();
- }
-
- //
- // SETUP
- //
- function createWave(elem) {
- var elementStyle = window.getComputedStyle(elem);
- var fgColor = elementStyle.color;
-
- var wave = {
- waveColor: fgColor,
- maxRadius: 0,
- isMouseDown: false,
- mouseDownStart: 0.0,
- mouseUpStart: 0.0,
- tDown: 0,
- tUp: 0
- };
- return wave;
- }
-
- function removeWaveFromScope(scope, wave) {
- if (scope.waves) {
- var pos = scope.waves.indexOf(wave);
- scope.waves.splice(pos, 1);
- }
- };
-
- // Shortcuts.
- var pow = Math.pow;
- var now = Date.now;
- if (window.performance && performance.now) {
- now = performance.now.bind(performance);
- }
-
- function cssColorWithAlpha(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 + ')';
- }
-
- function dist(p1, p2) {
- return Math.sqrt(pow(p1.x - p2.x, 2) + pow(p1.y - p2.y, 2));
- }
-
- function distanceFromPointToFurthestCorner(point, size) {
- var tl_d = dist(point, {x: 0, y: 0});
- var tr_d = dist(point, {x: size.w, y: 0});
- var bl_d = dist(point, {x: 0, y: size.h});
- var br_d = dist(point, {x: size.w, y: size.h});
- return Math.max(tl_d, tr_d, bl_d, br_d);
- }
-
- Polymer('paper-ripple', {
-
- /**
- * The initial opacity set on the wave.
- *
- * @attribute initialOpacity
- * @type number
- * @default 0.25
- */
- initialOpacity: 0.25,
-
- /**
- * How fast (opacity per second) the wave fades out.
- *
- * @attribute opacityDecayVelocity
- * @type number
- * @default 0.8
- */
- opacityDecayVelocity: 0.8,
-
- backgroundFill: true,
- pixelDensity: 2,
-
- eventDelegates: {
- down: 'downAction',
- up: 'upAction'
- },
-
- attached: function() {
- // create the canvas element manually becase ios
- // does not render the canvas element if it is not created in the
- // main document (component templates are created in a
- // different document). See:
- // https://bugs.webkit.org/show_bug.cgi?id=109073.
- if (!this.$.canvas) {
- var canvas = document.createElement('canvas');
- canvas.id = 'canvas';
- this.shadowRoot.appendChild(canvas);
- this.$.canvas = canvas;
- }
- },
-
- ready: function() {
- this.waves = [];
- },
-
- setupCanvas: function() {
- this.$.canvas.setAttribute('width', this.$.canvas.clientWidth * this.pixelDensity + "px");
- this.$.canvas.setAttribute('height', this.$.canvas.clientHeight * this.pixelDensity + "px");
- var ctx = this.$.canvas.getContext('2d');
- ctx.scale(this.pixelDensity, this.pixelDensity);
- if (!this._loop) {
- this._loop = this.animate.bind(this, ctx);
- }
- },
-
- downAction: function(e) {
- this.setupCanvas();
- var wave = createWave(this.$.canvas);
-
- this.cancelled = false;
- wave.isMouseDown = true;
- wave.tDown = 0.0;
- wave.tUp = 0.0;
- wave.mouseUpStart = 0.0;
- wave.mouseDownStart = now();
-
- var width = this.$.canvas.width / 2; // Retina canvas
- var height = this.$.canvas.height / 2;
- var rect = this.getBoundingClientRect();
- var touchX = e.x - rect.left;
- var touchY = e.y - rect.top;
-
- wave.startPosition = {x:touchX, y:touchY};
-
- if (this.classList.contains("recenteringTouch")) {
- wave.endPosition = {x: width / 2, y: height / 2};
- wave.slideDistance = dist(wave.startPosition, wave.endPosition);
- }
- wave.containerSize = Math.max(width, height);
- wave.maxRadius = distanceFromPointToFurthestCorner(wave.startPosition, {w: width, h: height});
- this.waves.push(wave);
- requestAnimationFrame(this._loop);
- },
-
- upAction: function() {
- for (var i = 0; i < this.waves.length; i++) {
- // Declare the next wave that has mouse down to be mouse'ed up.
- var wave = this.waves[i];
- if (wave.isMouseDown) {
- wave.isMouseDown = false
- wave.mouseUpStart = now();
- wave.mouseDownStart = 0;
- wave.tUp = 0.0;
- break;
- }
- }
- this._loop && requestAnimationFrame(this._loop);
- },
-
- cancel: function() {
- this.cancelled = true;
- },
-
- animate: function(ctx) {
- var shouldRenderNextFrame = false;
-
- // Clear the canvas
- ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
- var deleteTheseWaves = [];
- // The oldest wave's touch down duration
- var longestTouchDownDuration = 0;
- var longestTouchUpDuration = 0;
- // Save the last known wave color
- var lastWaveColor = null;
- // wave animation values
- var anim = {
- initialOpacity: this.initialOpacity,
- opacityDecayVelocity: this.opacityDecayVelocity,
- height: ctx.canvas.height,
- width: ctx.canvas.width
- }
-
- for (var i = 0; i < this.waves.length; i++) {
- var wave = this.waves[i];
-
- if (wave.mouseDownStart > 0) {
- wave.tDown = now() - wave.mouseDownStart;
- }
- if (wave.mouseUpStart > 0) {
- wave.tUp = now() - wave.mouseUpStart;
- }
-
- // Determine how long the touch has been up or down.
- var tUp = wave.tUp;
- var tDown = wave.tDown;
- longestTouchDownDuration = Math.max(longestTouchDownDuration, tDown);
- longestTouchUpDuration = Math.max(longestTouchUpDuration, tUp);
-
- // Obtain the instantenous size and alpha of the ripple.
- var radius = waveRadiusFn(tDown, tUp, anim);
- var waveAlpha = waveOpacityFn(tDown, tUp, anim);
- var waveColor = cssColorWithAlpha(wave.waveColor, waveAlpha);
- lastWaveColor = wave.waveColor;
-
- // Position of the ripple.
- var x = wave.startPosition.x;
- var y = wave.startPosition.y;
-
- // Ripple gravitational pull to the center of the canvas.
- if (wave.endPosition) {
-
- // This translates from the origin to the center of the view based on the max dimension of
- var translateFraction = Math.min(1, radius / wave.containerSize * 2 / Math.sqrt(2) );
-
- x += translateFraction * (wave.endPosition.x - wave.startPosition.x);
- y += translateFraction * (wave.endPosition.y - wave.startPosition.y);
- }
-
- // If we do a background fill fade too, work out the correct color.
- var bgFillColor = null;
- if (this.backgroundFill) {
- var bgFillAlpha = waveOuterOpacityFn(tDown, tUp, anim);
- bgFillColor = cssColorWithAlpha(wave.waveColor, bgFillAlpha);
- }
-
- // Draw the ripple.
- drawRipple(ctx, x, y, radius, waveColor, bgFillColor);
-
- // Determine whether there is any more rendering to be done.
- var maximumWave = waveAtMaximum(wave, radius, anim);
- var waveDissipated = waveDidFinish(wave, radius, anim);
- var shouldKeepWave = !waveDissipated || maximumWave;
- var shouldRenderWaveAgain = !waveDissipated && !maximumWave;
- shouldRenderNextFrame = shouldRenderNextFrame || shouldRenderWaveAgain;
- if (!shouldKeepWave || this.cancelled) {
- deleteTheseWaves.push(wave);
- }
- }
-
- if (shouldRenderNextFrame) {
- requestAnimationFrame(this._loop);
- }
-
- for (var i = 0; i < deleteTheseWaves.length; ++i) {
- var wave = deleteTheseWaves[i];
- removeWaveFromScope(this, wave);
- }
-
- if (!this.waves.length) {
- // If there is nothing to draw, clear any drawn waves now because
- // we're not going to get another requestAnimationFrame any more.
- ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
- this._loop = null;
- }
- }
-
- });
-
- })();
-
-</script>
-</polymer-element>
« no previous file with comments | « third_party/polymer/components/paper-ripple/metadata.html ('k') | third_party/polymer/components/paper-ripple/raw.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698