mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
remove unneeded components
This commit is contained in:
Luke Pulverenti
parent
aa0ed32bb7
commit
471acf85af
197 changed files with 4 additions and 54512 deletions
|
|
@ -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>
|
||||
|
|
@ -1,97 +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: 'opaque-animation',
|
||||
node: this.$.placeholder
|
||||
}, {
|
||||
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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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">⇦</button>
|
||||
<button on-click="_onNextClick">⇨</button>
|
||||
<button on-click="_onUpClick">⇧</button>
|
||||
<button on-click="_onDownClick">⇩</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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue