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

Side by Side Diff: polymer_0.5.0/bower_components/paper-ripple/paper-ripple.html

Issue 786953007: npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Created 5 years, 11 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 <!-- 1 <!--
2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also 6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 --> 8 -->
9 9
10 <!-- 10 <!--
(...skipping 26 matching lines...) Expand all
37 37
38 Use CSS color property to style the ripple: 38 Use CSS color property to style the ripple:
39 39
40 paper-ripple { 40 paper-ripple {
41 color: #4285f4; 41 color: #4285f4;
42 } 42 }
43 43
44 Note that CSS color property is inherited so it is not required to set it on 44 Note that CSS color property is inherited so it is not required to set it on
45 the `paper-ripple` element directly. 45 the `paper-ripple` element directly.
46 46
47 Apply `recenteringTouch` class to make the recentering rippling effect. 47 By default, the ripple is centered on the point of contact. Apply `recenteringT ouch`
48 class to have the ripple grow toward the center of its container.
48 49
49 <paper-ripple class="recenteringTouch"></paper-ripple> 50 <paper-ripple class="recenteringTouch"></paper-ripple>
50 51
51 Apply `circle` class to make the rippling effect within a circle. 52 Apply `circle` class to make the rippling effect within a circle.
52 53
53 <paper-ripple class="circle"></paper-ripple> 54 <paper-ripple class="circle"></paper-ripple>
54 55
55 @group Paper Elements 56 @group Paper Elements
56 @element paper-ripple 57 @element paper-ripple
57 @homepage github.io 58 @homepage github.io
58 --> 59 -->
59 60
61 <!--
62 Fired when the animation finishes. This is useful if you want to wait until the ripple
63 animation finishes to perform some action.
64
65 @event core-transitionend
66 @param {Object} detail
67 @param {Object} detail.node The animated node
68 -->
69
60 <link rel="import" href="../polymer/polymer.html" > 70 <link rel="import" href="../polymer/polymer.html" >
61 71
62 <polymer-element name="paper-ripple" attributes="initialOpacity opacityDecayVelo city"> 72 <polymer-element name="paper-ripple" attributes="initialOpacity opacityDecayVelo city">
63 <template> 73 <template>
64 74
65 <style> 75 <style>
66 76
67 :host { 77 :host {
68 display: block; 78 display: block;
69 position: relative; 79 position: relative;
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after
114 </template> 124 </template>
115 <script> 125 <script>
116 126
117 (function() { 127 (function() {
118 128
119 var waveMaxRadius = 150; 129 var waveMaxRadius = 150;
120 // 130 //
121 // INK EQUATIONS 131 // INK EQUATIONS
122 // 132 //
123 function waveRadiusFn(touchDownMs, touchUpMs, anim) { 133 function waveRadiusFn(touchDownMs, touchUpMs, anim) {
124 // Convert from ms to s. 134 // Convert from ms to s
125 var touchDown = touchDownMs / 1000; 135 var touchDown = touchDownMs / 1000;
126 var touchUp = touchUpMs / 1000; 136 var touchUp = touchUpMs / 1000;
127 var totalElapsed = touchDown + touchUp; 137 var totalElapsed = touchDown + touchUp;
128 var ww = anim.width, hh = anim.height; 138 var ww = anim.width, hh = anim.height;
129 // use diagonal size of container to avoid floating point math sadness 139 // use diagonal size of container to avoid floating point math sadness
130 var waveRadius = Math.min(Math.sqrt(ww * ww + hh * hh), waveMaxRadius) * 1 .1 + 5; 140 var waveRadius = Math.min(Math.sqrt(ww * ww + hh * hh), waveMaxRadius) * 1 .1 + 5;
131 var duration = 1.1 - .2 * (waveRadius / waveMaxRadius); 141 var duration = 1.1 - .2 * (waveRadius / waveMaxRadius);
132 var tt = (totalElapsed / duration); 142 var tt = (totalElapsed / duration);
133 143
134 var size = waveRadius * (1 - Math.pow(80, -tt)); 144 var size = waveRadius * (1 - Math.pow(80, -tt));
(...skipping 323 matching lines...) Expand 10 before | Expand all | Expand 10 after
458 this.fire('core-transitionend'); 468 this.fire('core-transitionend');
459 } 469 }
460 } 470 }
461 471
462 }); 472 });
463 473
464 })(); 474 })();
465 475
466 </script> 476 </script>
467 </polymer-element> 477 </polymer-element>
OLDNEW
« no previous file with comments | « polymer_0.5.0/bower_components/paper-ripple/metadata.html ('k') | polymer_0.5.0/bower_components/paper-ripple/test/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698