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> |