cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

remove unused components

Browse Source
This commit is contained in:
Luke Pulverenti 2016-07-11 02:09:52 -04:00
parent 91c2c391a4
commit c2a85cce55
70 changed files with 0 additions and 5737 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
dashboard-ui/bower_components/emby-collapsible/emby-collapsible.html vendored
View File

@ -1,171 +0,0 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="../neon-animation/animations/transform-animation.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<iron-iconset-svg name="emby-collapsible-icons" size="24">
<svg>
<defs>
<g id="expand-less"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" /></g>
<g id="expand-more"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" /></g>
</defs>
</svg>
</iron-iconset-svg>
<dom-module id="emby-collapsible">
<template>
<style>
iron-collapse {
padding-left: 16px;
padding-right: 16px;
}
:host:not([icon]) #titleIcon {
display: none !important;
}
:host #titleIcon {
margin-right: 1em;
}
:host #expandButton {
margin: 0;
display: flex;
align-items: center;
}
</style>
<div>
<button is="emby-button" type="button" on-click="toggleExpand" id="expandButton" class="emby-collapsible-button block">
<iron-icon id="titleIcon" icon="[[icon]]" style="[[iconstyle]]"></iron-icon>
<h3 class="emby-collapsible-title" title="[[title]]">[[title]]</h3>
<iron-icon id="expandIcon" style="margin-left: auto; margin-right: .5em;"></iron-icon>
</button>
<iron-collapse id="contentCollapse" class="emby-collapsible-content" opened="{{expanded}}">
<content></content>
</iron-collapse>
</div>
</template>
<script>
Polymer({
is: 'emby-collapsible',
behaviors: [Polymer.NeonAnimationRunnerBehavior],
properties: {
expanded: {
type: Boolean,
value: false,
notify: true,
observer: '_expandedChanged'
},
expandMoreTitle: {
type: String,
value: "Show More"
},
expandLessTitle: {
type: String,
value: "Show Less"
},
enableRotateAnimation: {
type: Boolean,
value: true
},
expandMoreIcon: {
type: String,
value: "expand-more"
},
expandLessIcon: {
type: String,
value: "expand-less"
},
animationConfig: {
value: function () {
return {
'rotateIcon': {
name: 'transform-animation',
node: this.$.expandIcon,
transformOrigin: "50% 50%",
transformFrom: "rotate(0)",
transformTo: "rotate(180deg)",
timing: { duration: 350 }
}
}
}
}
},
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
_onNeonAnimationFinish: function () {
if (this.expanded) {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
}
else {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
}
},
// Fires when an instance of the element is created
created: function () { },
// Fires when the local DOM has been fully prepared
ready: function () {
//Set initial icon
if (this.expanded) {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
}
else {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
}
//Set initial title
if (this.expanded) {
this.$.expandButton.title = this.expandLessTitle;
}
else {
this.$.expandButton.title = this.expandMoreTitle;
}
},
// Fires when the element was inserted into the document
attached: function () { },
// Fires when the element was removed from the document
detached: function () { },
// Fires when an attribute was added, removed, or updated
_expandedChanged: function (newVal, oldVal) {
//If icon is already set no need to animate!
if ((newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-less")) || (!newVal && (this.$.expandIcon.icon == "emby-collapsible-icons:expand-more"))) {
return;
}
//Set title
if (newVal) {
this.$.expandButton.title = this.expandLessTitle;
}
else {
this.$.expandButton.title = this.expandMoreTitle;
}
if (this.enableRotateAnimation) {
//Play rotate animation
this.cancelAnimation();
this.playAnimation('rotateIcon');
}
else {
if (this.expanded) {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-less";
}
else {
this.$.expandIcon.icon = "emby-collapsible-icons:expand-more";
}
}
},
toggleExpand: function () {
this.expanded = !this.expanded;
}
});
</script>
</dom-module>

61
dashboard-ui/bower_components/neon-animation/.bower.json vendored
View File

@ -1,61 +0,0 @@
{
"name": "neon-animation",
"description": "A system for animating Polymer-based web components",
"version": "1.2.3",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"web-component",
"polymer",
"web-animations"
],
"main": [
"neon-animated-pages.html",
"neon-animatable-behavior.html",
"neon-animation-behavior.html",
"neon-animation-runner-behavior.html",
"neon-shared-element-animatable-behavior.html",
"neon-shared-element-animation-behavior.html",
"neon-animatable.html",
"neon-animations.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/neon-animation"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/neon-animation",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-meta": "PolymerElements/iron-meta#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"web-animations-js": "web-animations/web-animations-js#^2.2.0"
},
"devDependencies": {
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
},
"_release": "1.2.3",
"_resolution": {
"type": "version",
"tag": "v1.2.3",
"commit": "c50d51e62825f4aa53f10e93f746796a174af232"
},
"_source": "git://github.com/PolymerElements/neon-animation.git",
"_target": "^1.2.2",
"_originalSource": "PolymerElements/neon-animation"
}

33
dashboard-ui/bower_components/neon-animation/.github/ISSUE_TEMPLATE.md vendored
View File

@ -1,33 +0,0 @@
<!-- Instructions: https://github.com/PolymerElements/neon-animation/CONTRIBUTING.md#filing-issues -->
### Description
<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
### Expected outcome
<!-- Example: The page stays the same color. -->
### Actual outcome
<!-- Example: The page turns pink. -->
### Live Demo
<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
### Steps to reproduce
<!-- Example
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
-->
### Browsers Affected
<!-- Check all that apply -->
- [ ] Chrome
- [ ] Firefox
- [ ] Safari 9
- [ ] Safari 8
- [ ] Safari 7
- [ ] Edge
- [ ] IE 11
- [ ] IE 10

1
dashboard-ui/bower_components/neon-animation/.gitignore vendored
View File

@ -1 +0,0 @@
bower_components

23
dashboard-ui/bower_components/neon-animation/.travis.yml vendored
View File

@ -1,23 +0,0 @@
language: node_js
sudo: required
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
packages:
- google-chrome-stable
sauce_connect: true
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
env:
global:
- secure: AnPpB3uzTWU0hmrDmPyOb/3mJZRv4BgPFJrpaT/mQ/9979IBeFfFHJX6MqQlgo894lJWvKSvAjEutgK5Z3LQh6cLB3JuhPBInwKgFPUx/V14VIju+Z7jwx6RycE3flb2f9Y6y5My13ovswsTNnhJEkpDGlbRnJlh5c+HeP+6D0oFPFaGWvULZsAHQnEykir1TMPL2TD8SfuYWifmBj7QYQ2vsYnqZoAkPNedv/OtdoA3rziFXSG3GqXX2NJVnYqlaLj/HiHK7xLlZu/ODfo6En12DMtqJajBP7NfJkEUAF72ScOsYxlwiI1aYcVSUy6upkxxPwkBj5x7wDZ0tRFmlautyq2skDAh/fgIfRw9AMe8kj/YLef+T8bmZNT9IIelNaNcpfTQHpYWcOpPk2uBT3iIOcmp+Ys8RZKqzYmekBtHTwCGmQcfQrjBXjrjz5xlUaoMH7vauh7Ct7SkD7Fu87XSUvks4v2yypxxmHXO8jUilKuUdtAzb3dtOboO0ptsoLuBm/qSeURco4be6KPyVnDxdWdbYOxIZtE8JeY2DbonS45OgFtL1NKeEIhiTQIcOuSs0qwJFFzaBBAfek1tkTvBhMJP3JPWpIbNJhdZWzSd0LUSe892sbiZJY67FA4xcY8vK5JZNWnxFyKX1+A8ljPEd1yBImxMzUDMNS9t0G0=
- secure: jdh0G/FDRghnjasav0/8nOZsYgXUd5DLKgD5XrDCVrBvPwXly+AnMXE+Hr/bztEXylcEmcqrWUUfB1ODUdVn1EGk8CJaYpHyKcoMcpJiEjHYS/3i1rXRsnHs2o3dcRO69rA8A5LZeG3yYfiPVUiKlyl7MWOal3pNohDGi8dZcT0CoWnA8UaV//0uXG3GGG3X8KcbVfB2hQvG1mK6wM6W4eHVOplcBaE2xnnFDMxfU2KnRgjLSPw66PeJGczWOBR9fZql9p6kV38ZM2s4qnUsMlTZkNqn0f6CuEPqcG6+S6Tk9+0dvAHet+Ky9fgiyJPq+p6sDGfdm1ZJwOjz5MoyudzGSuHAJHH2nscQf8pUBQ1gxKaGg7GV9LUj0cjLDAFWA2KpxTlabDZhZPIMoMKFpqpvJG49gDVga5gGabom21nd/+E1i/2vvoP16kY9rjf+Gd5+tIzajXCu8Tq06Xz63idZDJbt38GjArfFFqe5k7CqE+m2vpWx/iTwe+cT70wnIq/xigvaNq6CgUuNdzkVnVBj/C7yVqwwZkfbBC7HhRna9Nyzts/j2M2vwy0oYB73WzuhpYSweaAOZq2kcUIQ5ZMGO3UkZRjwWnHxAi5mrvZhRcRIqkvJJhoMQnjwJSTah/3cz0cJh19DL+Ozde24/tuY+vOnhFb+ddo1OKD6FtM=
dist: trusty

77
dashboard-ui/bower_components/neon-animation/CONTRIBUTING.md vendored
View File

@ -1,77 +0,0 @@
<!--
This file is autogenerated based on
https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
If you edit that file, it will get updated everywhere else.
If you edit this file, your changes will get overridden :)
You can however override the jsbin link with one that's customized to this
specific element:
jsbin=https://jsbin.com/cagaye/edit?html,output
-->
# Polymer Elements
## Guide for Contributors
Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
### Filing Issues
**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
1. **Who will use the feature?** _“As someone filling out a form…”_
2. **When will they use the feature?** _“When I enter an invalid value…”_
3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
**If you are filing an issue to report a bug**, please provide:
1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
```markdown
The `paper-foo` element causes the page to turn pink when clicked.
## Expected outcome
The page stays the same color.
## Actual outcome
The page turns pink.
## Steps to reproduce
1. Put a `paper-foo` element in the page.
2. Open the page in a web browser.
3. Click the `paper-foo` element.
```
2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
### Submitting Pull Requests
**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
When submitting pull requests, please provide:
1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
```markdown
(For a single issue)
Fixes #20
(For multiple issues)
Fixes #32, fixes #40
```
2. **A succinct description of the design** used to fix any related issues. For example:
```markdown
This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
```
3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!

95
dashboard-ui/bower_components/neon-animation/animations/cascaded-animation.html vendored
View File

@ -1,95 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<cascaded-animation>` applies an animation on an array of elements with a delay between each.
the delay defaults to 50ms.
Configuration:
```
{
name: 'cascaded-animation',
animation: <animation-name>,
nodes: <array-of-nodes>,
nodeDelay: <node-delay-in-ms>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'cascaded-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
/**
* @param {{
* animation: string,
* nodes: !Array<!Element>,
* nodeDelay: (number|undefined),
* timing: (Object|undefined)
* }} config
*/
configure: function(config) {
this._animations = [];
var nodes = config.nodes;
var effects = [];
var nodeDelay = config.nodeDelay || 50;
config.timing = config.timing || {};
config.timing.delay = config.timing.delay || 0;
var oldDelay = config.timing.delay;
var abortedConfigure;
for (var node, index = 0; node = nodes[index]; index++) {
config.timing.delay += nodeDelay;
config.node = node;
var animation = document.createElement(config.animation);
if (animation.isNeonAnimation) {
var effect = animation.configure(config);
this._animations.push(animation);
effects.push(effect);
} else {
console.warn(this.is + ':', config.animation, 'not found!');
abortedConfigure = true;
break;
}
}
config.timing.delay = oldDelay;
config.node = null;
// if a bad animation was configured, abort config.
if (abortedConfigure) {
return;
}
this._effect = new GroupEffect(effects);
return this._effect;
},
complete: function() {
for (var animation, index = 0; animation = this._animations[index]; index++) {
animation.complete(animation.config);
}
}
});
</script>

