• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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
14<script>
15
16/**
17Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to implement a Material Design
18dialog.
19
20For example, if `<paper-dialog-impl>` implements this behavior:
21
22    <paper-dialog-impl>
23        <h2>Header</h2>
24        <div>Dialog body</div>
25        <div class="buttons">
26            <paper-button dialog-dismiss>Cancel</paper-button>
27            <paper-button dialog-confirm>Accept</paper-button>
28        </div>
29    </paper-dialog-impl>
30
31`paper-dialog-shared-styles.html` provide styles for a header, content area, and an action area for buttons.
32Use the `<h2>` tag for the header and the `buttons` class for the action area. You can use the
33`paper-dialog-scrollable` element (in its own repository) if you need a scrolling content area.
34
35Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the
36dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReason` will update
37to include `confirmed: true`.
38
39### Accessibility
40
41This element has `role="dialog"` by default. Depending on the context, it may be more appropriate
42to override this attribute with `role="alertdialog"`.
43
44If `modal` is set, the element will prevent the focus from exiting the element.
45It will also ensure that focus remains in the dialog.
46
47@hero hero.svg
48@demo demo/index.html
49@polymerBehavior Polymer.PaperDialogBehavior
50*/
51  Polymer.PaperDialogBehaviorImpl = {
52
53    hostAttributes: {
54      'role': 'dialog',
55      'tabindex': '-1'
56    },
57
58    properties: {
59
60      /**
61       * If `modal` is true, this implies `no-cancel-on-outside-click`, `no-cancel-on-esc-key` and `with-backdrop`.
62       */
63      modal: {
64        type: Boolean,
65        value: false
66      }
67
68    },
69
70    observers: [
71      '_modalChanged(modal, _readied)'
72    ],
73
74    listeners: {
75      'tap': '_onDialogClick'
76    },
77
78    ready: function () {
79      // Only now these properties can be read.
80      this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick;
81      this.__prevNoCancelOnEscKey = this.noCancelOnEscKey;
82      this.__prevWithBackdrop = this.withBackdrop;
83    },
84
85    _modalChanged: function(modal, readied) {
86      // modal implies noCancelOnOutsideClick, noCancelOnEscKey and withBackdrop.
87      // We need to wait for the element to be ready before we can read the
88      // properties values.
89      if (!readied) {
90        return;
91      }
92
93      if (modal) {
94        this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick;
95        this.__prevNoCancelOnEscKey = this.noCancelOnEscKey;
96        this.__prevWithBackdrop = this.withBackdrop;
97        this.noCancelOnOutsideClick = true;
98        this.noCancelOnEscKey = true;
99        this.withBackdrop = true;
100      } else {
101        // If the value was changed to false, let it false.
102        this.noCancelOnOutsideClick = this.noCancelOnOutsideClick &&
103          this.__prevNoCancelOnOutsideClick;
104        this.noCancelOnEscKey = this.noCancelOnEscKey &&
105          this.__prevNoCancelOnEscKey;
106        this.withBackdrop = this.withBackdrop && this.__prevWithBackdrop;
107      }
108    },
109
110    _updateClosingReasonConfirmed: function(confirmed) {
111      this.closingReason = this.closingReason || {};
112      this.closingReason.confirmed = confirmed;
113    },
114
115    /**
116     * Will dismiss the dialog if user clicked on an element with dialog-dismiss
117     * or dialog-confirm attribute.
118     */
119    _onDialogClick: function(event) {
120      // Search for the element with dialog-confirm or dialog-dismiss,
121      // from the root target until this (excluded).
122      var path = Polymer.dom(event).path;
123      for (var i = 0; i < path.indexOf(this); i++) {
124        var target = path[i];
125        if (target.hasAttribute && (target.hasAttribute('dialog-dismiss') || target.hasAttribute('dialog-confirm'))) {
126          this._updateClosingReasonConfirmed(target.hasAttribute('dialog-confirm'));
127          this.close();
128          event.stopPropagation();
129          break;
130        }
131      }
132    }
133
134  };
135
136  /** @polymerBehavior */
137  Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialogBehaviorImpl];
138
139</script>
140