WebCompDev / COMPONENTS

Commit 925d7edd5464ea6025aec05ae148dd06d21133b0

Authored by isisadmin
1 parent 9bb60e44

animated-grid-controllet fullsize-page-with-card-controllet

Inline Side-by-side
Showing 2 changed files with 288 additions and 0 deletions
controllets/animated-grid-controllet/animated-grid-controllet.html 0 → 100644
  View file @925d7ed
  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="../../bower_components/polymer/polymer.html">
  10 +<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
  11 +<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
  12 +
  13 +<dom-module id="animated-grid-controllet">
  14 +
  15 + <style>
  16 +
  17 + :host {
  18 + display: block;
  19 + /*background: #000;*/
  20 + }
  21 +
  22 + /* clearfix */
  23 + .grid:after
  24 + {
  25 + content: '';
  26 + display: block;
  27 + clear: both;
  28 + }
  29 +
  30 + /* ---- grid-item ---- */
  31 +
  32 +
  33 + .grid-item
  34 + {
  35 + float: left;
  36 + box-sizing: border-box;
  37 + -moz-box-sizing: border-box;
  38 + -webkit-box-sizing: border-box;
  39 + border: 4px solid white;
  40 + }
  41 +
  42 + .grid-sizer {width: 200px;}
  43 + .grid-item-w20 {width: 200px;}
  44 + .grid-item-w40 {width: 400px;}
  45 + .grid-item-w60 {width: 600px;}
  46 + .grid-item-w80 {width: 80%;}
  47 + .grid-item-w100 {width: 100%;}
  48 +
  49 + .grid-item-h200 {height: 200px;}
  50 + .grid-item-h400 {height: 400px;}
  51 + .grid-item-h600 {height: 600px;}
  52 + .grid-item-h800 {height: 800px;}
  53 +
  54 + .grid-item-c0 {background-color: #0D47A1;}
  55 + .grid-item-c1 {background-color: #1976D2;}
  56 + .grid-item-c2 {background-color: #2196F3;}
  57 + .grid-item-c3 {background-color: #64B5F6;}
  58 + .grid-item-c4 {background-color: #BBDEFB;}
  59 +
  60 + </style>
  61 +
  62 + <template>
  63 +
  64 + <div class="grid">
  65 + <template is="dom-repeat" items="{{data}}">
  66 + <div class$="{{item.b}} {{item.w}} {{item.h}} {{item.c}}">{{index}}</div>
  67 + </template>
  68 + </div>
  69 +
  70 + <div class="grid-sizer"></div>
  71 +
  72 + </template>
  73 +
  74 +</dom-module>
  75 +
  76 +<script>
  77 +
  78 + Polymer({
  79 +
  80 + is: 'animated-grid-controllet',
  81 +
  82 + behaviors: [
  83 + Polymer.NeonSharedElementAnimatableBehavior
  84 + ],
  85 +
  86 + properties: {
  87 + animationConfig: {
  88 + type: Object,
  89 + value: function() {
  90 + return {
  91 + 'exit': [{
  92 + name: 'ripple-animation',
  93 + id: 'ripple',
  94 + fromPage: this
  95 + }, {
  96 + name: 'hero-animation',
  97 + id: 'hero',
  98 + fromPage: this
  99 + }]
  100 + }
  101 + }
  102 + }
  103 + },
  104 +
  105 + ready : function()
  106 + {
  107 + var randW = 0;
  108 + var randH = 0;
  109 + var randC = 0;
  110 + this.data = [];
  111 +
  112 + for(var i=0; i<100; i++)
  113 + {
  114 + randW = Math.floor(Math.random() * 2);
  115 + randH = Math.floor(Math.random() * 2);//randW;//0;//1;
  116 + randC = Math.floor(Math.random() * 5);
  117 + //html += '<div class="grid-item grid-item-w'+((randW*20)+20)+' grid-item-h'+((randH*200)+200)+' grid-item-c'+randC+'">Topic - '+i+'</div>';
  118 +
  119 + this.push('data', {b: 'grid-item',
  120 + w: 'grid-item-w'+((randW*20)+20),
  121 + h: 'grid-item-h'+((randH*200)+200),
  122 + c: 'grid-item-c'+randC});
  123 +
  124 + }
  125 + },
  126 +
  127 + attached : function()
  128 + {
  129 + $('.grid').masonry({
  130 + itemSelector: '.grid-item',
  131 + columnWidth: 200
  132 + });
  133 + },
  134 +
  135 + listeners: {
  136 + click: '_onClick'
  137 + },
  138 +
  139 + _onClick: function(event) {
  140 +
  141 + var target = event.target;
  142 +
  143 + // configure the page animation
  144 + this.sharedElements = {
  145 + 'hero': target,
  146 + 'ripple': target
  147 + };
  148 + this.animationConfig['exit'][0].gesture = {
  149 + x: event.x || event.pageX,
  150 + y: event.y || event.pageY
  151 + };
  152 +
  153 + this.fire('tile-click', {
  154 + tile: target,
  155 + data: {color: target._templateInstance.item.c}
  156 + });
  157 +
  158 + }
  159 +
  160 + });
  161 +
  162 +</script>
... ...
controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html 0 → 100644
  View file @925d7ed
  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="../../bower_components/polymer/polymer.html">
  10 +<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
  11 +
  12 +<dom-module id="fullsize-page-with-card">
  13 +
  14 + <style>
  15 +
  16 + :host {
  17 + display: block;
  18 + }
  19 +
  20 + .fixed {
  21 + position: absolute;
  22 + top: 0;
  23 + left: 0;
  24 + height: 100vh;
  25 + width: 100vw;
  26 + }
  27 +
  28 + .card {
  29 + position: relative;
  30 + margin: 20px 20px 20px 20px;
  31 + height: 700px;
  32 + }
  33 +
  34 + .grid-item-c0 {background-color: #0D47A1;}
  35 + .grid-item-c1 {background-color: #1976D2;}
  36 + .grid-item-c2 {background-color: #2196F3;}
  37 + .grid-item-c3 {background-color: #64B5F6;}
  38 + .grid-item-c4 {background-color: #BBDEFB;}
  39 +
  40 + .grid-item-c0-l {background-color: #1565C0;}
  41 + .grid-item-c1-l {background-color: #1E88E5;}
  42 + .grid-item-c2-l {background-color: #42A5F5;}
  43 + .grid-item-c3-l {background-color: #90CAF9;}
  44 + .grid-item-c4-l {background-color: #E3F2FD;}
  45 +
  46 + </style>
  47 +
  48 + <template>
  49 +
  50 + <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
  51 + <div id="card" class$="[[_computeCardClass(color)]]"></div>
  52 +
  53 + </template>
  54 +
  55 +</dom-module>
  56 +
  57 +<script>
  58 +
  59 + Polymer({
  60 +
  61 + is: 'fullsize-page-with-card',
  62 +
  63 + behaviors: [
  64 + Polymer.NeonSharedElementAnimatableBehavior
  65 + ],
  66 +
  67 + properties: {
  68 +
  69 + color: {
  70 + type: String
  71 + },
  72 +
  73 + sharedElements: {
  74 + type: Object,
  75 + value: function() {
  76 + return {
  77 + 'hero': this.$.card,
  78 + 'ripple': this.$.fixed
  79 + }
  80 + }
  81 + },
  82 +
  83 + animationConfig: {
  84 + type: Object,
  85 + value: function() {
  86 + return {
  87 + 'entry': [{
  88 + name: 'ripple-animation',
  89 + id: 'ripple',
  90 + toPage: this,
  91 + }, {
  92 + name: 'hero-animation',
  93 + id: 'hero',
  94 + toPage: this,
  95 + timing: {
  96 + delay: 150
  97 + }
  98 + }],
  99 + 'exit': [{
  100 + name: 'fade-out-animation',
  101 + node: this.$.fixed
  102 + }, {
  103 + name: 'transform-animation',
  104 + transformFrom: 'none',
  105 + transformTo: 'translate(0px,-200vh) scale(0.9,1)',
  106 + node: this.$.card
  107 + }]
  108 + }
  109 + }
  110 + }
  111 +
  112 + },
  113 +
  114 + _computeCardClass: function(color) {
  115 + var cls = 'card';
  116 + return cls + ' ' + color;
  117 + },
  118 +
  119 + _computeFixedBackgroundClass: function(color) {
  120 + var cls = 'fixed';
  121 + return cls + ' ' + color + '-l';
  122 + }
  123 +
  124 + });
  125 +
  126 +</script>
... ...