49
dashboard-ui/bower_components/neon-animation/animations/fade-in-animation.html vendored
View File

@ -1,49 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<fade-in-animation>` animates the opacity of an element from 0 to 1.
Configuration:
```
{
name: 'fade-in-animation',
node: <node>
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'fade-in-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'opacity': '0'},
{'opacity': '1'}
], this.timingFromConfig(config));
return this._effect;
}
});
</script>

49
dashboard-ui/bower_components/neon-animation/animations/fade-out-animation.html vendored
View File

@ -1,49 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<fade-out-animation>` animates the opacity of an element from 1 to 0.
Configuration:
```
{
name: 'fade-out-animation',
node: <node>
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'fade-out-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'opacity': '1'},
{'opacity': '0'}
], this.timingFromConfig(config));
return this._effect;
}
});
</script>

83
dashboard-ui/bower_components/neon-animation/animations/hero-animation.html vendored
View File

@ -1,83 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-shared-element-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<hero-animation>` is a shared element animation that scales and transform an element such that it
appears to be shared between two pages. Use this in `<neon-animated-pages>`. The source page
should use this animation in an 'exit' animation and set the `fromPage` configuration property to
itself, and the destination page should use this animation in an `entry` animation and set the
`toPage` configuration property to itself. They should also define the hero elements in the
`sharedElements` property (not a configuration property, see
`Polymer.NeonSharedElementAnimatableBehavior`).
Configuration:
```
{
name: 'hero-animation',
id: <shared-element-id>,
timing: <animation-timing>,
toPage: <node>, /* define for the destination page */
fromPage: <node>, /* define for the source page */
}
```
-->
<script>
Polymer({
is: 'hero-animation',
behaviors: [
Polymer.NeonSharedElementAnimationBehavior
],
configure: function(config) {
var shared = this.findSharedElements(config);
if (!shared) {
return;
}
var fromRect = shared.from.getBoundingClientRect();
var toRect = shared.to.getBoundingClientRect();
var deltaLeft = fromRect.left - toRect.left;
var deltaTop = fromRect.top - toRect.top;
var deltaWidth = fromRect.width / toRect.width;
var deltaHeight = fromRect.height / toRect.height;
this._effect = new KeyframeEffect(shared.to, [
{'transform': 'translate(' + deltaLeft + 'px,' + deltaTop + 'px) scale(' + deltaWidth + ',' + deltaHeight + ')'},
{'transform': 'none'}
], this.timingFromConfig(config));
this.setPrefixedProperty(shared.to, 'transformOrigin', '0 0');
shared.to.style.zIndex = 10000;
shared.from.style.visibility = 'hidden';
return this._effect;
},
complete: function(config) {
var shared = this.findSharedElements(config);
if (!shared) {
return null;
}
shared.to.style.zIndex = '';
shared.from.style.visibility = '';
}
});
</script>

46
dashboard-ui/bower_components/neon-animation/animations/opaque-animation.html vendored
View File

@ -1,46 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<opaque-animation>` makes an element `opacity:1` for the duration of the animation. Used to prevent
webkit/safari from drawing a frame before an animation for elements that animate from display:none.
-->
<script>
Polymer({
is: 'opaque-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'opacity': '1'},
{'opacity': '1'}
], this.timingFromConfig(config));
node.style.opacity = '0';
return this._effect;
},
complete: function(config) {
config.node.style.opacity = '';
}
});
</script>

87
dashboard-ui/bower_components/neon-animation/animations/reverse-ripple-animation.html vendored
View File

