Commit 47c2b7f73ad106b72cf561266581089a25ac2299
1 parent
c2589de4
added demo page
Showing
3 changed files
with
290 additions
and
0 deletions
controllets/full-view-controllet/full-view-controllet.html
0 → 100644
1 | +<link rel="import" href="../../bower_components/polymer/polymer.html"> | ||
2 | +<link rel="import" href="../../bower_components/paper-styles/paper-styles.html"> | ||
3 | +<link rel="import" href="../../bower_components/neon-animation/neon-animatable-behavior.html"> | ||
4 | + | ||
5 | +<dom-module id="full-view-controllet"> | ||
6 | + | ||
7 | + <style> | ||
8 | + | ||
9 | + :host { | ||
10 | + @apply(--layout-vertical); | ||
11 | + } | ||
12 | + | ||
13 | + .main { | ||
14 | + background: white; | ||
15 | + @apply(--layout-flex); | ||
16 | + @apply(--layout-scroll); | ||
17 | + @apply(--shadow-elevation-8dp); | ||
18 | + } | ||
19 | + | ||
20 | + .image-container { | ||
21 | + position: relative; | ||
22 | + width: 100%; | ||
23 | + padding-bottom: 100%; | ||
24 | + } | ||
25 | + | ||
26 | + .image { | ||
27 | + position: absolute; | ||
28 | + width: 100%; | ||
29 | + height: 100%; | ||
30 | + background: repeating-linear-gradient( | ||
31 | + 45deg, | ||
32 | + #f5f5f5, | ||
33 | + #f5f5f5 8px, | ||
34 | + #e0e0e0 8px, | ||
35 | + #e0e0e0 16px | ||
36 | + ); | ||
37 | + } | ||
38 | + | ||
39 | + </style> | ||
40 | + | ||
41 | + <template> | ||
42 | + | ||
43 | + <paper-toolbar class="medium-tall" style="background: #2196F3;"> | ||
44 | + <paper-icon-button id="button" icon="clear" on-click="_onClearButtonClick"></paper-icon-button> | ||
45 | + </paper-toolbar> | ||
46 | + | ||
47 | + <div id="main" class="main"> | ||
48 | + </div> | ||
49 | + | ||
50 | + </template> | ||
51 | + | ||
52 | +</dom-module> | ||
53 | + | ||
54 | +<script> | ||
55 | + | ||
56 | + Polymer({ | ||
57 | + | ||
58 | + is: 'full-view-controllet', | ||
59 | + | ||
60 | + behaviors: [ | ||
61 | + Polymer.NeonAnimatableBehavior | ||
62 | + ], | ||
63 | + | ||
64 | + properties: { | ||
65 | + | ||
66 | + sharedElements: { | ||
67 | + type: Object, | ||
68 | + value: function() { | ||
69 | + return { | ||
70 | + 'hero': this.$.main | ||
71 | + }; | ||
72 | + } | ||
73 | + }, | ||
74 | + | ||
75 | + animationConfig: { | ||
76 | + type: Object, | ||
77 | + value: function() { | ||
78 | + return { | ||
79 | + 'entry': [{ | ||
80 | + name: 'fade-in-animation', | ||
81 | + node: this.$.button | ||
82 | + }, { | ||
83 | + name: 'hero-animation', | ||
84 | + id: 'hero', | ||
85 | + toPage: this | ||
86 | + }], | ||
87 | + | ||
88 | + 'exit': [{ | ||
89 | + name: 'fade-out-animation', | ||
90 | + node: this.$.button | ||
91 | + }, { | ||
92 | + name: 'scale-down-animation', | ||
93 | + node: this.$.main, | ||
94 | + transformOrigin: '50% 50%', | ||
95 | + axis: 'y' | ||
96 | + }] | ||
97 | + | ||
98 | + } | ||
99 | + } | ||
100 | + } | ||
101 | + }, | ||
102 | + | ||
103 | + _onClearButtonClick: function() { | ||
104 | + this.fire('close'); | ||
105 | + } | ||
106 | + | ||
107 | + }); | ||
108 | + | ||
109 | +</script> |
controllets/list-controllet/list-controllet.html
0 → 100644
1 | +<link rel="import" href="../../bower_components/polymer/polymer.html"> | ||
2 | +<link rel="import" href="../../bower_components/paper-styles/paper-styles.html"> | ||
3 | +<link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html"> | ||
4 | +<link rel="import" href="../../bower_components/neon-animation/neon-animated-pages.html"> | ||
5 | +<link rel="import" href="../../bower_components/neon-animation/neon-animations.html"> | ||
6 | +<link rel="import" href="../list-view-controllet/list-view-controllet.html"> | ||
7 | +<link rel="import" href="../full-view-controllet/full-view-controllet.html"> | ||
8 | + | ||
9 | +<dom-module id="list-controllet"> | ||
10 | + | ||
11 | + <style> | ||
12 | + | ||
13 | + :host { | ||
14 | + display: block; | ||
15 | + } | ||
16 | + | ||
17 | + neon-animated-pages { | ||
18 | + height: 100%; | ||
19 | + } | ||
20 | + | ||
21 | + </style> | ||
22 | + | ||
23 | + <template> | ||
24 | + | ||
25 | + <neon-animated-pages id="pages" selected="0"> | ||
26 | + | ||
27 | + <list-view-controllet data="[[data]]" on-item-click="_onItemClick"></list-view-controllet> | ||
28 | + | ||
29 | + <full-view-controllet id="view" on-close="_onClose" datalet="{{selected}}"></full-view-controllet> | ||
30 | + | ||
31 | + </neon-animated-pages> | ||
32 | + | ||
33 | + </template> | ||
34 | + | ||
35 | +</dom-module> | ||
36 | + | ||
37 | + | ||
38 | + | ||
39 | +<script> | ||
40 | + | ||
41 | + Polymer({ | ||
42 | + | ||
43 | + is: 'list-controllet', | ||
44 | + | ||
45 | + properties: { | ||
46 | + | ||
47 | + data: { | ||
48 | + type: Array, | ||
49 | + value: [] | ||
50 | + } | ||
51 | + }, | ||
52 | + | ||
53 | + _onItemClick: function(e) { | ||
54 | + this.$.pages.selected = 1; | ||
55 | + this.$.view.$.main.innerHTML = this.data[parseInt(e.detail.item.id)].html; | ||
56 | + }, | ||
57 | + | ||
58 | + _onClose: function() { | ||
59 | + this.$.pages.selected = 0; | ||
60 | + } | ||
61 | + | ||
62 | + }); | ||
63 | + | ||
64 | +</script> |
controllets/list-view-controllet/list-view-controllet.html
0 → 100644
1 | +<link rel="import" href="../../bower_components/polymer/polymer.html"> | ||
2 | +<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"> | ||
3 | +<link rel="import" href="../../bower_components/iron-icon/iron-icon.html"> | ||
4 | +<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html"> | ||
5 | +<link rel="import" href="../../bower_components/paper-item/paper-item.html"> | ||
6 | +<link rel="import" href="../../bower_components/paper-item/paper-item-body.html"> | ||
7 | +<link rel="import" href="../../bower_components/paper-styles/paper-styles.html"> | ||
8 | +<link rel="import" href="../../bower_components/neon-animation/neon-animatable-behavior.html"> | ||
9 | + | ||
10 | +<dom-module id="list-view-controllet"> | ||
11 | + | ||
12 | + <style> | ||
13 | + | ||
14 | + :host { | ||
15 | + @apply(--layout-vertical); | ||
16 | + } | ||
17 | + | ||
18 | + .main { | ||
19 | + @apply(--layout-flex); | ||
20 | + @apply(--layout-scroll); | ||
21 | + } | ||
22 | + | ||
23 | + iron-icon { | ||
24 | + color: var(--google-grey-500); | ||
25 | + } | ||
26 | + | ||
27 | + </style> | ||
28 | + | ||
29 | + <template> | ||
30 | + | ||
31 | + <paper-toolbar class="small-tall" style="background: #2196F3;"> | ||
32 | + <paper-icon-button id="button" icon="arrow-back"></paper-icon-button> | ||
33 | + <span>Datalets list - examples</span> | ||
34 | + </paper-toolbar> | ||
35 | + | ||
36 | + <div class="main"> | ||
37 | + | ||
38 | + <template is="dom-repeat" items="[[data]]" index-as="i"> | ||
39 | + | ||
40 | + <paper-item id="{{i}}"> | ||
41 | + <paper-item-body two-line> | ||
42 | + <div>[[item.name]]</div> | ||
43 | + <div secondary>[[item.description]]</div> | ||
44 | + </paper-item-body> | ||
45 | + </paper-item> | ||
46 | + | ||
47 | + </template> | ||
48 | + | ||
49 | + </div> | ||
50 | + | ||
51 | + </template> | ||
52 | + | ||
53 | +</dom-module> | ||
54 | + | ||
55 | +<script> | ||
56 | + | ||
57 | + Polymer({ | ||
58 | + | ||
59 | + is: 'list-view-controllet', | ||
60 | + | ||
61 | + behaviors: [ | ||
62 | + Polymer.NeonAnimatableBehavior | ||
63 | + ], | ||
64 | + | ||
65 | + listeners: { | ||
66 | + 'click': '_onClick' | ||
67 | + }, | ||
68 | + | ||
69 | + properties: { | ||
70 | + | ||
71 | + data: { | ||
72 | + type: Array, | ||
73 | + value: [] | ||
74 | + }, | ||
75 | + | ||
76 | + animationConfig: { | ||
77 | + type: Object, | ||
78 | + value: function() { | ||
79 | + return { | ||
80 | + 'entry': [{ | ||
81 | + name: 'fade-in-animation', | ||
82 | + node: this.$.button | ||
83 | + }], | ||
84 | + | ||
85 | + 'exit': [{ | ||
86 | + name: 'fade-out-animation', | ||
87 | + node: this.$.button | ||
88 | + }, { | ||
89 | + name: 'hero-animation', | ||
90 | + id: 'hero', | ||
91 | + fromPage: this | ||
92 | + }] | ||
93 | + }; | ||
94 | + } | ||
95 | + } | ||
96 | + | ||
97 | + }, | ||
98 | + | ||
99 | + _onClick: function(event) { | ||
100 | + var target = event.target; | ||
101 | + while (target !== this && !target._templateInstance) { | ||
102 | + target = target.parentNode; | ||
103 | + } | ||
104 | + | ||
105 | + // configure the page animation | ||
106 | + this.sharedElements = { | ||
107 | + 'hero': target, | ||
108 | + }; | ||
109 | + | ||
110 | + this.fire('item-click', { | ||
111 | + item: target, | ||
112 | + }); | ||
113 | + } | ||
114 | + | ||
115 | + }); | ||
116 | + | ||
117 | +</script> |