From 925d7edd5464ea6025aec05ae148dd06d21133b0 Mon Sep 17 00:00:00 2001
From: isisadmin <isislab.unisa@gmail.com>
Date: Sun, 8 Nov 2015 09:30:43 +0100
Subject: [PATCH] animated-grid-controllet fullsize-page-with-card-controllet

---
 controllets/animated-grid-controllet/animated-grid-controllet.html                     | 162 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 288 insertions(+), 0 deletions(-)
 create mode 100644 controllets/animated-grid-controllet/animated-grid-controllet.html
 create mode 100644 controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html

diff --git a/controllets/animated-grid-controllet/animated-grid-controllet.html b/controllets/animated-grid-controllet/animated-grid-controllet.html
new file mode 100644
index 0000000..35d002d
--- /dev/null
+++ b/controllets/animated-grid-controllet/animated-grid-controllet.html
@@ -0,0 +1,162 @@
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
+<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
+
+<dom-module id="animated-grid-controllet">
+
+    <style>
+
+        :host {
+            display: block;
+            /*background: #000;*/
+        }
+
+        /* clearfix */
+        .grid:after
+        {
+            content: '';
+            display: block;
+            clear: both;
+        }
+
+        /* ---- grid-item ---- */
+
+
+        .grid-item
+        {
+            float: left;
+            box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            border: 4px solid white;
+        }
+
+        .grid-sizer {width: 200px;}
+        .grid-item-w20  {width:  200px;}
+        .grid-item-w40  {width:  400px;}
+        .grid-item-w60  {width:  600px;}
+        .grid-item-w80  {width:  80%;}
+        .grid-item-w100 {width:  100%;}
+
+        .grid-item-h200 {height: 200px;}
+        .grid-item-h400 {height: 400px;}
+        .grid-item-h600 {height: 600px;}
+        .grid-item-h800 {height: 800px;}
+
+        .grid-item-c0 {background-color: #0D47A1;}
+        .grid-item-c1 {background-color: #1976D2;}
+        .grid-item-c2 {background-color: #2196F3;}
+        .grid-item-c3 {background-color: #64B5F6;}
+        .grid-item-c4 {background-color: #BBDEFB;}
+
+    </style>
+
+    <template>
+
+        <div class="grid">
+            <template is="dom-repeat" items="{{data}}">
+                <div class$="{{item.b}} {{item.w}} {{item.h}} {{item.c}}">{{index}}</div>
+            </template>
+        </div>
+
+        <div class="grid-sizer"></div>
+
+    </template>
+
+</dom-module>
+
+<script>
+
+    Polymer({
+
+        is: 'animated-grid-controllet',
+
+        behaviors: [
+            Polymer.NeonSharedElementAnimatableBehavior
+        ],
+
+        properties: {
+            animationConfig: {
+                type: Object,
+                value: function() {
+                    return {
+                        'exit': [{
+                            name: 'ripple-animation',
+                            id: 'ripple',
+                            fromPage: this
+                        }, {
+                            name: 'hero-animation',
+                            id: 'hero',
+                            fromPage: this
+                        }]
+                    }
+                }
+            }
+        },
+
+        ready : function()
+        {
+            var randW = 0;
+            var randH = 0;
+            var randC = 0;
+            this.data = [];
+
+            for(var i=0; i<100; i++)
+            {
+                randW = Math.floor(Math.random() * 2);
+                randH = Math.floor(Math.random() * 2);//randW;//0;//1;
+                randC = Math.floor(Math.random() * 5);
+                //html += '<div class="grid-item grid-item-w'+((randW*20)+20)+' grid-item-h'+((randH*200)+200)+' grid-item-c'+randC+'">Topic - '+i+'</div>';
+
+                this.push('data',    {b: 'grid-item',
+                                      w: 'grid-item-w'+((randW*20)+20),
+                                      h: 'grid-item-h'+((randH*200)+200),
+                                      c: 'grid-item-c'+randC});
+
+            }
+        },
+
+        attached : function()
+        {
+            $('.grid').masonry({
+                itemSelector: '.grid-item',
+                columnWidth: 200
+            });
+        },
+
+        listeners: {
+            click: '_onClick'
+        },
+
+        _onClick: function(event) {
+
+            var target = event.target;
+
+            // configure the page animation
+            this.sharedElements = {
+                'hero': target,
+                'ripple': target
+            };
+            this.animationConfig['exit'][0].gesture = {
+                x: event.x || event.pageX,
+                y: event.y || event.pageY
+            };
+
+            this.fire('tile-click', {
+                tile: target,
+                data: {color: target._templateInstance.item.c}
+            });
+
+        }
+
+    });
+
+</script>
diff --git a/controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html b/controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
new file mode 100644
index 0000000..ec48fb1
--- /dev/null
+++ b/controllets/fullsize-page-with-card-controllet/fullsize-page-with-card-controllet.html
@@ -0,0 +1,126 @@
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
+
+<dom-module id="fullsize-page-with-card">
+
+    <style>
+
+        :host {
+            display: block;
+        }
+
+        .fixed {
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100vh;
+            width: 100vw;
+        }
+
+        .card {
+            position: relative;
+            margin: 20px 20px 20px 20px;
+            height: 700px;
+        }
+
+        .grid-item-c0 {background-color: #0D47A1;}
+        .grid-item-c1 {background-color: #1976D2;}
+        .grid-item-c2 {background-color: #2196F3;}
+        .grid-item-c3 {background-color: #64B5F6;}
+        .grid-item-c4 {background-color: #BBDEFB;}
+
+        .grid-item-c0-l {background-color: #1565C0;}
+        .grid-item-c1-l {background-color: #1E88E5;}
+        .grid-item-c2-l {background-color: #42A5F5;}
+        .grid-item-c3-l {background-color: #90CAF9;}
+        .grid-item-c4-l {background-color: #E3F2FD;}
+
+    </style>
+
+    <template>
+
+        <div id="fixed" class$="[[_computeFixedBackgroundClass(color)]]"></div>
+        <div id="card" class$="[[_computeCardClass(color)]]"></div>
+
+    </template>
+
+</dom-module>
+
+<script>
+
+    Polymer({
+
+        is: 'fullsize-page-with-card',
+
+        behaviors: [
+            Polymer.NeonSharedElementAnimatableBehavior
+        ],
+
+        properties: {
+
+            color: {
+                type: String
+            },
+
+            sharedElements: {
+                type: Object,
+                value: function() {
+                    return {
+                        'hero': this.$.card,
+                        'ripple': this.$.fixed
+                    }
+                }
+            },
+
+            animationConfig: {
+                type: Object,
+                value: function() {
+                    return {
+                        'entry': [{
+                            name: 'ripple-animation',
+                            id: 'ripple',
+                            toPage: this,
+                        }, {
+                            name: 'hero-animation',
+                            id: 'hero',
+                            toPage: this,
+                            timing: {
+                                delay: 150
+                            }
+                        }],
+                        'exit': [{
+                            name: 'fade-out-animation',
+                            node: this.$.fixed
+                        }, {
+                            name: 'transform-animation',
+                            transformFrom: 'none',
+                            transformTo: 'translate(0px,-200vh) scale(0.9,1)',
+                            node: this.$.card
+                        }]
+                    }
+                }
+            }
+
+        },
+
+        _computeCardClass: function(color) {
+            var cls = 'card';
+            return cls + ' ' + color;
+        },
+
+        _computeFixedBackgroundClass: function(color) {
+            var cls = 'fixed';
+            return cls + ' ' + color + '-l';
+        }
+
+    });
+
+</script>
--
libgit2 0.21.4