@ -1,87 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-shared-element-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<reverse-ripple-animation>` scales and transform an element such that it appears to ripple down from this element, to either
a shared element, or a screen position.
If using as a shared element animation in `<neon-animated-pages>`, use this animation in an `exit`
animation in the source page and in an `entry` animation in the destination page. Also, define the
reverse-ripple elements in the `sharedElements` property (not a configuration property, see
`Polymer.NeonSharedElementAnimatableBehavior`).
If using a screen position, define the `gesture` property.
Configuration:
```
{
name: 'reverse-ripple-animation`.
id: <shared-element-id>, /* set this or gesture */
gesture: {x: <page-x>, y: <page-y>}, /* set this or id */
timing: <animation-timing>,
toPage: <node>, /* define for the destination page */
fromPage: <node>, /* define for the source page */
}
```
-->
<script>
Polymer({
is: 'reverse-ripple-animation',
behaviors: [
Polymer.NeonSharedElementAnimationBehavior
],
configure: function(config) {
var shared = this.findSharedElements(config);
if (!shared) {
return null;
}
var translateX, translateY;
var fromRect = shared.from.getBoundingClientRect();
if (config.gesture) {
translateX = config.gesture.x - (fromRect.left + (fromRect.width / 2));
translateY = config.gesture.y - (fromRect.top + (fromRect.height / 2));
} else {
var toRect = shared.to.getBoundingClientRect();
translateX = (toRect.left + (toRect.width / 2)) - (fromRect.left + (fromRect.width / 2));
translateY = (toRect.top + (toRect.height / 2)) - (fromRect.top + (fromRect.height / 2));
}
var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
var size = Math.max(fromRect.width + Math.abs(translateX) * 2, fromRect.height + Math.abs(translateY) * 2);
var diameter = Math.sqrt(2 * size * size);
var scaleX = diameter / fromRect.width;
var scaleY = diameter / fromRect.height;
var scale = 'scale(' + scaleX + ',' + scaleY + ')';
this._effect = new KeyframeEffect(shared.from, [
{'transform': translate + ' ' + scale},
{'transform': translate + ' scale(0)'}
], this.timingFromConfig(config));
this.setPrefixedProperty(shared.from, 'transformOrigin', '50% 50%');
shared.from.style.borderRadius = '50%';
return this._effect;
},
complete: function() {
if (this.sharedElements) {
this.setPrefixedProperty(this.sharedElements.from, 'transformOrigin', '');
this.sharedElements.from.style.borderRadius = '';
}
}
});
</script>

93
dashboard-ui/bower_components/neon-animation/animations/ripple-animation.html vendored
View File

@ -1,93 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-shared-element-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<ripple-animation>` scales and transform an element such that it appears to ripple from either
a shared element, or from a screen position, to full screen.
If using as a shared element animation in `<neon-animated-pages>`, use this animation in an `exit`
animation in the source page and in an `entry` animation in the destination page. Also, define the
hero elements in the `sharedElements` property (not a configuration property, see
`Polymer.NeonSharedElementAnimatableBehavior`).
If using a screen position, define the `gesture` property.
Configuration:
```
{
name: 'ripple-animation`.
id: <shared-element-id>, /* set this or gesture */
gesture: {x: <page-x>, y: <page-y>}, /* set this or id */
timing: <animation-timing>,
toPage: <node>, /* define for the destination page */
fromPage: <node>, /* define for the source page */
}
```
-->
<script>
Polymer({
is: 'ripple-animation',
behaviors: [
Polymer.NeonSharedElementAnimationBehavior
],
configure: function(config) {
var shared = this.findSharedElements(config);
if (!shared) {
return null;
}
var translateX, translateY;
var toRect = shared.to.getBoundingClientRect();
if (config.gesture) {
translateX = config.gesture.x - (toRect.left + (toRect.width / 2));
translateY = config.gesture.y - (toRect.top + (toRect.height / 2));
} else {
var fromRect = shared.from.getBoundingClientRect();
translateX = (fromRect.left + (fromRect.width / 2)) - (toRect.left + (toRect.width / 2));
translateY = (fromRect.top + (fromRect.height / 2)) - (toRect.top + (toRect.height / 2));
}
var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
var size = Math.max(toRect.width + Math.abs(translateX) * 2, toRect.height + Math.abs(translateY) * 2);
var diameter = Math.sqrt(2 * size * size);
var scaleX = diameter / toRect.width;
var scaleY = diameter / toRect.height;
var scale = 'scale(' + scaleX + ',' + scaleY + ')';
this._effect = new KeyframeEffect(shared.to, [
{'transform': translate + ' scale(0)'},
{'transform': translate + ' ' + scale}
], this.timingFromConfig(config));
this.setPrefixedProperty(shared.to, 'transformOrigin', '50% 50%');
shared.to.style.borderRadius = '50%';
return this._effect;
},
complete: function() {
if (this.sharedElements) {
this.setPrefixedProperty(this.sharedElements.to, 'transformOrigin', '');
this.sharedElements.to.style.borderRadius = '';
}
}
});
</script>

65
dashboard-ui/bower_components/neon-animation/animations/scale-down-animation.html vendored
View File

@ -1,65 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<scale-down-animation>` animates the scale transform of an element from 1 to 0. By default it
scales in both the x and y axes.
Configuration:
```
{
name: 'scale-down-animation',
node: <node>,
axis: 'x' | 'y' | '',
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'scale-down-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
var scaleProperty = 'scale(0, 0)';
if (config.axis === 'x') {
scaleProperty = 'scale(0, 1)';
} else if (config.axis === 'y') {
scaleProperty = 'scale(1, 0)';
}
this._effect = new KeyframeEffect(node, [
{'transform': 'scale(1,1)'},
{'transform': scaleProperty}
], this.timingFromConfig(config));
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
}
return this._effect;
}
});
</script>

65
dashboard-ui/bower_components/neon-animation/animations/scale-up-animation.html vendored
View File

@ -1,65 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<scale-up-animation>` animates the scale transform of an element from 0 to 1. By default it
scales in both the x and y axes.
Configuration:
```
{
name: 'scale-up-animation',
node: <node>,
axis: 'x' | 'y' | '',
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'scale-up-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
var scaleProperty = 'scale(0)';
if (config.axis === 'x') {
scaleProperty = 'scale(0, 1)';
} else if (config.axis === 'y') {
scaleProperty = 'scale(1, 0)';
}
this._effect = new KeyframeEffect(node, [
{'transform': scaleProperty},
{'transform': 'scale(1, 1)'}
], this.timingFromConfig(config));
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
}
return this._effect;
}
});
</script>

59
dashboard-ui/bower_components/neon-animation/animations/slide-down-animation.html vendored
View File

@ -1,59 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-down-animation>` animates the transform of an element from `none` `translateY(100%)`.
The `transformOrigin` defaults to `50% 0`.
Configuration:
```
{
name: 'slide-down-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-down-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'transform': 'translateY(0%)'},
{'transform': 'translateY(100%)'}
], this.timingFromConfig(config));
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
}
return this._effect;
}
});
</script>

59
dashboard-ui/bower_components/neon-animation/animations/slide-from-bottom-animation.html vendored
View File

@ -1,59 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-from-bottom-animation>` animates the transform of an element from `none` to `translateY(100%)`.
The `transformOrigin` defaults to `50% 0`.
Configuration:
```
{
name: 'slide-from-bottom-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-from-bottom-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'transform': 'translateY(100%)'},
{'transform': 'translateY(0)'}
], this.timingFromConfig(config));
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
}
return this._effect;
}
});
</script>

60
dashboard-ui/bower_components/neon-animation/animations/slide-from-left-animation.html vendored
View File

@ -1,60 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-from-left-animation>` animates the transform of an element from
`translateX(-100%)` to `none`.
The `transformOrigin` defaults to `0 50%`.
Configuration:
```
{
name: 'slide-from-left-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-from-left-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'transform': 'translateX(-100%)'},
{'transform': 'none'}
], this.timingFromConfig(config));
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
}
return this._effect;
}
});
</script>

60
dashboard-ui/bower_components/neon-animation/animations/slide-from-right-animation.html vendored
View File

@ -1,60 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-from-right-animation>` animates the transform of an element from
`translateX(100%)` to `none`.
The `transformOrigin` defaults to `0 50%`.
Configuration:
```
{
name: 'slide-from-right-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-from-right-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'transform': 'translateX(100%)'},
{'transform': 'none'}
], this.timingFromConfig(config));
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
}
return this._effect;
}
});
</script>

59
dashboard-ui/bower_components/neon-animation/animations/slide-from-top-animation.html vendored
View File

@ -1,59 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-from-top-animation>` animates the transform of an element from `translateY(-100%)` to
`none`. The `transformOrigin` defaults to `50% 0`.
Configuration:
```
{
name: 'slide-from-top-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-from-top-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'transform': 'translateY(-100%)'},
{'transform': 'translateY(0%)'}
], this.timingFromConfig(config));
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
}
return this._effect;
}
});
</script>

59
dashboard-ui/bower_components/neon-animation/animations/slide-left-animation.html vendored
View File

@ -1,59 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-left-animation>` animates the transform of an element from `none` to `translateX(-100%)`.
The `transformOrigin` defaults to `0 50%`.
Configuration:
```
{
name: 'slide-left-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-left-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'transform': 'none'},
{'transform': 'translateX(-100%)'}
], this.timingFromConfig(config));
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
}
return this._effect;
}
});
</script>

59
dashboard-ui/bower_components/neon-animation/animations/slide-right-animation.html vendored
View File

@ -1,59 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-right-animation>` animates the transform of an element from `none` to `translateX(100%)`.
The `transformOrigin` defaults to `0 50%`.
Configuration:
```
{
name: 'slide-right-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-right-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'transform': 'none'},
{'transform': 'translateX(100%)'}
], this.timingFromConfig(config));
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '0 50%');
}
return this._effect;
}
});
</script>

59
dashboard-ui/bower_components/neon-animation/animations/slide-up-animation.html vendored
View File

@ -1,59 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-up-animation>` animates the transform of an element from `translateY(0)` to
`translateY(-100%)`. The `transformOrigin` defaults to `50% 0`.
Configuration:
```
{
name: 'slide-up-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-up-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
this._effect = new KeyframeEffect(node, [
{'transform': 'translate(0)'},
{'transform': 'translateY(-100%)'}
], this.timingFromConfig(config));
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
}
return this._effect;
}
});
</script>

70
dashboard-ui/bower_components/neon-animation/animations/transform-animation.html vendored
View File

@ -1,70 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<transform-animation>` animates a custom transform on an element. Use this to animate multiple
transform properties, or to apply a custom transform value.
Configuration:
```
{
name: 'transform-animation',
node: <node>,
transformOrigin: <transform-origin>,
transformFrom: <transform-from-string>,
transformTo: <transform-to-string>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'transform-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
/**
* @param {{
* node: !Element,
* transformOrigin: (string|undefined),
* transformFrom: (string|undefined),
* transformTo: (string|undefined),
* timing: (Object|undefined)
* }} config
*/
configure: function(config) {
var node = config.node;
var transformFrom = config.transformFrom || 'none';
var transformTo = config.transformTo || 'none';
this._effect = new KeyframeEffect(node, [
{'transform': transformFrom},
{'transform': transformTo}
], this.timingFromConfig(config));
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
}
return this._effect;
}
});
</script>

52
dashboard-ui/bower_components/neon-animation/bower.json vendored
View File

@ -1,52 +0,0 @@
{
"name": "neon-animation",
"description": "A system for animating Polymer-based web components",
"version": "1.2.3",
"authors": [
"The Polymer Authors"
],
"keywords": [
"web-components",
"web-component",
"polymer",
"web-animations"
],
"main": [
"neon-animated-pages.html",
"neon-animatable-behavior.html",
"neon-animation-behavior.html",
"neon-animation-runner-behavior.html",
"neon-shared-element-animatable-behavior.html",
"neon-shared-element-animation-behavior.html",
"neon-animatable.html",
"neon-animations.html"
],
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/neon-animation"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/neon-animation",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-meta": "PolymerElements/iron-meta#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"web-animations-js": "web-animations/web-animations-js#^2.2.0"
},
"devDependencies": {
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
}
}

166
dashboard-ui/bower_components/neon-animation/demo/card/index.html vendored
View File

@ -1,166 +0,0 @@
<!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>
<title>neon-animated-pages demo: card</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="../../../paper-styles/typography.html">
<link rel="import" href="x-card.html">
<link rel="import" href="x-cards-list.html">
<style is="custom-style">
body {
padding: 15px;
@apply(--layout-fullbleed);
@apply(--paper-font-common-base);
}
neon-animated-pages {
height: 100%;
}
.large {
width: 100%
}
.button {
text-align: center;
width: 120px;
height: 32px;
line-height: 32px;
border-radius: 2px;
font-size: 0.9em;
background-color: #fff;
color: #646464;
}
.button.blue {
background-color: #4285f4;
color: #fff;
}
.button.raised {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.button.back {
position: fixed;
top: 30px;
left: 30px;
}
.card-contents {
@apply(--layout-vertical);
@apply(--layout-center-center);
@apply(--layout-fit);
}
.button-container {
@apply(--layout-flex);
@apply(--layout-horizontal);
@apply(--layout-around-justified);
}
</style>
</head>
<body>
<template is="dom-bind">
<neon-animated-pages id="pages" selected="0">
<x-cards-list id="list">
<div class="card-contents">
<h2>Choose a subject</h2>
<div class="button-container large">
<div class="blue raised button" on-click="_onPolymerClick">
POLYMER
</div>
<div class="blue raised button" on-click="_onAngularClick">
ANGULAR
</div>
</div>
</div>
</x-cards-list>
<x-card>
<div class="card-contents">
<div class="raised back button" on-click="_onBackClick">
BACK
</div>
<h2>Polymer</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</x-card>
<x-card>
<div class="card-contents">
<div class="raised back button" on-click="_onBackClick">
BACK
</div>
<h2>Angular</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</x-card>
</neon-animated-pages>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onPolymerClick = function(event) {
this.$.list.sharedElements = {
'ripple': event.target,
'reverse-ripple': event.target
};
this.$.pages.selected = 1;
};
scope._onAngularClick = function(event) {
this.$.list.sharedElements = {
'ripple': event.target,
'reverse-ripple': event.target
};
this.$.pages.selected = 2;
};
scope._onBackClick = function(event) {
this.$.pages.selected = 0;
};
</script>
</body>
</html>

94
dashboard-ui/bower_components/neon-animation/demo/card/x-card.html vendored
View File

@ -1,94 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="x-card">
<template>
<style>
:host {
display: block;
overflow: hidden;
}
#placeholder {
opacity: 0;
background-color: grey;
@apply(--layout-fit);
}
</style>
<div id="placeholder"></div>
<div id="container">
<content select="div"></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'x-card',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
animationConfig: {
value: function() {
return {
'entry': [{
name: 'ripple-animation',
id: 'ripple',
toPage: this
}, {
name: 'fade-out-animation',
node: this.$.placeholder,
timing: {
delay: 250
}
}, {
name: 'fade-in-animation',
node: this.$.container,
timing: {
delay: 50
}
}],
'exit': [{
name: 'fade-out-animation',
node: this.$.container,
timing: {
duration: 0
}
}, {
name: 'reverse-ripple-animation',
id: 'reverse-ripple',
fromPage: this
}]
};
}
},
sharedElements: {
value: function() {
return {
'ripple': this.$.placeholder,
'reverse-ripple': this.$.placeholder
};
}
}
}
});
})();
</script>

75
dashboard-ui/bower_components/neon-animation/demo/card/x-cards-list.html vendored
View File

@ -1,75 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="x-cards-list">
<template>
<style>
:host {
display: block;
overflow: hidden;
}
#placeholder {
opacity: 0;
background-color: grey;
@apply(--layout-fit);
}
</style>
<div id="placeholder"></div>
<div id="container">
<content select="div"></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'x-cards-list',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
animationConfig: {
value: function() {
return {
'entry': [{
name: 'reverse-ripple-animation',
id: 'reverse-ripple',
toPage: this
}],
'exit': [{
name: 'fade-out-animation',
node: this.$.container,
timing: {
delay: 150,
duration: 0
}
}, {
name: 'ripple-animation',
id: 'ripple',
fromPage: this
}]
};
}
}
}
});
})();
</script>

132
dashboard-ui/bower_components/neon-animation/demo/declarative/index.html vendored
View File

@ -1,132 +0,0 @@
<!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>
<title>neon-animated-pages demo: declarative</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../paper-styles/typography.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animatable.html">
<link rel="import" href="../../neon-animations.html">
<style is="custom-style">
body {
overflow: hidden;
@apply(--layout-fullbleed);
@apply(--layout-vertical);
}
.toolbar {
position: relative;
padding: 8px;
background-color: white;
z-index: 12;
}
neon-animated-pages {
@apply(--layout-flex);
}
neon-animatable {
color: white;
@apply(--layout-horizontal);
@apply(--layout-center-center);
@apply(--paper-font-display4);
}
neon-animatable:nth-child(1) {
background: var(--paper-red-500);
}
neon-animatable:nth-child(2) {
background: var(--paper-blue-500);
}
neon-animatable:nth-child(3) {
background: var(--paper-orange-500);
}
neon-animatable:nth-child(4) {
background: var(--paper-green-500);
}
neon-animatable:nth-child(5) {
background: var(--paper-purple-500);
}
</style>
</head>
<body>
<template is="dom-bind">
<div class="toolbar">
<button on-click="_onPrevClick">&#8678;</button>
<button on-click="_onNextClick">&#8680;</button>
<button on-click="_onUpClick">&#8679;</button>
<button on-click="_onDownClick">&#8681;</button>
</div>
<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
<neon-animatable>1</neon-animatable>
<neon-animatable>2</neon-animatable>
<neon-animatable>3</neon-animatable>
<neon-animatable>4</neon-animatable>
<neon-animatable>5</neon-animatable>
</neon-animated-pages>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope.selected = 0;
scope._onPrevClick = function() {
this.entryAnimation = 'slide-from-left-animation';
this.exitAnimation = 'slide-right-animation';
this.selected = this.selected === 0 ? 4 : (this.selected - 1);
}
scope._onNextClick = function() {
this.entryAnimation = 'slide-from-right-animation';
this.exitAnimation = 'slide-left-animation';
this.selected = this.selected === 4 ? 0 : (this.selected + 1);
}
scope._onUpClick = function() {
this.entryAnimation = 'slide-from-top-animation';
this.exitAnimation = 'slide-down-animation';
this.selected = this.selected === 4 ? 0 : (this.selected + 1);
}
scope._onDownClick = function() {
this.entryAnimation = 'slide-from-bottom-animation';
this.exitAnimation = 'slide-up-animation';
this.selected = this.selected === 0 ? 4 : (this.selected - 1);
}
</script>
</body>
</html>

70
dashboard-ui/bower_components/neon-animation/demo/doc/index.html vendored
View File

@ -1,70 +0,0 @@
<!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>
<title>neon-animation demo: basic</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="my-animatable.html">
<link rel="import" href="my-dialog.html">
</head>
<style>
my-animatable {
margin-top: 50px;
}
</style>
<body>
<template is="dom-bind">
<button on-click="_onCircleButtonClick">toggle circle</button>
<button on-click="_onDialogButtonClick">toggle dialog</button>
<div style="text-align: center">
<my-dialog>Hello World!</my-dialog>
</div>
<my-animatable></my-animatable>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onCircleButtonClick = function(event) {
var node = document.querySelector('my-animatable');
if (node) {
node.animate();
}
};
scope._onDialogButtonClick = function(event) {
var node = document.querySelector('my-dialog');
if (node) {
if (node.opened) {
node.hide();
} else {
node.show();
}
}
};
</script>
</body>
</html>

68
dashboard-ui/bower_components/neon-animation/demo/doc/my-animatable.html vendored
View File

@ -1,68 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../neon-animation-runner-behavior.html">
<link rel="import" href="../../animations/scale-down-animation.html">
<dom-module id="my-animatable">
<template>
<style>
:host {
display: inline-block;
border-radius: 50%;
width: 300px;
height: 300px;
background: orange;
}
</style>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'my-animatable',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
animationConfig: {
type: Object,
value: function() {
return {
name: 'scale-down-animation',
node: this
}
}
}
},
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
animate: function() {
this.playAnimation();
},
_onNeonAnimationFinish: function() {
console.log('animation finish!');
}
});
</script>

94
dashboard-ui/bower_components/neon-animation/demo/doc/my-dialog.html vendored
View File

@ -1,94 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/shadow.html">
<link rel="import" href="../../neon-animation-runner-behavior.html">
<link rel="import" href="../../animations/scale-up-animation.html">
<link rel="import" href="../../animations/fade-out-animation.html">
<dom-module id="my-dialog">
<template>
<style>
:host {
display: none;
padding: 16px;
background: white;
color: black;
margin: 0 auto;
z-index: 100;
position: absolute;
@apply(--shadow-elevation-2dp);
}
</style>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'my-dialog',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
opened: {
type: Boolean
},
animationConfig: {
type: Object,
value: function() {
return {
'entry': [{
name: 'scale-up-animation',
node: this
}],
'exit': [{
name: 'fade-out-animation',
node: this
}]
}
}
}
},
listeners: {
'neon-animation-finish': '_onAnimationFinish'
},
_onAnimationFinish: function() {
if (!this.opened) {
this.style.display = '';
}
},
show: function() {
this.opened = true;
this.style.display = 'inline-block';
this.playAnimation('entry');
},
hide: function() {
this.opened = false;
this.playAnimation('exit');
}
});
</script>

90
dashboard-ui/bower_components/neon-animation/demo/dropdown/animated-dropdown.html vendored
View File

@ -1,90 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/shadow.html">
<link rel="import" href="../../neon-animation-runner-behavior.html">
<dom-module id="animated-dropdown">
<template>
<style>
:host {
display: none;
padding: 16px;
background: white;
color: black;
@apply(--shadow-elevation-2dp);
}
</style>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'animated-dropdown',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
animationConfig: {
type: Object,
value: function() {
return {
'entry': [{
name: 'scale-up-animation',
node: this,
transformOrigin: '0 0'
}],
'exit': [{
name: 'fade-out-animation',
node: this
}]
}
}
},
_showing: {
type: Boolean,
value: false
}
},
listeners: {
'neon-animation-finish': '_onAnimationFinish'
},
_onAnimationFinish: function() {
if (this._showing) {
} else {
this.style.display = '';
}
},
show: function() {
this.style.display = 'inline-block';
this._showing = true;
this.playAnimation('entry');
},
hide: function() {
this._showing = false;
this.playAnimation('exit');
}
});
</script>

54
dashboard-ui/bower_components/neon-animation/demo/dropdown/index.html vendored
View File

@ -1,54 +0,0 @@
<!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>
<title>neon-animated-pages demo: dropdown</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="animated-dropdown.html">
</head>
<body>
<template is="dom-bind">
<button dropdown-id="dropdown" on-click="_onButtonClick">dropdown</button>
<br>
<animated-dropdown id="dropdown" on-click="_onDropdownClick">Hello world!</animated-dropdown>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onButtonClick = function(event) {
var dropdown = document.querySelector('#' + event.target.getAttribute('dropdown-id'));
if (dropdown) {
dropdown.show();
}
};
scope._onDropdownClick = function(event) {
event.target.hide();
};
</script>
</body>
</html>

164
dashboard-ui/bower_components/neon-animation/demo/grid/animated-grid.html vendored
View File

@ -1,164 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-styles/typography.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../shared-styles.html">
<dom-module id="animated-grid">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
background: #000;
}
.tile {
display: inline-block;
float: left;
vertical-align: top;
width: calc(100% / 6);
height: calc(100% / 3);
@apply(--paper-font-title);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
.tile:nth-of-type(1) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(4) {
width: calc(100% / 3);
}
.tile:nth-of-type(5) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(8) {
width: calc(100% / 3);
height: calc(100% / 3);
}
.tile:nth-of-type(9) {
position: absolute;
top: calc(100% / 3 * 2);
left: 0;
width: calc(100% / 6);
height: calc(100% / 3);
}
.tile:nth-of-type(10) {
position: absolute;
top: calc(100% / 3 * 2);
left: calc(100% / 6);;
width: calc(100% / 6);
height: calc(100% / 3);
}
</style>
<template is="dom-repeat" items="[[config]]">
<div class$="[[_computeTileClass(item.color)]]">
<span>[[item.value]]</span>
</div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'animated-grid',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
config: {
type: Array,
value: function() {
return [
{value: 1, color: 'blue'},
{value: 2, color: 'red'},
{value: 3, color: 'blue'},
{value: 4, color: 'green'},
{value: 5, color: 'yellow'},
{value: 6, color: 'blue'},
{value: 7, color: 'red'},
{value: 8, color: 'green'},
{value: 9, color: 'yellow'},
{value: 10, color: 'red'}
]
}
},
animationConfig: {
type: Object,
value: function() {
return {
'exit': [{
name: 'ripple-animation',
id: 'ripple',
fromPage: this
}, {
name: 'hero-animation',
id: 'hero',
fromPage: this
}]
}
}
}
},
listeners: {
click: '_onClick'
},
_computeTileClass: function(color) {
return 'tile ' + color + '-300';
},
_onClick: function(event) {
var target = event.target;
while (target !== this && !target._templateInstance) {
target = target.parentNode;
}
// configure the page animation
this.sharedElements = {
'hero': target,
'ripple': target
};
this.animationConfig['exit'][0].gesture = {
x: event.x || event.pageX,
y: event.y || event.pageY
};
this.fire('tile-click', {
tile: target,
data: target._templateInstance.item
});
}
});
</script>

122
dashboard-ui/bower_components/neon-animation/demo/grid/fullsize-page-with-card.html vendored
View File

@ -1,122 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../shared-styles.html">
<dom-module id="fullsize-page-with-card">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
}
.fixed {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
.card {
position: relative;
margin: 200px 100px 0;
height: 700px;
}
</style>
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
<div id="card" class$="[[_computeCardClass(color)]]"></div>
</template>
</dom-module>
<script>
Polymer({
is: 'fullsize-page-with-card',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
color: {
type: String
},
sharedElements: {
type: Object,
value: function() {
return {
'hero': this.$.card,
'ripple': this.$.fixed
}
}
},
animationConfig: {
type: Object,
value: function() {
return {
'entry': [{
name: 'ripple-animation',
id: 'ripple',
toPage: this,
}, {
name: 'hero-animation',
id: 'hero',
toPage: this,
timing: {
delay: 150
}
}],
'exit': [{
name: 'fade-out-animation',
node: this.$.fixed
}, {
name: 'transform-animation',
transformFrom: 'none',
transformTo: 'translate(0px,-200vh) scale(0.9,1)',
node: this.$.card
}]
}
}
}
},
_computeCardClass: function(color) {
var cls = 'card';
if (color) {
cls += ' ' + color + '-300';
}
return cls;
},
_computeFixedBackgroundClass: function(color) {
var cls = 'fixed';
if (color) {
cls += ' ' + color + '-100';
}
return cls;
}
});
</script>

64
dashboard-ui/bower_components/neon-animation/demo/grid/index.html vendored
View File

@ -1,64 +0,0 @@
<!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>
<title>neon-animated-pages demo: grid</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="animated-grid.html">
<link rel="import" href="fullsize-page-with-card.html">
<style is="custom-style">
body {
overflow: hidden;
@apply(--layout-fullbleed);
}
neon-animated-pages {
height: 100%;
}
</style>
</head>
<body>
<template is="dom-bind">
<neon-animated-pages id="pages" selected="0">
<animated-grid on-tile-click="_onTileClick"></animated-grid>
<fullsize-page-with-card id="fullsize-card" on-click="_onFullsizeClick">
</fullsize-page-with-card>
</neon-animated-pages>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onTileClick = function(event) {
this.$['fullsize-card'].color = event.detail.data.color;
this.$.pages.selected = 1;
};
scope._onFullsizeClick = function(event) {
this.$.pages.selected = 0;
};
</script>
</body>
</html>

45
dashboard-ui/bower_components/neon-animation/demo/index.html vendored
View File

@ -1,45 +0,0 @@
<!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 lang="en">
<head>
<title>neon-animated pages demo</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/demo-pages.html">
</head>
<style>
a {
display: block;
margin-bottom: 10px;
}
</style>
<body unresolved>
<div class="horizontal-section-container">
<div>
<h4>Sample demos</h4>
<div class="horizontal-section">
<a href="doc/index.html">basic</a>
<a href="declarative/index.html">declarative</a>
<a href="dropdown/index.html">dropdown</a>
<a href="grid/index.html">grid</a>
<a href="list/index.html">list</a>
<a href="load/index.html">load</a>
<a href="tiles/index.html">tiles</a>
<a href="card/index.html">card</a>
</div>
</div>
</div>
</body>
</html>

118
dashboard-ui/bower_components/neon-animation/demo/list/full-view.html vendored
View File

@ -1,118 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../paper-styles/shadow.html">
<link rel="import" href="../../neon-animatable-behavior.html">
<dom-module id="full-view">
<template>
<style>
:host {
@apply(--layout-vertical);
}
.main {
background: white;
@apply(--layout-flex);
@apply(--layout-scroll);
@apply(--shadow-elevation-8dp);
}
.image-container {
position: relative;
width: 100%;
padding-bottom: 100%;
}
.image {
position: absolute;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
45deg,
#f5f5f5,
#f5f5f5 8px,
#e0e0e0 8px,
#e0e0e0 16px
);
}
</style>
<paper-toolbar class="medium-tall">
<paper-icon-button id="button" icon="clear" on-click="_onClearButtonClick"></paper-icon-button>
</paper-toolbar>
<div id="main" class="main">
<div class="image-container">
<div class="image">
</div>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'full-view',
behaviors: [
Polymer.NeonAnimatableBehavior
],
properties: {
sharedElements: {
type: Object,
value: function() {
return {
'hero': this.$.main
};
}
},
animationConfig: {
type: Object,
value: function() {
return {
'entry': [{
name: 'fade-in-animation',
node: this.$.button
}, {
name: 'hero-animation',
id: 'hero',
toPage: this
}],
'exit': [{
name: 'fade-out-animation',
node: this.$.button
}, {
name: 'scale-down-animation',
node: this.$.main,
transformOrigin: '50% 50%',
axis: 'y'
}]
}
}
}
},
_onClearButtonClick: function() {
this.fire('close');
}
});
</script>

35
dashboard-ui/bower_components/neon-animation/demo/list/index.html vendored
View File

@ -1,35 +0,0 @@
<!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>
<title>neon-animated-pages demo: list</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="list-demo.html">
</head>
<style is="custom-style">
body {
@apply(--layout-fullbleed);
}
list-demo {
@apply(--layout-fit);
}
</style>
<body>
<list-demo></list-demo>
</body>
</html>

102
dashboard-ui/bower_components/neon-animation/demo/list/list-demo.html vendored
View File

@ -1,102 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="list-view.html">
<link rel="import" href="full-view.html">
<dom-module id="list-demo">
<template>
<style>
:host {
display: block;
}
neon-animated-pages {
height: 100%;
}
</style>
<neon-animated-pages id="pages" selected="0">
<list-view data="[[fileData]]" on-item-click="_onItemClick"></list-view>
<full-view on-close="_onClose"></full-view>
</neon-animated-pages>
</template>
</dom-module>
<script>
Polymer({
is: 'list-demo',
properties: {
fileData: {
type: Array,
value: function() {
return [
{fileName: 'IMG_4130.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4131.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4132.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4133.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4134.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4135.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4136.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4137.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4138.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4139.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4140.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4141.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4142.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4143.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4144.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4145.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4146.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4147.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4148.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4149.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4150.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4151.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4152.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4153.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4154.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4155.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4156.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4157.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4158.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4159.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4160.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4161.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4162.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4163.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4164.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4165.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4166.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4167.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4168.jpg', modifiedDate: 'May 12 2015'},
{fileName: 'IMG_4169.jpg', modifiedDate: 'May 12 2015'}
]
}
}
},
_onItemClick: function() {
this.$.pages.selected = 1;
},
_onClose: function() {
this.$.pages.selected = 0;
}
});
</script>

124
dashboard-ui/bower_components/neon-animation/demo/list/list-view.html vendored
View File

@ -1,124 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-icons/iron-icons.html">
<link rel="import" href="../../../iron-icon/iron-icon.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../paper-item/paper-item.html">
<link rel="import" href="../../../paper-item/paper-item-body.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../../neon-animatable-behavior.html">
<dom-module id="list-view">
<template>
<style>
:host {
@apply(--layout-vertical);
}
.main {
@apply(--layout-flex);
@apply(--layout-scroll);
}
iron-icon {
color: var(--google-grey-500);
}
</style>
<paper-toolbar class="medium-tall">
<paper-icon-button id="button" icon="arrow-back"></paper-icon-button>
</paper-toolbar>
<div class="main">
<template is="dom-repeat" items="[[data]]">
<paper-item>
<paper-item-body two-line>
<div>[[item.fileName]]</div>
<div secondary>[[item.modifiedDate]]</div>
</paper-item-body>
<iron-icon icon="info"></iron-icon>
</paper-item>
</template>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'list-view',
behaviors: [
Polymer.NeonAnimatableBehavior
],
listeners: {
'click': '_onClick'
},
properties: {
data: {
type: Array,
value: function() {
return [];
}
},
animationConfig: {
type: Object,
value: function() {
return {
'entry': [{
name: 'fade-in-animation',
node: this.$.button
}],
'exit': [{
name: 'fade-out-animation',
node: this.$.button
}, {
name: 'hero-animation',
id: 'hero',
fromPage: this
}]
};
}
}
},
_onClick: function(event) {
var target = event.target;
while (target !== this && !target._templateInstance) {
target = target.parentNode;
}
// configure the page animation
this.sharedElements = {
'hero': target,
};
this.fire('item-click', {
item: target,
});
}
});
</script>

146
dashboard-ui/bower_components/neon-animation/demo/load/animated-grid.html vendored
View File

@ -1,146 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../../paper-styles/typography.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../shared-styles.html">
<dom-module id="animated-grid">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
background: #000;
}
.tile {
display: inline-block;
float: left;
vertical-align: top;
width: calc(100% / 6);
height: calc(100% / 3);
@apply(--paper-font-title);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
.tile:nth-of-type(1) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(4) {
width: calc(100% / 3);
}
.tile:nth-of-type(5) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(8) {
width: calc(100% / 3);
height: calc(100% / 3);
}
.tile:nth-of-type(9) {
position: absolute;
top: calc(100% / 3 * 2);
left: 0;
width: calc(100% / 6);
height: calc(100% / 3);
}
.tile:nth-of-type(10) {
position: absolute;
top: calc(100% / 3 * 2);
left: calc(100% / 6);;
width: calc(100% / 6);
height: calc(100% / 3);
}
</style>
<template is="dom-repeat" items="[[config]]">
<div class$="[[_computeTileClass(item.color)]]">
<span>[[item.value]]</span>
</div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'animated-grid',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
config: {
type: Array,
value: function() {
return [
{value: 1, color: 'blue'},
{value: 2, color: 'red'},
{value: 3, color: 'blue'},
{value: 4, color: 'green'},
{value: 5, color: 'yellow'},
{value: 6, color: 'blue'},
{value: 7, color: 'red'},
{value: 8, color: 'green'},
{value: 9, color: 'yellow'},
{value: 10, color: 'red'}
]
}
},
animationConfig: {
type: Object,
value: function() {
return {
'entry': [{
name: 'cascaded-animation',
animation: 'transform-animation',
transformFrom: 'translateY(100%)',
transformTo: 'none',
timing: {
delay: 50
}
}]
}
}
}
},
attached: function() {
this.async(function() {
var nodeList = Polymer.dom(this.root).querySelectorAll('.tile');
this.animationConfig['entry'][0].nodes = Array.prototype.slice.call(nodeList);
});
},
_computeTileClass: function(color) {
return 'tile ' + color + '-300';
}
});
</script>

82
dashboard-ui/bower_components/neon-animation/demo/load/full-page.html vendored
View File

@ -1,82 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animatable-behavior.html">
<link rel="import" href="../../neon-animation-runner-behavior.html">
<link rel="import" href="../../../paper-styles/shadow.html">
<link rel="import" href="animated-grid.html">
<dom-module id="full-page">
<template>
<style>
:host {
background: black;
visibility: hidden;
@apply(--layout-vertical);
}
.toolbar {
background: #9c27b0;
height: 72px;
z-index: 1;
@apply(--shadow-elevation-2dp);
}
animated-grid {
height: calc(100% - 72px);
@apply(--layout-flex);
}
</style>
<div id="toolbar" class="toolbar"></div>
<animated-grid id="grid"></animated-grid>
</template>
</dom-module>
<script>
Polymer({
is: 'full-page',
behaviors: [
Polymer.NeonAnimatableBehavior,
Polymer.NeonAnimationRunnerBehavior
],
properties: {
animationConfig: {
type: Object,
value: function() {
return {
'entry': [{
name: 'slide-from-top-animation',
node: this.$.toolbar
}, {
animatable: this.$.grid,
type: 'entry'
}]
};
}
}
},
show: function() {
this.style.visibility = 'visible';
this.playAnimation('entry');
}
});
</script>

48
dashboard-ui/bower_components/neon-animation/demo/load/index.html vendored
View File

@ -1,48 +0,0 @@
<!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>
<title>neon-animated-pages demo: load</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="full-page.html">
<style is="custom-style">
body {
overflow: hidden;
@apply(--layout-fullbleed);
}
full-page {
@apply(--layout-fit);
}
</style>
</head>
<body>
<full-page></full-page>
<script>
document.addEventListener('WebComponentsReady', function() {
document.querySelector('full-page').show();
});
</script>
</body>
</html>

167
dashboard-ui/bower_components/neon-animation/demo/reprojection/animated-grid.html vendored
View File

@ -1,167 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../../paper-styles/typography.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../shared-styles.html">
<dom-module id="animated-grid">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
background: #000;
}
.tile {
display: inline-block;
float: left;
vertical-align: top;
width: calc(100% / 6);
height: calc(100% / 3);
@apply(--paper-font-title);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
.tile:nth-of-type(1) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(4) {
width: calc(100% / 3);
}
.tile:nth-of-type(5) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(8) {
width: calc(100% / 3);
height: calc(100% / 3);
}
.tile:nth-of-type(9) {
position: absolute;
top: calc(100% / 3 * 2);
left: 0;
width: calc(100% / 6);
height: calc(100% / 3);
}
.tile:nth-of-type(10) {
position: absolute;
top: calc(100% / 3 * 2);
left: calc(100% / 6);;
width: calc(100% / 6);
height: calc(100% / 3);
}
</style>
<template is="dom-repeat" items="[[config]]">
<div class$="[[_computeTileClass(item.color)]]">
<span>[[item.value]]</span>
</div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'animated-grid',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
config: {
type: Array,
value: function() {
return [
{value: 1, color: 'blue'},
{value: 2, color: 'red'},
{value: 3, color: 'blue'},
{value: 4, color: 'green'},
{value: 5, color: 'yellow'},
{value: 6, color: 'blue'},
{value: 7, color: 'red'},
{value: 8, color: 'green'},
{value: 9, color: 'yellow'},
{value: 10, color: 'red'}
]
}
},
animationConfig: {
type: Object,
value: function() {
return {
'exit': [{
name: 'ripple-animation',
id: 'ripple',
fromPage: this
}, {
name: 'hero-animation',
id: 'hero',
fromPage: this
}]
}
}
}
},
listeners: {
click: '_onClick'
},
_computeTileClass: function(color) {
return 'tile ' + color + '-300';
},
_onClick: function(event) {
var target = event.target;
while (target !== this && !target._templateInstance) {
target = target.parentNode;
}
// configure the page animation
this.sharedElements = {
'hero': target,
'ripple': target
};
this.animationConfig['exit'][0].gesture = {
x: event.x,
y: event.y
};
this.fire('tile-click', {
tile: target,
data: target._templateInstance.item
});
}
});
</script>

120
dashboard-ui/bower_components/neon-animation/demo/reprojection/fullsize-page-with-card.html vendored
View File

@ -1,120 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../shared-styles.html">
<dom-module id="fullsize-page-with-card">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
}
.fixed {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
.card {
position: relative;
margin: 200px 100px 0;
height: 700px;
}
</style>
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
<div id="card" class$="[[_computeCardClass(color)]]"></div>
</template>
</dom-module>
<script>
Polymer({
is: 'fullsize-page-with-card',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
color: {
type: String
},
sharedElements: {
type: Object,
value: function() {
return {
'hero': this.$.card,
'ripple': this.$.fixed
}
}
},
animationConfig: {
type: Object,
value: function() {
return {
'entry': [{
name: 'ripple-animation',
id: 'ripple',
toPage: this,
}, {
name: 'hero-animation',
id: 'hero',
toPage: this,
timing: {
delay: 150
}
}],
'exit': [{
name: 'fade-out-animation',
node: this.$.fixed
}, {
name: 'transform-animation',
transformFrom: 'none',
transformTo: 'translate(0px,-200vh) scale(0.9,1)',
node: this.$.card
}]
}
}
}
},
_computeCardClass: function(color) {
var cls = 'card';
if (color) {
cls += ' ' + color + '-300';
}
return cls;
},
_computeFixedBackgroundClass: function(color) {
var cls = 'fixed';
if (color) {
cls += ' ' + color + '-100';
}
return cls;
}
});
</script>

63
dashboard-ui/bower_components/neon-animation/demo/reprojection/index.html vendored
View File

@ -1,63 +0,0 @@
<!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>
<title>neon-animated-pages demo: grid</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="reprojected-pages.html">
<link rel="import" href="animated-grid.html">
<link rel="import" href="fullsize-page-with-card.html">
<style is="custom-style">
body {
overflow: hidden;
@apply(--layout-fullbleed);
}
reprojected-pages {
height: 100%;
}
</style>
</head>
<body>
<template is="dom-bind">
<reprojected-pages id="pages" selected="0">
<animated-grid on-tile-click="_onTileClick"></animated-grid>
<fullsize-page-with-card id="fullsize-card" hero-id="hero" on-click="_onFullsizeClick">
</fullsize-page-with-card>
</reprojected-pages>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onTileClick = function(event) {
this.$['fullsize-card'].color = event.detail.data.color;
this.$.pages.selected = 1;
};
scope._onFullsizeClick = function(event) {
this.$.pages.selected = 0;
};
</script>
</body>
</html>

45
dashboard-ui/bower_components/neon-animation/demo/reprojection/reprojected-pages.html vendored
View File

@ -1,45 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../neon-animated-pages.html">
<dom-module id="reprojected-pages">
<template>
<style>
neon-animated-pages {
height: 100%;
}
</style>
<neon-animated-pages selected="{{selected}}">
<content></content>
</neon-animated-pages>
</template>
</dom-module>
<script>
Polymer({
is: 'reprojected-pages',
properties: {
selected: {
type: String,
notify: true
}
}
});
</script>

47
dashboard-ui/bower_components/neon-animation/demo/shared-styles.html vendored
View File

@ -1,47 +0,0 @@
<!--
@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
-->
<dom-module id="shared-styles">
<template>
<style>
.red-100 {
background: var(--google-red-100);
}
.yellow-100 {
background: var(--google-yellow-100);
}
.blue-100 {
background: var(--google-blue-100);
}
.green-100 {
background: var(--google-green-100);
}
.red-300 {
background: var(--google-red-300);
}
.yellow-300 {
background: var(--google-yellow-300);
}
.blue-300 {
background: var(--google-blue-300);
}
.green-300 {
background: var(--google-green-300);
}
</style>
</template>
</dom-module>

107
dashboard-ui/bower_components/neon-animation/demo/tiles/circles-page.html vendored
View File

@ -1,107 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="circles-page">
<template>
<style>
:host {
@apply(--layout-horizontal);
@apply(--layout-center-center);
}
.circle {
display: inline-block;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 16px;
border-radius: 50%;
background: var(--color-one);
}
</style>
<div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'circles-page',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
animationConfig: {
value: function() {
var circles = Polymer.dom(this.root).querySelectorAll('.circle');
var circlesArray = Array.prototype.slice.call(circles);
return {
'entry': [{
name: 'cascaded-animation',
animation: 'scale-up-animation',
nodes: circlesArray
}],
'exit': [{
name: 'hero-animation',
id: 'hero',
fromPage: this
}, {
name: 'cascaded-animation',
animation: 'scale-down-animation'
}]
};
}
}
},
listeners: {
'click': '_onClick'
},
_onClick: function(event) {
var target = event.target;
if (target.classList.contains('circle')) {
// configure the page animation
this.sharedElements = {
'hero': target
};
var nodesToScale = [];
var circles = Polymer.dom(this.root).querySelectorAll('.circle');
for (var node, index = 0; node = circles[index]; index++) {
if (node !== event.target) {
nodesToScale.push(node);
}
}
this.animationConfig['exit'][1].nodes = nodesToScale;
this.fire('circle-click');
}
}
});
</script>

70
dashboard-ui/bower_components/neon-animation/demo/tiles/index.html vendored
View File

@ -1,70 +0,0 @@
<!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>
<title>neon-animated-pages demo: tiles</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="circles-page.html">
<link rel="import" href="squares-page.html">
<style is="custom-style">
body {
overflow: hidden;
@apply(--layout-fullbleed);
}
neon-animated-pages {
height: 100%;
}
:root {
--color-one: var(--paper-cyan-300);
--color-two: var(--paper-orange-500);
}
</style>
</head>
<body>
<template is="dom-bind">
<neon-animated-pages id="pages" selected="0">
<circles-page on-circle-click="_onCircleClick"></circles-page>
<squares-page on-click="_onSquaresClick"></squares-page>
</neon-animated-pages>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onCircleClick = function(event) {
this.$.pages.selected = 1;
};
scope._onSquaresClick = function(event) {
this.$.pages.selected = 0;
};
</script>
</body>
</html>

100
dashboard-ui/bower_components/neon-animation/demo/tiles/squares-page.html vendored
View File

@ -1,100 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="squares-page">
<template>
<style>
.header {
height: 40%;
background: var(--color-one);
}
.body {
text-align: center;
padding: 8px;
}
.square {
display: inline-block;
width: 150px;
height: 150px;
margin: 8px;
background: var(--color-two);
}
</style>
<div id="header" class="header"></div>
<div class="body">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'squares-page',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
sharedElements: {
value: function() {
return {
'hero': this.$.header
}
}
},
animationConfig: {
value: function() {
var squares = Polymer.dom(this.root).querySelectorAll('.square');
var squaresArray = Array.prototype.slice.call(squares);
return {
'entry': [{
name: 'hero-animation',
id: 'hero',
toPage: this
}, {
name: 'cascaded-animation',
animation: 'transform-animation',
transformFrom: 'translateY(100%)',
nodes: squaresArray
}],
'exit': [{
name: 'slide-up-animation',
node: this.$.header
}, {
name: 'cascaded-animation',
animation: 'transform-animation',
transformTo: 'translateY(60vh)',
nodes: squaresArray
}]
};
}
}
}
});
</script>

314
dashboard-ui/bower_components/neon-animation/guides/neon-animation.md vendored
View File

@ -1,314 +0,0 @@
---
title: neon-animation
summary: "A short guide to neon-animation and neon-animated-pages"
tags: ['animation','core-animated-pages']
elements: ['neon-animation','neon-animated-pages']
updated: 2015-05-26
---
# neon-animation
`neon-animation` is a suite of elements and behaviors to implement pluggable animated transitions for Polymer Elements using [Web Animations](https://w3c.github.io/web-animations/).
*Warning: The API may change.*
* [A basic animatable element](#basic)
* [Animation configuration](#configuration)
* [Animation types](#configuration-types)
* [Configuration properties](#configuration-properties)
* [Using multiple animations](#configuration-multiple)
* [Running animations encapsulated in children nodes](#configuration-encapsulation)
* [Page transitions](#page-transitions)
* [Shared element animations](#shared-element)
* [Declarative page transitions](#declarative-page)
* [Included animations](#animations)
* [Demos](#demos)
<a name="basic"></a>
## A basic animatable element
Elements that can be animated should implement the `Polymer.NeonAnimatableBehavior` behavior, or `Polymer.NeonAnimationRunnerBehavior` if they're also responsible for running an animation.
```js
Polymer({
is: 'my-animatable',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
animationConfig: {
value: function() {
return {
// provided by neon-animation/animations/scale-down-animation.html
name: 'scale-down-animation',
node: this
}
}
}
},
listeners: {
// this event is fired when the animation finishes
'neon-animation-finish': '_onNeonAnimationFinish'
},
animate: function() {
// run scale-down-animation
this.playAnimation();
},
_onNeonAnimationFinish: function() {
console.log('animation done!');
}
});
```
[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/basic.html)
<a name="configuration"></a>
## Animation configuration
<a name="configuration-types"></a>
### Animation types
An element might run different animations, for example it might do something different when it enters the view and when it exits from view. You can set the `animationConfig` property to a map from an animation type to configuration.
```js
Polymer({
is: 'my-dialog',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
opened: {
type: Boolean
},
animationConfig: {
value: function() {
return {
'entry': {
// provided by neon-animation/animations/scale-up-animation.html
name: 'scale-up-animation',
node: this
},
'exit': {
// provided by neon-animation-animations/fade-out-animation.html
name: 'fade-out-animation',
node: this
}
}
}
}
},
listeners: {
'neon-animation-finish': '_onNeonAnimationFinish'
},
show: function() {
this.opened = true;
this.style.display = 'inline-block';
// run scale-up-animation
this.playAnimation('entry');
},
hide: function() {
this.opened = false;
// run fade-out-animation
this.playAnimation('exit');
},
_onNeonAnimationFinish: function() {
if (!this.opened) {
this.style.display = 'none';
}
}
});
```
[Live demo](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/doc/types.html)
You can also use the convenience properties `entryAnimation` and `exitAnimation` to set `entry` and `exit` animations:
```js
properties: {
entryAnimation: {
value: 'scale-up-animation'
},
exitAnimation: {
value: 'fade-out-animation'
}
}
```
<a name="configuration-properties"></a>
### Configuration properties
You can pass additional parameters to configure an animation in the animation configuration object.
All animations should accept the following properties:
* `name`: The name of an animation, ie. an element implementing `Polymer.NeonAnimationBehavior`.
* `node`: The target node to apply the animation to. Defaults to `this`.
* `timing`: Timing properties to use in this animation. They match the [Web Animations Animation Effect Timing interface](https://w3c.github.io/web-animations/#the-animationeffecttiming-interface). The
properties include the following:
* `duration`: The duration of the animation in milliseconds.
* `delay`: The delay before the start of the animation in milliseconds.
* `easing`: A timing function for the animation. Matches the CSS timing function values.
Animations may define additional configuration properties and they are listed in their documentation.
<a name="configuration-multiple"></a>
### Using multiple animations
Set the animation configuration to an array to combine animations, like this:
```js
animationConfig: {
value: function() {
return {
// fade-in-animation is run with a 50ms delay from slide-down-animation
'entry': [{
name: 'slide-down-animation',
node: this
}, {
name: 'fade-in-animation',
node: this,
timing: {delay: 50}
}]
}
}
}
```
<a name="configuration-encapsulation"></a>
### Running animations encapsulated in children nodes
You can include animations in the configuration that are encapsulated in a child element that implement `Polymer.NeonAnimatableBehavior` with the `animatable` property.
```js
animationConfig: {
value: function() {
return {
// run fade-in-animation on this, and the entry animation on this.$.myAnimatable
'entry': [
{name: 'fade-in-animation', node: this},
{animatable: this.$.myAnimatable, type: 'entry'}
]
}
}
}
```
<a name="page-transitions"></a>
## Page transitions
*The artist formerly known as `<core-animated-pages>`*
The `neon-animated-pages` element manages a set of pages to switch between, and runs animations between the page transitions. It implements the `Polymer.IronSelectableBehavior` behavior. Each child node should implement `Polymer.NeonAnimatableBehavior` and define the `entry` and `exit` animations. During a page transition, the `entry` animation is run on the new page and the `exit` animation is run on the old page.
<a name="shared-element"></a>
### Shared element animations
Shared element animations work on multiple nodes. For example, a "hero" animation is used during a page transition to make two elements from separate pages appear to animate as a single element. Shared element animation configurations have an `id` property that identify they belong in the same animation. Elements containing shared elements also have a `sharedElements` property defines a map from `id` to element, the element involved with the animation.
In the incoming page:
```js
properties: {
animationConfig: {
value: function() {
return {
// the incoming page defines the 'entry' animation
'entry': {
name: 'hero-animation',
id: 'hero',
toPage: this
}
}
}
},
sharedElements: {
value: function() {
return {
'hero': this.$.hero
}
}
}
}
```
In the outgoing page:
```js
properties: {
animationConfig: {
value: function() {
return {
// the outgoing page defines the 'exit' animation
'exit': {
name: 'hero-animation',
id: 'hero',
fromPage: this
}
}
}
},
sharedElements: {
value: function() {
return {
'hero': this.$.otherHero
}
}
}
}
```
<a name="declarative-page"></a>
### Declarative page transitions
For convenience, if you define the `entry-animation` and `exit-animation` attributes on `<neon-animated-pages>`, those animations will apply for all page transitions.
For example:
```js
<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<neon-animatable>1</neon-animatable>
<neon-animatable>2</neon-animatable>
<neon-animatable>3</neon-animatable>
<neon-animatable>4</neon-animatable>
<neon-animatable>5</neon-animatable>
</neon-animated-pages>
```
The new page will slide in from the right, and the old page slide away to the left.
<a name="animations"></a>
## Included animations
Single element animations:
* `fade-in-animation` Animates opacity from `0` to `1`;
* `fade-out-animation` Animates opacity from `1` to `0`;
* `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;
* `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;
* `slide-down-animation` Animates transform from `none` to `translateY(100%)`;
* `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;
* `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;
* `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;
* `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;
* `slide-right-animation` Animates transform from `none` to `translateX(100%)`;
* `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;
* `slide-from-right-animation` Animates transform from `translateX(100%)` to `none`;
* `transform-animation` Animates a custom transform.
Note that there is a restriction that only one transform animation can be applied on the same element at a time. Use the custom `transform-animation` to combine transform properties.
Shared element animations
* `hero-animation` Animates an element such that it looks like it scales and transforms from another element.
* `ripple-animation` Animates an element to full screen such that it looks like it ripples from another element.
Group animations
* `cascaded-animation` Applys an animation to an array of elements with a delay between each.
<a name="demos"></a>
## Demos
* [Grid to full screen](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/grid/index.html)
* [Animation on load](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/load/index.html)
* [List item to detail](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/list/index.html) (For narrow width)
* [Dots to squares](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/tiles/index.html)
* [Declarative](http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html)

