mirror of
https://github.com/CoderSherlock/CoderSherlock.github.io.git
synced 2026-06-13 08:08:10 -07:00
I_changed_another_theme
This commit is contained in:
+39
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "paper-ripple",
|
||||
"version": "1.0.1",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Adds a material design ripple to any container",
|
||||
"private": true,
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"ripple"
|
||||
],
|
||||
"main": "paper-ripple.html",
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/polymerelements/paper-ripple",
|
||||
"_release": "1.0.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.1",
|
||||
"commit": "af19d904802437c305390bb03415c11661de3d0a"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-ripple.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/paper-ripple"
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
bower_components
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
paper-ripple
|
||||
============
|
||||
|
||||
`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:
|
||||
|
||||
```html
|
||||
<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:
|
||||
|
||||
```html
|
||||
<paper-ripple id="ripple" style="pointer-events: none;"></paper-ripple>
|
||||
...
|
||||
<script>
|
||||
downAction: function(e) {
|
||||
this.$.ripple.downAction({x: e.x, y: e.y});
|
||||
},
|
||||
upAction: function(e) {
|
||||
this.$.ripple.upAction();
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
Styling ripple effect:
|
||||
|
||||
Use CSS color property to style the ripple:
|
||||
|
||||
```css
|
||||
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.
|
||||
|
||||
```html
|
||||
<paper-ripple recenters></paper-ripple>
|
||||
```
|
||||
|
||||
Apply `center` to center the ripple inside its container from the start.
|
||||
|
||||
```html
|
||||
<paper-ripple center></paper-ripple>
|
||||
```
|
||||
|
||||
Apply `circle` class to make the rippling effect within a circle.
|
||||
|
||||
```html
|
||||
<paper-ripple class="circle"></paper-ripple>
|
||||
```
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "paper-ripple",
|
||||
"version": "1.0.1",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Adds a material design ripple to any container",
|
||||
"private": true,
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"ripple"
|
||||
],
|
||||
"main": "paper-ripple.html",
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
}
|
||||
+413
@@ -0,0 +1,413 @@
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 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
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>paper-ripple demo</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../paper-ripple.html">
|
||||
<link rel="import" href="../../paper-styles/classes/typography.html">
|
||||
<link rel="import" href="../../iron-icon/iron-icon.html">
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
background-color: #f9f9f9;
|
||||
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 30px 25px;
|
||||
}
|
||||
|
||||
section > * {
|
||||
margin: 10px
|
||||
}
|
||||
|
||||
/* Button */
|
||||
.button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 2px;
|
||||
font-size: 0.9em;
|
||||
background-color: #fff;
|
||||
color: #646464;
|
||||
}
|
||||
|
||||
.button > paper-ripple {
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button.narrow {
|
||||
width: 60px;
|
||||
}
|
||||
|
||||
.button.grey {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.button.blue {
|
||||
background-color: #4285f4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.green {
|
||||
background-color: #0f9d58;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.button.raised {
|
||||
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-delay: 0.2s;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.button.raised:active {
|
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
/* Icon Button */
|
||||
.icon-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.icon-button > iron-icon {
|
||||
margin: 16px;
|
||||
transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.icon-button:hover > iron-icon {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.icon-button > paper-ripple {
|
||||
overflow: hidden;
|
||||
color: #646464;
|
||||
}
|
||||
|
||||
.icon-button.red > iron-icon::shadow path {
|
||||
fill: #db4437;
|
||||
}
|
||||
|
||||
.icon-button.red > paper-ripple {
|
||||
color: #db4437;
|
||||
}
|
||||
|
||||
.icon-button.blue > iron-icon::shadow path {
|
||||
fill: #4285f4;
|
||||
}
|
||||
|
||||
.icon-button.blue > paper-ripple {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
/* FAB */
|
||||
.fab {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-delay: 0.2s;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
.fab.red {
|
||||
background-color: #d23f31;
|
||||
}
|
||||
|
||||
.fab.blue {
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
.fab.green {
|
||||
background-color: #0f9d58;
|
||||
}
|
||||
|
||||
.fab:active {
|
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.fab > iron-icon {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.fab > iron-icon::shadow path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
/* Menu */
|
||||
.menu {
|
||||
display: inline-block;
|
||||
width: 180px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
color: #646464;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.menu.blue > .item {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
/* Card, Dialog */
|
||||
.card, .dialog {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
height: 240px;
|
||||
vertical-align: top;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.dialog > .content {
|
||||
height: 170px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.dialog > .content > .title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.dialog > .button {
|
||||
width: 90px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.card.image {
|
||||
background: url(http://lorempixel.com/300/240/nature/);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Misc */
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.label-blue {
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.label-red {
|
||||
color: #d23f31;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="button raised">
|
||||
<div class="center" fit>SUBMIT</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button raised grey">
|
||||
<div class="center" fit>CANCEL</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button raised blue">
|
||||
<div class="center" fit>COMPOSE</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button raised green">
|
||||
<div class="center" fit>OK</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="button raised grey narrow">
|
||||
<div class="center" fit>+1</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button raised grey narrow label-blue">
|
||||
<div class="center" fit>+1</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button raised grey narrow label-red">
|
||||
<div class="center" fit>+1</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="icon-button">
|
||||
<iron-icon icon="menu"></iron-icon>
|
||||
<paper-ripple class="circle" recenters></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="icon-button">
|
||||
<iron-icon icon="more-vert"></iron-icon>
|
||||
<paper-ripple class="circle" recenters></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="icon-button red">
|
||||
<iron-icon icon="delete"></iron-icon>
|
||||
<paper-ripple class="circle" recenters></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="icon-button blue">
|
||||
<iron-icon icon="account-box"></iron-icon>
|
||||
<paper-ripple class="circle" recenters></paper-ripple>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="fab red">
|
||||
<iron-icon icon="add"></iron-icon>
|
||||
<paper-ripple class="circle" recenters></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="fab blue">
|
||||
<iron-icon icon="mail"></iron-icon>
|
||||
<paper-ripple class="circle" recenters></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="fab green">
|
||||
<iron-icon icon="create"></iron-icon>
|
||||
<paper-ripple class="circle" recenters></paper-ripple>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="menu">
|
||||
|
||||
<div class="item">
|
||||
<div class="label" fit>Mark as unread</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Mark as important</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Add to Tasks</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Create event</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="menu blue">
|
||||
|
||||
<div class="item">
|
||||
<div class="label" fit>Import</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Export</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Print</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Restore contacts</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="dialog">
|
||||
|
||||
<div class="content">
|
||||
<div class="title">Permission</div><br>
|
||||
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
|
||||
</div>
|
||||
|
||||
<div class="button label-blue">
|
||||
<div class="center" fit>ACCEPT</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button">
|
||||
<div class="center" fit>DECLINE</div>
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<paper-ripple recenters></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="card image">
|
||||
|
||||
<paper-ripple recenters></paper-ripple>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
|
||||
<g id="background" display="none">
|
||||
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
|
||||
</g>
|
||||
<g id="label">
|
||||
</g>
|
||||
<g id="art">
|
||||
<path d="M175,81H49V45h126V81z M51,79h122V47H51V79z"/>
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_5_" x="50" y="46" width="124" height="34"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_2_">
|
||||
<use xlink:href="#SVGID_5_" overflow="visible"/>
|
||||
</clipPath>
|
||||
<circle opacity="0.5" clip-path="url(#SVGID_2_)" cx="84.4" cy="62.7" r="41.9"/>
|
||||
<circle opacity="0.6" clip-path="url(#SVGID_2_)" cx="84.4" cy="62.7" r="26.3"/>
|
||||
<circle opacity="0.6" clip-path="url(#SVGID_2_)" cx="66.4" cy="62.7" r="26.3"/>
|
||||
</g>
|
||||
<circle cx="50" cy="80" r="4"/>
|
||||
<g id="ic_x5F_add_x0D_">
|
||||
</g>
|
||||
</g>
|
||||
<g id="Guides">
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
+27
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>paper-ripple</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+716
@@ -0,0 +1,716 @@
|
||||
<!--
|
||||
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>
|
||||
+25
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
|
||||
<title>Tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'paper-ripple.html'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,166 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
@license
|
||||
Copyright (c) 2015 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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<title>paper-ripple</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../test-fixture/test-fixture-mocha.js"></script>
|
||||
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="../paper-ripple.html">
|
||||
|
||||
<style>
|
||||
#RippleContainer {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<test-fixture id="TrivialRipple">
|
||||
<template>
|
||||
<div id="RippleContainer">
|
||||
<paper-ripple></paper-ripple>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="CenteringRipple">
|
||||
<template>
|
||||
<div id="RippleContainer">
|
||||
<paper-ripple center></paper-ripple>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="RecenteringRipple">
|
||||
<template>
|
||||
<div id="RippleContainer">
|
||||
<paper-ripple recenters></paper-ripple>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
function FakeMouseEvent (target, relativeX, relativeX) {
|
||||
var rect = target.getBoundingClientRect();
|
||||
|
||||
return {
|
||||
detail: {
|
||||
x: rect.left + relativeX,
|
||||
y: rect.top + relativeX
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
suite('<paper-ripple>', function () {
|
||||
var mouseEvent;
|
||||
var rippleContainer;
|
||||
var ripple;
|
||||
|
||||
suite('when tapped', function () {
|
||||
setup(function () {
|
||||
rippleContainer = fixture('TrivialRipple');
|
||||
ripple = rippleContainer.firstElementChild;
|
||||
|
||||
mouseEvent = new FakeMouseEvent(ripple, 10, 10);
|
||||
});
|
||||
|
||||
test('creates a ripple', function () {
|
||||
expect(ripple.ripples.length).to.be.eql(0);
|
||||
ripple.downAction(mouseEvent);
|
||||
expect(ripple.ripples.length).to.be.eql(1);
|
||||
});
|
||||
|
||||
test('may create multiple ripples that overlap', function () {
|
||||
expect(ripple.ripples.length).to.be.eql(0);
|
||||
|
||||
for (var i = 0; i < 3; ++i) {
|
||||
ripple.downAction(mouseEvent);
|
||||
expect(ripple.ripples.length).to.be.eql(i + 1);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
suite('with the `center` attribute set to true', function () {
|
||||
setup(function () {
|
||||
rippleContainer = fixture('CenteringRipple');
|
||||
ripple = rippleContainer.firstElementChild;
|
||||
|
||||
mouseEvent = new FakeMouseEvent(ripple, 10, 10);
|
||||
});
|
||||
|
||||
test('ripples will center', function (done) {
|
||||
var waveContainerElement;
|
||||
// let's ask the browser what `translate3d(0px, 0px, 0)` will actually look like
|
||||
var div = document.createElement('div');
|
||||
div.style.webkitTransform = 'translate3d(0px, 0px, 0px)';
|
||||
div.style.transform = 'translate3d(0px, 0px, 0)';
|
||||
|
||||
ripple.downAction(mouseEvent);
|
||||
|
||||
waveContainerElement = ripple.ripples[0].waveContainer;
|
||||
|
||||
ripple.upAction(mouseEvent);
|
||||
|
||||
window.requestAnimationFrame(function () {
|
||||
var currentTransform = waveContainerElement.style.transform;
|
||||
try {
|
||||
expect(div.style.transform).to.be.ok;
|
||||
expect(currentTransform).to.be.ok;
|
||||
expect(currentTransform).to.be.eql(div.style.transform);
|
||||
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('with the `recenters` attribute set to true', function () {
|
||||
setup(function () {
|
||||
rippleContainer = fixture('RecenteringRipple');
|
||||
ripple = rippleContainer.firstElementChild;
|
||||
mouseEvent = new FakeMouseEvent(ripple, 10, 10);
|
||||
});
|
||||
test('ripples will gravitate towards the center', function (done) {
|
||||
var waveContainerElement;
|
||||
var waveTranslateString;
|
||||
ripple.downAction(mouseEvent);
|
||||
waveContainerElement = ripple.ripples[0].waveContainer;
|
||||
waveTranslateString = waveContainerElement.style.transform;
|
||||
ripple.upAction(mouseEvent);
|
||||
window.requestAnimationFrame(function () {
|
||||
try {
|
||||
expect(waveTranslateString).to.be.ok;
|
||||
expect(waveContainerElement.style.transform).to.be.ok;
|
||||
expect(waveContainerElement.style.transform).to.not.be.eql(waveTranslateString);
|
||||
done();
|
||||
} catch (e) {
|
||||
done(e);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user