Chromium Code Reviews

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.
Jump to:
View unified diff |
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...)
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...)
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...)
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