30
dashboard-ui/bower_components/neon-animation/index.html vendored
View File

@ -1,30 +0,0 @@
<!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>neon-animation</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

150
dashboard-ui/bower_components/neon-animation/neon-animatable-behavior.html vendored
View File

@ -1,150 +0,0 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<script>
/**
* `Polymer.NeonAnimatableBehavior` is implemented by elements containing animations for use with
* elements implementing `Polymer.NeonAnimationRunnerBehavior`.
* @polymerBehavior
*/
Polymer.NeonAnimatableBehavior = {
properties: {
/**
* Animation configuration. See README for more info.
*/
animationConfig: {
type: Object
},
/**
* Convenience property for setting an 'entry' animation. Do not set `animationConfig.entry`
* manually if using this. The animated node is set to `this` if using this property.
*/
entryAnimation: {
observer: '_entryAnimationChanged',
type: String
},
/**
* Convenience property for setting an 'exit' animation. Do not set `animationConfig.exit`
* manually if using this. The animated node is set to `this` if using this property.
*/
exitAnimation: {
observer: '_exitAnimationChanged',
type: String
}
},
_entryAnimationChanged: function() {
this.animationConfig = this.animationConfig || {};
this.animationConfig['entry'] = [{
name: this.entryAnimation,
node: this
}];
},
_exitAnimationChanged: function() {
this.animationConfig = this.animationConfig || {};
this.animationConfig['exit'] = [{
name: this.exitAnimation,
node: this
}];
},
_copyProperties: function(config1, config2) {
// shallowly copy properties from config2 to config1
for (var property in config2) {
config1[property] = config2[property];
}
},
_cloneConfig: function(config) {
var clone = {
isClone: true
};
this._copyProperties(clone, config);
return clone;
},
_getAnimationConfigRecursive: function(type, map, allConfigs) {
if (!this.animationConfig) {
return;
}
if(this.animationConfig.value && typeof this.animationConfig.value === 'function') {
this._warn(this._logf('playAnimation', "Please put 'animationConfig' inside of your components 'properties' object instead of outside of it."));
return;
}
// type is optional
var thisConfig;
if (type) {
thisConfig = this.animationConfig[type];
} else {
thisConfig = this.animationConfig;
}
if (!Array.isArray(thisConfig)) {
thisConfig = [thisConfig];
}
// iterate animations and recurse to process configurations from child nodes
if (thisConfig) {
for (var config, index = 0; config = thisConfig[index]; index++) {
if (config.animatable) {
config.animatable._getAnimationConfigRecursive(config.type || type, map, allConfigs);
} else {
if (config.id) {
var cachedConfig = map[config.id];
if (cachedConfig) {
// merge configurations with the same id, making a clone lazily
if (!cachedConfig.isClone) {
map[config.id] = this._cloneConfig(cachedConfig)
cachedConfig = map[config.id];
}
this._copyProperties(cachedConfig, config);
} else {
// put any configs with an id into a map
map[config.id] = config;
}
} else {
allConfigs.push(config);
}
}
}
}
},
/**
* An element implementing `Polymer.NeonAnimationRunnerBehavior` calls this method to configure
* an animation with an optional type. Elements implementing `Polymer.NeonAnimatableBehavior`
* should define the property `animationConfig`, which is either a configuration object
* or a map of animation type to array of configuration objects.
*/
getAnimationConfig: function(type) {
var map = {};
var allConfigs = [];
this._getAnimationConfigRecursive(type, map, allConfigs);
// append the configurations saved in the map to the array
for (var key in map) {
allConfigs.push(map[key]);
}
return allConfigs;
}
};
</script>

