← 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-behavior/paper-dialog-behavior.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-behavior/paper-dialog-behavior.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="../iron-overlay-behavior/iron-overlay-behavior.html">
 
13
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 
14
<link rel="import" href="../paper-styles/default-theme.html">
 
15
<link rel="import" href="../paper-styles/typography.html">
 
16
<link rel="import" href="../paper-styles/shadow.html">
 
17
 
 
18
<script>
 
19
 
 
20
/**
 
21
Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to implement a Material Design
 
22
dialog.
 
23
 
 
24
For example, if `<paper-dialog-impl>` implements this behavior:
 
25
 
 
26
    <paper-dialog-impl>
 
27
        <h2>Header</h2>
 
28
        <div>Dialog body</div>
 
29
        <div class="buttons">
 
30
            <paper-button dialog-dismiss>Cancel</paper-button>
 
31
            <paper-button dialog-confirm>Accept</paper-button>
 
32
        </div>
 
33
    </paper-dialog-impl>
 
34
 
 
35
`paper-dialog-shared-styles.html` provide styles for a header, content area, and an action area for buttons.
 
36
Use the `<h2>` tag for the header and the `buttons` class for the action area. You can use the
 
37
`paper-dialog-scrollable` element (in its own repository) if you need a scrolling content area.
 
38
 
 
39
Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the
 
40
dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReason` will update
 
41
to include `confirmed: true`.
 
42
 
 
43
### Styling
 
44
 
 
45
The following custom properties and mixins are available for styling.
 
46
 
 
47
Custom property | Description | Default
 
48
----------------|-------------|----------
 
49
`--paper-dialog-background-color` | Dialog background color                     | `--primary-background-color`
 
50
`--paper-dialog-color`            | Dialog foreground color                     | `--primary-text-color`
 
51
`--paper-dialog`                  | Mixin applied to the dialog                 | `{}`
 
52
`--paper-dialog-title`            | Mixin applied to the title (`<h2>`) element | `{}`
 
53
`--paper-dialog-button-color`     | Button area foreground color                | `--default-primary-color`
 
54
 
 
55
### Accessibility
 
56
 
 
57
This element has `role="dialog"` by default. Depending on the context, it may be more appropriate
 
58
to override this attribute with `role="alertdialog"`.
 
59
 
 
60
If `modal` is set, the element will set `aria-modal` and prevent the focus from exiting the element.
 
61
It will also ensure that focus remains in the dialog.
 
62
 
 
63
@hero hero.svg
 
64
@demo demo/index.html
 
65
@polymerBehavior Polymer.PaperDialogBehavior
 
66
*/
 
67
 
 
68
  Polymer.PaperDialogBehaviorImpl = {
 
69
 
 
70
    hostAttributes: {
 
71
      'role': 'dialog',
 
72
      'tabindex': '-1'
 
73
    },
 
74
 
 
75
    properties: {
 
76
 
 
77
      /**
 
78
       * If `modal` is true, this implies `no-cancel-on-outside-click`, `no-cancel-on-esc-key` and `with-backdrop`.
 
79
       */
 
80
      modal: {
 
81
        type: Boolean,
 
82
        value: false
 
83
      }
 
84
 
 
85
    },
 
86
 
 
87
    observers: [
 
88
      '_modalChanged(modal, _readied)'
 
89
    ],
 
90
 
 
91
    listeners: {
 
92
      'tap': '_onDialogClick'
 
93
    },
 
94
 
 
95
    ready: function () {
 
96
      // Only now these properties can be read.
 
97
      this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick;
 
98
      this.__prevNoCancelOnEscKey = this.noCancelOnEscKey;
 
99
      this.__prevWithBackdrop = this.withBackdrop;
 
100
    },
 
101
 
 
102
    _modalChanged: function(modal, readied) {
 
103
      if (modal) {
 
104
        this.setAttribute('aria-modal', 'true');
 
105
      } else {
 
106
        this.setAttribute('aria-modal', 'false');
 
107
      }
 
108
 
 
109
      // modal implies noCancelOnOutsideClick, noCancelOnEscKey and withBackdrop.
 
110
      // We need to wait for the element to be ready before we can read the
 
111
      // properties values.
 
112
      if (!readied) {
 
113
        return;
 
114
      }
 
115
 
 
116
      if (modal) {
 
117
        this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick;
 
118
        this.__prevNoCancelOnEscKey = this.noCancelOnEscKey;
 
119
        this.__prevWithBackdrop = this.withBackdrop;
 
120
        this.noCancelOnOutsideClick = true;
 
121
        this.noCancelOnEscKey = true;
 
122
        this.withBackdrop = true;
 
123
      } else {
 
124
        // If the value was changed to false, let it false.
 
125
        this.noCancelOnOutsideClick = this.noCancelOnOutsideClick &&
 
126
          this.__prevNoCancelOnOutsideClick;
 
127
        this.noCancelOnEscKey = this.noCancelOnEscKey &&
 
128
          this.__prevNoCancelOnEscKey;
 
129
        this.withBackdrop = this.withBackdrop && this.__prevWithBackdrop;
 
130
      }
 
131
    },
 
132
 
 
133
    _updateClosingReasonConfirmed: function(confirmed) {
 
134
      this.closingReason = this.closingReason || {};
 
135
      this.closingReason.confirmed = confirmed;
 
136
    },
 
137
 
 
138
    /**
 
139
     * Will dismiss the dialog if user clicked on an element with dialog-dismiss
 
140
     * or dialog-confirm attribute.
 
141
     */
 
142
    _onDialogClick: function(event) {
 
143
      // Search for the element with dialog-confirm or dialog-dismiss,
 
144
      // from the root target until this (excluded).
 
145
      var path = Polymer.dom(event).path;
 
146
      for (var i = 0; i < path.indexOf(this); i++) {
 
147
        var target = path[i];
 
148
        if (target.hasAttribute && (target.hasAttribute('dialog-dismiss') || target.hasAttribute('dialog-confirm'))) {
 
149
          this._updateClosingReasonConfirmed(target.hasAttribute('dialog-confirm'));
 
150
          this.close();
 
151
          event.stopPropagation();
 
152
          break;
 
153
        }
 
154
      }
 
155
    }
 
156
 
 
157
  };
 
158
 
 
159
  /** @polymerBehavior */
 
160
  Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialogBehaviorImpl];
 
161
 
 
162
</script>