← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-dialog/paper-dialog.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/paper-dialog/paper-dialog.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
 
 
11
<link rel="import" href="../polymer/polymer.html">
 
12
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
 
13
<link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
 
14
<link rel="import" href="../paper-dialog-behavior/paper-dialog-shared-styles.html">
 
15
<!--
 
16
Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs.html)
 
17
 
 
18
`<paper-dialog>` is a dialog with Material Design styling and optional animations when it is
 
19
opened or closed. It provides styles for a header, content area, and an action area for buttons.
 
20
You can use the `<paper-dialog-scrollable>` element (in its own repository) if you need a scrolling
 
21
content area. See `Polymer.PaperDialogBehavior` for specifics.
 
22
 
 
23
For example, the following code implements a dialog with a header, scrolling content area and
 
24
buttons.
 
25
 
 
26
    <paper-dialog>
 
27
      <h2>Header</h2>
 
28
      <paper-dialog-scrollable>
 
29
        Lorem ipsum...
 
30
      </paper-dialog-scrollable>
 
31
      <div class="buttons">
 
32
        <paper-button dialog-dismiss>Cancel</paper-button>
 
33
        <paper-button dialog-confirm>Accept</paper-button>
 
34
      </div>
 
35
    </paper-dialog>
 
36
 
 
37
### Styling
 
38
 
 
39
See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
 
40
this element.
 
41
 
 
42
### Animations
 
43
 
 
44
Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
 
45
is opened or closed. See the documentation in
 
46
[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
 
47
 
 
48
For example:
 
49
 
 
50
    <link rel="import" href="components/neon-animation/animations/scale-up-animation.html">
 
51
    <link rel="import" href="components/neon-animation/animations/fade-out-animation.html">
 
52
 
 
53
    <paper-dialog entry-animation="scale-up-animation"
 
54
                  exit-animation="fade-out-animation">
 
55
      <h2>Header</h2>
 
56
      <div>Dialog body</div>
 
57
    </paper-dialog>
 
58
 
 
59
### Accessibility
 
60
 
 
61
See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
 
62
element.
 
63
 
 
64
@group Paper Elements
 
65
@element paper-dialog
 
66
@hero hero.svg
 
67
@demo demo/index.html
 
68
-->
 
69
 
 
70
<dom-module id="paper-dialog">
 
71
  <template>
 
72
    <style include="paper-dialog-shared-styles"></style>
 
73
    <content></content>
 
74
  </template>
 
75
</dom-module>
 
76
 
 
77
<script>
 
78
 
 
79
(function() {
 
80
 
 
81
  Polymer({
 
82
 
 
83
    is: 'paper-dialog',
 
84
 
 
85
    behaviors: [
 
86
      Polymer.PaperDialogBehavior,
 
87
      Polymer.NeonAnimationRunnerBehavior
 
88
    ],
 
89
 
 
90
    listeners: {
 
91
      'neon-animation-finish': '_onNeonAnimationFinish'
 
92
    },
 
93
 
 
94
    _renderOpened: function() {
 
95
      this.cancelAnimation();
 
96
      if (this.withBackdrop) {
 
97
        this.backdropElement.open();
 
98
      }
 
99
      this.playAnimation('entry');
 
100
    },
 
101
 
 
102
    _renderClosed: function() {
 
103
      this.cancelAnimation();
 
104
      if (this.withBackdrop) {
 
105
        this.backdropElement.close();
 
106
      }
 
107
      this.playAnimation('exit');
 
108
    },
 
109
 
 
110
    _onNeonAnimationFinish: function() {
 
111
      if (this.opened) {
 
112
        this._finishRenderOpened();
 
113
      } else {
 
114
        this._finishRenderClosed();
 
115
      }
 
116
    }
 
117
 
 
118
  });
 
119
 
 
120
})();
 
121
 
 
122
</script>