57
dashboard-ui/bower_components/neon-animation/neon-animatable.html vendored
View File

@ -1,57 +0,0 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="neon-animatable-behavior.html">
<!--
`<neon-animatable>` is a simple container element implementing `Polymer.NeonAnimatableBehavior`. This is a convenience element for use with `<neon-animated-pages>`.
```
<neon-animated-pages selected="0"
entry-animation="slide-from-right-animation"
exit-animation="slide-left-animation">
<neon-animatable>1</neon-animatable>
<neon-animatable>2</neon-animatable>
</neon-animated-pages>
```
-->
<dom-module id="neon-animatable">
<style>
:host {
display: block;
}
</style>
<template>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'neon-animatable',
behaviors: [
Polymer.NeonAnimatableBehavior,
Polymer.IronResizableBehavior
]
});
</script>

224
dashboard-ui/bower_components/neon-animation/neon-animated-pages.html vendored
View File

@ -1,224 +0,0 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../iron-selector/iron-selectable.html">
<link rel="import" href="neon-animation-runner-behavior.html">
<link rel="import" href="animations/opaque-animation.html">
<!--
Material design: [Meaningful transitions](https://www.google.com/design/spec/animation/meaningful-transitions.html)
`neon-animated-pages` manages a set of pages and runs an animation when switching between them. Its
children pages should implement `Polymer.NeonAnimatableBehavior` and define `entry` and `exit`
animations to be run when switching to or switching out of the page.
@group Neon Elements
@element neon-animated-pages
@demo demo/index.html
-->
<dom-module id="neon-animated-pages">
<style>
:host {
display: block;
position: relative;
}
:host > ::content > * {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
:host > ::content > :not(.iron-selected):not(.neon-animating) {
display: none !important;
}
:host > ::content > .neon-animating {
pointer-events: none;
}
</style>
<template>
<content id="content"></content>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'neon-animated-pages',
behaviors: [
Polymer.IronResizableBehavior,
Polymer.IronSelectableBehavior,
Polymer.NeonAnimationRunnerBehavior
],
properties: {
activateEvent: {
type: String,
value: ''
},
// if true, the initial page selection will also be animated according to its animation config.
animateInitialSelection: {
type: Boolean,
value: false
}
},
listeners: {
'iron-select': '_onIronSelect',
'neon-animation-finish': '_onNeonAnimationFinish'
},
_onIronSelect: function(event) {
var selectedPage = event.detail.item;
// Only consider child elements.
if (this.items.indexOf(selectedPage) < 0) {
return;
}
var oldPage = this._valueToItem(this._prevSelected) || false;
this._prevSelected = this.selected;
// on initial load and if animateInitialSelection is negated, simply display selectedPage.
if (!oldPage && !this.animateInitialSelection) {
this._completeSelectedChanged();
return;
}
this.animationConfig = [];
// configure selectedPage animations.
if (this.entryAnimation) {
this.animationConfig.push({
name: this.entryAnimation,
node: selectedPage
});
} else {
if (selectedPage.getAnimationConfig) {
this.animationConfig.push({
animatable: selectedPage,
type: 'entry'
});
}
}
// configure oldPage animations iff exists.
if (oldPage) {
// cancel the currently running animation if one is ongoing.
if (oldPage.classList.contains('neon-animating')) {
this._squelchNextFinishEvent = true;
this.cancelAnimation();
this._completeSelectedChanged();
this._squelchNextFinishEvent = false;
}
// configure the animation.
if (this.exitAnimation) {
this.animationConfig.push({
name: this.exitAnimation,
node: oldPage
});
} else {
if (oldPage.getAnimationConfig) {
this.animationConfig.push({
animatable: oldPage,
type: 'exit'
});
}
}
// display the oldPage during the transition.
oldPage.classList.add('neon-animating');
}
// display the selectedPage during the transition.
selectedPage.classList.add('neon-animating');
// actually run the animations.
if (this.animationConfig.length >= 1) {
// on first load, ensure we run animations only after element is attached.
if (!this.isAttached) {
this.async(function () {
this.playAnimation(undefined, {
fromPage: null,
toPage: selectedPage
});
});
} else {
this.playAnimation(undefined, {
fromPage: oldPage,
toPage: selectedPage
});
}
} else {
this._completeSelectedChanged(oldPage, selectedPage);
}
},
/**
* @param {Object=} oldPage
* @param {Object=} selectedPage
*/
_completeSelectedChanged: function(oldPage, selectedPage) {
if (selectedPage) {
selectedPage.classList.remove('neon-animating');
}
if (oldPage) {
oldPage.classList.remove('neon-animating');
}
if (!selectedPage || !oldPage) {
var nodes = Polymer.dom(this.$.content).getDistributedNodes();
for (var node, index = 0; node = nodes[index]; index++) {
node.classList && node.classList.remove('neon-animating');
}
}
this.async(this._notifyPageResize);
},
_onNeonAnimationFinish: function(event) {
if (this._squelchNextFinishEvent) {
this._squelchNextFinishEvent = false;
return;
}
this._completeSelectedChanged(event.detail.fromPage, event.detail.toPage);
},
_notifyPageResize: function() {
var selectedPage = this.selectedItem || this._valueToItem(this.selected);
this.resizerShouldNotify = function(element) {
return element == selectedPage;
}
this.notifyResize();
}
})
})();
</script>

