polymer-neon-rails 1.0.0.pre.rc.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +39 -0
- data/Rakefile +1 -0
- data/app/assets/components/iron-flex-layout/README.md +4 -0
- data/app/assets/components/iron-flex-layout/bower.json +21 -0
- data/app/assets/components/iron-flex-layout/classes/iron-flex-layout.html +307 -0
- data/app/assets/components/iron-flex-layout/classes/iron-shadow-flex-layout.html +302 -0
- data/app/assets/components/iron-flex-layout/demo/index.html +40 -0
- data/app/assets/components/iron-flex-layout/demo/x-app.html +106 -0
- data/app/assets/components/iron-flex-layout/iron-flex-layout.html +313 -0
- data/app/assets/components/iron-meta/README.md +46 -0
- data/app/assets/components/iron-meta/bower.json +28 -0
- data/app/assets/components/iron-meta/demo/index.html +45 -0
- data/app/assets/components/iron-meta/hero.svg +33 -0
- data/app/assets/components/iron-meta/index.html +27 -0
- data/app/assets/components/iron-meta/iron-meta.html +352 -0
- data/app/assets/components/iron-meta/test/basic.html +48 -0
- data/app/assets/components/iron-meta/test/index.html +30 -0
- data/app/assets/components/iron-meta/test/iron-meta.html +186 -0
- data/app/assets/components/iron-resizable-behavior/README.md +16 -0
- data/app/assets/components/iron-resizable-behavior/bower.json +26 -0
- data/app/assets/components/iron-resizable-behavior/demo/index.html +29 -0
- data/app/assets/components/iron-resizable-behavior/demo/src/x-app.html +114 -0
- data/app/assets/components/iron-resizable-behavior/index.html +25 -0
- data/app/assets/components/iron-resizable-behavior/iron-resizable-behavior.html +139 -0
- data/app/assets/components/iron-resizable-behavior/test/basic.html +263 -0
- data/app/assets/components/iron-resizable-behavior/test/index.html +31 -0
- data/app/assets/components/iron-resizable-behavior/test/test-elements.html +143 -0
- data/app/assets/components/iron-selector/README.md +50 -0
- data/app/assets/components/iron-selector/bower.json +31 -0
- data/app/assets/components/iron-selector/demo/index.html +66 -0
- data/app/assets/components/iron-selector/index.html +28 -0
- data/app/assets/components/iron-selector/iron-multi-selectable.html +120 -0
- data/app/assets/components/iron-selector/iron-selectable.html +307 -0
- data/app/assets/components/iron-selector/iron-selection.html +115 -0
- data/app/assets/components/iron-selector/iron-selector.html +71 -0
- data/app/assets/components/iron-selector/test/activate-event.html +138 -0
- data/app/assets/components/iron-selector/test/basic.html +150 -0
- data/app/assets/components/iron-selector/test/content-element.html +43 -0
- data/app/assets/components/iron-selector/test/content.html +168 -0
- data/app/assets/components/iron-selector/test/index.html +36 -0
- data/app/assets/components/iron-selector/test/multi.html +135 -0
- data/app/assets/components/iron-selector/test/next-previous.html +134 -0
- data/app/assets/components/iron-selector/test/selected-attribute.html +72 -0
- data/app/assets/components/iron-selector/test/template-repeat.html +110 -0
- data/app/assets/components/neon-animation/README.md +304 -0
- data/app/assets/components/neon-animation/animations/cascaded-animation.html +84 -0
- data/app/assets/components/neon-animation/animations/fade-in-animation.html +49 -0
- data/app/assets/components/neon-animation/animations/fade-out-animation.html +49 -0
- data/app/assets/components/neon-animation/animations/hero-animation.html +83 -0
- data/app/assets/components/neon-animation/animations/opaque-animation.html +46 -0
- data/app/assets/components/neon-animation/animations/ripple-animation.html +92 -0
- data/app/assets/components/neon-animation/animations/scale-down-animation.html +65 -0
- data/app/assets/components/neon-animation/animations/scale-up-animation.html +58 -0
- data/app/assets/components/neon-animation/animations/slide-down-animation.html +59 -0
- data/app/assets/components/neon-animation/animations/slide-from-left-animation.html +60 -0
- data/app/assets/components/neon-animation/animations/slide-from-right-animation.html +60 -0
- data/app/assets/components/neon-animation/animations/slide-left-animation.html +59 -0
- data/app/assets/components/neon-animation/animations/slide-right-animation.html +59 -0
- data/app/assets/components/neon-animation/animations/slide-up-animation.html +59 -0
- data/app/assets/components/neon-animation/animations/transform-animation.html +61 -0
- data/app/assets/components/neon-animation/bower.json +51 -0
- data/app/assets/components/neon-animation/demo/declarative/index.html +108 -0
- data/app/assets/components/neon-animation/demo/doc/basic.html +47 -0
- data/app/assets/components/neon-animation/demo/doc/my-animatable.html +73 -0
- data/app/assets/components/neon-animation/demo/doc/my-dialog.html +97 -0
- data/app/assets/components/neon-animation/demo/doc/types.html +53 -0
- data/app/assets/components/neon-animation/demo/dropdown/animated-dropdown.html +97 -0
- data/app/assets/components/neon-animation/demo/dropdown/index.html +54 -0
- data/app/assets/components/neon-animation/demo/grid/animated-grid.html +166 -0
- data/app/assets/components/neon-animation/demo/grid/fullsize-page-with-card.html +124 -0
- data/app/assets/components/neon-animation/demo/grid/index.html +70 -0
- data/app/assets/components/neon-animation/demo/index.html +6 -0
- data/app/assets/components/neon-animation/demo/list/full-view.html +122 -0
- data/app/assets/components/neon-animation/demo/list/index.html +29 -0
- data/app/assets/components/neon-animation/demo/list/list-demo.html +112 -0
- data/app/assets/components/neon-animation/demo/list/list-view.html +127 -0
- data/app/assets/components/neon-animation/demo/load/animated-grid.html +147 -0
- data/app/assets/components/neon-animation/demo/load/full-page.html +86 -0
- data/app/assets/components/neon-animation/demo/load/index.html +45 -0
- data/app/assets/components/neon-animation/demo/reprojection/animated-grid.html +166 -0
- data/app/assets/components/neon-animation/demo/reprojection/fullsize-page-with-card.html +124 -0
- data/app/assets/components/neon-animation/demo/reprojection/index.html +66 -0
- data/app/assets/components/neon-animation/demo/reprojection/reprojected-pages.html +42 -0
- data/app/assets/components/neon-animation/demo/shared.css +40 -0
- data/app/assets/components/neon-animation/demo/tiles/circles-page.html +110 -0
- data/app/assets/components/neon-animation/demo/tiles/index.html +77 -0
- data/app/assets/components/neon-animation/demo/tiles/squares-page.html +104 -0
- data/app/assets/components/neon-animation/guides/neon-animation.md +313 -0
- data/app/assets/components/neon-animation/index.html +30 -0
- data/app/assets/components/neon-animation/neon-animatable-behavior.html +156 -0
- data/app/assets/components/neon-animation/neon-animatable.html +54 -0
- data/app/assets/components/neon-animation/neon-animated-pages.html +208 -0
- data/app/assets/components/neon-animation/neon-animation-behavior.html +88 -0
- data/app/assets/components/neon-animation/neon-animation-runner-behavior.html +110 -0
- data/app/assets/components/neon-animation/neon-animation.html +17 -0
- data/app/assets/components/neon-animation/neon-animations.html +25 -0
- data/app/assets/components/neon-animation/neon-shared-element-animatable-behavior.html +37 -0
- data/app/assets/components/neon-animation/neon-shared-element-animation-behavior.html +66 -0
- data/app/assets/components/neon-animation/web-animations.html +11 -0
- data/app/assets/components/neon-elements/README.md +19 -0
- data/app/assets/components/neon-elements/bower.json +26 -0
- data/app/assets/components/paper-styles/README.md +3 -0
- data/app/assets/components/paper-styles/bower.json +27 -0
- data/app/assets/components/paper-styles/classes/global.html +96 -0
- data/app/assets/components/paper-styles/classes/shadow-layout.html +302 -0
- data/app/assets/components/paper-styles/classes/shadow.html +39 -0
- data/app/assets/components/paper-styles/classes/typography.html +171 -0
- data/app/assets/components/paper-styles/color.html +333 -0
- data/app/assets/components/paper-styles/default-theme.html +39 -0
- data/app/assets/components/paper-styles/demo-pages.html +72 -0
- data/app/assets/components/paper-styles/demo.css +25 -0
- data/app/assets/components/paper-styles/paper-styles-classes.html +14 -0
- data/app/assets/components/paper-styles/paper-styles.html +17 -0
- data/app/assets/components/paper-styles/shadow.html +61 -0
- data/app/assets/components/paper-styles/typography.html +240 -0
- data/app/assets/components/polymer/LICENSE.txt +27 -0
- data/app/assets/components/polymer/bower.json +26 -0
- data/app/assets/components/polymer/build.log +27 -0
- data/app/assets/components/polymer/polymer-micro.html +523 -0
- data/app/assets/components/polymer/polymer-mini.html +1368 -0
- data/app/assets/components/polymer/polymer.html +3768 -0
- data/app/assets/components/web-animations-js/COPYING +202 -0
- data/app/assets/components/web-animations-js/History.md +108 -0
- data/app/assets/components/web-animations-js/README.md +161 -0
- data/app/assets/components/web-animations-js/bower.json +31 -0
- data/app/assets/components/web-animations-js/web-animations-next-lite.min.js +17 -0
- data/app/assets/components/web-animations-js/web-animations-next-lite.min.js.map +1 -0
- data/app/assets/components/web-animations-js/web-animations-next.min.js +17 -0
- data/app/assets/components/web-animations-js/web-animations-next.min.js.map +1 -0
- data/app/assets/components/web-animations-js/web-animations.html +50 -0
- data/app/assets/components/web-animations-js/web-animations.min.js +17 -0
- data/app/assets/components/web-animations-js/web-animations.min.js.gz +0 -0
- data/app/assets/components/web-animations-js/web-animations.min.js.map +1 -0
- data/app/assets/components/webcomponentsjs/CustomElements.js +956 -0
- data/app/assets/components/webcomponentsjs/CustomElements.min.js +11 -0
- data/app/assets/components/webcomponentsjs/HTMLImports.js +1078 -0
- data/app/assets/components/webcomponentsjs/HTMLImports.min.js +11 -0
- data/app/assets/components/webcomponentsjs/MutationObserver.js +344 -0
- data/app/assets/components/webcomponentsjs/MutationObserver.min.js +11 -0
- data/app/assets/components/webcomponentsjs/README.md +125 -0
- data/app/assets/components/webcomponentsjs/ShadowDOM.js +4414 -0
- data/app/assets/components/webcomponentsjs/ShadowDOM.min.js +15 -0
- data/app/assets/components/webcomponentsjs/bower.json +14 -0
- data/app/assets/components/webcomponentsjs/build.log +33 -0
- data/app/assets/components/webcomponentsjs/package.json +31 -0
- data/app/assets/components/webcomponentsjs/webcomponents-lite.js +2300 -0
- data/app/assets/components/webcomponentsjs/webcomponents-lite.min.js +13 -0
- data/app/assets/components/webcomponentsjs/webcomponents.js +7112 -0
- data/app/assets/components/webcomponentsjs/webcomponents.min.js +15 -0
- data/lib/polymer-neon-rails.rb +2 -0
- data/lib/polymer-neon-rails/engine.rb +4 -0
- data/lib/polymer-neon-rails/version.rb +3 -0
- metadata +264 -0
@@ -0,0 +1,45 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
<!--
|
3
|
+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
4
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
5
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
6
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
7
|
+
Code distributed by Google as part of the polymer project is also
|
8
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
9
|
+
-->
|
10
|
+
<html>
|
11
|
+
<head>
|
12
|
+
<title>neon-animated-pages demo: load</title>
|
13
|
+
|
14
|
+
<meta charset="utf-8">
|
15
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
16
|
+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
17
|
+
|
18
|
+
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
19
|
+
|
20
|
+
<link rel="import" href="../../../paper-styles/paper-styles.html">
|
21
|
+
<link rel="import" href="../../neon-animated-pages.html">
|
22
|
+
<link rel="import" href="../../neon-animations.html">
|
23
|
+
<link rel="import" href="full-page.html">
|
24
|
+
|
25
|
+
<style>
|
26
|
+
body {
|
27
|
+
overflow: hidden;
|
28
|
+
}
|
29
|
+
</style>
|
30
|
+
|
31
|
+
</head>
|
32
|
+
<body class="fullbleed relative">
|
33
|
+
|
34
|
+
<full-page class="fit"></full-page>
|
35
|
+
|
36
|
+
<script>
|
37
|
+
|
38
|
+
document.addEventListener('WebComponentsReady', function() {
|
39
|
+
document.querySelector('full-page').show();
|
40
|
+
});
|
41
|
+
|
42
|
+
</script>
|
43
|
+
|
44
|
+
</body>
|
45
|
+
</html>
|
@@ -0,0 +1,166 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
-->
|
9
|
+
<link rel="import" href="../../../polymer/polymer.html">
|
10
|
+
<link rel="import" href="../../../paper-styles/paper-styles.html">
|
11
|
+
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
12
|
+
|
13
|
+
<dom-module id="animated-grid">
|
14
|
+
|
15
|
+
<link rel="import" type="css" href="../shared.css">
|
16
|
+
|
17
|
+
<style>
|
18
|
+
|
19
|
+
:host {
|
20
|
+
display: block;
|
21
|
+
background: #000;
|
22
|
+
}
|
23
|
+
|
24
|
+
.tile {
|
25
|
+
display: inline-block;
|
26
|
+
float: left;
|
27
|
+
vertical-align: top;
|
28
|
+
width: calc(100% / 6);
|
29
|
+
height: calc(100% / 3);
|
30
|
+
|
31
|
+
@apply(--paper-font-title);
|
32
|
+
@apply(--layout-vertical);
|
33
|
+
@apply(--layout-center-center);
|
34
|
+
}
|
35
|
+
|
36
|
+
.tile:nth-of-type(1) {
|
37
|
+
width: calc(100% / 3);
|
38
|
+
height: calc(100% / 3 * 2);
|
39
|
+
}
|
40
|
+
|
41
|
+
.tile:nth-of-type(4) {
|
42
|
+
width: calc(100% / 3);
|
43
|
+
}
|
44
|
+
|
45
|
+
.tile:nth-of-type(5) {
|
46
|
+
width: calc(100% / 3);
|
47
|
+
height: calc(100% / 3 * 2);
|
48
|
+
}
|
49
|
+
|
50
|
+
.tile:nth-of-type(8) {
|
51
|
+
width: calc(100% / 3);
|
52
|
+
height: calc(100% / 3);
|
53
|
+
}
|
54
|
+
|
55
|
+
.tile:nth-of-type(9) {
|
56
|
+
position: absolute;
|
57
|
+
top: calc(100% / 3 * 2);
|
58
|
+
left: 0;
|
59
|
+
width: calc(100% / 6);
|
60
|
+
height: calc(100% / 3);
|
61
|
+
}
|
62
|
+
|
63
|
+
.tile:nth-of-type(10) {
|
64
|
+
position: absolute;
|
65
|
+
top: calc(100% / 3 * 2);
|
66
|
+
left: calc(100% / 6);;
|
67
|
+
width: calc(100% / 6);
|
68
|
+
height: calc(100% / 3);
|
69
|
+
}
|
70
|
+
|
71
|
+
</style>
|
72
|
+
|
73
|
+
<template>
|
74
|
+
|
75
|
+
<template is="dom-repeat" items="[[config]]">
|
76
|
+
<div class$="[[_computeTileClass(item.color)]]">
|
77
|
+
<span>[[item.value]]</span>
|
78
|
+
</div>
|
79
|
+
</template>
|
80
|
+
|
81
|
+
</template>
|
82
|
+
|
83
|
+
</dom-module>
|
84
|
+
|
85
|
+
<script>
|
86
|
+
|
87
|
+
Polymer({
|
88
|
+
|
89
|
+
is: 'animated-grid',
|
90
|
+
|
91
|
+
behaviors: [
|
92
|
+
Polymer.NeonSharedElementAnimatableBehavior
|
93
|
+
],
|
94
|
+
|
95
|
+
properties: {
|
96
|
+
|
97
|
+
config: {
|
98
|
+
type: Array,
|
99
|
+
value: function() {
|
100
|
+
return [
|
101
|
+
{value: 1, color: 'blue'},
|
102
|
+
{value: 2, color: 'red'},
|
103
|
+
{value: 3, color: 'blue'},
|
104
|
+
{value: 4, color: 'green'},
|
105
|
+
{value: 5, color: 'yellow'},
|
106
|
+
{value: 6, color: 'blue'},
|
107
|
+
{value: 7, color: 'red'},
|
108
|
+
{value: 8, color: 'green'},
|
109
|
+
{value: 9, color: 'yellow'},
|
110
|
+
{value: 10, color: 'red'}
|
111
|
+
]
|
112
|
+
}
|
113
|
+
},
|
114
|
+
|
115
|
+
animationConfig: {
|
116
|
+
type: Object,
|
117
|
+
value: function() {
|
118
|
+
return {
|
119
|
+
'exit': [{
|
120
|
+
name: 'ripple-animation',
|
121
|
+
id: 'ripple',
|
122
|
+
fromPage: this
|
123
|
+
}, {
|
124
|
+
name: 'hero-animation',
|
125
|
+
id: 'hero',
|
126
|
+
fromPage: this
|
127
|
+
}]
|
128
|
+
}
|
129
|
+
}
|
130
|
+
}
|
131
|
+
|
132
|
+
},
|
133
|
+
|
134
|
+
listeners: {
|
135
|
+
click: '_onClick'
|
136
|
+
},
|
137
|
+
|
138
|
+
_computeTileClass: function(color) {
|
139
|
+
return 'tile ' + color + '-300';
|
140
|
+
},
|
141
|
+
|
142
|
+
_onClick: function(event) {
|
143
|
+
var target = event.target;
|
144
|
+
while (target !== this && !target._templateInstance) {
|
145
|
+
target = target.parentNode;
|
146
|
+
}
|
147
|
+
|
148
|
+
// configure the page animation
|
149
|
+
this.sharedElements = {
|
150
|
+
'hero': target,
|
151
|
+
'ripple': target
|
152
|
+
};
|
153
|
+
this.animationConfig['exit'][0].gesture = {
|
154
|
+
x: event.x,
|
155
|
+
y: event.y
|
156
|
+
};
|
157
|
+
|
158
|
+
this.fire('tile-click', {
|
159
|
+
tile: target,
|
160
|
+
data: target._templateInstance.item
|
161
|
+
});
|
162
|
+
}
|
163
|
+
|
164
|
+
});
|
165
|
+
|
166
|
+
</script>
|
@@ -0,0 +1,124 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
-->
|
9
|
+
<link rel="import" href="../../../polymer/polymer.html">
|
10
|
+
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
|
11
|
+
|
12
|
+
|
13
|
+
<dom-module id="fullsize-page-with-card">
|
14
|
+
|
15
|
+
<link rel="import" type="css" href="../shared.css">
|
16
|
+
|
17
|
+
<style>
|
18
|
+
|
19
|
+
:host {
|
20
|
+
display: block;
|
21
|
+
}
|
22
|
+
|
23
|
+
.fixed {
|
24
|
+
position: fixed;
|
25
|
+
top: 0;
|
26
|
+
left: 0;
|
27
|
+
height: 100vh;
|
28
|
+
width: 100vw;
|
29
|
+
}
|
30
|
+
|
31
|
+
.card {
|
32
|
+
position: relative;
|
33
|
+
margin: 200px 100px 0;
|
34
|
+
height: 700px;
|
35
|
+
}
|
36
|
+
|
37
|
+
</style>
|
38
|
+
|
39
|
+
<template>
|
40
|
+
|
41
|
+
<div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
|
42
|
+
|
43
|
+
<div id="card" class$="[[_computeCardClass(color)]]"></div>
|
44
|
+
|
45
|
+
</template>
|
46
|
+
|
47
|
+
</dom-module>
|
48
|
+
|
49
|
+
<script>
|
50
|
+
|
51
|
+
Polymer({
|
52
|
+
|
53
|
+
is: 'fullsize-page-with-card',
|
54
|
+
|
55
|
+
behaviors: [
|
56
|
+
Polymer.NeonSharedElementAnimatableBehavior
|
57
|
+
],
|
58
|
+
|
59
|
+
properties: {
|
60
|
+
|
61
|
+
color: {
|
62
|
+
type: String
|
63
|
+
},
|
64
|
+
|
65
|
+
sharedElements: {
|
66
|
+
type: Object,
|
67
|
+
value: function() {
|
68
|
+
return {
|
69
|
+
'hero': this.$.card,
|
70
|
+
'ripple': this.$.fixed
|
71
|
+
}
|
72
|
+
}
|
73
|
+
},
|
74
|
+
|
75
|
+
animationConfig: {
|
76
|
+
type: Object,
|
77
|
+
value: function() {
|
78
|
+
return {
|
79
|
+
'entry': [{
|
80
|
+
name: 'ripple-animation',
|
81
|
+
id: 'ripple',
|
82
|
+
toPage: this,
|
83
|
+
}, {
|
84
|
+
name: 'hero-animation',
|
85
|
+
id: 'hero',
|
86
|
+
toPage: this,
|
87
|
+
timing: {
|
88
|
+
delay: 150
|
89
|
+
}
|
90
|
+
}],
|
91
|
+
'exit': [{
|
92
|
+
name: 'fade-out-animation',
|
93
|
+
node: this.$.fixed
|
94
|
+
}, {
|
95
|
+
name: 'transform-animation',
|
96
|
+
transformFrom: 'none',
|
97
|
+
transformTo: 'translate(0px,-200vh) scale(0.9,1)',
|
98
|
+
node: this.$.card
|
99
|
+
}]
|
100
|
+
}
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
},
|
105
|
+
|
106
|
+
_computeCardClass: function(color) {
|
107
|
+
var cls = 'card';
|
108
|
+
if (color) {
|
109
|
+
cls += ' ' + color + '-300';
|
110
|
+
}
|
111
|
+
return cls;
|
112
|
+
},
|
113
|
+
|
114
|
+
_computeFixedBackgroundClass: function(color) {
|
115
|
+
var cls = 'fixed';
|
116
|
+
if (color) {
|
117
|
+
cls += ' ' + color + '-100';
|
118
|
+
}
|
119
|
+
return cls;
|
120
|
+
}
|
121
|
+
|
122
|
+
});
|
123
|
+
|
124
|
+
</script>
|
@@ -0,0 +1,66 @@
|
|
1
|
+
<!doctype html>
|
2
|
+
<!--
|
3
|
+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
4
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
5
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
6
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
7
|
+
Code distributed by Google as part of the polymer project is also
|
8
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
9
|
+
-->
|
10
|
+
<html>
|
11
|
+
<head>
|
12
|
+
<title>neon-animated-pages demo: grid</title>
|
13
|
+
|
14
|
+
<meta charset="utf-8">
|
15
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
16
|
+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
|
17
|
+
|
18
|
+
<script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
|
19
|
+
|
20
|
+
<link rel="import" href="../../../paper-styles/paper-styles.html">
|
21
|
+
<link rel="import" href="../../neon-animations.html">
|
22
|
+
<link rel="import" href="reprojected-pages.html">
|
23
|
+
<link rel="import" href="animated-grid.html">
|
24
|
+
<link rel="import" href="fullsize-page-with-card.html">
|
25
|
+
|
26
|
+
<style>
|
27
|
+
|
28
|
+
neon-animated-pages {
|
29
|
+
height: 100%;
|
30
|
+
}
|
31
|
+
|
32
|
+
</style>
|
33
|
+
|
34
|
+
</head>
|
35
|
+
<body class="fullbleed">
|
36
|
+
|
37
|
+
<template is="dom-bind">
|
38
|
+
|
39
|
+
<reprojected-pages id="pages" selected="0">
|
40
|
+
|
41
|
+
<animated-grid on-tile-click="_onTileClick"></animated-grid>
|
42
|
+
|
43
|
+
<fullsize-page-with-card id="fullsize-card" hero-id="hero" on-click="_onFullsizeClick">
|
44
|
+
</fullsize-page-with-card>
|
45
|
+
|
46
|
+
</reprojected-pages>
|
47
|
+
|
48
|
+
</template>
|
49
|
+
|
50
|
+
<script>
|
51
|
+
|
52
|
+
var scope = document.querySelector('template[is="dom-bind"]');
|
53
|
+
|
54
|
+
scope._onTileClick = function(event) {
|
55
|
+
this.$['fullsize-card'].color = event.detail.data.color;
|
56
|
+
this.$.pages.selected = 1;
|
57
|
+
};
|
58
|
+
|
59
|
+
scope._onFullsizeClick = function(event) {
|
60
|
+
this.$.pages.selected = 0;
|
61
|
+
};
|
62
|
+
|
63
|
+
</script>
|
64
|
+
|
65
|
+
</body>
|
66
|
+
</html>
|
@@ -0,0 +1,42 @@
|
|
1
|
+
<!--
|
2
|
+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
-->
|
9
|
+
|
10
|
+
<link rel="import" href="../../../polymer/polymer.html">
|
11
|
+
<link rel="import" href="../../neon-animated-pages.html">
|
12
|
+
|
13
|
+
<dom-module id="reprojected-pages">
|
14
|
+
|
15
|
+
<template>
|
16
|
+
|
17
|
+
<neon-animated-pages selected="{{selected}}">
|
18
|
+
<content></content>
|
19
|
+
</neon-animated-pages>
|
20
|
+
|
21
|
+
</template>
|
22
|
+
|
23
|
+
</dom-module>
|
24
|
+
|
25
|
+
<script>
|
26
|
+
|
27
|
+
Polymer({
|
28
|
+
|
29
|
+
is: 'reprojected-pages',
|
30
|
+
|
31
|
+
properties: {
|
32
|
+
|
33
|
+
selected: {
|
34
|
+
type: String,
|
35
|
+
notify: true
|
36
|
+
}
|
37
|
+
|
38
|
+
}
|
39
|
+
|
40
|
+
});
|
41
|
+
|
42
|
+
</script>
|
@@ -0,0 +1,40 @@
|
|
1
|
+
/*
|
2
|
+
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
3
|
+
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
4
|
+
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
5
|
+
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
6
|
+
Code distributed by Google as part of the polymer project is also
|
7
|
+
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
8
|
+
*/
|
9
|
+
|
10
|
+
.red-100 {
|
11
|
+
background: var(--google-red-100);
|
12
|
+
}
|
13
|
+
|
14
|
+
.yellow-100 {
|
15
|
+
background: var(--google-yellow-100);
|
16
|
+
}
|
17
|
+
|
18
|
+
.blue-100 {
|
19
|
+
background: var(--google-blue-100);
|
20
|
+
}
|
21
|
+
|
22
|
+
.green-100 {
|
23
|
+
background: var(--google-green-100);
|
24
|
+
}
|
25
|
+
|
26
|
+
.red-300 {
|
27
|
+
background: var(--google-red-300);
|
28
|
+
}
|
29
|
+
|
30
|
+
.yellow-300 {
|
31
|
+
background: var(--google-yellow-300);
|
32
|
+
}
|
33
|
+
|
34
|
+
.blue-300 {
|
35
|
+
background: var(--google-blue-300);
|
36
|
+
}
|
37
|
+
|
38
|
+
.green-300 {
|
39
|
+
background: var(--google-green-300);
|
40
|
+
}
|