milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

switch polymer to bower

Browse source
This commit is contained in:
Luke Pulverenti 2015-06-19 12:36:51 -04:00
parent b9598ffaa1
commit 8f6cbe8de2
348 changed files with 40895 additions and 310 deletions
Download patch file Download diff file Expand all files Collapse all files

108
dashboard-ui/bower_components/neon-animation/demo/declarative/index.html vendored Normal file
View file

@ -0,0 +1,108 @@
<!doctype html>
<!--
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="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animatable.html">
<link rel="import" href="../../neon-animations.html">
<style>
body {
overflow: hidden;
}
.toolbar {
padding: 8px;
}
</style>
<style is="custom-style">
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 class="fullbleed layout vertical">
<template is="dom-bind">
<div class="toolbar">
<button on-click="_onPrevClick">&lt;&lt;</button>
<button on-click="_onNextClick">&gt;&gt;</button>
</div>
<neon-animated-pages id="pages" class="flex" 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);
}
</script>
</body>
</html>

47
dashboard-ui/bower_components/neon-animation/demo/doc/basic.html vendored Normal file
View file

@ -0,0 +1,47 @@
<!doctype html>
<!--
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">
</head>
<body>
<template is="dom-bind">
<button on-click="_onButtonClick">click me</button>
<br>
<my-animatable></my-animatable>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onButtonClick = function(event) {
var node = document.querySelector('my-animatable');
if (node) {
node.animate();
}
};
</script>
</body>
</html>

73
dashboard-ui/bower_components/neon-animation/demo/doc/my-animatable.html vendored Normal file
View file

@ -0,0 +1,73 @@
<!--
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">
<style>
:host {
display: inline-block;
border-radius: 50%;
width: 300px;
height: 300px;
background: orange;
}
</style>
<template>
<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>

97
dashboard-ui/bower_components/neon-animation/demo/doc/my-dialog.html vendored Normal file
View file

@ -0,0 +1,97 @@
<!--
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/paper-styles.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">
<style>
:host {
display: none;
padding: 16px;
background: white;
color: black;
margin: 0 auto;
@apply(--shadow-elevation-2dp);
}
</style>
<template>
<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>

53
dashboard-ui/bower_components/neon-animation/demo/doc/types.html vendored Normal file
View file

@ -0,0 +1,53 @@
<!doctype html>
<!--
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-dialog.html">
</head>
<body>
<template is="dom-bind">
<button on-click="_onButtonClick">Toggle</button>
<div style="text-align: center">
<my-dialog>Hello World!</my-dialog>
</div>
</template>
<script>
var scope = document.querySelector('template[is="dom-bind"]');
scope._onButtonClick = function(event) {
var node = document.querySelector('my-dialog');
if (node) {
if (node.opened) {
node.hide();
} else {
node.show();
}
}
};
</script>
</body>
</html>

97
dashboard-ui/bower_components/neon-animation/demo/dropdown/animated-dropdown.html vendored Normal file
View file

@ -0,0 +1,97 @@
<!--
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/paper-styles.html">
<link rel="import" href="../../neon-animation-runner-behavior.html">
<dom-module id="animated-dropdown">
<style>
:host {
display: none;
padding: 16px;
background: white;
color: black;
@apply(--shadow-elevation-2dp);
}
</style>
<template>
<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 Normal file
View file

@ -0,0 +1,54 @@
<!doctype html>
<!--
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="../../../paper-styles/paper-styles.html">
<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>

166
dashboard-ui/bower_components/neon-animation/demo/grid/animated-grid.html vendored Normal file
View file

@ -0,0 +1,166 @@
<!--
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/paper-styles.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="animated-grid">
<link rel="import" type="css" href="../shared.css">
<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>
<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>

124
dashboard-ui/bower_components/neon-animation/demo/grid/fullsize-page-with-card.html vendored Normal file
View file

@ -0,0 +1,124 @@
<!--
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="fullsize-page-with-card">
<link rel="import" type="css" href="../shared.css">
<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>
<template>
<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>

70
dashboard-ui/bower_components/neon-animation/demo/grid/index.html vendored Normal file
View file

@ -0,0 +1,70 @@
<!doctype html>
<!--
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="../../../paper-styles/paper-styles.html">
<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>
body {
overflow: hidden;
}
neon-animated-pages {
height: 100%;
}
</style>
</head>
<body class="fullbleed">
<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" hero-id="hero" 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>

6
dashboard-ui/bower_components/neon-animation/demo/index.html vendored Normal file
View file

@ -0,0 +1,6 @@
<a href="declarative/index.html">declarative</a><br>
<a href="dropdown/index.html">dropdown</a><br>
<a href="grid/index.html">grid</a><br>
<a href="list/index.html">list</a><br>
<a href="load/index.html">load</a><br>
<a href="tiles/index.html">tiles</a><br>

122
dashboard-ui/bower_components/neon-animation/demo/list/full-view.html vendored Normal file
View file