86
dashboard-ui/bower_components/neon-animation/neon-animation-behavior.html vendored
View File

@ -1,86 +0,0 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-meta/iron-meta.html">
<script>
/**
* Use `Polymer.NeonAnimationBehavior` to implement an animation.
* @polymerBehavior
*/
Polymer.NeonAnimationBehavior = {
properties: {
/**
* Defines the animation timing.
*/
animationTiming: {
type: Object,
value: function() {
return {
duration: 500,
easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
fill: 'both'
}
}
}
},
/**
* Can be used to determine that elements implement this behavior.
*/
isNeonAnimation: true,
/**
* Do any animation configuration here.
*/
// configure: function(config) {
// },
/**
* Returns the animation timing by mixing in properties from `config` to the defaults defined
* by the animation.
*/
timingFromConfig: function(config) {
if (config.timing) {
for (var property in config.timing) {
this.animationTiming[property] = config.timing[property];
}
}
return this.animationTiming;
},
/**
* Sets `transform` and `transformOrigin` properties along with the prefixed versions.
*/
setPrefixedProperty: function(node, property, value) {
var map = {
'transform': ['webkitTransform'],
'transformOrigin': ['mozTransformOrigin', 'webkitTransformOrigin']
};
var prefixes = map[property];
for (var prefix, index = 0; prefix = prefixes[index]; index++) {
node.style[prefix] = value;
}
node.style[property] = value;
},
/**
* Called when the animation finishes.
*/
complete: function() {}
};
</script>

