WebCompDev / COMPONENTS

Commit 47c2b7f73ad106b72cf561266581089a25ac2299

Authored by Luigi Serra
1 parent c2589de4

added demo page

Inline Side-by-side
Showing 3 changed files with 290 additions and 0 deletions
controllets/full-view-controllet/full-view-controllet.html 0 → 100644
  View file @47c2b7f
  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
  View file @47c2b7f
  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
  View file @47c2b7f
  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>
... ...