← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/neon-animation/demo/reprojection/animated-grid.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/neon-animation/demo/reprojection/animated-grid.html
 
1
<!--
 
2
@license
 
3
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
4
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
5
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
6
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
7
Code distributed by Google as part of the polymer project is also
 
8
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 
9
-->
 
10
<link rel="import" href="../../../polymer/polymer.html">
 
11
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 
12
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
 
13
<link rel="import" href="../../../paper-styles/typography.html">
 
14
<link rel="import" href="../../../paper-styles/color.html">
 
15
<link rel="import" href="../shared-styles.html">
 
16
 
 
17
<dom-module id="animated-grid">
 
18
  <template>
 
19
    <style include="shared-styles"></style>
 
20
    <style>
 
21
 
 
22
      :host {
 
23
        display: block;
 
24
        background: #000;
 
25
      }
 
26
 
 
27
      .tile {
 
28
        display: inline-block;
 
29
        float: left;
 
30
        vertical-align: top;
 
31
        width: calc(100% / 6);
 
32
        height: calc(100% / 3);
 
33
 
 
34
        @apply(--paper-font-title);
 
35
        @apply(--layout-vertical);
 
36
        @apply(--layout-center-center);
 
37
      }
 
38
 
 
39
      .tile:nth-of-type(1) {
 
40
        width: calc(100% / 3);
 
41
        height: calc(100% / 3 * 2);
 
42
      }
 
43
 
 
44
      .tile:nth-of-type(4) {
 
45
        width: calc(100% / 3);
 
46
      }
 
47
 
 
48
      .tile:nth-of-type(5) {
 
49
        width: calc(100% / 3);
 
50
        height: calc(100% / 3 * 2);
 
51
      }
 
52
 
 
53
      .tile:nth-of-type(8) {
 
54
        width: calc(100% / 3);
 
55
        height: calc(100% / 3);
 
56
      }
 
57
 
 
58
      .tile:nth-of-type(9) {
 
59
        position: absolute;
 
60
        top: calc(100% / 3 * 2);
 
61
        left: 0;
 
62
        width: calc(100% / 6);
 
63
        height: calc(100% / 3);
 
64
      }
 
65
 
 
66
      .tile:nth-of-type(10) {
 
67
        position: absolute;
 
68
        top: calc(100% / 3 * 2);
 
69
        left: calc(100% / 6);;
 
70
        width: calc(100% / 6);
 
71
        height: calc(100% / 3);
 
72
      }
 
73
 
 
74
    </style>
 
75
 
 
76
    <template is="dom-repeat" items="[[config]]">
 
77
      <div class$="[[_computeTileClass(item.color)]]">
 
78
        <span>[[item.value]]</span>
 
79
      </div>
 
80
    </template>
 
81
 
 
82
  </template>
 
83
 
 
84
</dom-module>
 
85
 
 
86
<script>
 
87
 
 
88
  Polymer({
 
89
 
 
90
    is: 'animated-grid',
 
91
 
 
92
    behaviors: [
 
93
      Polymer.NeonSharedElementAnimatableBehavior
 
94
    ],
 
95
 
 
96
    properties: {
 
97
 
 
98
      config: {
 
99
        type: Array,
 
100
        value: function() {
 
101
          return [
 
102
            {value: 1, color: 'blue'},
 
103
            {value: 2, color: 'red'},
 
104
            {value: 3, color: 'blue'},
 
105
            {value: 4, color: 'green'},
 
106
            {value: 5, color: 'yellow'},
 
107
            {value: 6, color: 'blue'},
 
108
            {value: 7, color: 'red'},
 
109
            {value: 8, color: 'green'},
 
110
            {value: 9, color: 'yellow'},
 
111
            {value: 10, color: 'red'}
 
112
          ]
 
113
        }
 
114
      },
 
115
 
 
116
      animationConfig: {
 
117
        type: Object,
 
118
        value: function() {
 
119
          return {
 
120
            'exit': [{
 
121
              name: 'ripple-animation',
 
122
              id: 'ripple',
 
123
              fromPage: this
 
124
            }, {
 
125
              name: 'hero-animation',
 
126
              id: 'hero',
 
127
              fromPage: this
 
128
            }]
 
129
          }
 
130
        }
 
131
      }
 
132
 
 
133
    },
 
134
 
 
135
    listeners: {
 
136
      click: '_onClick'
 
137
    },
 
138
 
 
139
    _computeTileClass: function(color) {
 
140
      return 'tile ' + color + '-300';
 
141
    },
 
142
 
 
143
    _onClick: function(event) {
 
144
      var target = event.target;
 
145
      while (target !== this && !target._templateInstance) {
 
146
        target = target.parentNode;
 
147
      }
 
148
 
 
149
      // configure the page animation
 
150
      this.sharedElements = {
 
151
        'hero': target,
 
152
        'ripple': target
 
153
      };
 
154
      this.animationConfig['exit'][0].gesture = {
 
155
        x: event.x,
 
156
        y: event.y
 
157
      };
 
158
 
 
159
      this.fire('tile-click', {
 
160
        tile: target,
 
161
        data: target._templateInstance.item
 
162
      });
 
163
    }
 
164
 
 
165
  });
 
166
 
 
167
</script>