116
dashboard-ui/bower_components/neon-animation/neon-animation-runner-behavior.html vendored
View File

@ -1,116 +0,0 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-meta/iron-meta.html">
<link rel="import" href="neon-animatable-behavior.html">
<script>
/**
* `Polymer.NeonAnimationRunnerBehavior` adds a method to run animations.
*
* @polymerBehavior Polymer.NeonAnimationRunnerBehavior
*/
Polymer.NeonAnimationRunnerBehaviorImpl = {
properties: {
/** @type {?Object} */
_player: {
type: Object
}
},
_configureAnimationEffects: function(allConfigs) {
var allAnimations = [];
if (allConfigs.length > 0) {
for (var config, index = 0; config = allConfigs[index]; index++) {
var animation = document.createElement(config.name);
// is this element actually a neon animation?
if (animation.isNeonAnimation) {
var effect = animation.configure(config);
if (effect) {
allAnimations.push({
animation: animation,
config: config,
effect: effect
});
}
} else {
console.warn(this.is + ':', config.name, 'not found!');
}
}
}
return allAnimations;
},
_runAnimationEffects: function(allEffects) {
return document.timeline.play(new GroupEffect(allEffects));
},
_completeAnimations: function(allAnimations) {
for (var animation, index = 0; animation = allAnimations[index]; index++) {
animation.animation.complete(animation.config);
}
},
/**
* Plays an animation with an optional `type`.
* @param {string=} type
* @param {!Object=} cookie
*/
playAnimation: function(type, cookie) {
var allConfigs = this.getAnimationConfig(type);
if (!allConfigs) {
return;
}
try {
var allAnimations = this._configureAnimationEffects(allConfigs);
var allEffects = allAnimations.map(function(animation) {
return animation.effect;
});
if (allEffects.length > 0) {
this._player = this._runAnimationEffects(allEffects);
this._player.onfinish = function() {
this._completeAnimations(allAnimations);
if (this._player) {
this._player.cancel();
this._player = null;
}
this.fire('neon-animation-finish', cookie, {bubbles: false});
}.bind(this);
return;
}
} catch (e) {
console.warn('Couldnt play', '(', type, allConfigs, ').', e);
}
this.fire('neon-animation-finish', cookie, {bubbles: false});
},
/**
* Cancels the currently running animation.
*/
cancelAnimation: function() {
if (this._player) {
this._player.cancel();
}
}
};
/** @polymerBehavior Polymer.NeonAnimationRunnerBehavior */
Polymer.NeonAnimationRunnerBehavior = [
Polymer.NeonAnimatableBehavior,
Polymer.NeonAnimationRunnerBehaviorImpl
];
</script>

18
dashboard-ui/bower_components/neon-animation/neon-animation.html vendored
View File

@ -1,18 +0,0 @@
<!--
@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
-->
<link rel="import" href="neon-animatable-behavior.html">
<link rel="import" href="neon-animated-pages.html">
<link rel="import" href="neon-animatable.html">
<link rel="import" href="neon-animation-behavior.html">
<link rel="import" href="neon-animation-runner-behavior.html">
<link rel="import" href="neon-animations.html">
<link rel="import" href="neon-shared-element-animatable-behavior.html">
<link rel="import" href="neon-shared-element-animation-behavior.html">

