Home | History | Annotate | Download | only in paper-dialog-behavior 
      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 
     14 <script>
     15 
     16 /**
     17 Use `Polymer.PaperDialogBehavior` and `paper-dialog-shared-styles.html` to implement a Material Design
     18 dialog.
     19 
     20 For 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.
     32 Use 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 
     35 Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the
     36 dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReason` will update
     37 to include `confirmed: true`.
     38 
     39 ### Accessibility
     40 
     41 This element has `role="dialog"` by default. Depending on the context, it may be more appropriate
     42 to override this attribute with `role="alertdialog"`.
     43 
     44 If `modal` is set, the element will prevent the focus from exiting the element.
     45 It 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