added tests with paper-slider
This commit is contained in:
DadaMonad
23
bower_components/paper-ripple/.bower.json
vendored
Normal file
23
bower_components/paper-ripple/.bower.json
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "paper-ripple",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"core-icon": "Polymer/core-icon#^0.5.0",
|
||||
"core-icons": "Polymer/core-icons#^0.5.0",
|
||||
"font-roboto": "Polymer/font-roboto#^0.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"web-component-tester": "Polymer/web-component-tester#^1.0.0"
|
||||
},
|
||||
"version": "0.5.2",
|
||||
"homepage": "https://github.com/Polymer/paper-ripple",
|
||||
"_release": "0.5.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "0.5.2",
|
||||
"commit": "0f2d08a81d6ec91924772b9b990937c6f1da58b4"
|
||||
},
|
||||
"_source": "git://github.com/Polymer/paper-ripple.git",
|
||||
"_target": "^0.5.0",
|
||||
"_originalSource": "Polymer/paper-ripple"
|
||||
}
|
||||
4
bower_components/paper-ripple/README.md
vendored
Normal file
4
bower_components/paper-ripple/README.md
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
paper-ripple
|
||||
============
|
||||
|
||||
See the [component page](http://www.polymer-project.org/docs/elements/paper-elements.html#paper-ripple) for more information.
|
||||
13
bower_components/paper-ripple/bower.json
vendored
Normal file
13
bower_components/paper-ripple/bower.json
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"name": "paper-ripple",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"core-icon": "Polymer/core-icon#^0.5.0",
|
||||
"core-icons": "Polymer/core-icons#^0.5.0",
|
||||
"font-roboto": "Polymer/font-roboto#^0.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"web-component-tester": "Polymer/web-component-tester#^1.0.0"
|
||||
},
|
||||
"version": "0.5.2"
|
||||
}
|
||||
418
bower_components/paper-ripple/demo.html
vendored
Normal file
418
bower_components/paper-ripple/demo.html
vendored
Normal file
@@ -0,0 +1,418 @@
|
||||
<!--
|
||||
@license
|
||||
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
|
||||
-->
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>paper-ripple</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.js"></script>
|
||||
|
||||
<link rel="import" href="../core-icons/core-icons.html">
|
||||
<link rel="import" href="paper-ripple.html">
|
||||
<link rel="import" href="../font-roboto/roboto.html">
|
||||
<link rel="import" href="../core-icon/core-icon.html">
|
||||
|
||||
<style shim-shadowdom>
|
||||
|
||||
body {
|
||||
background-color: #f9f9f9;
|
||||
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-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 > core-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 > core-icon {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.icon-button > paper-ripple {
|
||||
overflow: hidden;
|
||||
color: #646464;
|
||||
}
|
||||
|
||||
.icon-button.red > core-icon::shadow path {
|
||||
fill: #db4437;
|
||||
}
|
||||
|
||||
.icon-button.red > paper-ripple {
|
||||
color: #db4437;
|
||||
}
|
||||
|
||||
.icon-button.blue > core-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 > core-icon {
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.fab > core-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 unresolved>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="button raised">
|
||||
<div class="center" fit>SUBMIT</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button raised grey">
|
||||
<div class="center" fit>CANCEL</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button raised blue">
|
||||
<div class="center" fit>COMPOSE</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button raised green">
|
||||
<div class="center" fit>OK</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="button raised grey narrow">
|
||||
<div class="center" fit>+1</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button raised grey narrow label-blue">
|
||||
<div class="center" fit>+1</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button raised grey narrow label-red">
|
||||
<div class="center" fit>+1</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="icon-button">
|
||||
<core-icon icon="menu"></core-icon>
|
||||
<paper-ripple class="circle recenteringTouch" fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="icon-button">
|
||||
<core-icon icon="more-vert"></core-icon>
|
||||
<paper-ripple class="circle recenteringTouch" fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="icon-button red">
|
||||
<core-icon icon="delete"></core-icon>
|
||||
<paper-ripple class="circle recenteringTouch" fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="icon-button blue">
|
||||
<core-icon icon="account-box"></core-icon>
|
||||
<paper-ripple class="circle recenteringTouch" fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="fab red">
|
||||
<core-icon icon="add"></core-icon>
|
||||
<paper-ripple class="circle recenteringTouch" fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="fab blue">
|
||||
<core-icon icon="mail"></core-icon>
|
||||
<paper-ripple class="circle recenteringTouch" fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="fab green">
|
||||
<core-icon icon="create"></core-icon>
|
||||
<paper-ripple class="circle recenteringTouch" fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section>
|
||||
|
||||
<div class="menu">
|
||||
|
||||
<div class="item">
|
||||
<div class="label" fit>Mark as unread</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Mark as important</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Add to Tasks</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Create event</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="menu blue">
|
||||
|
||||
<div class="item">
|
||||
<div class="label" fit>Import</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Export</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Print</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label" fit>Restore contacts</div>
|
||||
<paper-ripple fit></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 fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
<div class="button">
|
||||
<div class="center" fit>DECLINE</div>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
||||
<paper-ripple class="recenteringTouch" fit></paper-ripple>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card image">
|
||||
|
||||
<paper-ripple class="recenteringTouch" fit></paper-ripple>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
22
bower_components/paper-ripple/index.html
vendored
Normal file
22
bower_components/paper-ripple/index.html
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
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
|
||||
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>
|
||||
|
||||
<script src="../webcomponentsjs/webcomponents.js"></script>
|
||||
<link rel="import" href="../core-component-page/core-component-page.html">
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<core-component-page></core-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
20
bower_components/paper-ripple/metadata.html
vendored
Normal file
20
bower_components/paper-ripple/metadata.html
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
<!--
|
||||
@license
|
||||
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
|
||||
-->
|
||||
<x-meta id="paper-ripple" label="Ripple" group="Paper">
|
||||
|
||||
<template>
|
||||
<paper-ripple style="width: 300px; height: 300px;"></paper-ripple>
|
||||
</template>
|
||||
|
||||
<template id="imports">
|
||||
<link rel="import" href="paper-ripple.html">
|
||||
</template>
|
||||
|
||||
</x-meta>
|
||||
477
bower_components/paper-ripple/paper-ripple.html
vendored
Normal file
477
bower_components/paper-ripple/paper-ripple.html
vendored
Normal file
@@ -0,0 +1,477 @@
|
||||
<!--
|
||||
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.
|
||||
|
||||
By default, the ripple is centered on the point of contact. Apply `recenteringTouch`
|
||||
class to have the ripple grow toward the center of its container.
|
||||
|
||||
<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
|
||||
-->
|
||||
|
||||
<!--
|
||||
Fired when the animation finishes. This is useful if you want to wait until the ripple
|
||||
animation finishes to perform some action.
|
||||
|
||||
@event core-transitionend
|
||||
@param {Object} detail
|
||||
@param {Object} detail.node The animated node
|
||||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html" >
|
||||
|
||||
<polymer-element name="paper-ripple" attributes="initialOpacity opacityDecayVelocity">
|
||||
<template>
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
border-radius: inherit;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:host-context([noink]) {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#bg, #waves, .wave-container, .wave {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#bg, .wave {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#waves, .wave {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wave-container, .wave {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
:host(.circle) #bg,
|
||||
:host(.circle) #waves {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
:host(.circle) .wave-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="bg"></div>
|
||||
<div id="waves">
|
||||
</div>
|
||||
|
||||
</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.
|
||||
return waveOpacity < 0.01 && radius >= Math.min(wave.maxRadius, waveMaxRadius);
|
||||
};
|
||||
|
||||
function waveAtMaximum(wave, radius, anim) {
|
||||
var waveOpacity = waveOpacityFn(wave.tDown, wave.tUp, anim);
|
||||
|
||||
return waveOpacity >= anim.initialOpacity && radius >= Math.min(wave.maxRadius, waveMaxRadius);
|
||||
}
|
||||
|
||||
//
|
||||
// DRAWING
|
||||
//
|
||||
function drawRipple(ctx, x, y, radius, innerAlpha, outerAlpha) {
|
||||
// Only animate opacity and transform
|
||||
if (outerAlpha !== undefined) {
|
||||
ctx.bg.style.opacity = outerAlpha;
|
||||
}
|
||||
ctx.wave.style.opacity = innerAlpha;
|
||||
|
||||
var s = radius / (ctx.containerSize / 2);
|
||||
var dx = x - (ctx.containerWidth / 2);
|
||||
var dy = y - (ctx.containerHeight / 2);
|
||||
|
||||
ctx.wc.style.webkitTransform = 'translate3d(' + dx + 'px,' + dy + 'px,0)';
|
||||
ctx.wc.style.transform = 'translate3d(' + dx + 'px,' + dy + 'px,0)';
|
||||
|
||||
// 2d transform for safari because of border-radius and overflow:hidden clipping bug.
|
||||
// https://bugs.webkit.org/show_bug.cgi?id=98538
|
||||
ctx.wave.style.webkitTransform = 'scale(' + s + ',' + s + ')';
|
||||
ctx.wave.style.transform = 'scale3d(' + s + ',' + s + ',1)';
|
||||
}
|
||||
|
||||
//
|
||||
// SETUP
|
||||
//
|
||||
function createWave(elem) {
|
||||
var elementStyle = window.getComputedStyle(elem);
|
||||
var fgColor = elementStyle.color;
|
||||
|
||||
var inner = document.createElement('div');
|
||||
inner.style.backgroundColor = fgColor;
|
||||
inner.classList.add('wave');
|
||||
|
||||
var outer = document.createElement('div');
|
||||
outer.classList.add('wave-container');
|
||||
outer.appendChild(inner);
|
||||
|
||||
var container = elem.$.waves;
|
||||
container.appendChild(outer);
|
||||
|
||||
elem.$.bg.style.backgroundColor = fgColor;
|
||||
|
||||
var wave = {
|
||||
bg: elem.$.bg,
|
||||
wc: outer,
|
||||
wave: inner,
|
||||
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);
|
||||
// FIXME cache nodes
|
||||
wave.wc.remove();
|
||||
}
|
||||
};
|
||||
|
||||
// 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'
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this.waves = [];
|
||||
},
|
||||
|
||||
downAction: function(e) {
|
||||
var wave = createWave(this);
|
||||
|
||||
this.cancelled = false;
|
||||
wave.isMouseDown = true;
|
||||
wave.tDown = 0.0;
|
||||
wave.tUp = 0.0;
|
||||
wave.mouseUpStart = 0.0;
|
||||
wave.mouseDownStart = now();
|
||||
|
||||
var rect = this.getBoundingClientRect();
|
||||
var width = rect.width;
|
||||
var height = rect.height;
|
||||
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.containerWidth = width;
|
||||
wave.containerHeight = height;
|
||||
wave.maxRadius = distanceFromPointToFurthestCorner(wave.startPosition, {w: width, h: height});
|
||||
|
||||
// The wave is circular so constrain its container to 1:1
|
||||
wave.wc.style.top = (wave.containerHeight - wave.containerSize) / 2 + 'px';
|
||||
wave.wc.style.left = (wave.containerWidth - wave.containerSize) / 2 + 'px';
|
||||
wave.wc.style.width = wave.containerSize + 'px';
|
||||
wave.wc.style.height = wave.containerSize + 'px';
|
||||
|
||||
this.waves.push(wave);
|
||||
|
||||
if (!this._loop) {
|
||||
this._loop = this.animate.bind(this, {
|
||||
width: width,
|
||||
height: height
|
||||
});
|
||||
requestAnimationFrame(this._loop);
|
||||
}
|
||||
// else there is already a rAF
|
||||
},
|
||||
|
||||
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;
|
||||
|
||||
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.height,
|
||||
width: ctx.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(wave, x, y, radius, waveAlpha, bgFillAlpha);
|
||||
|
||||
// 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;
|
||||
// keep rendering dissipating wave when at maximum radius on upAction
|
||||
var shouldRenderWaveAgain = wave.mouseUpStart ? !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 && this._loop) {
|
||||
// clear the background color
|
||||
this.$.bg.style.backgroundColor = null;
|
||||
this._loop = null;
|
||||
this.fire('core-transitionend');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
||||
</polymer-element>
|
||||
24
bower_components/paper-ripple/test/index.html
vendored
Normal file
24
bower_components/paper-ripple/test/index.html
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
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
|
||||
-->
|
||||
<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([
|
||||
'position.html'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
109
bower_components/paper-ripple/test/position.html
vendored
Normal file
109
bower_components/paper-ripple/test/position.html
vendored
Normal file
@@ -0,0 +1,109 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<title>paper-ripple position tests</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents.js"></script>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<script src="../../polymer-gestures/test/js/fake.js"></script>
|
||||
|
||||
<link href="../paper-ripple.html" rel="import">
|
||||
|
||||
<style>
|
||||
.ripple-container {
|
||||
border: 1px solid black;
|
||||
position: relative;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.ripple-container > span {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ripple-1 {
|
||||
width: 320px;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.ripple-1-tap {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.ripple-2 {
|
||||
width: 480px;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.ripple-2-tap {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ripple-3 {
|
||||
width: 320px;
|
||||
height: 320px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
<div class="ripple-container ripple-1" layout vertical center>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
<span class="ripple-1-tap">tap here</span>
|
||||
</div>
|
||||
|
||||
<div class="ripple-container ripple-2" layout horizontal center>
|
||||
<paper-ripple fit></paper-ripple>
|
||||
<span class="ripple-2-tap">tap here</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var fake = new Fake();
|
||||
|
||||
function centerOf(node) {
|
||||
var rect = node.getBoundingClientRect();
|
||||
return {x: rect.left + rect.width / 2, y: rect.top + rect.height / 2};
|
||||
}
|
||||
|
||||
function approxEqual(p1, p2) {
|
||||
return Math.floor(p1.x) == Math.floor(p2.x) && Math.floor(p1.y) == Math.floor(p2.y);
|
||||
}
|
||||
|
||||
test('tall container', function(done) {
|
||||
var ripple1 = document.querySelector('.ripple-1-tap');
|
||||
fake.downOnNode(ripple1, function() {
|
||||
requestAnimationFrame(function() {
|
||||
var wave = document.querySelector('.ripple-1 /deep/ .wave');
|
||||
assert.ok(approxEqual(centerOf(ripple1), centerOf(wave)));
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('wide container', function(done) {
|
||||
var ripple2 = document.querySelector('.ripple-2-tap');
|
||||
fake.downOnNode(ripple2, function() {
|
||||
requestAnimationFrame(function() {
|
||||
var wave = document.querySelector('.ripple-2 /deep/ .wave');
|
||||
assert.ok(approxEqual(centerOf(ripple2), centerOf(wave)));
|
||||
done();
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user