29
dashboard-ui/bower_components/neon-animation/neon-animations.html vendored
View File

@ -1,29 +0,0 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="animations/cascaded-animation.html">
<link rel="import" href="animations/fade-in-animation.html">
<link rel="import" href="animations/fade-out-animation.html">
<link rel="import" href="animations/hero-animation.html">
<link rel="import" href="animations/opaque-animation.html">
<link rel="import" href="animations/ripple-animation.html">
<link rel="import" href="animations/reverse-ripple-animation.html">
<link rel="import" href="animations/scale-down-animation.html">
<link rel="import" href="animations/scale-up-animation.html">
<link rel="import" href="animations/slide-from-left-animation.html">
<link rel="import" href="animations/slide-from-right-animation.html">
<link rel="import" href="animations/slide-from-top-animation.html">
<link rel="import" href="animations/slide-from-bottom-animation.html">
<link rel="import" href="animations/slide-left-animation.html">
<link rel="import" href="animations/slide-right-animation.html">
<link rel="import" href="animations/slide-up-animation.html">
<link rel="import" href="animations/slide-down-animation.html">
<link rel="import" href="animations/transform-animation.html">

43
dashboard-ui/bower_components/neon-animation/neon-shared-element-animatable-behavior.html vendored
View File

@ -1,43 +0,0 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="neon-animatable-behavior.html">
<script>
/**
* Use `Polymer.NeonSharedElementAnimatableBehavior` to implement elements containing shared element
* animations.
* @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior
*/
Polymer.NeonSharedElementAnimatableBehaviorImpl = {
properties: {
/**
* A map of shared element id to node.
*/
sharedElements: {
type: Object,
value: {}
}
}
};
/** @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior */
Polymer.NeonSharedElementAnimatableBehavior = [
Polymer.NeonAnimatableBehavior,
Polymer.NeonSharedElementAnimatableBehaviorImpl
];
</script>

72
dashboard-ui/bower_components/neon-animation/neon-shared-element-animation-behavior.html vendored
View File

@ -1,72 +0,0 @@
<!--
@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
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="neon-animation-behavior.html">
<script>
/**
* Use `Polymer.NeonSharedElementAnimationBehavior` to implement shared element animations.
* @polymerBehavior Polymer.NeonSharedElementAnimationBehavior
*/
Polymer.NeonSharedElementAnimationBehaviorImpl = {
properties: {
/**
* Cached copy of shared elements.
*/
sharedElements: {
type: Object
}
},
/**
* Finds shared elements based on `config`.
*/
findSharedElements: function(config) {
var fromPage = config.fromPage;
var toPage = config.toPage;
if (!fromPage || !toPage) {
console.warn(this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!');
return null;
};
if (!fromPage.sharedElements || !toPage.sharedElements) {
console.warn(this.is + ':', 'sharedElements are undefined for', !fromPage.sharedElements ? fromPage : toPage);
return null;
};
var from = fromPage.sharedElements[config.id]
var to = toPage.sharedElements[config.id];
if (!from || !to) {
console.warn(this.is + ':', 'sharedElement with id', config.id, 'not found in', !from ? fromPage : toPage);
return null;
}
this.sharedElements = {
from: from,
to: to
};
return this.sharedElements;
}
};
/** @polymerBehavior Polymer.NeonSharedElementAnimationBehavior */
Polymer.NeonSharedElementAnimationBehavior = [
Polymer.NeonAnimationBehavior,
Polymer.NeonSharedElementAnimationBehaviorImpl
];
</script>

28
dashboard-ui/bower_components/neon-animation/test/index.html vendored
View File

@ -1,28 +0,0 @@
<!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>neon-animation tests</title>
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'neon-animated-pages.html',
'neon-animated-pages.html?dom=shadow',
'neon-animated-pages-lazy.html',
'neon-animated-pages-lazy.html?dom=shadow',
'neon-animated-pages-descendant-selection.html',
'neon-animated-pages-descendant-selection.html?dom=shadow',
]);
</script>
</body></html>

118
dashboard-ui/bower_components/neon-animation/test/neon-animated-pages-descendant-selection.html vendored
View File

@ -1,118 +0,0 @@
<!DOCTYPE html>
<!--
@license
Copyright (c) 2016 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 http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<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="../../neon-animation/neon-animated-pages.html">
<link rel="import" href="../../neon-animation/neon-animation-behavior.html">
<link rel="import" href="../../iron-selector/iron-selector.html">
</head>
<body>
<test-fixture id="descendant-selection">
<template>
<neon-animated-pages entry-animation="test-animation" animate-initial-selection>
<iron-selector selected="0" id="selector">
<div>1</div>
<div id="target">2</div>
</iron-selector>
</neon-animated-pages>
</template>
</test-fixture>
<test-fixture id="selecting-item">
<template>
<neon-animated-pages entry-animation="test-animation" animate-initial-selection>
<x-selecting-element></x-selecting-element>
<div id="target"></div>
</neon-animated-pages>
</template>
</test-fixture>
<dom-module id="x-selecting-element">
<template>
<iron-selector selected="0" id="selector">
<div>1</div>
<div id="target">2</div>
</iron-selector>
</template>
</dom-module>
<dom-module id="test-element">
<template>
<neon-animated-pages entry-animation="test-animation" animate-initial-selection>
<content></content>
</neon-animated-pages>
</template>
</dom-module>
<script>
HTMLImports.whenReady(function() {
Polymer({ is: 'x-selecting-element' });
Polymer({ is: 'test-element' });
Polymer({
is: 'test-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
config.node.animated = true;
}
});
});
</script>
<test-fixture id="distributed-children">
<template>
<test-element>
<div>1</div>
<div id="target">2</div>
</test-element>
</template>
</test-fixture>
<script>
suite('descendant selection', function() {
test('descendents of other selectors are not animated', function() {
var animatedPages = fixture('descendant-selection');
var selector = Polymer.dom(animatedPages).querySelector('#selector');
var target = Polymer.dom(animatedPages).querySelector('#target');
Polymer.dom(selector).setAttribute('selected', '1');
assert(!target.animated);
});
test('elements distributed as children are animated', function() {
var testElement = fixture('distributed-children');
var target = Polymer.dom(testElement).querySelector('#target');
var animatedPages = Polymer.dom(testElement.root).querySelector("neon-animated-pages");
Polymer.dom(animatedPages).setAttribute('selected', '1');
assert(target.animated);
});
test('ignores selection from shadow descendants of its items', function() {
var pages = fixture('selecting-item');
var target = Polymer.dom(pages).querySelector('#target');
var selecting = Polymer.dom(pages).querySelector('x-selecting-element');
selecting.$.selector.selected = 1;
assert(!target.animated);
});
});
</script>
</body>
</html>

73
dashboard-ui/bower_components/neon-animation/test/neon-animated-pages-lazy.html vendored
View File

@ -1,73 +0,0 @@
<!doctype html>
<!--
@license
Copyright (c) 2016 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>
<title>neon-animated-pages tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script>Polymer = {lazyRegister: true}</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="../neon-animated-pages.html">
<link rel="import" href="../neon-animatable.html">
<link rel="import" href="../animations/slide-from-left-animation.html">
<link rel="import" href="../animations/slide-right-animation.html">
<link rel="import" href="test-resizable-pages.html">
</head>
<body>
<test-fixture id="animate-initial-selection">
<template>
<neon-animated-pages entry-animation="slide-from-left-animation" exit-animation="slide-right-animation" animate-initial-selection>
<neon-animatable></neon-animatable>
<neon-animatable></neon-animatable>
</neon-animated-pages>
</template>
</test-fixture>
<script>
suite('animations found when `lazRegister` setting is true', function() {
test('animations are registered', function(done) {
var animatedPages = fixture('animate-initial-selection');
animatedPages._completeAnimations = sinon.spy();
assert.isUndefined(animatedPages.selected);
var pages = Polymer.dom(animatedPages).children;
animatedPages.addEventListener('neon-animation-finish', function(event) {
if (animatedPages.selected === 0) {
animatedPages.selected = 1;
return;
}
assert.strictEqual(animatedPages.selected, 1);
assert.equal(event.detail.fromPage, pages[0]);
assert.equal(event.detail.toPage, pages[1]);
assert.isTrue(animatedPages._completeAnimations.calledTwice);
var a$ = animatedPages._completeAnimations.getCall(1).args[0];
assert.isTrue(a$[0].animation.isNeonAnimation, 'entry animation is not a registered animation');
assert.isTrue(a$[1].animation.isNeonAnimation, 'exit animation is not a registered animation');
done();
});
animatedPages.selected = 0;
});
});
</script>
</body>
</html>

101
dashboard-ui/bower_components/neon-animation/test/neon-animated-pages.html vendored
View File

@ -1,101 +0,0 @@
<!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>
<title>neon-animated-pages tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<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="../neon-animated-pages.html">
<link rel="import" href="../neon-animatable.html">
<link rel="import" href="../animations/slide-from-left-animation.html">
<link rel="import" href="../animations/slide-right-animation.html">
<link rel="import" href="test-resizable-pages.html">
</head>
<body>
<test-fixture id="basic">
<template>
<neon-animated-pages>
</neon-animated-pages>
</template>
</test-fixture>
<test-fixture id="notify-resize">
<template>
<neon-animated-pages>
<a-resizable-page></a-resizable-page>
<b-resizable-page></b-resizable-page>
<c-resizable-page></c-resizable-page>
</neon-animated-pages>
</template>
</test-fixture>
<test-fixture id="animate-initial-selection">
<template>
<neon-animated-pages entry-animation="slide-from-left-animation" exit-animation="slide-right-animation" animate-initial-selection>
<neon-animatable></neon-animatable>
<neon-animatable></neon-animatable>
</neon-animated-pages>
</template>
</test-fixture>
<script>
suite('basic', function() {
});
suite('notify-resize', function() {
test('only a destination page recieves a resize event', function(done) {
var animatedPages = fixture('notify-resize');
var resizables = Polymer.dom(animatedPages).children;
var recieves = {};
resizables.forEach(function(page) {
page.addEventListener('iron-resize', function(event) {
var pageName = event.currentTarget.tagName;
recieves[pageName] = pageName in recieves ? recieves[pageName] + 1 : 1;
});
});
animatedPages.selected = 2;
setTimeout(function() {
assert.deepEqual(recieves, {
'C-RESIZABLE-PAGE': 1
});
done();
}, 50);
});
});
suite('animate-initial-selection', function() {
test('\'neon-animation-finish\' event fired after animating initial selection', function(done) {
var animatedPages = fixture('animate-initial-selection');
assert.isUndefined(animatedPages.selected);
var pages = Polymer.dom(animatedPages).children;
animatedPages.addEventListener('neon-animation-finish', function(event) {
assert.strictEqual(animatedPages.selected, 0);
assert.isFalse(event.detail.fromPage);
assert.deepEqual(event.detail.toPage, pages[0]);
done();
});
animatedPages.selected = 0;
});
});
</script>
</body>
</html>

58
dashboard-ui/bower_components/neon-animation/test/test-resizable-pages.html vendored
View File

@ -1,58 +0,0 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../iron-resizable-behavior/iron-resizable-behavior.html">
<dom-module id="a-resizable-page">
<template>
</template>
</dom-module>
<dom-module id="b-resizable-page">
<template>
</template>
</dom-module>
<dom-module id="c-resizable-page">
<template>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'a-resizable-page',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior,
Polymer.IronResizableBehavior
]
});
Polymer({
is: 'b-resizable-page',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior,
Polymer.IronResizableBehavior
]
});
Polymer({
is: 'c-resizable-page',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior,
Polymer.IronResizableBehavior
]
});
})();
</script>

14
dashboard-ui/bower_components/neon-animation/web-animations.html vendored
View File

@ -1,14 +0,0 @@
<!--
@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
-->
<!--<script src="../web-animations-js/web-animations-next-lite.min.js"></script>-->
<script>
require(['webAnimations']);
</script>