@ -0,0 +1,122 @@
<!--
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/paper-styles.html">
<link rel="import" href="../../neon-animatable-behavior.html">
<dom-module id="full-view">
<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>
<template>
<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>

29
dashboard-ui/bower_components/neon-animation/demo/list/index.html vendored Normal file
View file

@ -0,0 +1,29 @@
<!doctype html>
<!--
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="../../../paper-styles/paper-styles.html">
<link rel="import" href="list-demo.html">
</head>
<body class="fullbleed relative">
<list-demo class="fit"></list-demo>
</body>
</html>

112
dashboard-ui/bower_components/neon-animation/demo/list/list-demo.html vendored Normal file
View file

@ -0,0 +1,112 @@
<!--
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/paper-styles.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">
<style>
:host {
display: block;
}
neon-animated-pages {
height: 100%;
}
</style>
<template>
<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>

127
dashboard-ui/bower_components/neon-animation/demo/list/list-view.html vendored Normal file
View file

@ -0,0 +1,127 @@
<!--
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="../../../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/paper-styles.html">
<link rel="import" href="../../neon-animatable-behavior.html">
<dom-module id="list-view">
<style>
:host {
@apply(--layout-vertical);
}
.main {
@apply(--layout-flex);
@apply(--layout-scroll);
}
iron-icon {
color: var(--google-grey-500);
}
</style>
<template>
<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>

147
dashboard-ui/bower_components/neon-animation/demo/load/animated-grid.html vendored Normal file
View file

@ -0,0 +1,147 @@
<!--
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/paper-styles.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="animated-grid">
<link rel="import" type="css" href="../shared.css">
<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>
<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>

86
dashboard-ui/bower_components/neon-animation/demo/load/full-page.html vendored Normal file
View file

@ -0,0 +1,86 @@
<!--
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/paper-styles.html">
<link rel="import" href="../../neon-animatable-behavior.html">
<link rel="import" href="../../neon-animation-runner-behavior.html">
<link rel="import" href="animated-grid.html">
<dom-module id="full-page">
<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>
<template>
<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-down-animation',
node: this.$.toolbar
}, {
animatable: this.$.grid,
type: 'entry'
}]
};
}
}
},
show: function() {
this.style.visibility = 'visible';
this.playAnimation('entry');
}
});
</script>

45
dashboard-ui/bower_components/neon-animation/demo/load/index.html vendored Normal file
View file

@ -0,0 +1,45 @@
<!doctype html>
<!--
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="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="full-page.html">
<style>
body {
overflow: hidden;
}
</style>
</head>
<body class="fullbleed relative">
<full-page class="fit"></full-page>
<script>
document.addEventListener('WebComponentsReady', function() {
document.querySelector('full-page').show();
});
</script>
</body>
</html>

166
dashboard-ui/bower_components/neon-animation/demo/reprojection/animated-grid.html vendored Normal file
View file

@ -0,0 +1,166 @@
<!--
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/paper-styles.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="animated-grid">
<link rel="import" type="css" href="../shared.css">
<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>
<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>

124
dashboard-ui/bower_components/neon-animation/demo/reprojection/fullsize-page-with-card.html vendored Normal file
View file

@ -0,0 +1,124 @@
<!--
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="fullsize-page-with-card">
<link rel="import" type="css" href="../shared.css">
<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>
<template>
<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>

66
dashboard-ui/bower_components/neon-animation/demo/reprojection/index.html vendored Normal file
View file

@ -0,0 +1,66 @@
<!doctype html>
<!--
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="../../../paper-styles/paper-styles.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>
neon-animated-pages {
height: 100%;
}
</style>
</head>
<body class="fullbleed">
<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>

42
dashboard-ui/bower_components/neon-animation/demo/reprojection/reprojected-pages.html vendored Normal file
View file

@ -0,0 +1,42 @@
<!--
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>
<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>

40
dashboard-ui/bower_components/neon-animation/demo/shared.css vendored Normal file
View file

@ -0,0 +1,40 @@
/*
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
*/
.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);
}

110
dashboard-ui/bower_components/neon-animation/demo/tiles/circles-page.html vendored Normal file
View file

@ -0,0 +1,110 @@
<!--
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/paper-styles.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="circles-page">
<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>
<template>
<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>

77
dashboard-ui/bower_components/neon-animation/demo/tiles/index.html vendored Normal file
View file

@ -0,0 +1,77 @@
<!doctype html>
<!--
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="../../../paper-styles/paper-styles.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="circles-page.html">
<link rel="import" href="squares-page.html">
<style>
body {
overflow: hidden;
}
neon-animated-pages {
height: 100%;
}
</style>
<style is="custom-style">
:root {
--color-one: #4dd0e1;
--color-two: #ff9800;
}
</style>
</head>
<body class="fullbleed">
<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>

104
dashboard-ui/bower_components/neon-animation/demo/tiles/squares-page.html vendored Normal file
View file

@ -0,0 +1,104 @@
<!--
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/paper-styles.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<dom-module id="squares-page">
<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>
<template>
<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>