third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html - Issue 1401633002: Update Polymer from 1.1.4 -> 1.1.5

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple.html

Issue 1401633002: Update Polymer from 1.1.4 -> 1.1.5 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: dzhioev@ review Created 5 years, 2 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

« no previous file with comments | « third_party/polymer/v1_0/components-chromium/paper-ripple/hero.svg ('k') | third_party/polymer/v1_0/components-chromium/paper-ripple/paper-ripple-extracted.js » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
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 --><html><head><link rel="import" href="../polymer/polymer.html">	8 --><html><head><link rel="import" href="../polymer/polymer.html">

9 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">	9 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html ">

10	10

11 <!--	11 <!--

	12 Material design: [Surface reaction](https://www.google.com/design/spec/animation /responsive-interaction.html#responsive-interaction-surface-reaction)

	13

12 `paper-ripple` provides a visual effect that other paper elements can	14 `paper-ripple` provides a visual effect that other paper elements can

13 use to simulate a rippling effect emanating from the point of contact. The	15 use to simulate a rippling effect emanating from the point of contact. The

14 effect can be visualized as a concentric circle with motion.	16 effect can be visualized as a concentric circle with motion.

15	17

16 Example:	18 Example:

17	19

18 <paper-ripple></paper-ripple>	20 <div style="position:relative">

	21 <paper-ripple></paper-ripple>

	22 </div>

	23

	24 Note, it's important that the parent container of the ripple be relative positio n, otherwise

	25 the ripple will emanate outside of the desired container.

19	26

20 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display r ipple	27 `paper-ripple` listens to "mousedown" and "mouseup" events so it would display r ipple

21 effect when touches on it. You can also defeat the default behavior and	28 effect when touches on it. You can also defeat the default behavior and

22 manually route the down and up actions to the ripple element. Note that it is	29 manually route the down and up actions to the ripple element. Note that it is

23 important if you call downAction() you will have to make sure to call	30 important if you call `downAction()` you will have to make sure to call

24 upAction() so that `paper-ripple` would end the animation loop.	31 `upAction()` so that `paper-ripple` would end the animation loop.

25	32

26 Example:	33 Example:

27	34

28 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>	35 <paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>

29 ...	36 ...

30 downAction: function(e) {	37 downAction: function(e) {

31 this.$.ripple.downAction({x: e.x, y: e.y});	38 this.$.ripple.downAction({x: e.x, y: e.y});

32 },	39 },

33 upAction: function(e) {	40 upAction: function(e) {

34 this.$.ripple.upAction();	41 this.$.ripple.upAction();

(...skipping 104 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
139 :host(.circle) .wave-container {	146 :host(.circle) .wave-container {

140 overflow: hidden;	147 overflow: hidden;

141 }	148 }

142 </style>	149 </style>

143	150

144 <div id="background"></div>	151 <div id="background"></div>

145 <div id="waves"></div>	152 <div id="waves"></div>

146 </template>	153 </template>

147 </dom-module>	154 </dom-module>

148 <script src="paper-ripple-extracted.js"></script></body></html>	155 <script src="paper-ripple-extracted.js"></script></body></html>

OLD	NEW