• 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
52  Polymer.PaperDialogBehaviorImpl = {
53
54    hostAttributes: {
55      'role': 'dialog',
56      'tabindex': '-1'
57    },
58
59    properties: {
60
61      /**
62       * If `modal` is true, this implies `no-cancel-on-outside-click`, `no-cancel-on-esc-key` and `with-backdrop`.
63       */
64      modal: {
65        type: Boolean,
66        value: false
67      }
68
69    },
70
71    observers: [
72      '_modalChanged(modal, _readied)'
73    ],
74
75    listeners: {
76      'tap': '_onDialogClick'
77    },
78
79    ready: function () {
80      // Only now these properties can be read.
81      this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick;
82      this.__prevNoCancelOnEscKey = this.noCancelOnEscKey;
83      this.__prevWithBackdrop = this.withBackdrop;
84    },
85
86    _modalChanged: function(modal, readied) {
87      // modal implies noCancelOnOutsideClick, noCancelOnEscKey and withBackdrop.
88      // We need to wait for the element to be ready before we can read the
89      // properties values.
90      if (!readied) {
91        return;
92      }
93
94      if (modal) {
95        this.__prevNoCancelOnOutsideClick = this.noCancelOnOutsideClick;
96        this.__prevNoCancelOnEscKey = this.noCancelOnEscKey;
97        this.__prevWithBackdrop = this.withBackdrop;
98        this.noCancelOnOutsideClick = true;
99        this.noCancelOnEscKey = true;
100        this.withBackdrop = true;
101      } else {
102        // If the value was changed to false, let it false.
103        this.noCancelOnOutsideClick = this.noCancelOnOutsideClick &&
104          this.__prevNoCancelOnOutsideClick;
105        this.noCancelOnEscKey = this.noCancelOnEscKey &&
106          this.__prevNoCancelOnEscKey;
107        this.withBackdrop = this.withBackdrop && this.__prevWithBackdrop;
108      }
109    },
110
111    _updateClosingReasonConfirmed: function(confirmed) {
112      this.closingReason = this.closingReason || {};
113      this.closingReason.confirmed = confirmed;
114    },
115
116    /**
117     * Will dismiss the dialog if user clicked on an element with dialog-dismiss
118     * or dialog-confirm attribute.
119     */
120    _onDialogClick: function(event) {
121      // Search for the element with dialog-confirm or dialog-dismiss,
122      // from the root target until this (excluded).
123      var path = Polymer.dom(event).path;
124      for (var i = 0; i < path.indexOf(this); i++) {
125        var target = path[i];
126        if (target.hasAttribute && (target.hasAttribute('dialog-dismiss') || target.hasAttribute('dialog-confirm'))) {
127          this._updateClosingReasonConfirmed(target.hasAttribute('dialog-confirm'));
128          this.close();
129          event.stopPropagation();
130          break;
131        }
132      }
133    }
134
135  };
136
137  /** @polymerBehavior */
138  Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialogBehaviorImpl];
139
140</script>
141