← 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/dropdown/animated-dropdown.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/dropdown/animated-dropdown.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="../../../paper-styles/shadow.html">
 
12
<link rel="import" href="../../neon-animation-runner-behavior.html">
 
13
 
 
14
<dom-module id="animated-dropdown">
 
15
  <template>
 
16
    <style>
 
17
      :host {
 
18
        display: none;
 
19
        padding: 16px;
 
20
        background: white;
 
21
        color: black;
 
22
 
 
23
        @apply(--shadow-elevation-2dp);
 
24
      }
 
25
    </style>
 
26
    <content></content>
 
27
  </template>
 
28
</dom-module>
 
29
 
 
30
<script>
 
31
 
 
32
  Polymer({
 
33
 
 
34
    is: 'animated-dropdown',
 
35
 
 
36
    behaviors: [
 
37
      Polymer.NeonAnimationRunnerBehavior
 
38
    ],
 
39
 
 
40
    properties: {
 
41
 
 
42
      animationConfig: {
 
43
        type: Object,
 
44
        value: function() {
 
45
          return {
 
46
            'entry': [{
 
47
              name: 'scale-up-animation',
 
48
              node: this,
 
49
              transformOrigin: '0 0'
 
50
            }],
 
51
            'exit': [{
 
52
              name: 'fade-out-animation',
 
53
              node: this
 
54
            }]
 
55
          }
 
56
        }
 
57
      },
 
58
 
 
59
      _showing: {
 
60
        type: Boolean,
 
61
        value: false
 
62
      }
 
63
 
 
64
    },
 
65
 
 
66
    listeners: {
 
67
      'neon-animation-finish': '_onAnimationFinish'
 
68
    },
 
69
 
 
70
    _onAnimationFinish: function() {
 
71
      if (this._showing) {
 
72
      } else {
 
73
        this.style.display = '';
 
74
      }
 
75
    },
 
76
 
 
77
    show: function() {
 
78
      this.style.display = 'inline-block';
 
79
      this._showing = true;
 
80
      this.playAnimation('entry');
 
81
    },
 
82
 
 
83
    hide: function() {
 
84
      this._showing = false;
 
85
      this.playAnimation('exit');
 
86
    }
 
87
 
 
88
  });
 
89
 
 
90
</script>